@charset "UTF-8";/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *




 */
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION:
 *
 * http://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Use aa_ prefix for all classes
 * - Indentations are 2px
 * - Columns are 120px wide
 * - Don't use [] in html inside class="" for grouping
 * - In html class="" don't use 2 space between classes, but put the related ones next to each other
 * - Low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) NORMALIZE.CSS
 *
 *  2) HTML5 BOILERPLATE
 *
 *  3) GLOBAL
 *
 */




/*----------------*\
   #NORMALIZE.CSS
\*----------------*/

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */


html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

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

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
  color: #999;
  border-color: #999;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

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

td,
th {
  padding: 0;
}





/*---------------------*\
   #HTML5 BOILERPLATE
\*---------------------*/

/*! HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}





/*----------*\
   #GLOBAL
\*----------*/


a, address, area, article, aside, audio, base, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code,
col, colgroup, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form,
h1, h2, h3, h4, h5, h6, h6, head, header, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link,
map, main, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby,
s, samp, section, select, small, source, span, strong, sub, summary, sup, svg, textarea, time, title, tr, track, u, ul, var, video, wbr{
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* setting default font size to 10px */
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* prevent highlight on tap */
  -webkit-text-size-adjust: 100%; /* text may be inflated of this exact proportion on mobile browsers */
}

.aa_base--11 {font-size: 68.75%; /* setting default font size to 11px */}
.aa_base--12 {font-size: 75%; /* setting default font size to 12px */}
.aa_base--13 {font-size: 81.25%; /* setting default font size to 13px */}

html, body {
  height: 100%;
  margin:  0;
  padding: 0;
}

body {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
  background-color: #f3f3f3;
  color: #222;
  /* Prevent user selection */
  -webkit-user-select: none;
          user-select: none;
}

input[type="search"] {
  -webkit-appearance: none;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button, select {
  padding: 0;
  border:  none;
  outline: none;
  background: transparent;
  text-transform: none;
}

button, input[type='text'], input[type='submit'], textarea{
  -webkit-appearance: none; /* prevent to change the look in webkit browsers to the default */
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
}

button[disabled], input[disabled] {
  cursor: default;
}

a {
  color: #77d;
  text-decoration: none;
}

a:active, a:focus, a:hover {
  outline: 0;
}

a:active {
  /*opacity: .65;*/
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6  {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  line-height: 1.25;
  margin-top:    .5em;
  margin-bottom: .5em;
}

h1, .h1 {font-size: 4.6rem}
h2, .h2 {font-size: 3.0rem}
h3, .h3 {font-size: 2.2rem}
h4, .h4 {font-size: 1.8rem}
h5, .h5 {font-size: 1.4rem}
h6, .h6 {font-size: 1.2rem}

@media only screen and (max-width: 768px) {
  h1, .h1 {font-size: 3.0rem}
  h2, .h2 {font-size: 2.2rem}
}

p {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border: 0;
}

ul, ol {
  margin: 0 0 2em 2em;
  padding: 0;
}

ul {
  list-style-type: circle;
}

li {
  margin: 0 0 .5em;
}

blockquote {
  font-style: italic;
  border-left: solid 5px rgba(130,130,130,.3);
  padding: .5em 0 .5em 1em;
  margin: 0 0 1em 1em;
}



input, p, ul, ol, blockquote, [contenteditable], .aa_text_selectable, .debug_dump {
  /* enable text selection */
  -webkit-user-select: text;
          user-select: text;
}

.aa_text_not_selectable {
  -webkit-user-select: none;
          user-select: none;
}



.dark, .dark > body {
  background-color: #222;
  color: #f3f3f3;
}

.not_a_real_class__remove_me {
	display:block;
}

.inside-app {
  -webkit-touch-callout: none;
}

.aa_system-font {
  display: none;
  font: -apple-system-body;
}


/*
 * Basic icon set for AppAdvice content.
 * Generated through fontastic.com
 * aai- prefix is important on all icon classes.
 *
 */





@font-face {
  font-family: "appadviceicons";
  src:url("https://watchaware.com/fonts-appadvice/appadviceicons.eot?v001");
  src:url("https://watchaware.com/fonts-appadvice/appadviceicons.eot?#iefix") format("embedded-opentype"),
      url("https://watchaware.com/fonts-appadvice/appadviceicons.woff?v001") format("woff"),
      url("https://watchaware.com/fonts-appadvice/appadviceicons.ttf?v001") format("truetype"),
      url("https://watchaware.com/fonts-appadvice/appadviceicons.svg#appadviceicons") format("svg");
  font-weight: normal;
  font-style:  normal;
}

[data-aai]:before {
  font-family: "appadviceicons";
  content: attr(data-aai);
  font-style:   normal;
  font-weight:  normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="aai-"]:before, [class*=" aai-"]:before {
  font-family: "appadviceicons";
  font-style:   normal;
  font-weight:  normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media speech {
  [data-aai]:before, [class^="aai-"]:before, [class*=" aai-"]:before {
    speak: none;
  }
}

.aai-appadvice:before {
  content: "\e000";
}
.aai-watchaware:before {
  content: "\e001";
}
.aai-app-play:before {
  content: "\e002";
}
.aai-tv-o:before {
  content: "\e005";
}
.aai-tv:before {
  content: "\e006";
}
.aai-bin-o:before {
  content: "\e007";
}
.aai-bin:before {
  content: "\e008";
}
.aai-heart-o:before {
  content: "\e009";
}
.aai-heart:before {
  content: "\e00a";
}
.aai-plus-circ-o:before {
  content: "\e00b";
}
.aai-plus-circ:before {
  content: "\e00c";
}
.aai-minus-circ-o:before {
  content: "\e00d";
}
.aai-minus-circ:before {
  content: "\e00e";
}
.aai-play-o:before {
  content: "\e00f";
}
.aai-play:before {
  content: "\e010";
}
.aai-pause-o:before {
  content: "\e011";
}
.aai-pause:before {
  content: "\e012";
}
.aai-stop-o:before {
  content: "\e013";
}
.aai-stop:before {
  content: "\e014";
}
.aai-record-o:before {
  content: "\e015";
}
.aai-record:before {
  content: "\e016";
}
.aai-backward-o:before {
  content: "\e017";
}
.aai-backward:before {
  content: "\e018";
}
.aai-forward-o:before {
  content: "\e019";
}
.aai-forward:before {
  content: "\e01a";
}
.aai-previous-o:before {
  content: "\e01b";
}
.aai-previous:before {
  content: "\e01c";
}
.aai-next-o:before {
  content: "\e01d";
}
.aai-next:before {
  content: "\e01e";
}
.aai-arrow-down-o:before {
  content: "\e01f";
}
.aai-arrow-down:before {
  content: "\e020";
}
.aai-arrow-up-o:before {
  content: "\e021";
}
.aai-arrow-up:before {
  content: "\e022";
}
.aai-arrow-left-o:before {
  content: "\e023";
}
.aai-arrow-left:before {
  content: "\e024";
}
.aai-arrow-right-o:before {
  content: "\e025";
}
.aai-arrow-right:before {
  content: "\e026";
}
.aai-search:before {
  content: "\e027";
}
.aai-share:before {
  content: "\e028";
}
.aai-android:before {
  content: "\e029";
}
.aai-apple:before {
  content: "\e02a";
}
.aai-facebook:before {
  content: "\e02b";
}
.aai-github:before {
  content: "\e02c";
}
.aai-globe:before {
  content: "\e02d";
}
.aai-google-plus:before {
  content: "\e02e";
}
.aai-pinterest:before {
  content: "\e02f";
}
.aai-rss:before {
  content: "\e030";
}
.aai-stackoverflow:before {
  content: "\e031";
}
.aai-twitter:before {
  content: "\e032";
}
.aai-youtube:before {
  content: "\e033";
}
.aai-star-o:before {
  content: "\e035";
}
.aai-star:before {
  content: "\e036";
}
.aai-star-half-o:before {
  content: "\e037";
}
.aai-link-o:before {
  content: "\e038";
}
.aai-link:before {
  content: "\e039";
}
.aai-ipad-o:before {
  content: "\e03a";
}
.aai-ipad:before {
  content: "\e03b";
}
.aai-iphone-o:before {
  content: "\e03c";
}
.aai-iphone:before {
  content: "\e03d";
}
.aai-joystick-o:before {
  content: "\e03e";
}
.aai-joystick:before {
  content: "\e03f";
}
.aai-dollar-bag-o:before {
  content: "\e040";
}
.aai-dollar-bag:before {
  content: "\e041";
}
.aai-shopping-bag-o:before {
  content: "\e042";
}
.aai-shopping-bag:before {
  content: "\e043";
}
.aai-thumbs-up-o:before {
  content: "\e003";
}
.aai-thumbs-up:before {
  content: "\e004";
}
.aai-thumbs-down-o:before {
  content: "\e044";
}
.aai-thumbs-down:before {
  content: "\e045";
}
.aai-arrow-dl-o:before {
  content: "\e046";
}
.aai-arrow-dl:before {
  content: "\e047";
}
.aai-arrow-dr-o:before {
  content: "\e048";
}
.aai-arrow-dr:before {
  content: "\e049";
}
.aai-book-o:before {
  content: "\e04a";
}
.aai-book:before {
  content: "\e04b";
}
.aai-movie-play-o:before {
  content: "\e04c";
}
.aai-movie-play:before {
  content: "\e04d";
}
.aai-check-circle-o:before {
  content: "\e04e";
}
.aai-check-circle:before {
  content: "\e04f";
}
.aai-pacman-o:before {
  content: "\e050";
}
.aai-pacman:before {
  content: "\e051";
}
.aai-tag-o:before {
  content: "\e052";
}
.aai-tag:before {
  content: "\e053";
}
.aai-note-paper-o:before {
  content: "\e054";
}
.aai-note-paper:before {
  content: "\e055";
}
.aai-direction-sign-o:before {
  content: "\e056";
}
.aai-direction-sign:before {
  content: "\e057";
}
.aai-thumbnails-o:before {
  content: "\e058";
}
.aai-thumbnails:before {
  content: "\e059";
}
.aai-information-o:before {
  content: "\e05a";
}
.aai-information:before {
  content: "\e05b";
}
.aai-moon-cloud-o:before {
  content: "\e05c";
}
.aai-moon-cloud:before {
  content: "\e05d";
}
.aai-list-o:before {
  content: "\e05e";
}
.aai-list:before {
  content: "\e05f";
}
.aai-nowgaming:before {
  content: "\e060";
}
.aai-chevron-down-o:before {
  content: "\e034";
}
.aai-chevron-down:before {
  content: "\e061";
}
.aai-chevron-up-o:before {
  content: "\e062";
}
.aai-chevron-up:before {
  content: "\e063";
}
.aai-chevron-left-o:before {
  content: "\e064";
}
.aai-chevron-left:before {
  content: "\e065";
}
.aai-chevron-right-o:before {
  content: "\e066";
}
.aai-chevron-right:before {
  content: "\e067";
}
.aai-delete-o:before {
  content: "\e068";
}
.aai-delete:before {
  content: "\e069";
}
.aai-arrow-download-o:before {
  content: "\e06a";
}
.aai-arrow-download:before {
  content: "\e06b";
}
.aai-chat-bubble-o:before {
  content: "\e06c";
}
.aai-chat-bubble:before {
  content: "\e06d";
}
.aai-sticker-o:before {
  content: "\e06e";
}
.aai-sticker:before {
  content: "\e06f";
}
.aai-siri-o:before {
  content: "\e070";
}
.aai-siri:before {
  content: "\e071";
}
.aai-construction-o:before {
  content: "\e072";
}
.aai-construction:before {
  content: "\e073";
}
.aai-check-o:before {
  content: "\e074";
}
.aai-check:before {
  content: "\e075";
}
.aai-delete-circ-o:before {
  content: "\e076";
}
.aai-delete-circ:before {
  content: "\e077";
}
.aai-setting-gears-o:before {
  content: "\e078";
}
.aai-setting-gears:before {
  content: "\e079";
}
.aai-laptop-o:before {
  content: "\e07a";
}
.aai-laptop:before {
  content: "\e07b";
}
.aai-video-camera-o:before {
  content: "\e07c";
}
.aai-video-camera:before {
  content: "\e07d";
}
.aai-camera-o:before {
  content: "\e07e";
}
.aai-camera:before {
  content: "\e07f";
}
.aai-envelope-o:before {
  content: "\e080";
}
.aai-envelope:before {
  content: "\e081";
}
.aai-instagram:before {
  content: "\e082";
}
.aai-tumblr:before {
  content: "\e083";
}
.aai-reddit:before {
  content: "\e084";
}
.aai-text-o:before {
  content: "\e085";
}
.aai-text:before {
  content: "\e086";
}
.aai-present-o:before {
  content: "\e087";
}
.aai-present:before {
  content: "\e088";
}
.aai-preview-o:before {
  content: "\e089";
}
.aai-preview:before {
  content: "\e08a";
}
.aai-alarm-clock-o:before {
  content: "\e08b";
}
.aai-alarm-clock:before {
  content: "\e08c";
}
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 * RULES
 *
 *  1) MENU...............................Manu bar rules used on sites like AppAdvice or AppApvice/TV
 *
 *  2) APP NAV BAR........................Nav bar if page is inside app
 *
 */





/*--------*\
   #MENU
\*--------*/



.am {
  position: fixed;
  z-index: 11; /* above search which is 10 */
  top:   0;
  right: 0;
  left:  0;
  height: 60px;
  box-shadow: 0 1px rgba(130,130,130,.3);
  background-color: #fff;
  text-align: center;
  transition: .3s ease-out;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

.am--amp {
  position: relative;
  height: 44px;
}

.am--aa .am__elem__logo {color: #07f}
.am--tv .am__elem__logo {color: #70f}
.am--wa .am__elem__logo {color: #f70}
.am--ng .am__elem__logo {color: #0f7}
.am--ga .am__elem__logo {color: #0cc}

.dark .am {
  background-color: #222;
}

.am.hide {
  -webkit-transform: translate3d(0,-61px,0);
          transform: translate3d(0,-61px,0);
}

.am-helper {
  position: fixed;
  z-index: 9;
  top:    72px;
  right:  0;
  bottom: 0;
  left:   0;
  pointer-events: none;
}

.open + .am-helper {
  pointer-events: auto;
}

  .am_space {
    height: 60px;
    width: 56px;
  }

  .am_space--ng {
    width: 159px;
  }

  .am_space--ga {
    width: 63px;
  }

  .am__elem {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
    font-size: 0; /* prevent spaces between inline-blocks */
    font-weight: 300;
    line-height: 60px;
    color: inherit;
    white-space: nowrap;
  }

  .am--amp .am__elem {
    line-height: 44px;
  }

  .am__elem--sub {
    position: relative;
  }

  .am__elem--click {
    cursor: pointer;
  }

  .am__elem.disable {
    pointer-events: none;
  }

    .am__elem__down {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width:  16px;
      height: 60px;
      margin-right: 1px;
    }

    .am__elem__icon + .am__elem__down {
      margin-right:  4px;
      margin-left: -18px;
    }

      .am__elem__down:before, .am__elem__down:after {
        content: '';
        position: absolute;
        top:  50%;
        left: 50%;
        width:  11px;
        margin-left: -5px;
        border-top: solid 1px;
        transition: .2s ease-out;
      }

      .am__elem__icon + .am__elem__down:before, .am__elem__icon + .am__elem__down:after {
        top:  80%;
      }

      .am__elem__down:before {
        -webkit-transform: translate3d(-4px,0,0) rotate(45deg);
                transform: translate3d(-4px,0,0) rotate(45deg);
      }

      .am__elem__down:after {
        -webkit-transform: translate3d(4px,0,0) rotate(-45deg);
                transform: translate3d(4px,0,0) rotate(-45deg);
      }

      .open > .am__elem__down:before {
        -webkit-transform: translate3d(0,0,0) rotate(45deg);
                transform: translate3d(0,0,0) rotate(45deg);
      }

      .open > .am__elem__down:after {
        -webkit-transform: translate3d(0,0,0) rotate(-45deg);
                transform: translate3d(0,0,0) rotate(-45deg);
      }

    .am__elem__icon {
      display: inline-block;
      vertical-align: top;
      min-width: 20px;
      font-size: 20px;
      text-align: center;
    }

    .am__elem__icon--small {
      font-size: 14px;
    }

      .am__elem__icon:before {
        position: relative;
        top: 2px;
      }

    .am__elem__text {
      position: relative;
      display: inline-block;
      vertical-align: top;
      font-size: 1.6rem;
      font-weight: 700;
      color: inherit;
    }

      .am__elem__text--dot {
        line-height: 52px;
      }

      .am__elem__text--new:before {
        content: 'new';
        position: absolute;
        top:   8px;
        right: 0;
        padding: 1px 2px;
        border-radius: 2px;
        font-size: 9px;
        line-height: 1;
        background-color: #0f7;
        color: #222;
      }

    .am__elem__switch {
      height: 30px;
      margin-top: 15px;
      box-shadow: 0 0 0 1px rgba(130,130,130,.5);
      border-radius: 10px;
    }

      .am__elem__switch__ {
        display: inline-block;
        vertical-align: top;
        padding: 5px;
        color: inherit;
        font-size: 18px;
        line-height: 20px;
        opacity: .5;
        transition: opacity .3s;
      }

      .am__elem__switch__:hover, .am__elem__switch__:focus {
        opacity: .75;
      }

      .am__elem__switch__.active {
        border-radius: 10px;
        box-shadow: 0 0 0 1px #0f7;
        opacity: 1;
        pointer-events: none;
      }

    .am__elem__sub {
      position: absolute;
      top: 72px;
      left: 0;
      opacity: 0;
      line-height: 34px;
      pointer-events: none;
      cursor: auto;
      transition: .3s ease-out;
      -webkit-transform: translate3d(0,10px,0);
              transform: translate3d(0,10px,0);
    }

    .open > .am__elem__sub {
      opacity: 1;
      pointer-events: auto;
      -webkit-transform: translate3d(0,0,0);
              transform: translate3d(0,0,0);
    }

    .am__elem__sub--center {
      left: 50%;
      -webkit-transform: translate3d(-50%,10px,0);
              transform: translate3d(-50%,10px,0);
    }

    .open > .am__elem__sub--center {
      -webkit-transform: translate3d(-50%,0,0);
              transform: translate3d(-50%,0,0);
    }

    .am__elem__sub--behind {
      z-index: -1;
    }

    .am__elem__sub--right {
      right: 0;
      left:  auto;
    }

    .am__elem__sub--full {
      top: 60px;
      right: 0;
      left:  0;
      background-color: #fff;
      box-shadow: 0 1px rgba(130,130,130,.3);
    }

    .dark .am__elem__sub--full {
      background-color: #222;
    }

      .am__elem__sub:before {
        content: '';
        position: absolute;
        top:   0;
        left: 20px;
        width:  16px;
        height: 16px;
        margin: -6px 0 0 -8px;
        border-radius: 2px;
        background-color: #dadada;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
      }

      .dark .am__elem__sub:before {
        background-color: #555;
      }

      .am__elem__sub--center:before {
        left: 50%;
      }

      .am__elem__sub--right:before {
        right: 12px;
        left: auto;
      }

      .am__elem__sub--full:before {
        display: none;
      }

      .am__elem__sub__ {
        position: relative;
        padding: 10px;
        border: solid 1px #dadada;
        border-radius: 5px;
        background-color: #fff;
        list-style-type: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
                overflow-scrolling: touch;
      }

      li > .am__elem__sub__ {
        display: none;
        background-color: rgba(130,130,130,.3);
      }

      li > .open + .am__elem__sub__ {
        display: block;
      }

      .dark .am__elem__sub__ {
        border: solid 1px #555;
        background-color: #222;
      }

      .am__elem__sub--full > .am__elem__sub__ {
        border-right: none;
        border-left:  none;
        border-bottom: none;
        border-radius: 0;
      }

        .am__elem__sub__ > li {
          max-width: 320px;
          margin: 0 auto;
          padding: 0 5px;
        }

        .am__elem__sub__divider {
          max-width: none;
          height: 1px;
          background-color: rgba(130,130,130,.3);
        }

        .am__elem__sub__btn {
          display: block;
          margin: 10px 0;
          padding: 0 10px;
          font-size: 1.6rem;
          border-radius: 5px;
          background-color: #1DADEA;
          color: #fff;
        }

        .am__elem__sub__set {
          width: 50%;
          float: left;
          margin-top: 10px;
        }

        .am__elem__sub__set:only-child {
          float: none;
          margin: 10px auto 0;
        }

          .am__elem__sub__set__btn {
            display: inline-block;
            margin: 0 5px;
            font-size: 20px;
            opacity: .5;
          }

          .am__elem__sub__set__btn:hover {
            opacity: .7;
          }

          .am__elem__sub__set__btn.disable, .am__elem__sub__set__btn.disable:hover {
            opacity: .25;
          }

          .am__elem__sub__set__text {
            display: block;
            font-size: 14px;
            line-height: 1;
          }

        .am__elem__sub__elem {
          position: relative;
          display: block;
          font-size: 1.6rem;
          color: inherit;
        }

        .am__elem__sub__elem--big {
          font-size: 2rem;
          line-height: 40px;
        }

          .am__elem__sub__elem:before {
            position: relative;
            top: 2px;
            margin-right: 10px;
          }



.am-second {
  position: fixed;
  z-index: 2; /* above .aa, under .aa_head */
  top:   0;
  right: 0;
  left:  0;
  background-color: #fff;
  box-shadow: 0 1px rgba(130,130,130,.3);
  color: #444;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 44px;
  text-align: center;
  transition: .3s ease-out;
  -webkit-transform: translate3d(0,60px,0);
          transform: translate3d(0,60px,0);
}

.dark .am-second {
  background-color: #222;
  color: #ddd;
}

.am-second.hide, .amp-nav .am-second {
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

.hide-nav .am, .hide-nav .am-helper, .hide-nav .am-second {
  display: none;
}

.amp-nav .am--amp, .amp-nav .am-second {
  display: block;
}

.amp-nav .am-second {
  padding-right: 44px;
}

@media (min-width: 1112px) {
  .amp-nav .am-second {
    padding-right: 0;
  }
}



.am_search {
  position: relative;
  padding: 30px 0 0;
}

.am_search--app {
  padding-left: 15px;
}

  .am_search:before, .am_search:after {
    position: absolute;
    top:  20px;
    left: 80px;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: .3s ease-out;
    -webkit-transform: translate3d(0,5px,0);
            transform: translate3d(0,5px,0);
  }

  .am_search--app:before, .am_search--app:after {
    left: 95px;
  }

  .am_search:before {
    content: attr(data-before);
  }

  .am_search:after {
    content: attr(data-after);
  }

  .am_search:before, .am_search.searched:after {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .am_search.searched:before {
    opacity: 0;
    -webkit-transform: translate3d(0,-5px,0);
            transform: translate3d(0,-5px,0);
  }

  .am_search__icon {
    float: left;
    margin-top: -20px;
  }

  .aa_search__close {
    position: relative;
    z-index: 1; /* get above form*/
    float: right;
    width:  50px;
    height: 60px;
    margin-top: 30px;
    padding-top: 4px;
    font-size: 20px;
    opacity: .3;
    transition: opacity .3s;
  }

  .aa_search__close:hover {
    opacity: 1;
  }

  .am_search__input {
    overflow: hidden;
    height: 60px;
    padding: 5px 0;
  }

    .am_search__input__ {
      width: 100%;
      padding: 0;
      border:  none;
      outline: none;
      line-height: 50px;
      font-size: 3rem;
      font-weight: 100;
      background-color: transparent;
    }

    .am_search__input__::-webkit-input-placeholder, .am_search__input__::-moz-placeholder {
      font-weight: 100;
      color: inherit;
    }

  .am_search__options {
    position: relative;
    padding: 3px 0 10px;
    box-shadow: inset 0 3px #f70;
    font-size: 0;
    line-height: 1;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

    .am_search__options__ {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: calc(100% - 28px);
      min-width: 480px;
      max-width: 650px;
      margin: 0 14px;
      text-align: justify;
      white-space: normal;
    }

    .am_search__options__--s {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 414px;
      margin: 0 auto;
    }

      .am_search__options__:after {
        content: '';
        display: inline-block;
        vertical-align: top;
        width: 100%;
      }

      .am_search__options__elem {
        position: relative;
        display: inline-block;
        vertical-align: top;
        padding: 0 5px;
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 50px;
        text-align: center;
        opacity: .5;
        white-space: nowrap;
        transition: opacity .3s;
      }

      .am_search__options__--s > .am_search__options__elem {
        width: 33.33337%;
      }

      .am_search__options__elem.active {
        opacity: 1;
      }

        .am_search__options__elem:before {
          content: '';
          position: absolute;
          top:   0;
          left: 50%;
          width:  0;
          height: 0;
          margin-left: -8px;
          border-style: solid;
          border-width: 10px 8px 0 8px;
          border-color: #f70 transparent transparent transparent;
          transition: .3s;
          transform-origin: 50% 0;
          -webkit-transform: rotateX(90deg);
                  transform: rotateX(90deg);
        }

        .am_search__options__elem.active:before {
          -webkit-transform: rotateX(0deg);
                  transform: rotateX(0deg);
        }

        .am_search__options__elem:after {
          content: attr(data-count);
          position: absolute;
          right:  0;
          bottom: 0;
          left:   0;
          font-size: 1rem;
          font-weight: 300;
          line-height: 1;
          opacity: .5;
        }

@media (min-width: 414px) {
  .am_search__options__ {
    min-width: 530px;
  }

  .am_search__options__--s {
    min-width: 0;
  }
}

@media (min-width: 480px) {
  .am_search__input__ {
    font-size: 4rem;
  }
}





/*---------------*\
   #APP NAV BAR
\*---------------*/



.an {
  position: fixed;
  z-index: 11;
  top:   0;
  right: 0;
  left:  0;
  padding-top: 20px;
  font-size: 0;
  background-color: #fff;
  box-shadow: 0 1px rgba(130,130,130,.3);
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

  .an_back, .an_icon, .an_left, .an_right {
    display: block;
    position: relative;
    z-index: 1;
    min-width:  44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #07f;
    transform-origin: 50% 100%;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .an--tv > .an_back, .an--tv >  .an_left, .an--tv >  .an_right {
    color: #70f;
  }

  .an--wa > .an_back, .an--wa >  .an_left, .an--wa >  .an_right {
    color: #f70;
  }

  .an--ng > .an_back, .an--ng >  .an_left, .an--ng >  .an_right {
    color: #0f7;
  }

  .an--ga > .an_back, .an--ga >  .an_left, .an--ga >  .an_right {
    color: #0cc;
  }

  .an_icon, .an_left {
    float: left;
    padding-top: 4px;
    font-size: 28px;
  }

  .an_icon {
    color: inherit;
  }

  .an_back {
    float: left;
    position: relative;
    padding-left: 28px;
    font-size: 18px;
    font-weight: 400;
  }

    .an_back:before {
      content: '';
      position: absolute;
      top:  14px;
      left: 17px;
      width:  16px;
      height: 16px;
      box-shadow: -3px 3px;
      transform: rotate(45deg);
    }

  .an_right {
    float: right;
    margin-right: 4px;
    padding-top: 3px;
    font-size: 28px;
  }

  .an_feedback {
    position: absolute;
    z-index: 1;
    display: block;
    right:  0;
    bottom: 7px;
    padding: 0 10px;
    border-radius: 5px 0 0 5px;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 30px;
    color: #fff;
    background-color: #f70;
    transform-origin: 100% 100%;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .an_title {
    position: relative;
    overflow: hidden;
    padding: 0 10px;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 44px;
    text-align: center;
    transform-origin: 50% 100%;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .searchpage > .an_title {
    display: none;
  }

  .an_sub {
    position: absolute;
    top: 100%;
    right: 0;
    left:  0;
    background-color: #fff;
    border: solid 1px rgba(130,130,130,.3);
    opacity: 0;
    pointer-events: none;
    transition: .3s ease-out;
    -webkit-transform: translate3d(0,10px,0);
            transform: translate3d(0,10px,0);
  }

  .searchpage > .an_sub {
    top: 13px;
    border: none;
    box-shadow: 0 10px 10px rgba(0,0,0,.1);
  }

  .an_sub.open {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .an_btns {
    margin-bottom: 5px;
    text-align: center;
  }

    .an_btns__ {
      display: inline-block;
      white-space: nowrap;
      vertical-align: top;
      border-radius: 3px;
      box-shadow: inset 0 0 0 1px rgba(130,130,130,.3);
      overflow: hidden;
    }

      .an_btns__elem {
        display: inline-block;
        vertical-align: top;
        padding: 2px 5px;
        font-size: 1.2rem;
        font-weight: 300;
        color: inherit;
        box-shadow: -1px 0 rgba(130,130,130,.3);
      }

      .an_btns__elem.active {
        background-color: #07f;
        color: #fff;
        pointer-events: none;
      }

      .an--tv > .an_btns > .an_btns__ > .an_btns__elem.active {
        background-color: #70f;
      }

      .an--wa > .an_btns > .an_btns__ > .an_btns__elem.active {
        background-color: #f70;
      }

      .an--ng > .an_btns > .an_btns__ > .an_btns__elem.active {
        background-color: #0f7;
        color: #222;
      }

      .an--ga > .an_btns > .an_btns__ > .an_btns__elem.active {
        background-color: #0cc;
      }

@supports (-webkit-backdrop-filter: blur(1px)) {
  .an, .an_sub {
    background-color: rgba(255,255,255,.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }

  .dark .an, .dark .an_sub {
    background-color: rgba(34,34,34,.65);
  }
}

@media (min-width: 508px) {
  /* temp fix for #530 - share btn crashes iPad */
  .an_right.aai-share {
    opacity: 0;
    pointer-events: none;
  }
}

.asb {
  padding: 7px 0;
}

.asb-btn {
  width:  44px;
  height: 44px;
  line-height: 48px;
}

.asb-btn--fix {
  position: fixed;
  z-index: 11;
  top:   0;
  right: 0;
  text-shadow: 0 1px #fff, 0 -1px #fff;
}

  .asb__elem {
    display: block;
    padding: 0 14px;
    font-size: 1.6rem;
    line-height: 2;
    color: inherit;
  }

  .asb__elem--big {
    font-size: 1.8rem;
  }

  .asb__elem.active {
    color: #f70
  }

    .asb__elem:before {
      position: relative;
      top: 2px;
      margin-right: 5px;
    }
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 * LAYOUT RULES
 *
 *  0) TOP LEVEL
 *
 *  1) HEADER
 *
 *  2) CONTENT
 *
 *  3) FOOTER
 *
 *  5) WRAPPERS
 *
 *  8) COMMENTS
 *
 *  9) MISCELLANEOUS
 *
 */




/*------------*\
   #TOP LEVEL
\*------------*/




.main-wrapper {
  min-height: -webkit-calc(100% - 91px);
  min-height:         calc(100% - 91px);
  padding-top: 60px;
}

.hide-nav > .main-wrapper {
  padding-top: 0;
}

.app-nav > .main-wrapper {
  padding-top: 64px;
}



.notification {
  font-size: 1.6rem;
  padding: .5rem 0;
  text-align: center;
  background-color: rgba(255, 220, 150, 0.5);
}

.browsehappy {
  display: none;
}

.no-csstransitions .browsehappy {
  display: block;
}

.no-js .browsehappy {
  display: none;
}





/*----------*\
   #HEADER
\*----------*/



.aa_head {
  position: relative;
  z-index: 3;
  margin-top: -60px; /* needed to cover the secondary nav in the bg if scrolled negative */
  padding-top: 60px; /* needed to cover the secondary nav in the bg if scrolled negative */
  background-color: #f3f3f3;
}

.aa_head--blank {
  background-color: transparent;
}

.dark .aa_head {
  background-color: #222;
}

.dark .aa_head--blank {
  background-color: transparent;
}

.hide-nav .aa_head {
  margin-top:  0;
  padding-top: 0;
}

.app-nav .aa_head {
  padding-top: 0;
}





/*-----------*\
   #CONTENT
\*-----------*/



.aa {
  position: relative;
  z-index: 1;
}





/*----------*\
   #FOOTER
\*----------*/



.footer {
  margin-top: 10px;
  padding: 10px 10px 50px;
  font-size: 14px; /* it shouldn't change thus the px */
  text-align: center;
}





/*------------*\
   #WRAPPERS
\*------------*/



.container-resp {
  margin: 0 auto;
  max-width: 1024px;
}

@media only screen and (min-width: 1224px) {
  .container-resp {
    margin: 0 100px;
    max-width: none;
  }
}

@media only screen and (min-width: 1740px) {
  .container-resp {
    margin: 0 auto;
    max-width: 1540px;
  }
}



.aa_wrap {
  max-width: 1024px;
  margin: 0 auto;
  box-shadow: 0 -1px 0 rgba(130,130,130,.3), 0 1px 0 rgba(130,130,130,.3);
}



.aa_row {
  border-bottom: solid 1px rgba(130,130,130,.3);
  background: linear-gradient(to top, rgba(130,130,130,.1) 0%, rgba(130,130,130,0) 50%);
}





/*------------*\
   #COMMENTS
\*------------*/



.aa_comment {
  padding: 0 10px;
  min-height: 50px;
  box-shadow: 0 0 0 1px rgba(130,130,130,.2);
}

  button.aa_comment__btn, a.aa_comment__btn {
    display: inline-block;
    width: 100%;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
    color: #00f;
  }

    .aa_comment__btn__count {
      padding: 2px 7px;
      border-radius: 12px;
      color: #fff;
      background-color:#00f;
    }

    .aa_comment__btn__count:empty {
      display: none;
    }





/*----------------*\
   #MISCELLANEOUS
\*----------------*/



.aa_ap {
  position: relative;
}

  .aa_ap_w {
    position: relative;
  }

    .aa_ap_w > img, .aa_ap_w > video {
      position: absolute;
      top:  0;
      left: 0;
      width:  100%;
      height: 100%;
    }

  .aa_ap_i {
    position: absolute;
    top:  5px;
    left: 5px;
    font-size: 1.4rem;
    color: #fff;
    text-shadow: 1px 1px rgba(0,0,0,.3);
    pointer-events: none;
  }

    .aa_ap_i:before {
      position: absolute;
      top:  3px;
      left: 0;
      padding-left: 4px;
      opacity: 0;
    }

    .load > .aa_ap_i:before {
      opacity: 1;
      animation: aa_spin .5s infinite reverse linear;
    }

    .playing > .aa_ap_i:before {
      display: none;
    }

    .error > .aa_ap_i:before {
      opacity: 1;
      animation: none;
    }

    .aa_ap_i:after {
      margin-left: 23px;
    }

    .load > .aa_ap_i:after {
      content: 'loading...';
    }

    .playing > .aa_ap_i:after {
      display: none;
    }

    .error > .aa_ap_i:after {
      content: 'ERROR LOADING MEDIA';
    }

  .aa_ap_o {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    cursor: pointer;
  }



.aa_app__icon {
  position: relative;
  padding-bottom: 100%;
  border-radius: 22%;
}

.aa_app__icon--oval {
  padding-bottom: 68.75%;
  border-radius: 34.375%/50%;
}

.aa_app__icon--watch {
  padding-bottom: 100%;
  border-radius: 50%;
}

.aa_app__icon--tv {
  padding-bottom: 56.25%;
  border-radius: 1.8%/3.2%;
}

  .aa_app__icon:before {
    content: '';
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(130,130,130,.2);
  }



.divider-line--horizontal {
  height: 1px;
  background-color: rgba(125,125,125,.2);
}

.divider-line--horizontal--small {
  width: 100px;
  margin-left:  auto;
  margin-right: auto;
}



a.underline {
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}

  a.underline:before {
    content: "";
    position: absolute;
    left:   0;
    bottom: 1px;
    height: 1px;
    width:  50%;
    background-color: #f70;
    -webkit-transition: inherit;
            transition: inherit;
    -webkit-transform: translate3d(-102%,0,0);
            transform: translate3d(-102%,0,0);
  }

  a.underline:hover, a.underline:focus {
    color: #f70;
  }

  a.underline:hover:before, a.underline:focus:before {
    -webkit-transform: translate3d(50%,0,0);
            transform: translate3d(50%,0,0);
  }



.aa_feedback {
  position: fixed;
  z-index: 1;
  top:  13px;
  right: 0;
  display: block;
  padding: 5px 10px;
  border-radius: 3px 0 0 3px;
  font-size: 1.6rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px;
  background-color: #f70;
  color: #fff;
  transition: background-color .3s;
}

.aa_feedback:hover {
  background-color: #00f;
}

  .aa_feedback > i {
    position: relative;
    top: 2px;
  }
/* Slider */

.slick-slider
{
    position: relative;

    display: block;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION:
 *
 * http://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Use aa_ prefix for all classes
 * - Indentations are 2px
 * - Columns are 120px wide
 * - Don't use [] in html inside class="" for grouping
 * - In html class="" don't use 2 space between classes, but put the related ones next to each other
 * - Low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) ANIMATIONS
 *
 */





/*--------------*\
   #ANIMATIONS
\*--------------*/




@-webkit-keyframes aa_spin {
  from {-webkit-transform: rotate(0deg)}
  to {-webkit-transform: rotate(360deg)}
}

@keyframes aa_spin {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}



@keyframes searchResultsIn {
  0%   {transform: translate3d(0,10px,0); opacity: 0}
  100% {transform: translate3d(0, 0,  0); opacity: 1}
}

@keyframes searchResultsOut {
  0%   {transform: translate3d(0, 0,  0); opacity: 1}
  100% {transform: translate3d(0,10px,0); opacity: 0}
}



/* Generated with Bounce.js. Edit at http://goo.gl/FpjrbX */

@-webkit-keyframes aa_bounce-up {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { -webkit-transform: matrix3d(1.01745, 0, 0, 0, 0, 1.02232, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01745, 0, 0, 0, 0, 1.02232, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.666667% { -webkit-transform: matrix3d(1.03581, 0, 0, 0, 0, 1.04883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.03581, 0, 0, 0, 0, 1.04883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { -webkit-transform: matrix3d(1.05133, 0, 0, 0, 0, 1.06867, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05133, 0, 0, 0, 0, 1.06867, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% { -webkit-transform: matrix3d(1.06228, 0, 0, 0, 0, 1.07762, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06228, 0, 0, 0, 0, 1.07762, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% { -webkit-transform: matrix3d(1.06845, 0, 0, 0, 0, 1.07691, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06845, 0, 0, 0, 0, 1.07691, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(1.07062, 0, 0, 0, 0, 1.07062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.07062, 0, 0, 0, 0, 1.07062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { -webkit-transform: matrix3d(1.06996, 0, 0, 0, 0, 1.06315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06996, 0, 0, 0, 0, 1.06315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% { -webkit-transform: matrix3d(1.06773, 0, 0, 0, 0, 1.05756, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06773, 0, 0, 0, 0, 1.05756, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { -webkit-transform: matrix3d(1.06496, 0, 0, 0, 0, 1.05504, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06496, 0, 0, 0, 0, 1.05504, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% { -webkit-transform: matrix3d(1.06238, 0, 0, 0, 0, 1.05524, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06238, 0, 0, 0, 0, 1.05524, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% { -webkit-transform: matrix3d(1.06039, 0, 0, 0, 0, 1.05701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06039, 0, 0, 0, 0, 1.05701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(1.05911, 0, 0, 0, 0, 1.05911, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05911, 0, 0, 0, 0, 1.05911, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { -webkit-transform: matrix3d(1.05851, 0, 0, 0, 0, 1.06069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05851, 0, 0, 0, 0, 1.06069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% { -webkit-transform: matrix3d(1.05842, 0, 0, 0, 0, 1.0614, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05842, 0, 0, 0, 0, 1.0614, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { -webkit-transform: matrix3d(1.05866, 0, 0, 0, 0, 1.06134, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05866, 0, 0, 0, 0, 1.06134, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% { -webkit-transform: matrix3d(1.05905, 0, 0, 0, 0, 1.06084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05905, 0, 0, 0, 0, 1.06084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% { -webkit-transform: matrix3d(1.05946, 0, 0, 0, 0, 1.06025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05946, 0, 0, 0, 0, 1.06025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1.05981, 0, 0, 0, 0, 1.05981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05981, 0, 0, 0, 0, 1.05981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { -webkit-transform: matrix3d(1.06005, 0, 0, 0, 0, 1.05961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06005, 0, 0, 0, 0, 1.05961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% { -webkit-transform: matrix3d(1.06019, 0, 0, 0, 0, 1.05962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06019, 0, 0, 0, 0, 1.05962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { -webkit-transform: matrix3d(1.06024, 0, 0, 0, 0, 1.05976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06024, 0, 0, 0, 0, 1.05976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% { -webkit-transform: matrix3d(1.06022, 0, 0, 0, 0, 1.05993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06022, 0, 0, 0, 0, 1.05993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% { -webkit-transform: matrix3d(1.06017, 0, 0, 0, 0, 1.06005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06017, 0, 0, 0, 0, 1.06005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { -webkit-transform: matrix3d(1.06011, 0, 0, 0, 0, 1.06011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06011, 0, 0, 0, 0, 1.06011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { -webkit-transform: matrix3d(1.06005, 0, 0, 0, 0, 1.06011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06005, 0, 0, 0, 0, 1.06011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% { -webkit-transform: matrix3d(1.06001, 0, 0, 0, 0, 1.06007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06001, 0, 0, 0, 0, 1.06007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { -webkit-transform: matrix3d(1.05998, 0, 0, 0, 0, 1.06002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05998, 0, 0, 0, 0, 1.06002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% { -webkit-transform: matrix3d(1.05997, 0, 0, 0, 0, 1.05998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05997, 0, 0, 0, 0, 1.05998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% { -webkit-transform: matrix3d(1.05996, 0, 0, 0, 0, 1.05997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05996, 0, 0, 0, 0, 1.05997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1.06, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes aa_bounce-up {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { -webkit-transform: matrix3d(1.01745, 0, 0, 0, 0, 1.02232, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01745, 0, 0, 0, 0, 1.02232, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.666667% { -webkit-transform: matrix3d(1.03581, 0, 0, 0, 0, 1.04883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.03581, 0, 0, 0, 0, 1.04883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { -webkit-transform: matrix3d(1.05133, 0, 0, 0, 0, 1.06867, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05133, 0, 0, 0, 0, 1.06867, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% { -webkit-transform: matrix3d(1.06228, 0, 0, 0, 0, 1.07762, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06228, 0, 0, 0, 0, 1.07762, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% { -webkit-transform: matrix3d(1.06845, 0, 0, 0, 0, 1.07691, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06845, 0, 0, 0, 0, 1.07691, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(1.07062, 0, 0, 0, 0, 1.07062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.07062, 0, 0, 0, 0, 1.07062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { -webkit-transform: matrix3d(1.06996, 0, 0, 0, 0, 1.06315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06996, 0, 0, 0, 0, 1.06315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% { -webkit-transform: matrix3d(1.06773, 0, 0, 0, 0, 1.05756, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06773, 0, 0, 0, 0, 1.05756, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { -webkit-transform: matrix3d(1.06496, 0, 0, 0, 0, 1.05504, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06496, 0, 0, 0, 0, 1.05504, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% { -webkit-transform: matrix3d(1.06238, 0, 0, 0, 0, 1.05524, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06238, 0, 0, 0, 0, 1.05524, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% { -webkit-transform: matrix3d(1.06039, 0, 0, 0, 0, 1.05701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06039, 0, 0, 0, 0, 1.05701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(1.05911, 0, 0, 0, 0, 1.05911, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05911, 0, 0, 0, 0, 1.05911, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { -webkit-transform: matrix3d(1.05851, 0, 0, 0, 0, 1.06069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05851, 0, 0, 0, 0, 1.06069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% { -webkit-transform: matrix3d(1.05842, 0, 0, 0, 0, 1.0614, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05842, 0, 0, 0, 0, 1.0614, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { -webkit-transform: matrix3d(1.05866, 0, 0, 0, 0, 1.06134, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05866, 0, 0, 0, 0, 1.06134, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% { -webkit-transform: matrix3d(1.05905, 0, 0, 0, 0, 1.06084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05905, 0, 0, 0, 0, 1.06084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% { -webkit-transform: matrix3d(1.05946, 0, 0, 0, 0, 1.06025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05946, 0, 0, 0, 0, 1.06025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1.05981, 0, 0, 0, 0, 1.05981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05981, 0, 0, 0, 0, 1.05981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { -webkit-transform: matrix3d(1.06005, 0, 0, 0, 0, 1.05961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06005, 0, 0, 0, 0, 1.05961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% { -webkit-transform: matrix3d(1.06019, 0, 0, 0, 0, 1.05962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06019, 0, 0, 0, 0, 1.05962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { -webkit-transform: matrix3d(1.06024, 0, 0, 0, 0, 1.05976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06024, 0, 0, 0, 0, 1.05976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% { -webkit-transform: matrix3d(1.06022, 0, 0, 0, 0, 1.05993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06022, 0, 0, 0, 0, 1.05993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% { -webkit-transform: matrix3d(1.06017, 0, 0, 0, 0, 1.06005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06017, 0, 0, 0, 0, 1.06005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { -webkit-transform: matrix3d(1.06011, 0, 0, 0, 0, 1.06011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06011, 0, 0, 0, 0, 1.06011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { -webkit-transform: matrix3d(1.06005, 0, 0, 0, 0, 1.06011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06005, 0, 0, 0, 0, 1.06011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% { -webkit-transform: matrix3d(1.06001, 0, 0, 0, 0, 1.06007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06001, 0, 0, 0, 0, 1.06007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { -webkit-transform: matrix3d(1.05998, 0, 0, 0, 0, 1.06002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05998, 0, 0, 0, 0, 1.06002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% { -webkit-transform: matrix3d(1.05997, 0, 0, 0, 0, 1.05998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05997, 0, 0, 0, 0, 1.05998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% { -webkit-transform: matrix3d(1.05996, 0, 0, 0, 0, 1.05997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05996, 0, 0, 0, 0, 1.05997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1.06, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

/* Generated with Bounce.js. Edit at http://goo.gl/1lTPhQ */

@-webkit-keyframes aa_bounce-down {
  0% { -webkit-transform: matrix3d(1.06, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { -webkit-transform: matrix3d(1.04255, 0, 0, 0, 0, 1.03768, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.04255, 0, 0, 0, 0, 1.03768, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.666667% { -webkit-transform: matrix3d(1.02419, 0, 0, 0, 0, 1.01117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02419, 0, 0, 0, 0, 1.01117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { -webkit-transform: matrix3d(1.00867, 0, 0, 0, 0, 0.99133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00867, 0, 0, 0, 0, 0.99133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% { -webkit-transform: matrix3d(0.99772, 0, 0, 0, 0, 0.98238, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99772, 0, 0, 0, 0, 0.98238, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% { -webkit-transform: matrix3d(0.99155, 0, 0, 0, 0, 0.98309, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99155, 0, 0, 0, 0, 0.98309, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(0.98938, 0, 0, 0, 0, 0.98938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98938, 0, 0, 0, 0, 0.98938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { -webkit-transform: matrix3d(0.99004, 0, 0, 0, 0, 0.99685, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99004, 0, 0, 0, 0, 0.99685, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% { -webkit-transform: matrix3d(0.99227, 0, 0, 0, 0, 1.00244, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99227, 0, 0, 0, 0, 1.00244, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { -webkit-transform: matrix3d(0.99504, 0, 0, 0, 0, 1.00496, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99504, 0, 0, 0, 0, 1.00496, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% { -webkit-transform: matrix3d(0.99762, 0, 0, 0, 0, 1.00476, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99762, 0, 0, 0, 0, 1.00476, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% { -webkit-transform: matrix3d(0.99961, 0, 0, 0, 0, 1.00299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99961, 0, 0, 0, 0, 1.00299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { -webkit-transform: matrix3d(1.00149, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00149, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% { -webkit-transform: matrix3d(1.00158, 0, 0, 0, 0, 0.9986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00158, 0, 0, 0, 0, 0.9986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { -webkit-transform: matrix3d(1.00134, 0, 0, 0, 0, 0.99866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00134, 0, 0, 0, 0, 0.99866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% { -webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% { -webkit-transform: matrix3d(1.00054, 0, 0, 0, 0, 0.99975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00054, 0, 0, 0, 0, 0.99975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1.00019, 0, 0, 0, 0, 1.00019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00019, 0, 0, 0, 0, 1.00019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { -webkit-transform: matrix3d(0.99995, 0, 0, 0, 0, 1.00039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99995, 0, 0, 0, 0, 1.00039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% { -webkit-transform: matrix3d(0.99981, 0, 0, 0, 0, 1.00038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99981, 0, 0, 0, 0, 1.00038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { -webkit-transform: matrix3d(0.99976, 0, 0, 0, 0, 1.00024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99976, 0, 0, 0, 0, 1.00024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% { -webkit-transform: matrix3d(0.99978, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99978, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% { -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { -webkit-transform: matrix3d(0.99989, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99989, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { -webkit-transform: matrix3d(0.99995, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99995, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 0.99993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 0.99993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 0.99998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00002, 0, 0, 0, 0, 0.99998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% { -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% { -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes aa_bounce-down {
  0% { -webkit-transform: matrix3d(1.06, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { -webkit-transform: matrix3d(1.04255, 0, 0, 0, 0, 1.03768, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.04255, 0, 0, 0, 0, 1.03768, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.666667% { -webkit-transform: matrix3d(1.02419, 0, 0, 0, 0, 1.01117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02419, 0, 0, 0, 0, 1.01117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { -webkit-transform: matrix3d(1.00867, 0, 0, 0, 0, 0.99133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00867, 0, 0, 0, 0, 0.99133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% { -webkit-transform: matrix3d(0.99772, 0, 0, 0, 0, 0.98238, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99772, 0, 0, 0, 0, 0.98238, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% { -webkit-transform: matrix3d(0.99155, 0, 0, 0, 0, 0.98309, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99155, 0, 0, 0, 0, 0.98309, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(0.98938, 0, 0, 0, 0, 0.98938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98938, 0, 0, 0, 0, 0.98938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { -webkit-transform: matrix3d(0.99004, 0, 0, 0, 0, 0.99685, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99004, 0, 0, 0, 0, 0.99685, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% { -webkit-transform: matrix3d(0.99227, 0, 0, 0, 0, 1.00244, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99227, 0, 0, 0, 0, 1.00244, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { -webkit-transform: matrix3d(0.99504, 0, 0, 0, 0, 1.00496, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99504, 0, 0, 0, 0, 1.00496, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% { -webkit-transform: matrix3d(0.99762, 0, 0, 0, 0, 1.00476, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99762, 0, 0, 0, 0, 1.00476, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% { -webkit-transform: matrix3d(0.99961, 0, 0, 0, 0, 1.00299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99961, 0, 0, 0, 0, 1.00299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00089, 0, 0, 0, 0, 1.00089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { -webkit-transform: matrix3d(1.00149, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00149, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% { -webkit-transform: matrix3d(1.00158, 0, 0, 0, 0, 0.9986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00158, 0, 0, 0, 0, 0.9986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { -webkit-transform: matrix3d(1.00134, 0, 0, 0, 0, 0.99866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00134, 0, 0, 0, 0, 0.99866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% { -webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% { -webkit-transform: matrix3d(1.00054, 0, 0, 0, 0, 0.99975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00054, 0, 0, 0, 0, 0.99975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1.00019, 0, 0, 0, 0, 1.00019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00019, 0, 0, 0, 0, 1.00019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { -webkit-transform: matrix3d(0.99995, 0, 0, 0, 0, 1.00039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99995, 0, 0, 0, 0, 1.00039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% { -webkit-transform: matrix3d(0.99981, 0, 0, 0, 0, 1.00038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99981, 0, 0, 0, 0, 1.00038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { -webkit-transform: matrix3d(0.99976, 0, 0, 0, 0, 1.00024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99976, 0, 0, 0, 0, 1.00024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% { -webkit-transform: matrix3d(0.99978, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99978, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% { -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { -webkit-transform: matrix3d(0.99989, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99989, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { -webkit-transform: matrix3d(0.99995, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99995, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 0.99993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 0.99993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 0.99998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00002, 0, 0, 0, 0, 0.99998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% { -webkit-transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00003, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% { -webkit-transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00004, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}



/* * * * * * * * * * * * * * * * * * * * *\
  CSShake :: shake-little
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.shake-little {
  display: inline-block;
  transform-origin: center center; }

.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
  animation-play-state: paused; }

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake-little:hover,
.shake-trigger:hover .shake-little {
  animation-play-state: running; }

@keyframes shake-little {
  2% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  4% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  6% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  8% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  10% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  12% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  14% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  16% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  18% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  20% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  22% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  24% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  26% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  28% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  30% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  32% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  34% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  36% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  38% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  40% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  42% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  44% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  46% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  48% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  50% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  52% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  54% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  56% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  58% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  60% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  62% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  64% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  66% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  68% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  70% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  72% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  74% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  76% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  78% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  80% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  82% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  84% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  86% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  88% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  90% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  92% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  94% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  96% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  98% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  0%, 100% {
    transform: translate(0, 0) rotate(0deg); } }

.shake-little:hover,
.shake-trigger:hover .shake-little, .shake-little.shake-freeze, .shake-little.shake-constant {
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) LAYOUT.................................main layout rules
 *
 *  2) FOOTER
 *
 */





/*----------*\
   #LAYOUT
\*----------*/




.r {
  height: 100%;
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 400;
}

.r h1, .r h2, .r h3, .r h4, .r h5, .r h6 {
  font-weight: 500;
  margin: 10px 0;
}

.r h1 {font-size: 2.8rem;}
.r h2 {font-size: 2.4rem;}
.r h3 {font-size: 2.2rem;}
.r h4 {font-size: 2.0rem;}
.r h5 {font-size: 1.8rem;}
.r h6 {font-size: 1.6rem;}

.r p {
  font-size: 1.5rem;
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .r h1 {
    font-size: 3.6rem;
  }

  .r h2 {
    font-size: 3.2rem;
  }

  .r h3 {
    font-size: 2.8rem;
  }

  .r h4 {
    font-size: 2.4rem;
  }

  .r p {
    font-size: 1.7rem;
  }
}

.r button {
  border:  none;
  outline: none;
  padding: 0;
  background-color: transparent;
  -webkit-transition: .2s ease-out;
          transition: .2s ease-out;
}

.r a {
  text-decoration: none;
  color: inherit;
  -webkit-transition: .2s ease-out;
          transition: .2s ease-out;
  -webkit-tap-highlight-color: rgba(130,130,130,.3);
}

.r img, .r video {
  width: 100%;
  height: auto;
}

.r-old img {
  display: block;
  width:  auto;
  height: auto;
  max-width:  100%;
  max-height: 700px;
  margin: 0 auto;
}

.r video {
  background-color: #000;
}

.r mark, .r .highlight {
  background-color: rgba(130,130,130,.2);
  color: inherit;
}

.r::selection {
  background: rgba(0,153,255,.2);
}





/*----------*\
   #FOOTER
\*----------*/



.r_f {
  position: relative;
  z-index: 2;
  padding: 20px 20px 70px;
  color: #666;
  text-align: center;
}
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) LAYOUT IMG
 *
 */





/*-------------*\
   #LAYOUT IMG
\*-------------*/




.r img[src=""] {
  height: 0;
  visibility: hidden; /* chrome fix not to show borders */
}

/*
 * we add padding bottom to images to have their final size when the src is empty
 * we add the src after page load, to make the site faster
 */
.r img[src^="http"] {
  padding-bottom: 0 !important;
}
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) HEADER.................................header with media elements
 *
 */





/*----------*\
   #HEADER
\*----------*/




.r_h {
  position: relative;
  z-index: 7; /* section-img 5, app header bg 6, app header 8 */
  background-color: #f3f3f3;
}

.dark .r_h {
  background-color: #333;
}

  .r_h_m {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    overflow: hidden;
  }

    .r_h_m_img {
      position: relative;
      height: 100%;
      -webkit-transform: translate3d(0,0,0);
              transform: translate3d(0,0,0);
    }

      .r_h_m_img_vid {
        position: absolute;
        top:   50%;
        right: 0;
        left:  0;
        padding-bottom: 56.25%;
        -webkit-transform: translate3d(0,-50%,0);
                transform: translate3d(0,-50%,0);
      }

        .r_h_m_img_vid > video {
          position: absolute;
          top:  0;
          left: 0;
          width:  100%;
          height: 100%;
        }

        .r_h_m_img_vid:after, .r_h_m_img:after {
          content: '';
          position: absolute;
          top:    0;
          right:  0;
          bottom: 0;
          left:   0;
          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABBJREFUCB1jYGBgqAdiBAAABwQAgIiOZY4AAAAASUVORK5CYII=');
        }

    .r_h_fr_ca {
      position: relative;
      z-index: 1; /* really important for the title backgrounds */
    }

  @media (min-width: 769px) {
    .r_h_fr {
      position: relative;
      padding-bottom: 56.25%;
    }

      .r_h_fr_ca {
        position: absolute;
        top:    0;
        right:  0;
        bottom: 0;
        left:   0;
      }
  }

  .r_h_cit, .r_h_cap {
    position: absolute;
    padding: 3px 5px;
    font-size: 14px;
    color: #fff;
    background-color: rgba(130,130,130,.75);
  }

    .r_h_cit {
      top:   10px;
      right: 20px;
      border-radius: 3px;
    }

      .r_h_cit > a {
        color: inherit;
        text-decoration: underline;
      }

    .r_h_cap {
      bottom: 0;
      left:  20px;
      border-radius: 3px 3px 0 0;
    }



  .r_h_ico {
    position: relative;
    width:  100px;
    height: 100px;
    margin: 0 auto 40px;
    background-color: rgba(130,130,130,1);
    border-radius: 20%;
  }

  .r_h_ico-tv {
    width: 163px;
    border-radius: 10px;
  }

  @media (min-width: 769px) {
    .r_h_ico {
      float: left;
      margin: 20px 60px 20px 20px;
    }
  }

    .r_h_ico_m {
      position: relative;
      height: 100%;
      border-radius: inherit;
      overflow: hidden;
    }

      .r_h_ico > span:before, .r_h_ico > span:after {
        content: '';
        position: absolute;
      }

      .r_h_ico > span:before {
        top:    -10px;
        right:  -10px;
        bottom: -10px;
        left:   -10px;
        border-radius: 33px; /* 27.5% */
        box-shadow: 0 0 0 1px rgba(130,130,130,.8);
      }

      .r_h_ico > span:after {
        top:    -20px;
        right:  -20px;
        bottom: -20px;
        left:   -20px;
        border-radius: 49px; /* 35% */
        box-shadow: 0 0 0 1px rgba(130,130,130,.6);
      }

      .r_h_ico > span:nth-child(2):before {
        top:    -30px;
        right:  -30px;
        bottom: -30px;
        left:   -30px;
        border-radius: 68px; /* 42.5% */
        box-shadow: 0 0 0 1px rgba(130,130,130,.4);
      }

      .r_h_ico > span:nth-child(2):after {
        top:    -40px;
        right:  -40px;
        bottom: -40px;
        left:   -40px;
        border-radius: 90px; /* 50% */
        box-shadow: 0 0 0 1px rgba(130,130,130,.2);
      }



a.r_h_lbl {
  display: block;
  float: left;
  margin: 0 20px 10px;
  padding: 0 10px;
  font-size: 14px;
  line-height: 25px;
  background: linear-gradient(to bottom, #a70 0%, #f70 100%);
  color: #fff;
  border-radius: 3px;
  transition: .3s;
}

.r_h + .r_c a.r_h_lbl {
  position: relative;
  z-index: 8; /* get above header canvas */
  float: right;
  margin: -24px 20px 0;
  border-radius: 3px 3px 0 0;
}
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) NAV....................................nav bar
 *
 */





/*-------*\
   #NAV
\*-------*/




.r_nv {
  position: fixed;
  z-index: 6; /* get above everything by default */
  right:  0;
  bottom: 0;
  left:   0;
  height: 44px;
  background-color: rgba(250,250,250,1);
  box-shadow: 0 -1px rgba(130,130,130,.2);
  -webkit-transition: .4s;
          transition: .4s;
  -webkit-transform: translate3d(0,100%,0);
          transform: translate3d(0,100%,0);
}

.dark .r_nv {
  background-color: rgba(51,51,51,1);
}

@supports (-webkit-backdrop-filter: blur(1px)) {
  .r_nv {
    background-color: rgba(250,250,250,.9);
    -webkit-backdrop-filter: blur(20px)
  }

  .dark .r_nv {
    background-color: rgba(51,51,51,.8);
  }
}

.r_nv.show {
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

  .r_nv_btn {
    padding-right: 10px;
    font-size: 14px;
    line-height: 44px;
    float: right;
    color: #888;
  }

    .r_nv_btn:before {
      position: relative;
      top: 2px;
      color: #f70;
    }

  .r_nv_ref {
    position: absolute;
    top:     0;
    right:  40px;
    bottom:  0;
    left:   40px;
    display: block;
    text-align: center;
    font-size: 20px;
    line-height: 44px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .3s ease-out;
    counter-increment: navsection;
  }

  .r_nv_ref.active {
    opacity: 1;
    pointer-events: auto;
  }

  .r_nv_ref-ttl {
    color: #888;
  }

    .r_nv_ref-num:before {
      content: counter(navsection);
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -2px;
      height: 18px;
      margin-right:  3px;
      padding-right: 6px;
      font-size: 12px;
      line-height: 18px;
      box-shadow: 1px 0;
    }

    .r_nv_ref:after {
      content: attr(data-title);
    }

    .r_nv_ref_app {
      display: inline-block;
      position: relative;
      top: 4px;
      width:  24px;
      height: 24px;
      border-radius: 20%;
      background-repeat:   no-repeat;
      background-position: center center;
      background-size:     cover;
    }

    .r_nv_ref_app-tv {
      width: 43px;
      border-radius: 3px;
    }

  .r_nv_prog {
    position: absolute;
    right:  0;
    bottom: 0;
    left:   0;
    height: 3px;
    background-color: rgba(130,130,130,.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }

@media (min-width: 1240px) {
  .r_nv {
    position: fixed;
    z-index: 4; /* get under section header images */
    top:   140px;
    right:  auto;
    bottom: 35px;
    left:   0;
    height: auto;
    width:  48px;
    background-color: transparent;
    box-shadow: 1px 0 rgba(130,130,130,.2);
    -webkit-transform: translate3d(-65px,0,0);
            transform: translate3d(-65px,0,0);
  }

  .hide-nav .r_nv {
    top: 80px;
  }

  .app-nav .r_nv {
    top: 100px;
  }

  .dark .r_nv {
    background-color: transparent;
  }

  @supports (-webkit-backdrop-filter: blur(1px)) {
    .r_nv, .dark .r_nv {
      background-color: transparent;
      -webkit-backdrop-filter: none
    }
  }

    .r_nv:after {
      content: '';
      position: absolute;
      right:  -3px;
      bottom: -5px;
      width:  5px;
      height: 5px;
      border-radius: 50%;
      background-color: rgba(130,130,130,.2);
    }

    .r_nv_btn {
      display: none;
    }

    .r_nv_ref {
      position: absolute;
      z-index: 1;
      top:    0;
      right:  0;
      bottom: auto;
      left:   auto;
      width:  20px;
      height: 20px;
      margin: -10px -10px 0 0;
      background-color: #f3f3f3;
      font-size: 12px;
      line-height: 20px;
      font-weight: 300;
      box-shadow: inset 0 0 0 1px rgba(130,130,130,.5);
      border-radius: 50%;
      opacity: 1;
      white-space: normal;
      overflow: visible;
      pointer-events: auto;
      transition: 0s;
    }

    .dark .r_nv_ref {
      background-color: #333;
    }

    .r_nv_ref.active, .r_nv_ref.active ~ .r_nv_ref {
      box-shadow: inset 0 0 0 1px rgba(130,130,130,.2);
    }

    .r_nv_ref-ttl {
      display: none;
    }

      .r_nv_ref-num:before {
        top: 0;
        height: auto;
        margin-right:  0;
        padding-right: 0;
        line-height: 19px;
        box-shadow: none;
      }

      .r_nv_ref:after {
        position: absolute;
        top:  -5px;
        left: 25px;
        padding: 0 5px;
        font-size: 16px;
        line-height: 30px;
        background-color: rgba(130,130,130,1);
        color: #fff;
        border-radius: 3px;
        opacity: 0;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
        transition: opacity .3s;
      }

      .r_nv_ref:hover:after {
        opacity: 1;
      }

      @supports (-webkit-backdrop-filter: blur(1px)) {
        .r_nv_ref:after {
          background-color: rgba(130,130,130,.8);
          -webkit-backdrop-filter: blur(20px)
        }
      }

      .r_nv_ref_app {
        position: absolute;
        top:  0;
        left: 0;
        width:  100%;
        height: 100%;
        border-radius: 20%;
        transition: .3s;
        -webkit-filter: saturate(0);
                filter: saturate(0);
      }

      .r_nv_ref.active > .r_nv_ref_app, .r_nv_ref.active ~ .r_nv_ref > .r_nv_ref_app {
        -webkit-filter: saturate(1);
                filter: saturate(1);
      }

    .r_nv_prog {
      position: absolute;
      top:     0;
      right:  -1px;
      bottom:  0;
      left:    auto;
      width:  1px;
      height: auto;
      -webkit-transform: scaleX(1) scaleY(0);
              transform: scaleX(1) scaleY(0);
    }
}
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT BASE
 *
 *  2) CONTENT MAIN
 *
 */





/*---------------*\
   #CONTENT BASE
\*---------------*/




.r_t {
  margin-top: 20px;
  padding: 20px;
}

.r_t-s {
  position: -webkit-sticky;
  position:         sticky;
  top: 60px;
  margin: 60px 0 160px;
  padding: 20px 10px 27px;
}

@media (min-width: 769px) {
  .r_t-s {
    margin:  60px 0 0;
    padding: 20px 20px 27px;
  }
}

.hide-nav .r_t-s {
  top: 0;
}

.app-nav .r_t-s {
  top: 20px;
}

  h1.r_t_m, h2.r_t_m {
    font-weight: 900;
    line-height: 1.1;
    color: #000;
  }

  h1.r_t_m {
    font-size: 36px;
    text-shadow: 2px 2px #FF8B00;
  }

  .r_t_s {
    margin-top: -5px;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2;
  }

  .dark h1.r_t_m, .dark h2.r_t_m {
    color: #fff;
  }

    .r_t_m > span, .r_t_s > span {
      position: relative;
      white-space: nowrap;
    }

    .r_t_m > span:after, .r_t_s > span:after {
      content: '';
      position: absolute;
      z-index: -1; /* important to not cover neighbouring text */
      top:    -10px;
      right:  -20px;
      bottom: -15px;
      left:   -20px;
      background-color: #f3f3f3;
      border-radius: 5px;
    }

    .dark .r_t_m > span:after, .dark .r_t_s > span:after {
      background-color: #111;
    }

    .r_t_s > span:after {
      top:    -15px;
    }

@media (min-width: 769px) {
  h1.r_t_m {
    font-size: 48px;
  }

  .r_t_s {
    font-size: 24px;
  }
}

.r_c {
  position: relative;
  color: inherit;
  margin-top: -1px;
  counter-reset: section;
}

  .r_c p {
    margin:  20px 0;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .r_c p > a , .r_c_mn_sct li > a {
    box-shadow: 0 3px rgba(255,119,0,.75);
  }

  .no-touchevents .r_c p > a:hover , .no-touchevents .r_c_mn_sct li > a:hover,
  .touchevents .r_c p > a:active , .touchevents .r_c_mn_sct li > a:active {
    background-color: rgba(255,119,0,.25);
  }

  .r_c ul, .r_c ol {
    margin-left:  20px;
    padding-left: 20px;
  }

  .r_c ul > li, .r_c ol > li {
    margin-right: 20px;
    margin-bottom: 5px;
  }

  .r_c ul > li {
    list-style-type: none;
  }

  .r_c ul > li:before {
    content: '';
    position: absolute;
    width:  1rem;
    height: 1rem;
    margin-top:  .6rem;
    margin-left: -20px;
    box-shadow: inset 0 0 0 3px rgba(130,130,130,.5);
    border-radius: 50%;
  }

  .r_c h1, .r_c h2, .r_c h3, .r_c h4, .r_c h5, .r_c h6 {
    margin:  0;
    padding: 0 20px;
  }

  h3.r_c_sh, h4.r_c_sh {
    margin: 30px 0 20px;
    font-weight: 700;
  }





/*---------------*\
   #CONTENT MAIN
\*---------------*/



  .r_c_mn {
    position: relative;
  }

    .r_c_mn_aut {
      position: relative;
      text-align: center;
      margin-top: 10px;
      padding-bottom: 10px;
    }

      .r_c_mn_aut:after {
        content: '';
        position: absolute;
        left:  50%;
        bottom: 0;
        width: 180px;
        height:  5px;
        margin-left: -90px;
        background-color: rgba(130,130,130,.2);
      }

    .r_c_mn_sct {
      margin-bottom: 40px;
    }

    .r_c_mn_s {
      max-width: 700px;
      margin-left:  auto;
      margin-right: auto;
    }

      .r_c_mn_s > iframe {
        margin-left: auto;
        margin-right: auto;
      }

      .r_c_mn_s_sum {
        text-transform: uppercase;
        font-weight: 100
      }

      p.r_c_mn_s_sh {
        max-height: 22.4rem;
        overflow: hidden;
      }

      @media (min-width: 1024px) {
        p.r_c_mn_s_sh {
          max-height: 25.6rem;
          overflow: hidden;
        }
      }

    .r_c_mn_s-i {
      margin-top:    40px;
      margin-bottom: 40px;
    }

      .r_c_mn_s-i > p {
        font-size: 1.7rem;
        line-height: 1.6;
        font-weight: 500;
      }

      .r_c_mn_s-i:first-letter {
        font-size: 5rem;
        line-height: 1;
        margin-right: 5px;
        float: left;
      }

    .r_c_mn_s-c {
      max-width: 680px;
    }

    .r_c_mn_s-rl {
      text-transform: uppercase;
      font-weight: 100;
    }

      .r_c_mn_s-rl > p {
        margin-top:  40px;
      }

    .r_c_mn_s-r + .r_c_mn_s-r > .r_c_rf {
      margin-top: -20px; /* fix if there are more refs following each other  */
    }

    .r_c_mn_s-rl + .r_c_mn_s-r > .r_c_rf {
      margin-top: -10px; /* fix if there is lead text before */
    }

    .r_c_mn_s-r + .r_c_mn_s-rl > p {
      margin-top: -20px; /* fix if there is lead text after */
    }

    @supports (-webkit-backdrop-filter: blur(1px)) {
      /* prevent margin collapse if coming after floating element in safari only */
      .r_c_m[class*='utset'] + .r_c_mn_s, .r_c_m[class*='nset'] + .r_c_mn_s {
        padding-top: 1px;
      }
    }

    @media (min-width: 980px) {
      .r_c_mn_s {
        max-width: none;
        margin-left:  140px;
        margin-right: 140px;
      }

      .r_c_mn_s-c {
        margin-left:  150px;
        margin-right: 150px;
      }

      .r_c_cd .r_c_mn_s {
        margin-left:  auto;
        margin-right: auto;
      }
    }

    @media (min-width: 1080px) {
      .r_c_mn_s {
        max-width: 800px;
        margin-left:  auto;
        margin-right: auto;
      }
    }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT SECTION
 *
 */





/*------------------*\
   #CONTENT SECTION
\*------------------*/




  .r_c_sct {
    display: block; /* in case if it's an anchor */
    position: relative;
    z-index: 3;
    text-align: center;
    color: inherit;
    background-color: #f3f3f3;
    -webkit-transform: translate3d(0,0,0); /* fix ios bug related to the sticky header */
            transform: translate3d(0,0,0);
  }

  .dark .r_c_sct {
    background-color: #222;
  }

  .r_c_sct-img {
    z-index: 5; /* get above side menu */
    padding-top: 100px;
    overflow: hidden;
  }

    .r_c_sct-img:before {
      content: '';
      position: absolute;
      top:    0;
      right:  0;
      bottom: 0;
      left:   0;
      background: linear-gradient(to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 100%);
    }

    .r_c_sct_img {
      position: absolute;
      z-index: -1;
      top: -100px;
      right:  0;
      bottom: 0;
      left:   0;
      -webkit-transform: translate3d(0,0,0);
              transform: translate3d(0,0,0);
    }

    .r_c_sct_cll {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px 0 25px;
      border-top:    solid 1px rgba(130,130,130,.2);
      border-bottom: solid 1px rgba(130,130,130,.2);
    }

    .r_c_sct-img .r_c_sct_cll {
      border-top: solid 1px rgba(255,255,255,.2);
      border-bottom: none;
    }

      .r_c_sct_cll-n {
        counter-increment: section;
      }

      .r_c_sct_cll-n:before {
        content: counter(section);
        position: absolute;
        top: -10px;
        left: 50%;
        width:  20px;
        height: 20px;
        margin-left: -10px;
        line-height: 20px;
        background-color: #f3f3f3;
        color: #f70;
        box-shadow: 0 0 0 1px;
        text-align: center;
        border-radius: 50%;
        font-size: 1.2rem;
      }

      .dark .r_c_sct_cll-n:before {
        background-color: #333;
      }

      .r_c_sct_cll_app {
        width:  55px;
        height: 55px;
        margin: 0 auto 10px;
        border-radius: 20%;
        box-shadow: 0 0 0 1px rgba(130,130,130,.2);
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
      }

      .r_c_sct_cll_app-tv {
        width: 98px;
        border-radius: 3px
      }

      .r_c_sct_cll_app-oval {
        width: 80px;
        border-radius: 34.375%/50%;
      }

      h2.r_c_sct_cll_ttl {
        font-size: 2.8rem;
        font-weight: 900;
        line-height: 1.2;
      }

      .r_c_sct-img h2.r_c_sct_cll_ttl {
        color: #fff;
      }

      h5.r_c_sct_cll_sttl {
        font-weight: 300;
      }

      .r_c_sct-img h5.r_c_sct_cll_sttl {
        color: #fff;
      }

  @media (min-width: 1024px) {
    .r_c_sct {
      text-align: left;
    }

    .r_c_sct-img {
      padding-top: 200px;
    }

    .r_c_sct_cll-n:before {
      left: 20px;
      margin: 0;
    }

    .r_c_sct_cll_app {
      float: left;
      width:  75px;
      height: 75px;
      margin: 0 0 0 20px;
    }

    .r_c_sct_cll_app-tv {
      width: 133px;
    }

    .r_c_sct_cll_app-oval {
      width: 109px;
    }

    h2.r_c_sct_cll_ttl {
      font-size: 4rem;
    }
  }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  5) CONTENT STICK
 *
 */





/*----------------*\
   #CONTENT STICK
\*----------------*/




  .r_c_st {
    display: block;
    position: -webkit-sticky;
    position:         sticky;
    z-index: 2;
    top: 60px;
    margin: -45px 0 0 0;
    padding: 0 10px;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    line-height: 44px;
    background-color: rgba(250,250,250,1);
    box-shadow: 0 1px rgba(130,130,130,.2);
  }

  .dark .r_c_st {
    background-color: rgba(51,51,51,1);
  }

  .hide-nav .r_c_st {
    top: 0;
  }

  .app-nav .r_c_st {
    top: 20px;
  }

  .amp-nav .r_c_st {
    top: -54px;
    padding-right: 44px;
  }

  @media (min-width: 1240px) {
    .r_c_st {
      float: left;
      margin: -55px 0 0 0;
      font-size: 16px;
      border-radius: 0 0 3px 0;
      box-shadow: 0 2px 10px rgba(0,0,0,.1);
    }

    .amp-nav .r_c_st {
      padding-right: 10px;
    }
  }

  @supports (-webkit-backdrop-filter: blur(1px)) {
    .r_c_st {
      background-color: rgba(250,250,250,.9);
      -webkit-backdrop-filter: blur(20px)
    }

    .dark .r_c_st {
      background-color: rgba(51,51,51,.8);
    }
  }

  .r_c_st + .r_c_mn_sct {
    margin-top: 10px;
    clear: both;
  }

    .r_c_st--num:before {
      content: counter(section);
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -2px;
      height: 18px;
      margin-right:  3px;
      padding-right: 6px;
      font-size: 12px;
      line-height: 18px;
      box-shadow: 1px 0;
    }

    .r_c_st_app {
      display: inline-block;
      vertical-align: top;
      width:  24px;
      height: 24px;
      margin-top: 10px;
      border-radius: 20%;
      overflow: hidden;
    }

    .r_c_st_app-tv {
      width: 43px;
      border-radius: 2px;
    }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT REF
 *
 */





/*--------------*\
   #CONTENT REF
\*--------------*/




  .r_c_rf {
    position: relative;
    display: block;
    margin:  40px 0;
    padding: 10px 20px;
    overflow: hidden;
  }

    .r_c_rf_btn {
      position: absolute;
      z-index: 1;
      top:  50%;
      right: 0;
      margin-top: -20px;
      width:  30px;
      height: 40px;
    }

      .r_c_rf_btn:before, .r_c_rf_btn:after {
        content: '';
        position: absolute;
        left: 15px;
        width:   1px;
        height: 21px;
        background-color: rgba(130,130,130,.5);
      }

      .r_c_rf_btn:before {
        top: 0;
        -webkit-transform: rotate(-25deg);
                transform: rotate(-25deg);
      }

      .r_c_rf_btn:after {
        bottom: 0;
        -webkit-transform: rotate(25deg);
                transform: rotate(25deg);
      }

  .r_c_rf-rtcl {
    margin:  40px 10px 40px 0;
    padding: 0 30px 0 0;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 0 1px rgba(130,130,130,.5);
  }

  @media (min-width: 700px) {
    .r_c_rf-rtcl {
      margin:  40px 20px;
      border-radius: 3px;
    }
  }

  .r_c_cd .r_c_rf-rtcl {
    margin:  40px 10px 40px 0;
    padding: 0 30px 0 0;
    border-radius: 0 3px 3px 0;
  }

    .r_c_rf-rtcl_img {
      float: left;
      width:  120px;
      height: 80px;
      background-color: rgba(130,130,130,.2);
    }

    .r_c_rf-rtcl_ttl {
      font-family: 'Roboto Condensed', serif;
      overflow: hidden;
      max-height: 4.7rem;
      padding: 0 30px 0 20px;
      margin: 16px 0 0;
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.25;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .r_c_rf-rtcl_sttl {
      font-size: 1.4rem;
      padding: 0 20px;
      margin-top: 2px;
      color: #888;
    }

  .r_c_rf-app {
    position: relative;
    border-top:    dashed 2px rgba(130,130,130,.2);
    border-bottom: dashed 2px rgba(130,130,130,.2);
  }

  @media (min-width: 780px) {
    .r_c_rf-app {
      margin:  40px -40px;
      padding: 10px 60px;
    }
  }

    .r_c_rf-app_l {
      position: absolute;
      top:    0;
      right:  0;
      bottom: 0;
      left:   0;
    }

    a.r_c_rf-app_gt {
      position: relative;
      float: right;
      display: block;
      margin:  1rem 10px 1rem 0;
      padding: 0 10px;
      border-radius: 3px;
      font-size: 1.4rem;
      font-weight: 300;
      line-height: 4rem;
      text-align: center;
      text-transform: uppercase;
      color: #fff;
      background-color: #f70;
    }

      .r_c_rf-app_gt:before {
        float: right;
        margin-left: 5px;
        line-height: inherit;
      }

    .r_c_rf-app_img {
      float: left;
      width:  6rem;
      height: 6rem;
      border-radius: 20%;
      box-shadow: inset 0 0 1px rgba(0,0,0,.2);
      overflow: hidden;
    }

    .r_c_rf-app_img-tv {
      width: 9.8rem;
      border-radius: 5px;
    }

    .r_c_rf-app_ttl {
      padding: 0 10px;
      margin: 8px 0 0;
      font-size: 1.8rem;
      font-weight: 700;
    }

    .r_c_rf-app_au {
      padding: 0 10px;
      font-size: 1.4rem;
      font-weight: 300;
      color: #666;
    }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT QUOTE
 *
 */





/*----------------*\
   #CONTENT QUOTE
\*----------------*/




  .r_c_qt {
    position: relative;
    margin:  20px 0;
    padding: 0 2rem;
  }

  .r_c_qt-b {
    margin-left: 20px;
    overflow: hidden; /* prevent :before element to overlap with floating media element */
  }

    .r_c_qt:before {
      content: '"';
      position: absolute;
      top:  -3.5rem;
      left: -1rem;
      font-size: 10rem;
      font-style: italic;
      color: #f70;
    }

    .r_c_qt > a {
      display: block;
      font-weight: 300;
      font-style: italic;
      text-align: right;
    }

  .imageInsetLeft .r_c_qt {
    text-align: right;
  }

    .imageInsetLeft .r_c_qt > a {
      text-align: left;
    }

    .r_c_qt > h1, .r_c_qt > h2, .r_c_qt > h3, .r_c_qt > p {
      font-family: 'Roboto Condensed', serif;
      padding: 0;
      font-style: italic;
      color: rgba(130,130,130,1);
    }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT MEDIA
 *
 */





/*----------------*\
   #CONTENT MEDIA
\*----------------*/




  .r_c_m {
    position: relative;
    margin: 20px 0;
    clear: both;
  }

  .r_c_sct + .r_c_m {
    margin-bottom: 0;
  }

    .r_c_m h1, .r_c_m h2, .r_c_m h3, .r_c_m h4, .r_c_m h5, .r_c_m h6 {
      text-align: left;
    }

    .r_c_m_s {
      position: relative;
    }

    .portrait > .r_c_m_s {
      width: 50%;
      margin: 0 auto;
    }

      h3.r_c_m_ttl {
        margin-bottom: 10px;
        padding: 0;
        font-weight: 300;
        font-size: 2.2rem;
      }

      .r_c_m[class*='utset'] > .r_c_m_s > .r_c_m_ttl {
        padding: 0 10px;
      }

      @media (min-width: 1024px) {
        .r_c_cd h3.r_c_m_ttl {
          font-size: 2.8rem;
        }

        .r_c_m[class*='utset'] > .r_c_m_s > .r_c_m_ttl {
          padding: 0;
        }
      }

      p.r_c_m_d {
        margin-top: 10px;
        padding: 0;
      }

      .r_c_m_i {
        font-size: 0; /* prevent space between inline-block */
        box-shadow: 0 0 1px rgba(0,0,0,.5);
        overflow: hidden;
      }

        .r_c_m_i_w {
          display: inline-block;
          width: 100%;
        }

        .r_c_m_i > .r_c_m_i_w:nth-child(2) {
          position: relative;
          box-shadow: 0 0 0 1px rgba(255,255,255,1);
        }

        .r_c_m_i-2 > .r_c_m_i_w,
        .r_c_m_i-4 > .r_c_m_i_w {
          width: 50%;
        }

        .r_c_m_i-3 > .r_c_m_i_w {
          width: 33.33337%;
        }

      .r_c_m_v {
        position: relative;
      }

        .r_c_m_v_w {
          position: relative;
        }

          .r_c_m_v_w > img, .r_c_m_v_w > video {
            position: absolute;
            top:  0;
            left: 0;
            width:  100%;
            height: 100%;
          }

        .r_c_m_v_o {
          position: absolute;
          top:    0;
          right:  0;
          bottom: 0;
          left:   0;
          cursor: pointer;
        }

        .r_c_m_v_i {
          position: absolute;
          top:  5px;
          left: 5px;
          font-size: 1.4rem;
          color: #fff;
          text-shadow: 1px 1px rgba(0,0,0,.3);
          pointer-events: none;
        }

          .r_c_m_v_i:before {
            position: absolute;
            top:  3px;
            left: 0;
            padding-left: 4px;
            opacity: 0;
          }

          .load > .r_c_m_v_i:before {
            opacity: 1;
            animation: aa_spin .5s infinite reverse linear;
          }

          .playing > .r_c_m_v_i:before {
            display: none;
          }

          .error > .r_c_m_v_i:before {
            opacity: 1;
            animation: none;
          }

          .r_c_m_v_i:after {
            margin-left: 23px;
          }

          .load > .r_c_m_v_i:after {
            content: 'loading...';
          }

          .playing > .r_c_m_v_i:after {
            display: none;
          }

          .error > .r_c_m_v_i:after {
            content: 'ERROR LOADING MEDIA';
          }

  .r_c_m[class*='nset'] {
    max-width: 700px;
    margin: 20px auto;
    box-sizing: border-box;
  }

  .r_c_m[class*='utset'] {
    max-width: 1024px;
    margin: 20px auto;
  }

  .r_c_m[class*='imageFullBleed'] {
    position: relative;
    z-index: 5; /* get above side nav */
  }

  @media (min-width: 980px) {
    .r_c_m[class*='nset'] {
      max-width: none;
      margin-left:  140px;
      margin-right: 140px;
    }
  }

  @media (min-width: 1080px) {
    .r_c_m[class*='nset'] {
      max-width: 800px;
      margin-left:  auto;
      margin-right: auto;
    }
  }

  @media (min-width: 1424px) {
    .r_c_m[class*='utset'] {
      margin: 0 100px;
      max-width: none;
    }
  }

  @media (min-width: 1640px) {
    .r_c_m[class*='utset'] {
      margin: 0 auto;
      max-width: 1240px;
    }
  }

    .r_c_m[class*='nset'] > .r_c_m_s {
      width: auto;
      margin: 5px 20px 20px;
    }

      .r_c_m[class*='nset'] > .r_c_m_s > .r_c_m_i {
        border-radius: 3px;
        transform: translate3d(0,0,0); /* border radius to work */
      }

    .r_c_m[class*='nsetLeft'].portrait > .r_c_m_s {
      float: left;
    }

    .r_c_m[class*='nsetRight'].portrait > .r_c_m_s {
      float: right;
    }

    .r_c_m[class*='nsetLeft'].portrait > .r_c_m_s,
    .r_c_m[class*='nsetRight'].portrait > .r_c_m_s {
      width: 40%;
    }

    .r_c_m[class*='nsetCenter'].portrait > .r_c_m_s {
      width: 50%;
      margin: 5px auto 20px;
    }

    @media (min-width: 700px) {
      .r_c_m[class*='nsetLeft'] > .r_c_m_s {
        width: 60%;
        margin: 5px 40px 20px 20px;
        float: left;
      }

      .r_c_m[class*='nsetRight'] > .r_c_m_s {
        width: 60%;
        margin: 5px 20px 20px 40px;
        float: right;
      }

      .r_c_m[class*='nsetLeft'].square > .r_c_m_s,
      .r_c_m[class*='nsetRight'].square > .r_c_m_s {
        width: 45%;
      }

      .r_c_m[class*='nsetLeft'].portrait > .r_c_m_s,
      .r_c_m[class*='nsetRight'].portrait > .r_c_m_s {
        width: 30%;
      }

      .r_c_m[class*='nsetCenter'].portrait > .r_c_m_s {
        width: 40%;
      }
    }

    .r_c_m[class*='utset'] > .r_c_m_s {
      width: auto;
      margin: 5px 0 20px;
    }

    .r_c_m[class*='utsetLeft'].portrait > .r_c_m_s {
      width: 40%;
      margin: 5px 20px 20px 0;
      float: left;
    }

    .r_c_m[class*='utsetRight'].portrait > .r_c_m_s {
      width: 40%;
      margin: 5px 0 20px 20px;
      float: right;
    }

    .r_c_m[class*='utsetCenter'].portrait > .r_c_m_s {
      width: 50%;
      margin: 5px auto 20px;
    }

      .r_c_m[class*='utsetLeft'].portrait > .r_c_m_s > .r_c_m_i {
        border-radius: 0 3px 3px 0;
        transform: translate3d(0,0,0); /* border radius to work */
      }

      .r_c_m[class*='utsetRight'].portrait > .r_c_m_s > .r_c_m_i {
        border-radius: 3px 0 0 3px;
        transform: translate3d(0,0,0); /* border radius to work */
      }

      .r_c_m[class*='utsetCenter'].portrait > .r_c_m_s > .r_c_m_i {
        border-radius: 3px;
        transform: translate3d(0,0,0); /* border radius to work */
      }

    @media (min-width: 700px) {
      .r_c_m[class*='utsetLeft'] > .r_c_m_s {
        width: 45%;
        margin: 5px 40px 20px 0;
        float: left;
      }

      .r_c_m[class*='utsetRight'] > .r_c_m_s {
        margin: 5px 0 20px 40px;
        width: 45%;
        float: right;
      }

      .r_c_m[class*='utsetLeft'].square > .r_c_m_s,
      .r_c_m[class*='utsetRight'].square > .r_c_m_s {
        width: 36%;
      }

      .r_c_m[class*='utsetLeft'].portrait > .r_c_m_s,
      .r_c_m[class*='utsetRight'].portrait > .r_c_m_s {
        width: 27%;
      }

      .r_c_m[class*='utsetCenter'].portrait > .r_c_m_s {
        width: 27%;
        margin: 5px auto 20px;
      }

        .r_c_m[class*='utsetLeft'] > .r_c_m_s > .r_c_m_i {
          border-radius: 0 3px 3px 0;
          transform: translate3d(0,0,0); /* border radius to work */
        }

        .r_c_m[class*='utsetRight'] > .r_c_m_s > .r_c_m_i {
          border-radius: 3px 0 0 3px;
          transform: translate3d(0,0,0); /* border radius to work */
        }
    }

    @media (min-width: 1024px) {
      .r_c_m[class*='utset'] > .r_c_m_s,
      .r_c_m[class*='utset'].portrait > .r_c_m_s {
        margin: 5px 40px 20px;
      }

      .r_c_m[class*='utset'] > .r_c_m_s > .r_c_m_i,
      .r_c_m[class*='utset'].portrait > .r_c_m_s > .r_c_m_i{
        border-radius: 3px;
      }

      .r_c_m[class*='utsetCenter'].portrait > .r_c_m_s {
        margin: 5px auto 20px;
      }
    }

      .r_c_m[class*='imageFullBleed'] > .r_c_m_s {
        width: auto;
      }

      .r_c_m[class*='imageFullBleed'] .r_c_m_i {
        position: relative;
        padding-bottom: 45%;
        overflow: hidden;
      }

        .r_c_m[class*='imageFullBleed'] .r_c_m_i > img,
        .r_c_m[class*='imageFullBleed'] .r_c_m_i > amp-img {
          position: absolute;
        }

        .r_c_m.imageFullBleedTop .r_c_m_i > img,
        .r_c_m.imageFullBleedTop .r_c_m_i > amp-img {
          top: 0;
        }

        .r_c_m.imageFullBleedMiddle .r_c_m_i > img,
        .r_c_m.imageFullBleedMiddle .r_c_m_i > amp-img {
          top: 50%;
          -webkit-transform: translate3d(0,-50%,0);
                  transform: translate3d(0,-50%,0);
        }

        .r_c_m.imageFullBleedBottom .r_c_m_i > img,
        .r_c_m.imageFullBleedBottom .r_c_m_i > amp-img {
          bottom: 0;
        }

      .r_c_m_cap {
        position: relative;
        padding: 2px 10px;
        font-style: italic;
        font-weight: 300;
        font-size: 1.4rem;
      }

      @media (min-width: 980px) {
        .r_c_m[class*='nsetLeft'] > .r_c_m_s > .r_c_m_cap {
          position: absolute;
          top: 3px;
          left: -150px;
          width: 130px;
          margin: 0;
          border-radius: 3px 0 0 3px;
        }

        .r_c_m[class*='nsetRight'] > .r_c_m_s > .r_c_m_cap {
          position: absolute;
          top: 3px;
          right: -150px;
          width: 130px;
          margin: 0;
          border-radius: 0 3px 3px 0;
        }
      }

      @media (min-width: 1240px) {
        .r_c_m[class*='imageFullBleed'] .r_c_m_cap {
          margin: 0 100px;
        }
      }

        a.r_c_m_rf {
          text-decoration: underline;
        }

        .r_c_m_cap > i {
          margin: 2px 10px -2px 0;
          float: left;
          color: #f70;
        }

        .r_c_m_cap > p {
          margin:  0;
          padding: 0;
          font-size: inherit;
        }



  /* force portrait media to float in cards and galleries */
  .r_c_cd > .r_c_m-f.portrait > .r_c_m_s,
  .r_c_cd > .r_c_m.portrait:first-child > .r_c_m_s,
  .r_c_cd_s_s > .r_c_m-f.portrait > .r_c_m_s,
  .r_gl_e-ppl > .r_c_m-f.portrait > .r_c_m_s {
    width: auto;
  }

    .r_c_cd > .r_c_m-f.portrait > .r_c_m_s:after,
    .r_c_cd > .r_c_m.portrait:first-child > .r_c_m_s:after,
    .r_c_cd_s_s > .r_c_m-f.portrait > .r_c_m_s:after,
    .r_gl_e-ppl > .r_c_m-f.portrait > .r_c_m_s:after {
      content: '';
      display: table;
      clear: both;
    }

    .r_c_cd > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_ttl,
    .r_c_cd_s_s > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_ttl,
    .r_gl_e-ppl > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_ttl {
      width: 50%;
      padding-right: 10px;
      float: left;
      overflow: hidden;
      box-sizing: border-box;
    }

    .r_c_cd > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_i,
    .r_c_cd_s_s > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_i,
    .r_gl_e-ppl > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_i {
      width: 50%;
      float: right;
    }

    @media (min-width: 1060px) {
      .r_c_cd > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_ttl,
      .r_c_cd_s_s > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_ttl,
      .r_gl_e-ppl > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_ttl {
        width: 60%;
      }

      .r_c_cd > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_i,
      .r_c_cd_s_s > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_i,
      .r_gl_e-ppl > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_i {
        width: 40%;
      }
    }

    .r_c_cd > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_cap,
    .r_c_cd_s_s > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_cap,
    .r_gl_e-ppl > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_cap {
      float: right;
      clear: right;
      width: 40%;
      box-sizing: border-box;
    }

    .r_c_cd > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_d,
    .r_c_cd_s_s > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_d,
    .r_gl_e-ppl > .r_c_m-f.portrait > .r_c_m_s > .r_c_m_d {
      padding-right: 10px;
      clear: left;
      overflow: hidden;
    }

    .r_c_cd > .r_c_m.portrait:first-child > .r_c_m_s > .r_c_m_i {
      width: 40%;
      margin: 0 auto;
    }

    .r_c_cd > .r_c_m.portrait:first-child > .r_c_m_s > .r_c_m_ttl,
    .r_c_cd > .r_c_m.portrait:first-child > .r_c_m_s > .r_c_m_cap,
    .r_c_cd > .r_c_m.portrait:first-child > .r_c_m_s > .r_c_m_d {
      display: none;
    }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT MEDIA
 *
 */





/*----------------*\
   #CONTENT MEDIA
\*----------------*/




  .r_c_m {
    position: relative;
    margin: 20px 0;
    clear: both;
  }

  .r_c_sct + .r_c_m {
    margin-bottom: 0;
  }

    .r_c_m h1, .r_c_m h2, .r_c_m h3, .r_c_m h4, .r_c_m h5, .r_c_m h6 {
      text-align: left;
    }

    .r_c_m_s {
      position: relative;
    }

    .portrait > .r_c_m_s {
      width: 50%;
      margin: 0 auto;
    }

      h3.r_c_m_ttl {
        margin-bottom: 10px;
        padding: 0;
        font-weight: 300;
        font-size: 2.2rem;
      }

      @media (min-width: 1024px) {
        .r_c_cd h3.r_c_m_ttl {
          font-size: 2.8rem;
        }
      }

      p.r_c_m_d {
        margin-top: 10px;
        padding: 0;
      }

      .r_c_m_i {
        font-size: 0; /* prevent space between inline-block */
        box-shadow: 0 0 1px rgba(0,0,0,.5);
        overflow: hidden;
      }

      .r_c_m_v {
        position: relative;
      }

        .r_c_m_v_w {
          position: relative;
        }

          .r_c_m_v_w > img, .r_c_m_v_w > video {
            position: absolute;
            top:  0;
            left: 0;
            width:  100%;
            height: 100%;
          }

        .r_c_m_v_o {
          position: absolute;
          top:    0;
          right:  0;
          bottom: 0;
          left:   0;
          cursor: pointer;
        }

        .r_c_m_v_i {
          position: absolute;
          top:  5px;
          left: 5px;
          font-size: 1.4rem;
          color: #fff;
          text-shadow: 1px 1px rgba(0,0,0,.3);
          pointer-events: none;
        }

          .r_c_m_v_i:before {
            position: absolute;
            top:  3px;
            left: 0;
            padding-left: 4px;
            opacity: 0;
          }

          .load > .r_c_m_v_i:before {
            opacity: 1;
            animation: aa_spin .5s infinite reverse linear;
          }

          .playing > .r_c_m_v_i:before {
            display: none;
          }

          .error > .r_c_m_v_i:before {
            opacity: 1;
            animation: none;
          }

          .r_c_m_v_i:after {
            margin-left: 23px;
          }

          .load > .r_c_m_v_i:after {
            content: 'loading...';
          }

          .playing > .r_c_m_v_i:after {
            display: none;
          }

          .error > .r_c_m_v_i:after {
            content: 'ERROR LOADING MEDIA';
          }

  .r_c_m[class*='nset'] {
    max-width: 700px;
    margin: 20px auto;
    box-sizing: border-box;
  }

  @media (min-width: 980px) {
    .r_c_m[class*='nset'] {
      max-width: none;
      margin-left:  140px;
      margin-right: 140px;
    }
  }

  @media (min-width: 1080px) {
    .r_c_m[class*='nset'] {
      max-width: 800px;
      margin-left:  auto;
      margin-right: auto;
    }
  }

    .r_c_m[class*='nset'] > .r_c_m_s {
      width: auto;
      margin: 5px 20px 20px;
    }

      .r_c_m[class*='nset'] > .r_c_m_s > .r_c_m_i {
        border-radius: 3px;
        transform: translate3d(0,0,0); /* border radius to work */
      }

    .r_c_m[class*='nsetLeft'].portrait > .r_c_m_s {
      float: left;
    }

    .r_c_m[class*='nsetRight'].portrait > .r_c_m_s {
      float: right;
    }

    .r_c_m[class*='nsetLeft'].portrait > .r_c_m_s,
    .r_c_m[class*='nsetRight'].portrait > .r_c_m_s {
      width: 40%;
    }

    .r_c_m[class*='nsetCenter'].portrait > .r_c_m_s {
      width: 50%;
      margin: 5px auto 20px;
    }

    @media (min-width: 700px) {
      .r_c_m[class*='nsetLeft'] > .r_c_m_s {
        width: 60%;
        margin: 5px 40px 20px 20px;
        float: left;
      }

      .r_c_m[class*='nsetRight'] > .r_c_m_s {
        width: 60%;
        margin: 5px 20px 20px 40px;
        float: right;
      }

      .r_c_m[class*='nsetLeft'].square > .r_c_m_s,
      .r_c_m[class*='nsetRight'].square > .r_c_m_s {
        width: 45%;
      }

      .r_c_m[class*='nsetLeft'].portrait > .r_c_m_s,
      .r_c_m[class*='nsetRight'].portrait > .r_c_m_s {
        width: 30%;
      }

      .r_c_m[class*='nsetCenter'].portrait > .r_c_m_s {
        width: 40%;
      }
    }

      .r_c_m_cap {
        position: relative;
        padding: 2px 10px;
        font-style: italic;
        font-weight: 300;
        font-size: 1.4rem;
      }

      @media (min-width: 980px) {
        .r_c_m[class*='nsetLeft'] > .r_c_m_s > .r_c_m_cap {
          position: absolute;
          top: 3px;
          left: -150px;
          width: 130px;
          margin: 0;
          border-radius: 3px 0 0 3px;
        }

        .r_c_m[class*='nsetRight'] > .r_c_m_s > .r_c_m_cap {
          position: absolute;
          top: 3px;
          right: -150px;
          width: 130px;
          margin: 0;
          border-radius: 0 3px 3px 0;
        }
      }

      @media (min-width: 1240px) {
        .r_c_m[class*='imageFullBleed'] .r_c_m_cap {
          margin: 0 100px;
        }
      }

        a.r_c_m_rf {
          text-decoration: underline;
        }

        .r_c_m_cap > i {
          margin: 2px 10px -2px 0;
          float: left;
          color: #f70;
        }

        .r_c_m_cap > p {
          margin:  0;
          padding: 0;
          font-size: inherit;
        }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT ASIDE
 *
 */





/*----------------*\
   #CONTENT ASIDE
\*----------------*/




  .r_c_asd {
    margin:  20px 0;
    padding: 0 20px;
    background-color: rgba(130,130,130,.1);
    border: solid 2px rgba(130,130,130,.2);
  }



  .r_c_nt {
    margin: 20px 0;
    border: solid 2px #FBD1A2;
    background-color: #F8E6D3;
    color: #74614b;
  }

  .dark .r_c_nt {
    border: solid 2px #c4a37e;
    background-color: #796d5d;
    color: #e4d0b1
  }



  .r_c_ntc {
    margin: 20px 0;
    border: solid 2px #FB9966;
    color: #FB9966;
    text-transform: uppercase;
  }



  .r_c_hlght {
    margin: 20px 0;
    color: #f70
  }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT CARD
 *
 */





/*---------------*\
   #CONTENT CARD
\*---------------*/




  .r_c_cd {
    margin: 20px 10px;
    background-color: rgba(130,130,130,.1);
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(130,130,130,.1);
    overflow: hidden;
    transform: translate3d(0,0,0); /* overflow hidden to work properly */
  }

  .r_c_cd h1, .r_c_cd h2, .r_c_cd h3, .r_c_cd h4, .r_c_cd h5 {
    font-weight: 300;
  }

  .r_c_cd.nomargin {
    border-radius: 0;
  }

    .r_c_cd_ttl {
      padding: 15px 0;
      background-color: rgba(130,130,130,.1);
    }

    .r_c_cd > .r_dvdr:nth-last-child(2) {
      display: none; /* don't show it if there is no content. The last child is a button */
    }

  @media (min-width: 1025px) {
    .r_c_cd {
      max-width: 760px;
      margin: 20px auto;
    }
  }

    .r_c_cd p {
      font-size: 1.5rem;
    }

    @media (min-width: 1024px) {
      .r_c_cd p {
        font-size: 1.7rem;
      }
    }

    .r_c_cd > .r_c_m {
      margin: 20px;
    }

    .r_c_cd > .r_c_m:first-child {
      margin: 0;
      background-color: rgba(130,130,130,.1);
    }

    @media (min-width: 1024px) {
      .r_c_cd > .r_c_m.portrait:first-child {
        float: left;
        width: 33%;
      }

      .r_c_cd > .r_c_m.portrait:first-child > .r_c_m_s > .r_c_m_i  {
        width: 100%;
      }

      .r_c_cd > .r_c_m.portrait:first-child ~ .r_c_cd_ttl,
      .r_c_cd > .r_c_m.portrait:first-child ~ .r_c_cd_s {
        overflow: hidden;
      }
    }

    .r_c_cd-app > .r_c_m:first-child {
      float: none;
      width: 100%;
    }

    .r_c_cd-app > .r_c_m:first-child .r_c_m_ttl,
    .r_c_cd-app > .r_c_m:first-child .r_c_m_cap,
    .r_c_cd-app > .r_c_m:first-child .r_c_m_d {
      display: none;
    }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT CARD APP
 *
 */





/*-------------------*\
   #CONTENT CARD APP
\*-------------------*/




    .r_c_cd_a {
      position: relative;
      display: block;
      padding-top: 20px;
      max-width: 800px;
      margin: 0 auto;
      clear: both;
      background-color: rgba(130,130,130,.1);
    }

    .dark .r_c_cd_a {
      background-color: rgba(66,66,66,1);
    }

    .r_c_m + .r_c_cd_a {
      padding-top: 0;
    }

    @supports (-webkit-backdrop-filter: blur(1px)) {
      .r_c_m + .r_c_cd_a {
        margin-top: -99px;
        background-color: rgba(228, 228, 228, .75);
        -webkit-backdrop-filter: blur(20px);
        transform: translate3d(0,0,0); /* prevent artifacts */
      }

      .dark .r_c_cd_a {
        background-color: rgba(66,66,66,.75);
      }
    }

      .r_c_appr {
        overflow: hidden;
        padding: 0 30px 0 10px;
        font-size: 1.4rem;
        margin-top: 7px;
        color: rgba(130,130,130,.5);
      }

      .r_c_cd_a_img {
        position: relative;
        float: left;
        width:  100px;
        height: 100px;
        margin: 0 5px 20px 20px;
        border-radius: 20%;
        box-shadow: inset 0 0 1px rgba(0,0,0,.2);
        overflow: hidden;
      }

      .r_c_cd_a_img-tv {
        width: 163px;
        border-radius: 8px;
      }

      .r_c_m + .r_c_cd_a > .r_c_cd_a_img {
        margin-top: -20px;
      }

      .r_c_cd_a_ttl {
        overflow: hidden;
        padding: 0 30px 0 10px;
        margin: 13px 0 0;
        font-size: 1.8rem;
        font-weight: 700;
      }

      .r_c_m + .r_c_cd_a > .r_c_cd_a_ttl {
        margin-top: 10px;
      }

      .r_c_cd_a_au {
        overflow: hidden;
        padding: 0 30px 0 10px;
        font-size: 1.4rem;
        font-weight: 300;
        color: rgba(130,130,130,1);
      }



    .r_c_cd_btn {
      display: block;
      margin: 20px 0 0;
      padding: 0 10px;
      font-size: 1.6rem;
      line-height: 50px;
      box-shadow: 0 -21px 0 -20px rgba(130,130,130,.2);
    }

    .r_c_cd_a  + .r_c_cd_btn {
      display: none; /* don't show if it comes after the app which means there is no content in the card */
    }

      .r_c_cd_btn_img {
        display: inline-block;
        vertical-align: middle;
        width:  30px;
        height: 30px;
        margin: -1px 5px 0;
        border-radius: 20%;
        overflow: hidden;
      }

      .r_c_cd_btn_img-tv {
        width: 49px;
        border-radius: 3px;
      }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT CARD STEPS
 *
 */





/*---------------------*\
   #CONTENT CARD STEPS
\*---------------------*/




    .r_c_cd_s {
      padding: 20px 0 0;
      counter-reset: stepsection;
    }

      .r_c_cd_s_s {
        margin-left: 20px;
        padding: 1px 0;
        border-left: dotted 1px #f70;
      }

        .r_c_cd_s_s:last-child {
          position: relative;
          margin-bottom: 10px;
        }

          .r_c_cd_s_s:last-child:after {
            content: '';
            position: absolute;
            bottom: 0;
            left:  -3px;
            width:  5px;
            height: 5px;
            border-radius: 50%;
            background-color: #f70;
          }

        .r_c_cd_s_s > .r_c_m {
          margin: 20px;
        }

      .r_c_cd_s_s-m {
        position: relative;
        border-left: solid 1px #f70;
        clear: both;
        counter-increment: stepsection;
      }

      .r_c_cd_s_s-m + .r_c_cd_s_s-m {
        padding-top: 25px;
      }

      .r_c_cd_s_s-m:last-child {
        padding-bottom: 25px;
      }

      .r_c_cd_s_s-m ~ .r_c_cd_s_s {
        border-left: solid 1px #f70;
      }

        .r_c_cd_s_s-m_m {
          margin: 0 -1px 0 0; /* prevent artifacts on video */
        }

          .r_c_cd_s_s-m_m > .r_c_m {
            margin: 0;
          }

        .r_c_cd_s_s-m_n {
          position: relative;
          z-index: 1;
        }

          .r_c_cd_s_s-m_n > h4 {
            color: #f70;
            line-height: .9;
          }

          .r_c_cd_s_s-m_n:before {
            content: counter(stepsection);
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 0;
            margin-top: -8px;
            padding: 0 5px;
            border-radius: 9px;
            background-color: #e7e7e7;
            color: #f70;
            box-shadow: 0 0 0 2px #e7e7e7, 0 0 0 4px;
            font-size: 12px;
            line-height: 16px;
            -webkit-transform: translate3d(-50%,0,0);
                    transform: translate3d(-50%,0,0);
          }

          .dark .r_c_cd_s_s-m_n:before {
            background-color: #2d2d2d;
            box-shadow: 0 0 0 2px #2d2d2d, 0 0 0 4px;
          }

        .r_c_cd_s_s-m_m + .r_c_cd_s_s-m_n {
          position: absolute;
          top:  0;
          left: 0;
          padding: 10px 0;
          background-color: #e7e7e7;
          border-radius: 0 0 5px 0;
        }

        .dark .r_c_cd_s_s-m_m + .r_c_cd_s_s-m_n {
          background-color: #2d2d2d;
        }

          .r_c_cd_s_s-m_m + .r_c_cd_s_s-m_n > h5 {
            color: #fff
          }

            .r_c_cd_s_s-m_m + .r_c_cd_s_s-m_n > h5:after {
              content: '';
              position: absolute;
              z-index: -1;
              top:    0;
              right:  5px;
              bottom: 0;
              left:   0;
              display: block;
              background-color: #f70;
              border-radius: 0 3px 3px 0;
            }

      .r_c_cd_s_s-b,
      .r_c_cd_s_s-m ~ .r_c_cd_s_s-b {
        border-left: dashed 1px #f70;
      }

        .r_c_cd_s_s-b > .r_c_mn_s > .r_c_nt {
          margin-left: -21px;
          border-left:  none;
          border-right: none;
        }

        .r_c_cd_s_s-b > .r_c_mn_s > p {
          margin-left: -21px;
          padding-top:    20px;
          padding-bottom: 20px;
          border-top:    solid 3px rgba(130,130,130,.2);
          border-bottom: solid 3px rgba(130,130,130,.2);
          background-color: #f3f3f3;
          color: rgba(130,130,130,1)
        }

        .dark .r_c_cd_s_s-b > .r_c_mn_s > p {
          background-color: #333;
        }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT RATE
 *
 */





/*---------------*\
   #CONTENT RATE
\*---------------*/




  .r_c_rt {
    margin:  20px;
    padding: 20px;
    border-radius: 3px;
  }

  .r_c_cd .r_c_rt {
    padding: 0;
  }

    .r_c_rt > h5 {
      margin: -20px -10px 20px;
      padding: 5px 0;
      border-bottom: solid 1px rgba(130,130,130,.2);
    }

    .r_c_cd .r_c_rt > h5 {
      margin: 0 0 20px;
    }

    .r_c_rt_t {
      width: 100px;
      float: left;
      text-align: center;
    }

      .r_c_rt_t_a {
        font-size: 46px;
      }

      .r_c_rt_t_c {
        padding-top: 5px;
        font-size: 14px;
        color: #888;
        border-top: solid 1px rgba(130,130,130,.2);
      }

    .r_c_rt_ds {
      padding-left: 10px;
      overflow: hidden;
    }

      .r_c_rt_d {
        font-size: 0;
        margin-bottom: 10px;
      }

      .r_c_rt_d:last-child {
        margin-bottom: 0;
      }

        .r_c_rt_d_n {
          font-size: 1.4rem;
          color: #666;
        }

          .r_c_rt_d_m {
            display: inline-block;
            box-sizing: border-box;
            width:  20%;
            height: 3px;
            padding-right: 3px;
          }

            .r_c_rt_d_m:before {
              content: '';
              display: block;
              height: 100%;
              background-color: #f70;
            }

            .r_c_rt_d_m:nth-child(1):before {opacity: .2}
            .r_c_rt_d_m:nth-child(2):before {opacity: .4}
            .r_c_rt_d_m:nth-child(3):before {opacity: .6}
            .r_c_rt_d_m:nth-child(4):before {opacity: .8}
            .r_c_rt_d_m:nth-child(5):before {opacity: 1}
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT DATA LIST
 *
 */





/*--------------------*\
   #CONTENT DATA LIST
\*--------------------*/




  .r_c_dl {
    margin: 20px;
    border-radius: 3px;
    overflow: hidden;
    border: solid 1px rgba(130,130,130,.2);
  }

    .r_c_dl > h5 {
      margin:  0 10px;
      padding: 5px 0;
      border-bottom: solid 1px rgba(130,130,130,.2);
    }

    .r_c_dl a {
      text-decoration: underline;
    }

    .r_c_dl_r {
      font-size: 0;
      padding: 3px 10px;
    }

    .r_c_dl_r:nth-of-type(2n) {
      background-color: rgba(130,130,130,.1);
    }

      .r_c_dl_c {
        display: inline-block;
        vertical-align: bottom;
        width: 50%;
        font-size: 1.4rem;
      }

      .r_c_dl_c:first-child {
        vertical-align: top;
        font-weight: 700;
      }

        .r_c_dl_c:first-child:after {
          content: ':';
          float: right;
          margin-right: 10px;
        }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT COMPARISON
 *
 */





/*---------------------*\
   #CONTENT COMPARISON
\*---------------------*/




  .r_c_cmp {
    position: relative;
    margin:  40px 20px 20px;
    font-size: 0; /* prevent spaces between inline-blocks */
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(130,130,130,.2);
  }

    .r_c_cmp_s {
      display: inline-block;
      vertical-align: top;
      width: 100%;
      padding: 20px;
      font-size: 1.6rem;
      background-color: rgba(85,198,45,.1);
    }

    .r_c_cmp_s:last-child {
      background-color: rgba(198,87,42,.1);
    }

    @media (min-width: 768px) {
      .r_c_cmp_s, .r_c_cmp_s:last-child {
        width: 50%;
        background-color: transparent;
      }

      .r_c_cmp_s:before, .r_c_cmp_s:after {
        content: '';
        position: absolute;
        z-index: -1;
        top:    0;
        bottom: 0;
        width: 50%;
      }

      .r_c_cmp_s:before {
        left: 0;
        background-color: rgba(85,198,45,.1);
      }

      .r_c_cmp_s:after {
        right: 0;
        background-color: rgba(198,87,42,.1);
      }
    }

      h4.r_c_cmp_s_ttl {
        margin:  0 0 20px;
        padding: 0;
        font-size: 2rem;
      }

        .r_c_cmp_s_ttl:before {
          margin-right: 10px;
          color: #55c62d;
        }

        .r_c_cmp_s:last-child > .r_c_cmp_s_ttl:before {
          color: #c6572a
        }

        .r_c_cmp_s_c > ul {
          margin: 0;
        }

        .r_c_cmp_s_c > ul > li:before {
          box-shadow: inset 0 0 0 3px #55c62d;
        }

        .r_c_cmp_s:last-child > .r_c_cmp_s_c > ul > li:before {
          box-shadow: inset 0 0 0 3px #c6572a;
        }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT BTN
 *
 */





/*--------------*\
   #CONTENT BTN
\*--------------*/




  .r_c_btn {
    display: block;
    margin: 20px;
    padding: 10px;
    text-align: center;
    overflow: hidden;
    border-radius: 3px;
    border: solid 1px rgba(130,130,130,.4);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .r_c_btn:hover, .r_c_btn:focus {
    background-color: #f70;
    color: #f3f3f3;
    box-shadow: 0 4px 3px rgba(0,0,0,.3);
    -webkit-transform: translate3d(0,-3px,0);
            transform: translate3d(0,-3px,0);
  }



  a.r_c_lnk {
    display: inline-block;
    background-color: #70f;
    padding: 10px 15px;
    margin: 0 20px 20px;
    font-weight: 300;
    text-align: center;
    color: #fff;
    transition: .3s;
  }

  a.r_c_lnk.aa_hidden {
    display: none;
  }

  .r_c_lnk:hover {
    background-color: #fff;
    color: #70f;
    box-shadow: 0 5px 10px -3px rgba(0,0,0,.25);
  }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) CONTENT PRODUCT
 *
 */





/*------------------*\
   #CONTENT PRODUCT
\*------------------*/




.r_c_pr {
  margin: 20px;
}

p + .r_c_pr {
  margin-top: 0;
}

  .r_c_pr_cd {
    position: relative;
    border-radius: 3px;
    box-shadow: 0 8px 15px -5px rgba(0,0,0,.2);
    font-size: 0;
    color: #222;
    background-color: #fff;
    overflow: hidden;
  }

    .r_c_pr_cd_ttl {
      padding: 0 12px;
      font-size: 1.8rem;
      line-height: 42px;
    }

    .r_c_pr-s .r_c_pr_cd_ttl {
      line-height: 1.1;
    }

    .r_c_pr_cd_img {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      max-width: 280px;
    }

    .r_c_pr-s .r_c_pr_cd_img {
      width: 40%;
      padding: 7px;
    }

    .r_c_pr_cd_pt {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      padding: 35px 0;
      box-shadow: 0 -21px 0 -20px rgba(130,130,130,.35);
    }

    .r_c_pr-s .r_c_pr_cd_img + .r_c_pr_cd_pt {
      width: 60%;
      box-shadow: -1px 0 0 rgba(130,130,130,.2);
    }

      .r_c_pr_cd_pt_l {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 300;
        overflow: hidden;
      }

          .r_c .r_c_pr_cd_pt_l > li:before {
            content: "";
            width:  12px;
            height: 12px;
            margin-top: 3px;
            font-size: 8px;
            font-weight: 400;
            line-height: 16px;
            text-align: center;
            box-shadow: inset 0 0 0 1px rgba(130,130,130,.35);
            background-color: #BAFF7C;
          }

          .r_c .r_c_pr_cd_pt_l--yellow > li:before {
            background-color: #FFFF7D;
          }

  .r_c_pr_cd_cp {
    width: 60%;
    margin: -4rem 0 0 auto;
    padding: 10px 10px 10px 0;
    color: #828282;
  }

  .r_c_pr_gt {
    display: block;
    margin: 0 5px;
    padding: 14px;
    border-radius: 0 0 3px 3px;
    line-height: 1;
    background-color: #70f;
    transition: background-color .3s;
  }

  .no-touchevents .r_c_pr_gt:hover,
  .touchevents .r_c_pr_gt:active {
    background-color: #f70;
  }

    .r_c_pr_gt_p {
      float: right;
      padding-right: 6px;
      font-size: 2.8rem;
      font-weight: 700;
      line-height: 3.8rem;
      color: #f70;
      transition: color .3s;
    }

    .no-touchevents .r_c_pr_gt:hover > .r_c_pr_gt_p,
    .touchevents .r_c_pr_gt:active > .r_c_pr_gt_p {
      color: #70f
    }

    .r_c_pr_gt_m {
      font-size: 2rem;
      font-weight: 700;
      text-transform: uppercase;
      color: #fff;
    }

    .r_c_pr_gt_s {
      font-size: 1.8rem;
      font-weight: 300;
      color: #fff;
    }

  .r_c_pr_txt {
    display: none;
    padding: 5px;
    font-size: 1.2rem;
  }

  .price-changed > .r_c_pr_txt {
    display: block;
  }

@media (min-width: 480px) {
  .r_c_pr-s .r_c_pr_cd_img {
    width: 150px;
  }

  .r_c_pr-s .r_c_pr_cd_img + .r_c_pr_cd_pt {
    width: calc(100% - 150px);
  }

  .r_c_pr_cd_ttl {
    font-size: 2rem;
  }

  .r_c_pr_cd_pt_l {
    font-size: 1.4rem;
  }

  .r_c_pr_gt, .r_c_pr_txt {
    width: 280px;
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  .r_c_pr-m {
    float: right;
    width: 290px;
  }

  .r_c_pr-m-l {
    float: left;
  }

  .r_c_pr-b .r_c_pr_cd_img {
    width: 40%;
  }

  .r_c_pr-b .r_c_pr_cd_img + .r_c_pr_cd_pt {
    width: 60%;
    box-shadow: -1px 0 0 rgba(130,130,130,.2);
  }

  .r_c_pr_cd_ttl {
    font-size: 2.2rem;
  }
}
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) GALLERY................................media gallery
 *
 */





/*------------*\
   #GALLERY
\*------------*/




.r_gl {
  position: relative;
  padding-bottom: 10px;
  margin: 40px 0;
  overflow: hidden;
  background-color: rgba(130,130,130,.1);
}

.r_gl-ppl {
  background-color: transparent;
}

.r_gl.imageInsetCenter {
  max-width: 700px;
  margin: 40px auto;
}

.r_gl.imageOutsetCenter {
  max-width: 1024px;
  margin: 40px auto;
}

@media (min-width: 700px) {
  .r_gl.imageInsetCenter {
    padding: 0 1px;
    border-radius: 3px;
  }
}

@media (min-width: 980px) {
  .r_gl.imageInsetCenter {
    max-width: none;
    margin-left:  140px;
    margin-right: 140px;
  }
}

@media (min-width: 1024px) {
  .r_gl {
    padding: 0 1px;
    border-radius: 3px;
  }
}

@media (min-width: 1080px) {
  .r_gl.imageInsetCenter {
    max-width: 800px;
    margin-left:  auto;
    margin-right: auto;
  }
}

@media only screen and (min-width: 1224px) {
  .r_gl.imageOutsetCenter {
    margin: 0 100px;
    max-width: none;
  }
}

@media only screen and (min-width: 1640px) {
  .r_gl.imageOutsetCenter {
    margin: 0 auto;
    max-width: 1440px;
  }
}

  .r_gl_sc {
    position: relative;
    padding: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    font-size: 0;
    -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;
    -webkit-scroll-snap-type: mandatory;
            scroll-snap-type: mandatory;
    -webkit-scroll-snap-destination: 50% 50%;
            scroll-snap-destination: 50% 50%;
  }

  .r_gl_sc::-webkit-scrollbar {
    height: 8px;
    background-color: transparent;
  }

  .r_gl_sc::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
  }

    .r_gl_e {
      display: inline-block;
      vertical-align: middle;
      min-width: 200px;
      max-width:  100%;
      max-height: 360px;
      margin-right: 10px;
      box-shadow: 0 0 1px rgba(0,0,0,.5);
      box-sizing: border-box;
      -webkit-scroll-snap-coordinate: 50% 50%;
              scroll-snap-coordinate: 50% 50%;
    }

    .r_gl_e[style] {
      min-width: 0;
    }

    .r_gl_e-ppl {
      vertical-align: top;
      width: 100%;
      margin:  0;
      padding: 0 20px;
      white-space: normal;
      max-height: none;
      box-shadow: none;
    }

    .r_gl_e:last-child {
      margin-right: 0;
    }

    @media (min-width: 700px) {
      .r_gl.imageInsetCenter .r_gl_e:first-child {
        margin-left: 9px;
      }

      .r_gl.imageInsetCenter .r_gl_e:last-child {
        margin-right: 9px;
      }
    }

    @media (min-width: 1025px) {
      .r_gl.imageOutsetCenter .r_gl_e:first-child {
        margin-left: 9px;
      }

      .r_gl.imageOutsetCenter .r_gl_e:last-child {
        margin-right: 9px;
      }
    }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) TOC....................................table of contents
 *
 */





/*-------*\
   #TOC
\*-------*/




.r_toc {
  margin-bottom: 35px;
  padding: 0 20px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .r_toc-l {
    width: auto;
    margin-bottom: 35px;
    float: none;
  }
}

  .r_toc_ttl {
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .r_toc ul {
    margin: 0;
  }

    .r_toc ul > li {
      margin: 0;
    }

      .r_toc ul > li:before {
        display: none; /* clear .content ul > li:before */
      }

  ul.r_toc_t {
    margin:  0;
    padding: 0;
    font-size: 0;
    list-style-type: none;
    box-sizing: border-box;
    counter-reset: tocsection;
  }

  @media (min-width: 768px) {
    .r_toc-l > ul.r_toc_t {
      width: 33.33337%;
      padding-right: 20px;
      float: left;
    }
  }

    ul.r_toc_t > li {
      position: relative;
      vertical-align: top;
      margin-left: 10px;
      padding: 0 0 9px 12px;
      font-size: 17px;
      font-weight: 300;
      box-sizing: border-box;
      border-left: solid 1px #f70;
      counter-increment: tocsection;
    }

    ul.r_toc_t > li.no-after {
      border: none;
    }

    ul.r_toc_t > li:last-child {
      border-left: solid 1px transparent;
    }

      ul.r_toc_t > li:after {
        content: '';
        position: absolute;
        top:  50%;
        left: -4px;
        width:  6px;
        height: 6px;
        margin-top: 2px;
        border-left:   solid 1px #f70;
        border-bottom: solid 1px #f70;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
      }

      ul.r_toc_t > li.no-after:after {
        display: none;
      }

      ul.r_toc_t > li:last-child:after {
        display: none;
      }

      ul.r_toc_t > li > a.r_toc_a {
        display: block;
        box-shadow: 0 1px rgba(130,130,130,.2);
      }

      ul.r_toc_t:last-of-type > li:last-child > a.r_toc_a {
        box-shadow: none;
      }

      @media (min-width: 768px) {
        ul.r_toc_t > li:last-child > a.r_toc_a {
          box-shadow: none;
        }
      }

        ul.r_toc_t > li > a.r_toc_a:after { /* need to clear thumbnail float */
          content: '';
          display: table;
          clear: both;
        }

        .r_toc_a_ttl {
          display: block;
          position: relative;
          top: -3px;
        }

        .r_toc_a_sttl {
          display: block;
          margin-top: -3px;
          font-size: 14px;
          color: #999;
        }

        .r_toc_th {
          position: relative;
          display: block;
          width:  36px;
          height: 36px;
          margin: 0 10px 7px -30px;
          float: left;
          background-color: #f0f0f0;
          box-shadow: 0 0 1px rgba(0,0,0,.5);
          border-radius: 20%;
          overflow: hidden;
        }

        .r_toc_th-tv {
          width: 64px;
          border-radius: 3px;
        }

        ul.r_toc_t-bul > li > a.r_toc_a:before {
          content: '';
          position: absolute;
          top:   0;
          left: -9px;
          width:  17px;
          height: 17px;
          line-height: 18px;
          background-color: #f3f3f3;
          box-shadow: 0 0 0 1px;
          color: #f70;
          text-align: center;
          border-radius: 50%;
          font-size: 12px;
        }

        .dark ul.r_toc_t-bul > li > a.r_toc_a:before {
          background-color: #333;
        }

        ul.r_toc_t-bul-n > li > a.r_toc_a:before {
          content: counter(tocsection);
        }

        ul.r_toc_t_s {
          padding: 0;
          font-size: 14px;
          color: #999;
          list-style-type: none;
        }

          ul.r_toc_t_s > li {
            display: inline-block;
          }

            ul.r_toc_t_s > li > a.r_toc_a {
              color: #999;
            }

            ul.r_toc_t_s > li:last-child > span {
              display: none;
            }

  .r_toc-btn {
    display: none;
  }

    .r_toc-btn:before {
      position: relative;
      top: 2px;
      color: #f70;
    }


/* closed state */
@media (max-width: 767px) {
  .js ul.r_toc_t:only-of-type.closed > li:nth-child(n+6) {
    display: none;
  }

  .js ul.r_toc_t.closed ~ ul.r_toc_t {
    display: none;
  }

  .js .closed ~ .r_toc-btn {
    display: block;
    width: 100%;
    font-size: 14px;
    color: #aaa
  }
}
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) MISCELLANEOUS..........................other
 *
 */





/*-----------------*\
   #MISCELLANEOUS
\*-----------------*/




.iframe-wrapper {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  background-color: #000;
}

  .iframe-wrapper > iframe, .iframe-wrapper > video {
    position: absolute;
    top:  0;
    left: 0;
    width:  100%;
    height: 100%;
  }

  .iframe-wrapper embed {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
  }
/*
 * BEFORE MODIFYING THIS PART OF THE DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) MISCELLANEOUS..........................other
 *
 */





/*-----------------*\
   #MISCELLANEOUS
\*-----------------*/




.r_dvdr {
  position: relative;
  height: 1px;
  background-color: rgba(130,130,130,.2);
  clear: both;
}

.r_dvdr-s {
  width: 100px;
  margin: 20px auto;
}

.r_dvdr-m {
  width: 150px;
  margin: 40px auto;
}

.r_dvdr-wire {
  background-color: #f70;
}

  .r_dvdr-wire:before {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -5px;
    width:  10px;
    height: 5px;
    margin-top: -2px;
    background-color: #f70;
  }
/*----------*\
   #AUTHOR
\*----------*/




.author {
  display: inline-block;
  width: 100%;
  margin: 3rem 0 1rem;
}

@media only screen and (min-width: 480px) {
  .author {
    width: 50%;
  }
}

@media only screen and (min-width: 769px) {
  .author {
    width: 33.33337%; /* ends in 7 to prevent gaps in some webkit */
  }
}

@media only screen and (min-width: 1366px) {
  .author {
    width: 25%;
  }
}

  .author__a {
    display: block;
    width: 25rem;
    margin: 0 auto;
    color: inherit;
  }

  .author__img {
    position: relative;
    width:  200px;
    height: 200px;
    margin: 0 auto;
  }

    .author__img:before {
      content: "";
      position: absolute;
      top:    0;
      right:  0;
      bottom: 0;
      left:   0;
      border-radius: 50%;
      background-color: rgba(125,125,125,.2);
      -webkit-transition: .4s ease;
              transition: .4s ease;
    }

    .author__img__bg {
      position: absolute;
      top:    0;
      right:  0;
      bottom: 0;
      left:   0;
      border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(125,125,125,.2);
      overflow: hidden;
      -webkit-transition: .4s ease;
              transition: .4s ease;
    }

  .author__a:focus .author__img__bg {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }

  .author__a:focus .author__img:before {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }

  @media only screen and (min-width: 1025px) {
    .author__a:hover .author__img__bg {
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }

    .author__a:hover .author__img:before {
      opacity: 0;
      -webkit-transform: scale(1.3);
              transform: scale(1.3);
    }
  }

  .author__name {
    margin-bottom: 0;
  }

  .author__role{
    font-size: 1.2rem;
    opacity: .5;
  }



.author-bg {
  background-repeat:   no-repeat;
  background-position: center center;
  background-size:     cover;
}

.author-bg--img > .author-info {
  color: #fff;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
}

.author-info {
  padding: 40px 0 20px;
}

.author-bg--img > .author-img {
  box-shadow: inset 0 0 0 1px rgba(125,125,125,.2), 0 0 0 5px #fff;
}

  .author-bg--img > .author-img:before {
    box-shadow: 0 0 0 1px #fff;
  }

.author-name {
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
  margin-top: 3rem
}

.author-bg--img > .author-name {
  color: #fff;
}

.author-img {
  position: relative;
  margin: 40px auto 0 auto;
  width:  300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(125,125,125,.2);
  overflow: hidden;
}

  .author-img:before {
    content: "";
    position: absolute;
    top:    -20px;
    right:  -20px;
    bottom: -20px;
    left:   -20px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(125,125,125,.2);
  }
/*----------*\
   #AUTHOR
\*----------*/




.author-link {
  display: inline-block;
  background-color: rgba(0,0,0,.3);
  color: #fff;
  text-align: center;
  line-height: 2em;
  width: 2em;
  font-size: 1.8rem;
  border-radius: 50%;
  margin: 0 3px;
}

  .author-link:before {
    position: relative;
    top: 2px;
  }

.author-link--fb {
  background-color: #3b5997;
}

.author-link--tw {
  background-color: #41b7d8;
}

.author-link--go {
  background-color: #d64937;
}

.author-link--tu {
  background-color: #35465c;
}

.author-link--in {
  background-color: #1a5570;
}

.author-link--pi {
  background-color: #cb2027;
}

.author-link--re {
  background-color: #ff5700;
}



.aa_af {

}

  .aa_af__btns {
    margin: 0 auto;
    width: 150px;
    margin-bottom: 3rem;
    font-size: 0;
    border-radius: 3px;
    background-color: rgba(130,130,130,.3);
    box-shadow: inset 0 0 0 1px rgba(130,130,130,.5);
  }

    .aa_af__btns__elem {
      display: inline-block;
      vertical-align: top;
      width: 50%;
      padding: 2px 0;
      font-size: 1.2rem;
      font-weight: 300;
      text-transform: uppercase;
      border-radius: 3px;
    }

    .aa_af__btns__elem.active {
      background-color: #fff;
      box-shadow: inset 0 0 0 1px rgba(130,130,130,.5);
    }

    .dark .aa_af__btns__elem.active {
      background-color: #000;
    }

  .aa_af__box {
    position: relative;
    font-size: 0;
    text-align: center;
  }

    .aa_af__box__nav {
      position: -webkit-sticky;
      position:         sticky;
      z-index: 1;
      top: 0;
      padding: 5px 0;
      background-color: #f3f3f3;
    }

    .dark .aa_af__box__nav {
      background-color: #222;
    }

    @supports (-webkit-backdrop-filter: blur(1px)) {
      .aa_af__box__nav {
        background-color: rgba(243,243,243,.65);
        -webkit-backdrop-filter: blur(20px);
      }

      .dark .aa_af__box__nav {
        background-color: rgba(34,34,34,.65);
      }
    }

      .aa_af__box__nav__elem {
        display: inline-block;
        vertical-align: top;
        margin: 0 10px;
        font-size: 1.6rem;
        font-weight: 300;
      }

        .aa_af__box__nav__elem > span {
          padding: 2px;
        }

        .aa_af__box__nav__elem.active > span {
          padding: 2px;
          box-shadow: 0 1px;
        }

    .aa_af__box__apps {
      display: none;
      max-width: 375px;
      margin: 0 auto;
      text-align: left;
      counter-reset: apps;
    }

    .aa_af__box__apps.active {
      display: block;
    }

      .aa_af__box__apps__elem {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin-top: 20px;
        padding: 0 20px 0 40px;
        counter-increment: apps;
      }

        .aa_af__box__apps__elem:before {
          content: counter(apps);
          position: absolute;
          left: 20px;
          top:  36px;
          height: 20px;
          padding: 0 7px;
          border-radius: 10px;
          box-shadow: 0 0 0 1px rgba(130,130,130,.2);
          font-size: 1.2rem;
          line-height: 20px;
          -webkit-transform: translate3d(-50%,-50%,0);
                  transform: translate3d(-50%,-50%,0);
        }

        .aa_af__box__apps__elem__icon {
          float: left;
          width: 72px;
        }

        .aa_af__box__apps__elem__icon--oval {
          width: 105px;
        }

        .aa_af__box__apps__elem__icon--watch {

        }

        .aa_af__box__apps__elem__icon--tv {
          width: 128px;
        }

        .aa_af__box__apps__elem__text {
          overflow: hidden;
          padding-left: 15px;
          font-size: 0;
        }

          .aa_af__box__apps__elem__text:before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            height: 72px;
          }

          .aa_af__box__apps__elem__text__ {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
          }

            .aa_af__box__apps__elem__text__quote {
              font-size: 1.6rem;
              font-weight: 300;
              line-height: 1.8rem;
            }

              .aa_af__box__apps__elem__text__quote:before, .aa_af__box__apps__elem__text__quote:after {
                content: '"';
              }

              .aa_af__box__apps__elem__text__quote:before {
                margin-left: -5px;
              }

            .aa_af__box__apps__elem__text__title {
              font-size: 1.8rem;
              font-weight: 700;
              line-height: 2.4rem;
            }

            .aa_af__box__apps__elem__text__quote + .aa_af__box__apps__elem__text__title {
              font-size: 1.4rem;
            }

            .aa_af__box__apps__elem__text__developer {
              font-size: 1.2rem;
              font-weight: 300;
              line-height: 1.2rem;
            }

@media (min-width: 768px) {
  .aa_af__box__apps {
    max-width: 750px;
  }

  .aa_af__box__apps__elem {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .aa_af__box__apps {
    max-width: 1125px;
  }

  .aa_af__box__apps__elem {
    width: 33.33337%;
  }
}
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * http://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 *
 *  1) BAND
 *
 *  2) POPUP
 *
 *  3) BAND COLORS
 *
 */





/*--------*\
   #BAND
\*--------*/




.aa_band {
  position: relative;
  color: inherit;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 2px 2px -2px rgba(0,0,0,.1), 0 4px 4px -4px rgba(0,0,0,.2);
  cursor: pointer;
}

  .no-touchevents .aa_band:after {
    content: '';
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    background-color: rgba(0,0,0,.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .no-touchevents .aa_band:hover:after {
    opacity: 1;
  }

  .aa_band__img {
    position: relative;
    padding-bottom: 85%;
  }

    .aa_band__img__ {
      position: absolute;
      top:    10px;
      right:  10px;
      bottom: 10px;
      left:   10px;
      text-align: center ;
    }

      .aa_band__img__ > img {
        width:  auto;
        height: auto;
        max-width:  100%;
        max-height: 100%;
      }

  .aa_band__mark {
    position: absolute;
    top:  85%;
    left: 50%;
    width:  20px;
    height: 20px;
    border-radius: 50%;
    margin-left: -10px;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,.3);
    overflow: hidden;
  }

  .aa_band__tag {
    position: absolute;
    z-index: 1;
    top:   0;
    right: 0;
    font-size: 0;
    line-height: 4rem;
    color: #fff;
    background-color: #f70;
    white-space: nowrap;
  }

  .no-touchevents .aa_band__tag {
    padding-right: 10px;
    transition: transform .3s;
    -webkit-transform: translate3d(100%,0,0);
            transform: translate3d(100%,0,0);
  }

  .no-touchevents .aa_band:hover > .aa_band__tag {
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

    .aa_band__tag__price {
      display: inline-block;
      vertical-align: top;
      padding: 0 10px;
      font-size: 1.8rem;
      font-weight: 700;
      background-color: #f70;
    }

    .no-touchevents .aa_band__tag__price {
      transition: transform .3s;
      -webkit-transform: translate3d(-100%,0,0);
              transform: translate3d(-100%,0,0);
    }

    .no-touchevents .aa_band:hover > .aa_band__tag > .aa_band__tag__price {
      -webkit-transform: translate3d(0,0,0);
              transform: translate3d(0,0,0);
    }

    .aa_band__tag__shop {
      display: none;
      vertical-align: top;
      font-size: 1.8rem;
      font-weight: 300;
    }

    .no-touchevents .aa_band__tag__shop {
      display: inline-block;
      -webkit-transform: translate3d(0,0,0);
              transform: translate3d(0,0,0);
    }

      .aa_band__tag__shop > i {
        vertical-align: top;
        font-size: .6em;
      }





/*---------*\
   #POPUP
\*---------*/



.aa_pop {
  position: fixed;
  z-index: 5;
  top:    0;
  right:  0;
  bottom: 0;
  left:   0;
  background-color: rgba(0,0,0,.5);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

  .aa_pop__ {
    position: relative;
    background-color: #fff;
    margin: 67px 7px 40px;
    padding: 40px 20px;
    font-size: 0;
    text-align: center;
  }

  @media all and (max-width: 767px) {
    .hide ~ .main-wrapper .aa_pop__ {
      margin: 7px 7px 40px;
    }
  }

    .aa_pop__close {
      position: absolute;
      top:  10px;
      left: 10px;
      width:  40px;
      height: 40px;
      font-size:  20px;
      line-height: 46px;
    }

    .aa_pop__title {
      margin-top: 0;
    }

      .aa_pop__title > span {
        display: block;
      }

      .aa_pop__title__label {
        position: relative;
        width: 6.25em;
        margin: 8px auto 5px;
        padding: 0 .8em;
        background-color: rgba(0,0,0,.3);
        border-radius: 1em;
        font-size: 1.2rem;
        line-height: 2em;
        color: #fff;
        overflow: hidden;
      }

        .aa_pop__title__label > span {
          position: relative;
          z-index: 1;
        }

      .aa_pop__title__small {
        font-size: 60%;
        font-weight: 700;
        line-height: 1;
      }

      .aa_pop__title__big {
        font-weight: 300;
        line-height: 1.2;
        text-transform: uppercase;
      }

    .aa_pop__img {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
    }

      .aa_pop__img__ {
        padding-bottom: 100%;
      }

    .aa_pop__data {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      padding-top: 20px;
    }

      .aa_pop__data__developer {
        display: inline-block;
        vertical-align: top;
        margin: 0 0 30px;
        padding: .5em 1em 0;
        box-shadow: 0 -1px rgba(0,0,0,.1);
        font-size: 2rem;
      }

      .aa_pop__data__price {
        margin: 0 0 30px;
        font-size: 1.2rem;
        line-height: 1.25;
        color: rgba(34,34,34,.5)
      }

        .aa_pop__data__price__this {
          position: relative;
          font-size: 2.6em;
          font-weight: 700;
          color: #5cc500;
        }

          .aa_pop__data__price__this:before {
            content: attr(data-sub);
            position: absolute;
            right:   0;
            bottom: -5px;
            font-size: .28em;
            font-weight: 300;
            color: rgba(0,0,0,.3);
            -webkit-transform-origin: 100% 0;
                    transform-origin: 100% 0;
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
          }

        .aa_pop__data__price__that {
          font-size: 1.6em;
          font-weight: 700;
          color: rgba(0,0,0,.25);
        }

      .aa_pop__data__text {
        margin: 0 0 30px;
        padding: 0 20px;
        font-size: 1.6rem;
        font-weight: 400;
      }

      .aa_pop__data__list {
        display: inline-block;
        text-align: left;
        margin: 0 0 30px .8em;
        list-style-type: none;
        font-size: 1.6rem;
        font-weight: 500;
      }

        .aa_pop__data__list > li {
          position: relative;
          line-height: 1.2em;
        }

        .aa_pop__data__list > li:before {
          content: '';
          position: absolute;
          top: .1em;
          left: -1.5em;
          width:  1em;
          height: 1em;
          border-radius: 50%;
          box-shadow: 0 0 0 1px #5cc500;
        }

      .aa_pop__data__btn {
        display: inline-block;
        margin: 0 20px 20px;
        padding: 10px 15px;
        font-size: 1.6rem;
        font-weight: 300;
        text-align: center;
        color: #fff;
        background-color: #70f;
        transition: .3s;
      }

      .aa_pop__data__btn:hover {
        color: #70f;
        background-color: #f3f3f3;
        box-shadow: 0 5px 10px -3px rgba(0,0,0,.25);
      }

@media all and (min-width: 768px) {
  .aa_pop__title__label {
    font-size: 1.4rem;
  }

  .aa_pop__img {
    width: 50%;
  }

  .aa_pop__data {
    width: 50%;
    padding: 20px 10% 0 0;
  }

  .aa_pop__data__price {
    font-size: 1.4rem;
  }

  .aa_pop__data__btn {
    font-size: 1.8rem;
  }
}

@media all and (min-width: 1024px) {
  .aa_pop__title__label {
    font-size: 1.6rem;
  }

  .aa_pop__img {
    width: 50%;
  }

  .aa_pop__data__price {
    font-size: 1.6rem;
  }

  .aa_pop__data__btn {
    font-size: 2rem;
  }
}





/*--------------*\
   #BAND COLORS
\*--------------*/


.link-bracelet_black {background-color: #111}
.link-bracelet_silver {background-color: #DCDCDC}
.link-bracelet_polished {background-color: #DCDCDC}

.leather-loop_black {background-color: #111}
.leather-loop_blue {background-color: #343C54}
.leather-loop_red {background-color: #872B34}
.leather-loop_brown {background-color: #8E7F7B}
.leather-loop_royal-blue {background-color: #494D63}
.leather-loop_gray {background-color: #8A8C89}

.classic-buckle_red {background: linear-gradient(to right, #AF3235 50%, #AF3235 51%)}
.classic-buckle_brown {background: linear-gradient(to right, #8F4E34 50%, #333 51%)}
.classic-buckle_blue {background: linear-gradient(to right, #2E507A 50%, #2E507A 51%)}
.classic-buckle_royal-blue {background: linear-gradient(to right, #45495D 50%, #45495D 51%)}
.classic-buckle_black {background: linear-gradient(to right, #111 50%, #8C6D57 51%)}

.hermes-double-buckle-cuff_brown {background: linear-gradient(to right, #935E39 50%, #A06835 51%)}
.hermes-double-buckle-cuff_gray {background: linear-gradient(to right, #4C4E4F 50%, #A06835 51%)}
.hermes-double-buckle-cuff_purple {background: linear-gradient(to right, #682C5A 50%, #A06835 51%)}
.hermes-double-buckle-cuff_red {background: linear-gradient(to right, #E84A38 50%, #A06835 51%)}

.hermes-double-tour_midnight-blue {background: linear-gradient(to right, #5B6D79 50%, #A06835 51%)}
.hermes-double-tour_orange {background: linear-gradient(to right, #F87C51 50%, #A06835 51%)}
.hermes-double-tour_turquoise {background: linear-gradient(to right, #51BAB3 50%, #A06835 51%)}
.hermes-double-tour_white {background: linear-gradient(to right, #EDEBEA 50%, #A06835 51%)}

.hermes-single-tour_midnight-blue {background: linear-gradient(to right, #5B6D79 50%, #A06835 51%)}
.hermes-single-tour_orange {background: linear-gradient(to right, #F87C51 50%, #A06835 51%)}
.hermes-single-tour_turquoise {background: linear-gradient(to right, #51BAB3 50%, #A06835 51%)}
.hermes-single-tour_white {background: linear-gradient(to right, #EDEBEA 50%, #A06835 51%)}

.milanese-loop_black {background-color: #111}
.milanese-loop_blue {background-color: #388EE5}
.milanese-loop_gold {background-color: #9E765B}
.milanese-loop_rose-gold {background-color: #7F4646}
.milanese-loop_brown {background-color: #775D4D}
.milanese-loop_silver {background-color: #5E5E5E}
.milanese-loop_unique, .milanese-loop_colorful {background: linear-gradient(to top, #4A45BD 0%, #6CA74A 25%, #CEAA71 50%, #AA3E9A 100%)}

.modern-buckle_black {background-color: #111}
.modern-buckle_brown {background-color: #754531}
.modern-buckle_pink {background-color: #EACCC5}
.modern-buckle_red {background-color: #CC6151}
.modern-buckle_turquoise {background-color: #A4CCE1}
.modern-buckle_yellow {background-color: #F3D680}
.modern-buckle_midnight-blue {background-color: #3D4455}

[class*='nike-sport']:before {
  content: '';
  position: absolute;
  right:  0;
  bottom: 0;
  width:  50%;
  height: 50%;
  border-radius: inherit;
}
.nike-sport_black {background-color: #111}
.nike-sport_lime-green {background-color: #111}
.nike-sport_black:before, .nike-sport_lime-green:before {background-color: #CBDA47}
.nike-sport_gray {background-color: #111}
.nike-sport_gray:before {background-color: #8A8A8C}
.nike-sport_light-gray {background-color: #C1C8C8}
.nike-sport_light-gray:before {background-color: #D7D7D7}
.nike-sport_red {background-color: #FC413F}
.nike-sport_red:before {background-color: #404040}
.nike-sport_bright-yellow {background-color: #C1C9C7}
.nike-sport_bright-yellow:before {background-color: #FCFD57}
.nike-sport_mint-green {background-color: #88FEEF}
.nike-sport_mint-green:before {background-color: #374C96}
.nike-sport_pink {background-color: #FDBDCB}
.nike-sport_pink:before {background-color: #6BE2B4}

.sport-band_baby-blue {background-color: #4CB0F9}
.sport-band_black {background-color: #111}
.sport-band_lavendar {background-color: #B6ABB2}
.sport-band_light-blue {background-color: #84CAFB}
.sport-band_light-gray {background-color: #AAADB0}
.sport-band_light-pink {background-color: #FBC3D6}
.sport-band_lime-green {background-color: #B8E56A}
.sport-band_midnight-blue {background-color: #435063}
.sport-band_orange {background-color: #EC624F}
.sport-band_pink {background-color: #E56A6C}
.sport-band_red {background-color: #E34352}
.sport-band_rose {background-color: #F3B9BD}
.sport-band_royal-blue {background-color: #4474B8}
.sport-band_turquoise {background-color: #B7D1CE}
.sport-band_apricot {background-color: #FD6E61}
.sport-band_brown {background-color: #A88F7F}
.sport-band_mint-green {background-color: #A4BE93}
.sport-band_offwhite {background-color: #E0DCDB}
.sport-band_purple {background-color: #B3C5E7}
.sport-band_white {background-color: #D0D0D0}
.sport-band_yellow {background-color: #FACF57}
.sport-band_colorful {background: linear-gradient(to top, #4A45BD 25%, #6CA74A 25%, #6CA74A 50%, #CEAA71 50%, #CEAA71 75%, #AA3E9A 75%)}
.sport-band_flag {background: linear-gradient(45deg, #AD1D35 50%, #020866 50%)}

[class*='nylon-sports-band']:before, [class*='nylon-sports-band']:after {
  content: '';
  position: absolute;
  width:  50%;
  height: 50%;
}
[class*='nylon-sports-band']:before{
  top:  0;
  left: 0;
}
[class*='nylon-sports-band']:after {
  right:  0;
  bottom: 0;
}
.nylon-sports-band_midnight-blue {background-color: #6F97C1}
.nylon-sports-band_midnight-blue:before, .nylon-sports-band_midnight-blue:after {background-color: #395972}
.nylon-sports-band_royal-blue {background-color: #32588E}
.nylon-sports-band_royal-blue:before, .nylon-sports-band_royal-blue:after {background-color: #C1A8B0}
.nylon-sports-band_brown {background-color: #6C4936}
.nylon-sports-band_brown:before, .nylon-sports-band_brown:after {background-color: #C9BCB2}
.nylon-sports-band_turquoise {background-color: #27ADC3}
.nylon-sports-band_turquoise:before, .nylon-sports-band_turquoise:after {background-color: #939B75}
.nylon-sports-band_black {background-color: #3A383B}
.nylon-sports-band_black:before, .nylon-sports-band_black:after {background-color: #B0ACAD}
.nylon-sports-band_blue-pink {background-color: #5B5986}
.nylon-sports-band_blue-pink:before, .nylon-sports-band_blue-pink:after {background-color: #E9B0B7}
.nylon-sports-band_blue-yellow {background-color: #DEB080}
.nylon-sports-band_blue-yellow:before, .nylon-sports-band_blue-yellow:after {background-color: #97ABA1}
.nylon-sports-band_light-gray {background-color: #E5DEDA}
.nylon-sports-band_light-gray:before, .nylon-sports-band_light-gray:after {background-color: #868485}
.nylon-sports-band_orange {background-color: #D09570}
.nylon-sports-band_orange:before, .nylon-sports-band_orange:after {background-color: #6B8682}
.nylon-sports-band_red-orange {background-color: #E8533C}
.nylon-sports-band_red-orange:before, .nylon-sports-band_red-orange:after {background-color: #705F60}
.nylon-sports-band_pink {background-color: #E1568D}
.nylon-sports-band_pink:before, .nylon-sports-band_pink:after {background-color: #BD9279}
.nylon-sports-band_yellow {background-color: #E3C461}
.nylon-sports-band_yellow:before, .nylon-sports-band_yellow:after {background-color: #817A70}



/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 * PAGE DOWN
 *
 *  1) ERROR
 *
 */





/*---------*\
   #ERROR
\*---------*/




.er_wrap {
  position: absolute;
  z-index: 1;
  top:    0;
  right:  0;
  bottom: 0;
  left:   0;
  font-size: 0;
  text-align: center;
  background-color: #888;
  color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
          overflow-scrolling: touch;
}

  .er_wrap:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }

  .er_wrap__ {
    display: inline-block;
    vertical-align: middle;
    padding-top: 60px;
  }

  .er_cloud {
    position: relative;
    height: 160px;
  }

  .er_title {
    font-size: 50px;
    font-weight: 100;
    line-height: 1.2;
    padding: 0 20px;
  }

  .er_desc {
    max-width: 500px;
    margin: 20px auto;
    padding: 0 20px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 300;
  }
/*-------------------*\
   #GALLERY LIGHTBOX
\*-------------------*/




.blur {
  -webkit-filter: blur(20px);
  filter: blur(20px);
}



.gallery-window {
  position: fixed;
  z-index: 5;
  top:    0;
  right:  0;
  bottom: 0;
  left:   0;
  overflow: hidden;
  background-color: rgba(0,0,0,0.9);
}

  .gallery-window__close {
    position: absolute;
    top:   70px;
    right: 10px;
    height: 40px;
    width:  40px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    background-color: transparent;
    border: none;
    outline: none;
  }

  .gallery-window__nav {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    height: 100px;
    width:  36px;
    font-size: 36px;
    text-align: center;
    color: #fff;
    background-color: transparent;
    border: none;
    outline: none;
  }

  .gallery-window__nav--prev {
    left: 10px;
  }

  .gallery-window__nav--next {
    right: 10px;
  }

  .gallery-window__tape {
    position: absolute;
    top:    60px;
    right:  0;
    bottom: 0;
    left:   0;
    white-space: nowrap;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

    .gallery-window__tape__frame {
      position: relative;
      display: inline-block;
      width:  100%;
      height: 100%;
      text-align: center;
    }

      .gallery-window__tape__frame__help {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }

      .gallery-window__tape__frame__img {
        max-height: 100%;
        max-width:  100%;
        vertical-align: middle;
      }
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * LAYOUT RULES
 *
 *  1) GRID
 *
 */



/*--------*\
   #GRID
\*--------*/




.aa_gd {
  padding-right: 1px;
  font-size: 0;
}

.aa_gd-border {
  padding-right: 0;
  overflow: hidden;
}

.aa_gd-pad {
  padding: 5px;
}

  .aa_gd_e {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    font-size: 1.6rem;
    box-sizing: border-box;
  }

  .aa_gd-border > .aa_gd_e {
    box-shadow: 1px 1px rgba(130,130,130,.2);
  }

    .aa_gd_e > img {
      max-width: 100%;
      height: auto;
    }

  .aa_gd-pad > .aa_gd_e {
    padding: 5px;
  }

  .aa_gd-2 > .aa_gd_e {width: 50%}
  .aa_gd-3 > .aa_gd_e {width: 33.33337%}
  .aa_gd-4 > .aa_gd_e {width: 25%}
  .aa_gd-5 > .aa_gd_e {width: 20%}

@media (min-width: 480px) {
  .aa_gd-2-s > .aa_gd_e {width: 50%}
  .aa_gd-3-s > .aa_gd_e {width: 33.33337%}
  .aa_gd-4-s > .aa_gd_e {width: 25%}
  .aa_gd-5-s > .aa_gd_e {width: 20%}
}

@media (min-width: 768px) {
  .aa_gd-2-m > .aa_gd_e {width: 50%}
  .aa_gd-3-m > .aa_gd_e {width: 33.33337%}
  .aa_gd-4-m > .aa_gd_e {width: 25%}
  .aa_gd-5-m > .aa_gd_e {width: 20%}
}

@media (min-width: 1024px) {
  .aa_gd-pad {
    padding: 10px;
  }

  .aa_gd-pad > .aa_gd_e {
    padding: 10px;
  }

  .aa_gd-2-l > .aa_gd_e {width: 50%}
  .aa_gd-3-l > .aa_gd_e {width: 33.33337%}
  .aa_gd-4-l > .aa_gd_e {width: 25%}
  .aa_gd-5-l > .aa_gd_e {width: 20%}
}

@media (min-width: 1360px) {
  .aa_gd-2-xl > .aa_gd_e {width: 50%}
  .aa_gd-3-xl > .aa_gd_e {width: 33.33337%}
  .aa_gd-4-xl > .aa_gd_e {width: 25%}
  .aa_gd-5-xl > .aa_gd_e {width: 20%}
}
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * http://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 *
 *  1) HEADER
 *
 */





/*----------*\
   #HEADER
\*----------*/




.aa_header {
  position: relative;
  text-align: center;
  box-shadow: 0 1px rgba(0,0,0,.1);
  background-color: #000;
}

.aa_header--blank {
  background-color: transparent;
  box-shadow: none;
}

  .aa_header__bg {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
  }

  .aa_header__text {
    position: relative;
    width: 90%;
    margin: 50px auto;
    color: #222;
  }

  .aa_header--blank .aa_header__text {
    color: inherit;
  }

  .aa_header__text--with-img {
    text-shadow: 1px 1px rgba(0,0,0,.5);
    color: #fff;
  }

    .aa_header__text__pre {
      display: inline-block;
      padding: 5px 10px;
      border: solid 1px;
      border-radius: 3px;
      font-size: 1.2rem;
      font-weight: 700;
      text-transform: uppercase;
      color: inherit;
      transition: .3s;
    }

    .aa_header__text__pre:hover, .aa_header__text__pre:focus {
      background-color: rgba(255,255,255,.3);
    }

    .aa_header__text__title {
      margin: 0 auto;
      padding: 0 10px;
      font-size: 3rem;
      font-weight: 700;
      line-height: 1;
      text-transform: uppercase;
    }

    .aa_header__text__pre + .aa_header__text__title {
      padding-top: 10px;
    }

    .aa_header__text__title--l {
      font-size: 4rem;
    }

    .aa_header__text__btns {
      font-size: 0;
      margin: 0 auto;
      padding-top: 10px;
    }

      .aa_header__text__btns__ {
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        padding: 5px 10px;
        border: solid 1px #222;
        border-radius: 3px;
        font-size: 1.2rem;
        font-weight: 700;
        text-transform: uppercase;
        color: inherit;
        transition: .3s;
      }

      .aa_header__text__btns__--big {
        padding: 0 1.2em;
        border-radius: 1.5em;
        line-height: 3em;
      }

      .aa_header__text__btns__.active {
        color: #fff;
        background-color: #f70;
        pointer-events: none;
      }

      .aa_header__text__btns__:hover, .aa_header__text__btns__:focus {
        background-color: rgba(255,119,0,0.5);
      }

      .aa_header__text__btns__.active:hover, .aa_header__text__btns__.active:focus {
        background-color: #f70;
      }

    .aa_header__text__intro {
      position: relative;
      margin: 0 auto;
      padding: 10px 10px 0;
      font-size: 1.6rem;
      font-weight: 400;
      line-height: 1.4;
      text-transform: uppercase;
      opacity: .7;
    }

    .aa_header__text__author {
      padding-top: 10px;
      font-size: 1.6rem;
    }

      .aa_header__text__author > a {
        color: inherit;
        transition: .3s;
      }

    .aa_header__text__agf {
      position: relative;
      margin: 10px 0;
      height: 69px;
    }

    .aa_header__text__agf--6 {height: 60px}
    .aa_header__text__agf--7 {height: 53px}
    .aa_header__text__agf--8 {height: 49px}
    .aa_header__text__agf--9 {height: 45px}

      .aa_header__text__agf__ {
        position: absolute;
        top:    0;
        bottom: 0;
        left:  50%;
        padding: 5px 10px 0;
        font-size: 0;
        white-space: nowrap;
        box-shadow: 0 1px rgba(130,130,130,.2);
        overflow: hidden;
        -webkit-transform: translate3d(-50%,0,0);
                transform: translate3d(-50%,0,0);
      }

        .aa_header__text__agf__icon {
          position: relative;
          display: inline-block;
          vertical-align: top;
          width: 64px;
          margin-left: -10px;
          transition: transform .3s;
        }

        .aa_header__text__agf--6 > .aa_header__text__agf__ > .aa_header__text__agf__icon {width: 55px}
        .aa_header__text__agf--7 > .aa_header__text__agf__ > .aa_header__text__agf__icon {width: 48px}
        .aa_header__text__agf--8 > .aa_header__text__agf__ > .aa_header__text__agf__icon {width: 44px}
        .aa_header__text__agf--9 > .aa_header__text__agf__ > .aa_header__text__agf__icon {width: 40px}

        .aa_header__text__agf__icon:first-child {
          margin-left: 0;
        }

        .aa_header__text__agf__icon:nth-child(5n+1) {-webkit-transform: translate3d(0,10%,0); transform: translate3d(0,10%,0)}
        .aa_header__text__agf__icon:nth-child(5n+2) {-webkit-transform: translate3d(0,40%,0); transform: translate3d(0,40%,0)}
        .aa_header__text__agf__icon:nth-child(5n+3) {-webkit-transform: translate3d(0,20%,0); transform: translate3d(0,20%,0)}
        .aa_header__text__agf__icon:nth-child(5n+4) {-webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0)}
        .aa_header__text__agf__icon:nth-child(5n+5) {-webkit-transform: translate3d(0,25%,0); transform: translate3d(0,25%,0)}

        .aa_header__text__agf__icon:hover {
          -webkit-transform: translate3d(0,-5px,0);
                  transform: translate3d(0,-5px,0)
        }

@media all and (min-width: 768px) {
  .aa_header__text {
    margin: 75px auto;
  }

  .aa_header__text__title {
    font-size: 3.8rem;
  }

  .aa_header__text__title--l {
    font-size: 5rem;
  }

  .aa_header__text__pre, .aa_header__text__btns__ {
    font-size: 1.4rem;
  }

  .aa_header__text__intro {
    font-size: 1.8rem;
  }

  .aa_header__text__agf {height: 97px}
  .aa_header__text__agf--6 {height: 83px}
  .aa_header__text__agf--7 {height: 73px}
  .aa_header__text__agf--8 {height: 66px}
  .aa_header__text__agf--9 {height: 60px}

  .aa_header__text__agf__icon {width: 92px}
  .aa_header__text__agf--6 > .aa_header__text__agf__ > .aa_header__text__agf__icon {width: 78px}
  .aa_header__text__agf--7 > .aa_header__text__agf__ > .aa_header__text__agf__icon {width: 68px}
  .aa_header__text__agf--8 > .aa_header__text__agf__ > .aa_header__text__agf__icon {width: 61px}
  .aa_header__text__agf--9 > .aa_header__text__agf__ > .aa_header__text__agf__icon {width: 55px}
}

@media all and (min-width: 1024px) {
  .aa_header__text--with-img {
    margin: 100px auto;
  }

  .aa_header__text__title {
    font-size: 4.6rem;
  }

  .aa_header__text__title--l {
    font-size: 6rem;
  }

  .aa_header__text__pre, .aa_header__text__btns__ {
    font-size: 1.6rem;
  }

  .aa_header__text__intro {
    font-size: 2rem;
  }
}

@media all and (min-width: 1360px) {
  .aa_header__text__title {
    font-size: 5.4rem;
  }

  .aa_header__text__title--l {
    font-size: 7rem;
  }

  .aa_header__text__pre, .aa_header__text__btns__ {
    font-size: 1.8rem;
  }

  .aa_header__text__intro {
    font-size: 2.2rem;
  }
}

@media all and (min-width: 1510px) {
  .aa_header__text__title {
    font-size: 6.2rem;
  }

  .aa_header__text__title--l {
    font-size: 8rem;
  }

  .aa_header__text__pre, .aa_header__text__btns__ {
    font-size: 2rem;
  }

  .aa_header__text__intro {
    font-size: 2.4rem;
  }
}



.aa_header-description {
}
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 *
 *  1) PAGE NAV
 *
 *  2) ANIMATIONS
 *
 */





/*------------*\
   #PAGE NAV
\*------------*/




.aa_page-nav {
  position: relative;
  margin-bottom: 1rem;
}

  .aa_pn__btn {
    position: relative;
    display: block;
    margin: 1rem 0;
    border-radius: 2px;
    font-size: 1.6rem;
    line-height: 3.5rem;
    text-align: center;
    color: inherit;
    background-color: rgba(130,130,130,.4);
    opacity: .5;
    -webkit-transition: .2s ease;
            transition: .2s ease;
  }

  .aa_pn__btn:focus {
    opacity: 1;
  }

  @media only screen and (min-width: 1025px) {
    .aa_pn__btn:hover {
      opacity: 1;
    }
  }

  .aa_pn__btn.loading {
    opacity: 1;
  }

    .aa_pn__btn.loading:before {
      content: "";
      position: absolute;
      z-index: 1;
      top:    0;
      right:  0;
      bottom: 0;
      left:   0;
      background-color: #f3f3f3;
    }

    .aa_pn__btn.loading:after {
      content: "";
      position: absolute;
      z-index: 1;
      top:  50%;
      left: 50%;
      width:  10px;
      height: 10px;
      margin: -5px 0 0 -5px;
      border-radius: 50%;
      background-color: #333;
      -webkit-animation: aa_move 1s infinite alternate ease-in-out;
              animation: aa_move 1s infinite alternate ease-in-out;
    }





/*--------------*\
   #ANIMATIONS
\*--------------*/



@-webkit-keyframes aa_move {
  0% {   -webkit-transform: translate3d(-50px,0,0); }
  100% { -webkit-transform: translate3d(50px,0,0); }
}

@keyframes aa_move {
  0% {   transform: translate3d(-50px,0,0); }
  100% { transform: translate3d(50px,0,0); }
}
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 * LOADERS
 *
 *  1) BASE
 *
 *  2) CLOUD
 *
 *  3) MAGNIFYING GLASS
 *
 */


/*--------*\
   #BASE
\*--------*/




.mcl_loader {
  position: relative;
  width:  200px;
  height: 200px;
  margin: 0 auto;
}

.mcl_loader--small {
  width:  80px;
  height: 80px;
}





/*---------*\
   #CLOUD
\*---------*/



.mcl_loader--cloud {
}

  .mcl_cloud {
    position: absolute;
    top:  40%;
    left: 50%;
    width: 160px;
    height: 90px;
    margin: -45px 0 0 -75px;
    -webkit-filter: drop-shadow(0 5px 10px rgba(0,0,0,.1));
            filter: drop-shadow(0 5px 10px rgba(0,0,0,.1));
  }

    .mcl_cloud__1, .mcl_cloud__2, .mcl_cloud__3, .mcl_cloud__4, .mcl_cloud__5 {
      position: absolute;
      background-color: #fff;
    }

    .mcl_cloud__1, .mcl_cloud__2 {
      bottom: 0;
      width: 100px;
    }

    .mcl_cloud__1 {
      left:   0;
      height: 50px;
      border-radius: 25px 0 0 25px;
      animation: cloud-1 1.5s infinite ease-in-out alternate;
    }

    .mcl_cloud__2 {
      right:  0;
      height: 60px;
      border-radius: 0 30px 30px 0;
      animation: cloud-2 2s infinite ease-in-out alternate;
    }

    .mcl_cloud__3 {
      top:  16px;
      left: 20px;
      width:  40px;
      height: 40px;
      border-radius: 50%;
      animation: cloud-3 1s infinite ease-in-out alternate;
    }

    .mcl_cloud__4, .mcl_cloud__5 {
      width:  50px;
      height: 50px;
      border-radius: 50%;
    }

    .mcl_cloud__4 {
      top:   0;
      left: 50px;
      animation: cloud-4 1.25s infinite ease-in-out alternate;
    }

    .mcl_cloud__5 {
      top:    5px;
      right: 25px;
      animation: cloud-5 2.5s infinite ease-in-out alternate;
    }

    .mcl_rain {
      position: absolute;
      bottom: 0;
      width:   5px;
      height: 15px;
      background-color: #fff;
      border-radius: 3px;
      animation: rain 1s infinite ease-in forwards;
    }

    .mcl_rain--1 {
      left: 40px;
    }

    .mcl_rain--2 {
      left: 56px;
    }

    .mcl_rain--3 {
      left: 72px;
    }

    .mcl_rain--4 {
      left: 88px;
    }

    .mcl_rain--5 {
      left: 104px;
    }

    .mcl_rain--6 {
      left: 120px;
    }

    .mcl_rain:nth-child(6)  {animation-delay: 0s;}
    .mcl_rain:nth-child(7)  {animation-delay: .5s;}
    .mcl_rain:nth-child(8)  {animation-delay: .25s;}
    .mcl_rain:nth-child(9)  {animation-delay: .75s;}
    .mcl_rain:nth-child(10) {animation-delay: .1s;}
    .mcl_rain:nth-child(11) {animation-delay: .35s;}
    .mcl_rain:nth-child(12) {animation-delay: .6s;}
    .mcl_rain:nth-child(13) {animation-delay: .85s;}
    .mcl_rain:nth-child(14) {animation-delay: .15s;}
    .mcl_rain:nth-child(15) {animation-delay: .65s;}
    .mcl_rain:nth-child(16) {animation-delay:  0s;}
    .mcl_rain:nth-child(17) {animation-delay: .25s;}
    .mcl_rain:nth-child(18) {animation-delay: .5s;}
    .mcl_rain:nth-child(19) {animation-delay: .75s;}
    .mcl_rain:nth-child(20) {animation-delay: .35s;}
    .mcl_rain:nth-child(21) {animation-delay: .85s;}


@keyframes cloud-1 {
  0%   {transform: translate3d( 0,  0,0)}
  100% {transform: translate3d(-5px,0,0)}
}

@keyframes cloud-2 {
  0%   {transform: translate3d(0,  0,0)}
  100% {transform: translate3d(5px,0,0)}
}

@keyframes cloud-3 {
  0%   {transform: translate3d( 0,  0,  0)}
  100% {transform: translate3d(-2px,2px,0)}
}

@keyframes cloud-4 {
  0%   {transform: scale(1)}
  100% {transform: scale(1.1)}
}

@keyframes cloud-5 {
  0%   {transform: translate3d(0,  0,  0)}
  100% {transform: translate3d(3px,3px,0)}
}

@keyframes rain {
  0%   {transform: translate3d(0,  0,  0); opacity: 1}
  100% {transform: translate3d(0,100px,0); opacity: 0}
}





/*--------------------*\
   #MAGNIFYING GLASS
\*--------------------*/



.mcl_loader--search {
}

  .mcl_search {
    position: absolute;
    top:  50%;
    left: 50%;
    margin: -85px 0 0 -55px;
    transform-origin: 40% 40%;
  }

  .searching .mcl_search {
    animation: rotation 3s infinite linear;
  }

  .mcl_search--small {
    margin: -34px 0 0 -22px;
  }

    .mcl_search__glass {
      position: relative;
      width:  110px;
      height: 110px;
      border: solid 1px;
      border-radius: 50%;
      overflow: hidden;
      -webkit-transform: translate3d(0,0,0);
              transform: translate3d(0,0,0);
    }

    .searching .mcl_search__glass {
      animation: rotation 3s infinite linear reverse;
    }

    .mcl_search--small > .mcl_search__glass {
      width:  44px;
      height: 44px;
    }

      .mcl_search__glass:after {
        content: '';
        position: absolute;
        top:    0;
        right:  0;
        bottom: 0;
        left:   0;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 100%);
        box-shadow: inset 0 0 0 1px #fff;
      }

      .mcl_search__glass__paper {
        position: absolute;
        top:    0;
        right:  0;
        bottom: 0;
        left:   0;
        border-radius: 50%;
        overflow: hidden;
        opacity: 0;
        transition: opacity .3s;
      }

      .searching .mcl_search__glass__paper {
        opacity: 1;
      }

        .mcl_search__glass__paper__ {
          position: absolute;
          top:    -50px;
          right:  -50px;
          bottom: -50px;
          left:   -50px;
          transform-origin: 56% 44%;
        }

        .searching .mcl_search__glass__paper__ {
          animation: rotation 3s infinite linear;
        }

        .mcl_search--small .mcl_search__glass__paper__ {
          top:    -20px;
          right:  -20px;
          bottom: -20px;
          left:   -20px;
        }

          .mcl_search__glass__paper__text {
            position: absolute;
            top:    0;
            right:  0;
            bottom: 0;
            left:   0;
            padding: 40px 20px 0 10px;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.1;
            white-space: normal;
          }

          .searching .mcl_search__glass__paper__text {
            animation: rotation 3s infinite linear reverse;
          }

          .mcl_search--small .mcl_search__glass__paper__text {
            padding: 16px 0 0;
            font-size: 9px;
          }

          .mcl_search__glass__paper__logos {
            position: absolute;
            top:    0;
            right:  0;
            bottom: 0;
            left:   0;
            padding: 40px 20px 0 10px;
          }

          .searching .mcl_search__glass__paper__logos {
            animation: rotation 3s infinite linear reverse;
          }

          .mcl_search--small .mcl_search__glass__paper__logos {
            padding: 16px 8px 0 4px;
          }

            .mcl_search__glass__paper__logos__ {
              float: left;
              width:  48px;
              height: 27px;
              margin: 8px 0 2px 6px;
              border-radius: 3px;
              background-color: #ccc;
            }

            .mcl_search--small .mcl_search__glass__paper__logos__ {
              width:  19px;
              height: 10px;
              margin: 3px 0 1px 2px;
              border-radius: 1px;
            }

            .mcl_search__glass__paper__logos__:nth-child(5) {
              background-color: #50f;
            }

    .mcl_search__handle {
      width:  14px;
      height: 60px;
      margin: 0 auto;
      background-color: #888;
      border-radius: 0 0 7px 7px;
      transform-origin: 50% -55px;
      transform: rotate(-20deg);
    }

    .searching .mcl_search__handle {
      animation: rotation_back 3s infinite cubic-bezier(.4,.5,.6,.5);
    }

    .mcl_search--small > .mcl_search__handle {
      width:  6px;
      height: 24px;
      border-radius: 0 0 2px 2px;
      transform-origin: 50% -22px;
    }

@keyframes rotation {
  from   {transform: rotate(  0deg)}
  to {transform: rotate(360deg)}
}

@keyframes rotation_back {
  from   {transform: rotate(340deg)}
  to {transform: rotate(-20deg)}
}
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 * LAYOUT RULES
 *
 *  1) NOTIFICATIONS
 *
 */




/*----------------*\
   #NOTIFICATIONS
\*----------------*/




.aa_notification {
  position: relative;
  display: block;
  margin-bottom: 5px;
  padding: 20px 60px;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .3rem;
  color: #fff;
  background-color: #00C1C1;
  background: linear-gradient(to bottom, #03407d 0%, #047ac1 100%);
  transition: box-shaodow .15s;
}

  .aa_notification__btn {
    padding: 2px 5px;
    border: solid 2px #fff;
    border-radius: 3px;
    background-color: #000;
    box-shadow: 0 2px 4px rgba(0,0,0,.5)
  }

  .aa_notification__close {
    position: absolute;
    top:   50%;
    right: 20px;
    width:  30px;
    height: 30px;
    margin-top: -15px;
    padding-top: 3px;
    font-size: 2rem;
  }
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * http://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 *
 *  1) SECTIONS...............................Sections for posts
 *
 *  2) GRID
 *
 *  3) SCROLL BOX
 *
 *  4) FEATURED POST
 *
 */





/*------------*\
   #SECTIONS
\*------------*/




.aa_post-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to top, rgba(130,130,130,.1) 0%, rgba(130,130,130,0) 180px);
}

.aa_post-section--shadow {
  background: rgba(130,130,130,.2);
  box-shadow: inset 0 20px 20px -20px rgba(0,0,0,.25), inset 0 -20px 20px -20px rgba(130,130,130,.5);
}

.aa_post-section--no-grad- {
  background: none;
}

.aa_post-section--img {
  background-repeat:   no-repeat;
  background-position: center center;
  background-size:     cover;
}

.aa_post-section--img.aa_post-section--shadow {
  box-shadow: inset 0 20px 20px -20px rgba(0,0,0,.5), inset 0 -20px 20px -20px rgba(0,0,0,.5);
}

  .aa_ps__title {
    margin: 20px auto;
    padding: 0 14px;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #2C70B4;
  }

  .aa_ps__title--base {
    color: inherit;
  }

  .aa_ps__indicator {
    position: absolute;
    bottom: 0;
    left:   0;
    margin: 0 14px;
    font-size: 1.2rem;
    opacity: .5;
  }

    .aa_ps__indicator:before {
      position: relative;
      top: 2px;
      margin-right: 5px;
    }

@media all and (min-width: 768px) {
  .aa_post-section:before {
    padding-bottom: 40%;
  }
}

@media all and (min-width: 1024px) {
  .aa_post-section:before {
    padding-bottom: 30%;
  }
}





/*--------*\
   #GRID
\*--------*/



.aa_pg {
  position: relative;
  margin: 0 auto;
  padding: 0 14px;
}

  .aa_pg__elem, .aa_pgs__elem {
    position: relative;
    margin-bottom: 20px;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

    .aa_pg__elem__a, .aa_pgs__elem__a {
      color: inherit;
    }

      .aa_pg__elem__a__media, .aa_pgs__elem__a__media {
        float: left;
        display: block;
        position: relative;
        width:  140px;
        height: 140px;
        margin: 0 10px 10px -14px;
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
      }

      .aa_pgs__elem__a__media {
        float: none;
        width:  auto;
        margin: 0 -14px 10px -14px;
      }

        .aa_pg__elem__a__media:after, .aa_pgs__elem__a__media:after {
          content: '';
          position: absolute;
          top:    0;
          right:  0;
          bottom: 0;
          left:   0;
          box-shadow: inset 0 0 0 1px rgba(130,130,130,.2);
        }

        .aa_pg__elem__a__media__img, .aa_pgs__elem__a__media__img {
          height: 100%;
          transition: transform .3s;
        }

        .aa_pg__elem__a:hover > .aa_pg__elem__a__media > .aa_pg__elem__a__media__img,
        .aa_pgs__elem__a:hover > .aa_pgs__elem__a__media > .aa_pgs__elem__a__media__img {
          transition: transform 2s cubic-bezier(.1,.7,.3,.8);
          -webkit-transform: scale(1.1);
                  transform: scale(1.1);
        }

      .aa_pg__elem__a__title, .aa_pgs__elem__a__title {
        display: block;
        margin: 0;
        margin-bottom: 10px;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 2rem;
        color: inherit;
        overflow: hidden;
        transition: color .3s;
      }

      .aa_pgs__elem__a__title {
        font-size: 2.2rem;
        line-height: 2.6rem;
      }

      .touchevents .aa_pg__elem__a__title, .touchevents .aa_pgs__elem__a__title {
        transition-delay: .3s;
      }

      .aa_pg__elem__a__title--featured, .aa_pgs__elem__a__title--featured {
        border-left: solid 7px #f70;
        padding-left: 7px;
      }

      .aa_pg__elem__a:visited > .aa_pg__elem__a__title, .aa_pg__elem__a.read > .aa_pg__elem__a__title,
      .aa_pgs__elem__a:visited > .aa_pgs__elem__a__title, .aa_pgs__elem__a.read > .aa_pgs__elem__a__title {
        color: rgba(130,130,130,1);
      }

      .no-touchevents .aa_pg__elem__a:hover > .aa_pg__elem__a__title, .no-touchevents .aa_pg__elem__a.read:hover > .aa_pg__elem__a__title,
      .touchevents .aa_pg__elem__a:active > .aa_pg__elem__a__title, .touchevents .aa_pg__elem__a.read:active > .aa_pg__elem__a__title,
      .no-touchevents .aa_pgs__elem__a:hover > .aa_pgs__elem__a__title, .no-touchevents .aa_pgs__elem__a.read:hover > .aa_pgs__elem__a__title,
      .touchevents .aa_pgs__elem__a:active > .aa_pgs__elem__a__title, .touchevents .aa_pgs__elem__a.read:active > .aa_pgs__elem__a__title {
        color: #f70;
        transition: color .15s;
        transition-delay: 0s;
      }

    .aa_pg__elem__label, .aa_pgs__elem__label {
      position: absolute;
      z-index: 1;
      top: 0;
      right: calc(100% - 130px);
      max-width: 140px;
      padding: 0 5px;
      border-radius: 2px 2px 0 2px;
      font-size: 1rem;
      font-weight: 500;
      line-height: 20px;
      color: #fff;
      background: linear-gradient(to bottom, #a70 0%, #f70 100%);
    }

    .aa_pgs__elem__label {
      top: 125px;
      right: auto;
      left: 0;
      max-width: calc(100% - 5px);
    }

    .aa_pg__elem__label--badge, .aa_pgs__elem__label--badge {
      background: linear-gradient(to bottom, #999 0%, #666 100%);
    }

      .aa_pg__elem__label:before, .aa_pgs__elem__label:before {
        content: '';
        position: absolute;
        right:  0;
        bottom: -5px;
        width:  0;
        height: 0;
        border-style: solid;
        border-width: 5px 5px 0 0;
        border-color: #00f transparent transparent transparent;
      }

      .aa_pgs__elem__label:before {
        right: -5px;
        bottom: 0;
      }

      .aa_pg__elem__label--badge:before, .aa_pgs__elem__label--badge:before {
        border-color: #333 transparent transparent transparent;
      }

      .aa_pg__elem__label > span, .aa_pgs__elem__label > span {
        display: block;
      }

    .aa_pg__elem__description, .aa_pgs__elem__description {
      margin-bottom: 10px;
      font-size: 1.4rem;
      font-weight: 300;
      line-height: 2rem;
    }

    .aa_pg__elem__data, .aa_pgs__elem__data {
      clear: both;
      display: inline-block;
      font-size: 1.2rem;
      line-height: 2rem;
    }

      .aa_pg__elem__data__date, .aa_pgs__elem__data__date {
        float: right;
        margin-left: 10px;
        font-weight: 300;
        opacity: .3;
      }

      .aa_pg__elem__data__img, .aa_pgs__elem__data__img {
        float: left;
        width:  1.8rem;
        height: 1.8rem;
        margin-right: 5px;
        border: solid 1px #888;
        border-radius: 50%;
        background-color: #ccc;
        background-repeat:   no-repeat;
        background-position: center center;
        background-size:     cover;
      }

      .aa_pg__elem__data__author, .aa_pgs__elem__data__author {
        display: block;
        font-weight: 500;
        color: inherit;
        opacity: .3;
        transition: .3s;
        -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
      }

      a.aa_pg__elem__data__author:hover, a.aa_pgs__elem__data__author:hover {
        color: #f70;
        opacity: 1;
      }

@media all and (max-width: 767px) {
  .aa_pg__elem:nth-child(5n+1) > .aa_pg__elem__label {
    top: 125px;
    right: auto;
    left: 0;
    max-width: calc(100% - 5px);
  }

  .aa_pg__elem:nth-child(5n+1) > .aa_pg__elem__label:before {
    right: -5px;
    bottom: 0;
  }

  .aa_pg__elem:nth-child(5n+1) > .aa_pg__elem__a > .aa_pg__elem__a__media {
    float: none;
    width:  auto;
    margin: 0 -14px 10px -14px;
  }

  .aa_pg__elem:nth-child(5n+1) > .aa_pg__elem__a > .aa_pg__elem__a__title {
    font-size: 2.6rem;
    line-height: 3rem;
  }
}

@media all and (min-width: 768px) {
  .aa_pg__elem, .aa_pgs__elem {
    float: left;
    width: calc((100% - 42px) / 3);
  }

  .aa_pg__elem__label, .aa_pgs__elem__label {
    top: 125px;
    right: auto;
    left: 0;
    max-width: calc(100% - 5px);
  }

  .aa_pg__elem__label:before, .aa_pgs__elem__label:before {
    right: -5px;
    bottom: 0;
  }

  .aa_pg__elem__a__media, .aa_pgs__elem__a__media {
    float: none;
    width:  auto;
    height: 140px;
    margin: 0 0 10px -14px;
  }

  .aa_pgs__elem__a__title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2rem;
  }
}

@media all and (min-width: 768px) and (max-width: 1023px) {
  .aa_pg__elem:nth-child(3n+1), .aa_pgs__elem:nth-child(3n+1) {clear: both}
  .aa_pg__elem:nth-child(3n+2), .aa_pgs__elem:nth-child(3n+2) {margin: 0 21px 20px}

  .aa_pg__elem:nth-child(9n+1), .aa_pg__elem:nth-child(3n+1):last-child {
    width: 66.66667%;
  }

  .aa_pg__elem:nth-child(9n+2), .aa_pg__elem:nth-child(9n+3) {
    float: right;
    width: calc((100% - 42px) / 3);
    margin: 0 0 20px 0;
  }

  .aa_pg__elem:nth-child(9n+3) {
    clear: right;
  }

  .aa_pg__elem:nth-child(3n+2) > .aa_pg__elem__label, .aa_pgs__elem:nth-child(3n+2) > .aa_pgs__elem__label {left: 7px}
  .aa_pg__elem:nth-child(3n+3) > .aa_pg__elem__label, .aa_pgs__elem:nth-child(3n+3) > .aa_pgs__elem__label {left: 14px}

  .aa_pg__elem:nth-child(9n+1) > .aa_pg__elem__label, .aa_pg__elem:nth-child(3n+1):last-child > .aa_pg__elem__label {
    top: 273px;
  }

  .aa_pg__elem:nth-child(9n+3) > .aa_pg__elem__label {
    position: relative;
    top:   0;
    right: 0;
    left:  0;
    display: inline-block;
    margin-bottom: 10px;
  }

  .aa_pg__elem:nth-child(9n+3) > .aa_pg__elem__label:before {
    right:   0;
    bottom: -5px;
  }

  .aa_pg__elem:nth-child(3n+2) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pgs__elem:nth-child(3n+2) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {margin: 0 -7px 10px -7px}

  .aa_pg__elem:nth-child(3n+3) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pgs__elem:nth-child(3n+3) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {margin: 0 -14px 10px 0}

  .aa_pg__elem:nth-child(9n+1) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pg__elem:nth-child(3n+1):last-child > .aa_pg__elem__a > .aa_pg__elem__a__media {
    height: 288px;
  }

  .aa_pg__elem:nth-child(9n+2) > .aa_pg__elem__a > .aa_pg__elem__a__media {
    margin: 0 -14px 10px 0;
  }

  .aa_pg__elem:nth-child(9n+3) > .aa_pg__elem__a > .aa_pg__elem__a__media {
    display: none;
  }

  .aa_pg__elem:nth-child(9n+1) > .aa_pg__elem__a > .aa_pg__elem__a__title,
  .aa_pg__elem:nth-child(3n+1):last-child > .aa_pg__elem__a > .aa_pg__elem__a__title {
    font-size: 2.6rem;
    line-height: 3rem;
  }

  .aa_pg__elem:nth-child(9n+2) .aa_pg__elem__description {
    display: none;
  }
}

@media all and (min-width: 1024px) {
  .aa_pg__elem, .aa_pgs__elem {
    margin-bottom: 24px;
  }

  .aa_pg__elem__a__media, .aa_pgs__elem__a__media {
    height: 192px;
    margin-bottom: 12px;
  }

  .aa_pg__elem__a__title, .aa_pgs__elem__a__title {
    margin-bottom: 12px;
    font-size: 2.2rem;
    line-height: 2.4rem;
  }

  .aa_pg__elem__label, .aa_pgs__elem__label {
    top: 177px;
    font-size: 1.2rem;
  }

  .aa_pg__elem__description, .aa_pgs__elem__description {
    margin-bottom: 12px;
    font-size: 1.6rem;
    line-height: 2.4rem;
  }

  .aa_pg__elem__data, .aa_pgs__elem__data {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }

  .aa_pg__elem__data__img, .aa_pgs__elem__data__img {
    width:  2.2rem;
    height: 2.2rem;
  }
}

@media all and (min-width: 1024px) and (max-width: 1359px) {
  .aa_pg__elem:nth-child(3n+1), .aa_pgs__elem:nth-child(3n+1) {clear: both}
  .aa_pg__elem:nth-child(3n+2), .aa_pgs__elem:nth-child(3n+2) {margin: 0 21px 24px}

  .aa_pg__elem:nth-child(9n+1), .aa_pg__elem:nth-child(3n+1):last-child {
    width: 50%;
  }

  .aa_pg__elem:nth-child(9n+2), .aa_pg__elem:nth-child(9n+3) {
    float: right;
    width: calc((100% - 28px) / 2);
    margin: 0 0 20px 0;
  }

  .aa_pg__elem:nth-child(9n+3) {
    clear: right;
  }

  .aa_post-section:first-child .aa_pg__elem:first-child {
    width: 66.66667%;
  }

  .aa_post-section:first-child .aa_pg__elem:nth-child(2),
  .aa_post-section:first-child .aa_pg__elem:nth-child(3) {
    width: calc((100% - 42px) / 3);
  }

  .aa_pg__elem:nth-child(3n+2) > .aa_pg__elem__label, .aa_pgs__elem:nth-child(3n+2) > .aa_pgs__elem__label {left: 7px}
  .aa_pg__elem:nth-child(3n+3) > .aa_pg__elem__label, .aa_pgs__elem:nth-child(3n+3) > .aa_pgs__elem__label {left: 14px}

  .aa_pg__elem:nth-child(9n+1) > .aa_pg__elem__label,
  .aa_pg__elem:nth-child(3n+1):last-child > .aa_pg__elem__label {
    top: 273px;
  }

  .aa_pg__elem:nth-child(9n+2) > .aa_pg__elem__label,
  .aa_pg__elem:nth-child(9n+3) > .aa_pg__elem__label {
    position: relative;
    top:   0;
    right: 0;
    left:  0;
    display: inline-block;
    margin-bottom: 4px;
  }

  .aa_pg__elem:nth-child(9n+2) > .aa_pg__elem__label:before,
  .aa_pg__elem:nth-child(9n+3) > .aa_pg__elem__label:before {
    right:   0;
    bottom: -5px;
  }

  .aa_post-section:first-child .aa_pg__elem:first-child > .aa_pg__elem__label {
    top: 393px;
  }

  .aa_post-section:first-child .aa_pg__elem:nth-child(2) > .aa_pg__elem__label {
    position: absolute;
    top:   177px;
    right: auto;
    left:  14px;
    margin-bottom: 0;
  }

  .aa_post-section:first-child .aa_pg__elem:nth-child(2) > .aa_pg__elem__label:before {
    right: -5px;
    bottom: 0;
  }

  .aa_pg__elem:nth-child(3n+2) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pgs__elem:nth-child(3n+2) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {margin: 0 -7px 12px -7px}
  .aa_pg__elem:nth-child(3n+3) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pgs__elem:nth-child(3n+3) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {margin: 0 -14px 12px 0}

  .aa_pg__elem:nth-child(9n+1) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pg__elem:nth-child(3n+1):last-child > .aa_pg__elem__a > .aa_pg__elem__a__media {
    height: 288px;
  }

  .aa_pg__elem:nth-child(9n+2) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pg__elem:nth-child(9n+3) > .aa_pg__elem__a > .aa_pg__elem__a__media {
    float: right;
    width: calc((100% - 14px) / 3);
    max-width: 168px;
    height: auto;
    margin-right: -14px;
    margin-left:   14px
  }

  .aa_pg__elem:nth-child(9n+2) > .aa_pg__elem__a > .aa_pg__elem__a__media:before,
  .aa_pg__elem:nth-child(9n+3) > .aa_pg__elem__a > .aa_pg__elem__a__media:before {
    content: '';
    display: block;
    padding-bottom: 100%;
  }

  .aa_pg__elem:nth-child(9n+2) > .aa_pg__elem__a > .aa_pg__elem__a__media > .aa_pg__elem__a__media__img,
  .aa_pg__elem:nth-child(9n+3) > .aa_pg__elem__a > .aa_pg__elem__a__media > .aa_pg__elem__a__media__img {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
  }

  .aa_post-section:first-child .aa_pg__elem:first-child > .aa_pg__elem__a > .aa_pg__elem__a__media {
    height: 408px;
  }

  .aa_post-section:first-child .aa_pg__elem:nth-child(2) > .aa_pg__elem__a > .aa_pg__elem__a__media {
    float: none;
    width: auto;
    max-width: none;
    height: 192px;
    margin-left: 0;
  }

  .aa_post-section:first-child .aa_pg__elem:nth-child(2) > .aa_pg__elem__a > .aa_pg__elem__a__media:before {
    display: none;
  }

  .aa_post-section:first-child .aa_pg__elem:nth-child(2) > .aa_pg__elem__a > .aa_pg__elem__a__media > .aa_pg__elem__a__media__img {
    position: relative;
  }

  .aa_pg__elem:nth-child(9n+1) > .aa_pg__elem__a > .aa_pg__elem__a__title,
  .aa_pg__elem:nth-child(3n+1):last-child > .aa_pg__elem__a > .aa_pg__elem__a__title {
    font-size: 3.3rem;
    line-height: 3.6rem;
  }

  .aa_post-section:first-child .aa_pg__elem:nth-child(3) .aa_pg__elem__description {
    display: none;
  }
}

@media all and (min-width: 1360px) {
  .aa_pg__elem, .aa_pgs__elem {
    width: calc((100% - 70px) / 4);
    margin-right: 21px;
  }

  .aa_pg__elem__a__media, .aa_pgs__elem__a__media {
    height: 192px;
    margin: 0 -7px 12px -7px;
  }

  .aa_pg__elem__label, .aa_pgs__elem__label {
    top: 177px;
    left: 7px;
  }
}

@media all and (min-width: 1360px) {
  .aa_pg__elem:nth-child(10n+1), .aa_pg__elem:nth-child(10n+4), .aa_pg__elem:nth-child(10n+8), .aa_pgs__elem:nth-child(4n+1) {clear: both}
  .aa_pg__elem:nth-child(10n), .aa_pg__elem:nth-child(10n+3), .aa_pg__elem:nth-child(10n+7), .aa_pgs__elem:nth-child(4n) {margin-right: 0}
  .aa_pg__elem:nth-child(10n+5), .aa_pgs__elem:nth-child(4n+2) {margin-right: 28px}

  .aa_pg__elem:nth-child(10n),
  .aa_pg__elem:nth-child(10n+1),
  .aa_pg__elem:nth-child(10n+4):last-child,
  .aa_pg__elem:nth-child(10n+8):last-child {
    width: calc(50% - 7px);
  }

  .aa_post-section:first-child .aa_pg__elem:first-child {width: calc(75% + 3px); margin-right: 14px}
  .aa_post-section:first-child .aa_pg__elem:nth-child(2) {margin: 0 0 24px}

  .aa_pg__elem:nth-child(10n+1) > .aa_pg__elem__label,
  .aa_pg__elem:nth-child(10n+4) > .aa_pg__elem__label,
  .aa_pg__elem:nth-child(10n+8) > .aa_pg__elem__label,
  .aa_pgs__elem:nth-child(4n+1) > .aa_pgs__elem__label {
    left: 0;
  }

  .aa_pg__elem:nth-child(10n) > .aa_pg__elem__label,
  .aa_pg__elem:nth-child(10n+3) > .aa_pg__elem__label,
  .aa_pg__elem:nth-child(10n+7) > .aa_pg__elem__label,
  .aa_post-section:first-child .aa_pg__elem:nth-child(2) > .aa_pg__elem__label,
  .aa_pgs__elem:nth-child(4n) > .aa_pgs__elem__label {
    left: 14px;
  }

  .aa_pg__elem:nth-child(10n) > .aa_pg__elem__label,
  .aa_pg__elem:nth-child(10n+1) > .aa_pg__elem__label,
  .aa_pg__elem:nth-child(10n+4):last-child > .aa_pg__elem__label,
  .aa_pg__elem:nth-child(10n+8):last-child > .aa_pg__elem__label {
    top: 273px;
  }

  .aa_post-section:first-child .aa_pg__elem:first-child > .aa_pg__elem__label {top: 465px}

  .aa_pg__elem:nth-child(10n+1) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pg__elem:nth-child(10n+4) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pg__elem:nth-child(10n+8) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pgs__elem:nth-child(4n+1) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {
    margin: 0 0 12px -14px;
  }

  .aa_pg__elem:nth-child(10n) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pg__elem:nth-child(10n+3) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pg__elem:nth-child(10n+7) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pgs__elem:nth-child(4n) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {
    margin: 0 -14px 12px 0;
  }

  .aa_post-section:first-child .aa_pg__elem:first-child > .aa_pg__elem__a > .aa_pg__elem__a__media {height: 480px}
  .aa_post-section:first-child .aa_pg__elem:nth-child(2) > .aa_pg__elem__a > .aa_pg__elem__a__media {margin: 0 -14px 12px 0}

  .aa_pg__elem:nth-child(10n) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pg__elem:nth-child(10n+1) > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pg__elem:nth-child(10n+4):last-child > .aa_pg__elem__a > .aa_pg__elem__a__media,
  .aa_pg__elem:nth-child(10n+8):last-child > .aa_pg__elem__a > .aa_pg__elem__a__media {
    height: 288px;
  }

  .aa_pg__elem:nth-child(10n) > .aa_pg__elem__a > .aa_pg__elem__a__title,
  .aa_pg__elem:nth-child(10n+1) > .aa_pg__elem__a > .aa_pg__elem__a__title,
  .aa_pg__elem:nth-child(10n+4):last-child > .aa_pg__elem__a > .aa_pg__elem__a__title,
  .aa_pg__elem:nth-child(10n+8):last-child > .aa_pg__elem__a > .aa_pg__elem__a__title {
    font-size: 3.3rem;
    line-height: 3.6rem;
  }

  .aa_post-section:first-child .aa_pg__elem:first-child > .aa_pg__elem__a > .aa_pg__elem__a__title {
    font-size: 4.4rem;
    line-height: 4.8rem;
  }

  .aa_post-section:first-child .aa_pg__elem:nth-child(2) .aa_pg__elem__description,
  .aa_post-section:first-child .aa_pg__elem:nth-child(3) .aa_pg__elem__description {
    display: none;
  }
}

@media all and (min-width: 1640px) {
  .aa_pg__elem__a__media, .aa_pgs__elem__a__media {
    height: 216px;
    margin: 0 -7px 12px -7px;
  }

  .aa_pg__elem__label, .aa_pgs__elem__label {
    top: 201px;
    left: 7px;
  }
}





/*--------------*\
   #SCROLL BOX
\*--------------*/



.aa_ps {
  padding: 1px 0 14px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 0;
  -webkit-overflow-scrolling: touch;
          overflow-scrolling: touch;
  -webkit-scroll-snap-type: mandatory;
          scroll-snap-type: mandatory;
  -webkit-scroll-snap-destination: 14px 0;
          scroll-snap-destination: 14px 0;
  -webkit-transform: translate3d(0,0,0); /* fix scrolling bug on desktop */
          transform: translate3d(0,0,0);
}

.aa_ps--small {

}

.aa_ps--4 {

}

@media all and (max-width: 1024px) {
  .aa_ps--in {
    transform: translate3d(50%,0,0);
    animation: ps_in 1s cubic-bezier(.1,.7,.3,.8) forwards;
  }
}

@keyframes ps_in {
  0% {transform: translate3d(168px,0,0)}
  100% {transform: translate3d(0,0,0)}
}

  .aa_ps__elem {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 42px);
    margin-right: 14px;
    white-space: normal;
    -webkit-scroll-snap-coordinate: 0 0;
            scroll-snap-coordinate: 0 0;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .aa_ps--bands > .aa_ps__elem {
    width: calc(66% - 7px);
    margin-right: 1px;
  }

  .aa_ps--bands > .aa_ps__elem:last-child {
    margin-right: 14px;
  }

  .aa_ps--no-inset > .aa_ps__elem {
    width: calc(100% - 28px);
  }

  .aa_ps__elem:first-child {
    margin-left: 14px;
  }

@media all and (min-width: 480px) {
  .aa_ps__elem {
    width: calc((100% - 56px) / 2);
  }

  .aa_ps--no-inset > .aa_ps__elem {
    width: calc((100% - 42px) / 2);
  }

  .aa_ps--bands > .aa_ps__elem {
    width: calc((100% - 14px) / 2.5);
  }
}

@media all and (min-width: 768px) {
  .aa_ps--bands > .aa_ps__elem {
    width: calc((100% - 29px) / 3);
  }
}

@media all and (min-width: 1024px) {
  .aa_ps {
    -webkit-scroll-snap-destination:  50% 50%;
            scroll-snap-destination:  50% 50%;
  }

  .aa_ps__elem, .aa_ps--no-inset > .aa_ps__elem {
    width: calc((100% - 56px) / 3);
    -webkit-scroll-snap-coordinate: 50% 50%;
            scroll-snap-coordinate: 50% 50%;
  }

  .aa_ps--bands {
    -webkit-scroll-snap-destination: calc((100% - 996px) / 2) 0;
            scroll-snap-destination: calc((100% - 996px) / 2) 0;
  }

  .aa_ps--bands > .aa_ps__elem {
    -webkit-scroll-snap-coordinate: 0 0;
            scroll-snap-coordinate: 0 0;
  }

  .aa_ps__elem:first-child {
    margin-left: calc((100% - 996px) / 2);
  }

  .aa_ps__elem:last-child {
    margin-right: calc((100% - 996px) / 2);
  }

  .aa_ps--small > .aa_ps__elem:first-child {margin-left: 14px}
  .aa_ps--small > .aa_ps__elem:last-child {margin-right: 14px}

  .aa_ps--bands > .aa_ps__elem {
    width: calc(996px / 3);
  }

  .aa_ps--bands > .aa_ps__elem:last-child {
    margin-right: calc((100% - 996px) / 2);
  }
}

@media only screen and (min-width: 1224px) {
  .aa_ps--bands {
    -webkit-scroll-snap-destination: 114px 0;
            scroll-snap-destination: 114px 0;
  }

  .aa_ps__elem, .aa_ps--no-inset > .aa_ps__elem {
    width: calc((100% - 256px) / 3);
  }

  .aa_ps--small > .aa_ps__elem {
    width: calc((100% - 70px) / 3);
  }

  .aa_ps__elem:first-child {
    margin-left: 114px;
  }

  .aa_ps__elem:last-child {
    margin-right: 114px;
  }

  .aa_ps--bands > .aa_ps__elem {
    width: calc((100% - 229px) / 3);
  }

  .aa_ps--bands > .aa_ps__elem:last-child {
    margin-right: 114px;
  }
}

@media only screen and (min-width: 1360px) {
  .aa_ps__elem, .aa_ps--no-inset > .aa_ps__elem {
    width: calc((100% - 270px) / 4);
  }

  .aa_ps--bands > .aa_ps__elem {
    width: calc((100% - 229px) / 4);
  }
}

@media only screen and (min-width: 1740px) {
  .aa_ps--bands {
    -webkit-scroll-snap-destination: calc((100% - 1512px) / 2) 0;
            scroll-snap-destination: calc((100% - 1512px) / 2) 0;
  }

  .aa_ps__elem, .aa_ps--no-inset > .aa_ps__elem {
    width: calc((1540px - 70px) / 4);
  }

  .aa_ps__elem:first-child {
    margin-left: calc((100% - 1512px) / 2);
  }

  .aa_ps__elem:last-child {
    margin-right: calc((100% - 1512px) / 2);
  }

  .aa_ps--bands > .aa_ps__elem {
    width: calc(1512px / 4);
  }

  .aa_ps--bands > .aa_ps__elem:last-child {
    margin-right: calc((100% - 1512px) / 2);
  }
}





/*-----------------*\
   #FEATURED POST
\*-----------------*/



.aa_pf {
  display: block;
  color: inherit;
}

  .aa_pf:before {
    content: '';
    display: block;
    height: 220px;
  }

  .aa_pf__media, .aa_pf__overlay {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .aa_pf__media {
    overflow: hidden;
  }

    .aa_pf__media__img {
      height: 100%;
      transition: transform .3s;
    }

    .aa_pf:hover > .aa_pf__media > .aa_pf__media__img {
      transition: transform 2s cubic-bezier(.1,.7,.3,.8);
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }

  .aa_pf__overlay {
    background-color: rgba(0,0,0,.5);
    box-shadow: inset 0 0 0 1px rgba(130,130,130,.4);
    opacity: .5;
    transition: opacity .3s;
  }

  .touchevents .aa_pf__overlay {
    transition-delay: .3s;
  }

  .no-touchevents .aa_pf:hover > .aa_pf__overlay,
  .touchevents .aa_pf:active > .aa_pf__overlay {
    opacity: .75;
    transition: opacity .15s;
  }

  .aa_pf__data {
    position: absolute;
    top:  50%;
    right: 0;
    left:  0;
    padding: 14px;
    text-align: center;
    text-shadow: 1px 1px rgba(0,0,0,.5);
    color: #fff;
    -webkit-transform: translate3d(0,-50%,0);
            transform: translate3d(0,-50%,0);
  }

    .aa_pf__data__title {
      margin: 0;
      font-size: 3rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .aa_pf__data__img {
      display: inline-block;
      vertical-align: middle;
      width:  18px;
      height: 18px;
      margin: 7px 5px 0 0;
      border: solid 1px #888;
      border-radius: 50%;
      background-color: #ccc;
      background-repeat:   no-repeat;
      background-position: center center;
      background-size:     cover;
    }

    .aa_pf__data__author {
      display: inline-block;
      vertical-align: middle;
      margin-top: 7px;
      font-size: 1.2rem;
      font-weight: 500;
      opacity: .7;
    }

@media all and (min-width: 768px) {
  .aa_pf__data__title {
    font-size: 3.6rem;
  }

  .aa_pf__data__author {
    font-size: 1.4rem;
  }
}

@media all and (min-width: 1024px) {
  .aa_pf:before {
    height: 320px;
  }

  .aa_pf__data__title {
    font-size: 4.2rem;
  }

  .aa_pf__data__author {
    font-size: 1.6rem;
  }
}

@media only screen and (min-width: 1360px) {
  .aa_pf__data__title {
    font-size: 4.6rem;
  }

  .aa_pf__data__author {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1740px) {
  .aa_pf__data__title {
    font-size: 5rem;
  }

  .aa_pf__data__author {
    font-size: 2rem;
  }
}
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 *
 *  1) GRID...................................Post grid
 *
 */





/*--------*\
   #GRID
\*--------*/




.aa_pg {
  position: relative;
  margin: 0 auto;
  padding: 0 14px;
}

  .aa_pgs__elem {
    position: relative;
    margin-bottom: 20px;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

    .aa_pgs__elem__a {
      color: inherit;
    }

      .aa_pgs__elem__a__media {
        float: none;
        display: block;
        position: relative;
        width:  auto;
        height: 140px;
        margin: 0 -14px 10px -14px;
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
      }

        .aa_pgs__elem__a__media:after {
          content: '';
          position: absolute;
          top:    0;
          right:  0;
          bottom: 0;
          left:   0;
          box-shadow: inset 0 0 0 1px rgba(130,130,130,.2);
        }

        .aa_pgs__elem__a__media__img {
          position: relative;
          height: 100%;
          transition: transform .3s;
        }

        .aa_pgs__elem__a:hover > .aa_pgs__elem__a__media > .aa_pgs__elem__a__media__img {
          transition: transform 2s cubic-bezier(.1,.7,.3,.8);
          -webkit-transform: scale(1.1);
                  transform: scale(1.1);
        }

      .aa_pgs__elem__a__title {
        display: block;
        margin: 0;
        margin-bottom: 10px;
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 2.6rem;
        color: inherit;
        overflow: hidden;
        transition: color .3s;
      }

      .touchevents .aa_pgs__elem__a__title {
        transition-delay: .3s;
      }

      .aa_pgs__elem__a__title--featured {
        border-left: solid 7px #f70;
        padding-left: 7px;
      }

      .aa_pgs__elem__a:visited > .aa_pgs__elem__a__title, .aa_pgs__elem__a.read > .aa_pgs__elem__a__title {
        color: rgba(130,130,130,1);
      }

      .no-touchevents .aa_pgs__elem__a:hover > .aa_pgs__elem__a__title, .no-touchevents .aa_pgs__elem__a.read:hover > .aa_pgs__elem__a__title,
      .touchevents .aa_pgs__elem__a:active > .aa_pgs__elem__a__title, .touchevents .aa_pgs__elem__a.read:active > .aa_pgs__elem__a__title {
        color: #f70;
        transition: color .15s;
        transition-delay: 0s;
      }

    .aa_pgs__elem__label {
      position: absolute;
      z-index: 1;
      top: 125px;
      right: auto;
      left: 0;
      max-width: calc(100% - 5px);
      padding: 0 5px;
      border-radius: 2px 2px 0 2px;
      font-size: 1rem;
      font-weight: 500;
      line-height: 20px;
      color: #fff;
      background: linear-gradient(to bottom, #a70 0%, #f70 100%);
    }

    .aa_pgs__elem__label--badge {
      background: linear-gradient(to bottom, #999 0%, #666 100%);
    }

      .aa_pgs__elem__label:before {
        content: '';
        position: absolute;
        right: -5px;
        bottom: 0;
        width:  0;
        height: 0;
        border-style: solid;
        border-width: 5px 5px 0 0;
        border-color: #00f transparent transparent transparent;
      }

      .aa_pgs__elem__label--badge:before {
        border-color: #333 transparent transparent transparent;
      }

      .aa_pgs__elem__label > span {
        display: block;
      }

    .aa_pgs__elem__description {
      margin-bottom: 10px;
      font-size: 1.4rem;
      font-weight: 300;
      line-height: 2rem;
    }

    .aa_pgs__elem__data {
      clear: both;
      display: inline-block;
      font-size: 1.2rem;
      line-height: 2rem;
    }

      .aa_pgs__elem__data__date {
        float: right;
        margin-left: 10px;
        font-weight: 300;
        opacity: .3;
      }

      .aa_pgs__elem__data__img {
        position: relative;
        float: left;
        width:  1.8rem;
        height: 1.8rem;
        margin-right: 5px;
        border: solid 1px #888;
        border-radius: 50%;
        background-color: #ccc;
        overflow: hidden;
      }

      .aa_pgs__elem__data__author {
        display: block;
        font-weight: 500;
        color: inherit;
        opacity: .3;
        transition: .3s;
        -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
      }

      a.aa_pgs__elem__data__author:hover {
        color: #f70;
        opacity: 1;
      }

@media (min-width: 768px) {
  .aa_pgs__elem {
    float: left;
    width: calc((100% - 42px) / 3);
  }

  .aa_pgs__elem__label {
    top: 125px;
    right: auto;
    left: 0;
    max-width: calc(100% - 5px);
  }

  .aa_pgs__elem__label:before {
    right: -5px;
    bottom: 0;
  }

  .aa_pgs__elem__a__media {
    float: none;
    width:  auto;
    height: 140px;
    margin: 0 0 10px -14px;
  }

  .aa_pgs__elem__a__title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .aa_pgs__elem:nth-child(3n+1) {clear: both}
  .aa_pgs__elem:nth-child(3n+2) {margin: 0 21px 20px}

  .aa_pgs__elem:nth-child(3n+2) > .aa_pgs__elem__label {left: 7px}
  .aa_pgs__elem:nth-child(3n+3) > .aa_pgs__elem__label {left: 14px}

  .aa_pgs__elem:nth-child(3n+2) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {margin: 0 -7px 10px -7px}

  .aa_pgs__elem:nth-child(3n+3) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {margin: 0 -14px 10px 0}
}

@media (min-width: 1024px) {
  .aa_pgs__elem {
    margin-bottom: 24px;
  }

  .aa_pgs__elem__a__media {
    height: 192px;
    margin-bottom: 12px;
  }

  .aa_pgs__elem__a__title {
    margin-bottom: 12px;
    font-size: 2.2rem;
    line-height: 2.4rem;
  }

  .aa_pgs__elem__label {
    top: 177px;
    font-size: 1.2rem;
  }

  .aa_pgs__elem__description {
    margin-bottom: 12px;
    font-size: 1.6rem;
    line-height: 2.4rem;
  }

  .aa_pgs__elem__data {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }

  .aa_pgs__elem__data__img {
    width:  2.2rem;
    height: 2.2rem;
  }
}

@media (min-width: 1024px) and (max-width: 1359px) {
  .aa_pgs__elem:nth-child(3n+1) {clear: both}
  .aa_pgs__elem:nth-child(3n+2) {margin: 0 21px 24px}

  .aa_pgs__elem:nth-child(3n+2) > .aa_pgs__elem__label {left: 7px}
  .aa_pgs__elem:nth-child(3n+3) > .aa_pgs__elem__label {left: 14px}


  .aa_pgs__elem:nth-child(3n+2) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {margin: 0 -7px 12px -7px}
  .aa_pgs__elem:nth-child(3n+3) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {margin: 0 -14px 12px 0}
}

@media (min-width: 1360px) {
  .aa_pgs__elem {
    width: calc((100% - 70px) / 4);
    margin-right: 21px;
  }

  .aa_pgs__elem__a__media {
    height: 192px;
    margin: 0 -7px 12px -7px;
  }

  .aa_pgs__elem__label {
    top: 177px;
    left: 7px;
  }
}

@media (min-width: 1360px) {
  .aa_pgs__elem:nth-child(4n+1) {clear: both}
  .aa_pgs__elem:nth-child(4n) {margin-right: 0}
  .aa_pgs__elem:nth-child(4n+2) {margin-right: 28px}

  .aa_pgs__elem:nth-child(4n+1) > .aa_pgs__elem__label {
    left: 0;
  }

  .aa_pgs__elem:nth-child(4n) > .aa_pgs__elem__label {
    left: 14px;
  }

  .aa_pgs__elem:nth-child(4n+1) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {
    margin: 0 0 12px -14px;
  }

  .aa_pgs__elem:nth-child(4n) > .aa_pgs__elem__a > .aa_pgs__elem__a__media {
    margin: 0 -14px 12px 0;
  }
}

@media (min-width: 1640px) {
  .aa_pgs__elem__a__media {
    height: 216px;
    margin: 0 -7px 12px -7px;
  }

  .aa_pgs__elem__label {
    top: 201px;
    left: 7px;
  }
}
/* wordpress helpers */

.contains-iframe {
  position: relative;
  display: block;
  height: 0;
  padding-bottom: 56.25%;
}

  .contains-iframe > iframe {
    position: absolute;
    top:  0;
    left: 0;
    width:  100%;
    height: 100%;
  }



.wp-caption {
  max-width: 100%;
  margin: 0 auto;
  width: auto;
}

  .wp-caption-text {
    font-size: .8em;
    opacity: .5;
    margin: -15px 0 15px 5px;
    text-align: center;
  }
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * LAYOUT RULES
 *
 *  1) SECTIONS
 *
 */



/*------------*\
   #SECTIONS
\*------------*/




.aa_sct {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to top, rgba(130,130,130,.1) 0%, rgba(130,130,130,0) 180px);
}

.aa_sct-nograd {
  background: none;
}

.aa_sct-shadow {
  background: rgba(130,130,130,.2);
  box-shadow: inset 0 20px 20px -20px rgba(0,0,0,.25), inset 0 -20px 20px -20px rgba(130,130,130,.5);
}

.aa_sct-img {
  background-repeat:   no-repeat;
  background-position: center center;
  background-size:     cover;
}

.aa_sct-img.aa_sct-shadow {
  box-shadow: inset 0 20px 20px -20px rgba(0,0,0,.5), inset 0 -20px 20px -20px rgba(0,0,0,.5);
}

  .aa_sct_ttl {
    margin: 20px auto;
    padding: 0 14px;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #2C70B4;
  }

  .aa_sct_ttl-base {
    color: inherit;
  }
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 *
 *  1) SEARCH
 *
 *  2) RESULTS
 *
 */





/*----------*\
   #SEARCH
\*----------*/




.aa_search {
  position: fixed;
  z-index: 10; /* above menu helper which is 9 */
  top:  60px;
  right:  0;
  bottom: 0;
  left:   0;
  padding-top: 155px;
  background-color: inherit;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
  transition: transform .3s, opacity .3s;
  -webkit-overflow-scrolling: touch;
          overflow-scrolling: touch;
  -webkit-transform: translate3d(0,20px,0);
          transform: translate3d(0,20px,0);
}

.aa_search--tv {
  padding-top: 103px;
}

.aa_search--app {
  top: 166px;
  padding-top: 0;
}

.touchevents .aa_search {
  display: none; /* fix bug on ios */
}

.touchevents .aa_search.open {
  display: block;
}

.aa_search.open {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}



.aa_search-space {
  height: 120px;
}



.aa_search-title {
}

  .aa_st__ {
    display: none;
    margin: 10px 0;
    text-align: center;
  }

  .aa_st__--base {
    display: block;
  }

  .search > .aa_st__--base, .success > .aa_st__--base, .error > .aa_st__--base {
    display: none;
  }

  .search > .aa_st__--search {
    display: block;
  }

  .success > .aa_st__--success, .error > .aa_st__--error {
    display: block;
  }

  .success > .aa_st__--error {
    display: none;
  }

    .aa_st__title {
      font-size: 3rem;
      font-weight: 700;
      opacity: .5;
    }

      .aa_st__title:before {
        content: attr(data-count);
      }

    .aa_st__subtitle {
      font-size: 1.6rem;
      font-weight: 300;
      color: rgba(130,130,130,.5);
    }



.aa_search-nav {
  display: none;
  padding: 0 10px;
  font-size: 0;
  text-align: justify;
  box-shadow: 0 1px rgba(130,130,130,.2);
}

.success ~ .aa_search-nav {
  display: block;
}

  .aa_search-nav > button {
    float: left;
    margin-bottom: 20px;
    padding: 10px 10px 1px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(130,130,130,.2);
    font-size: 2.6rem;
    transition: .3s;
  }

  .aa_search-nav > button:last-child {
    float: right;
  }

  .aa_search-nav > button:hover {
    color: #07f;
  }



.aa_search-types {
  text-align: center;
  box-shadow: 0 1px rgba(130,130,130,.2);
}

  .aa_search-types > button {
    margin-left: 1px;
    padding: 5px 10px;
    font-size: 1.4rem;
    font-weight: 500;
    box-shadow: 1px 0 rgba(130,130,130,.2);
    transition: background-color .3s, color .3s;
  }

  .aa_search-types > button:last-child {
    box-shadow: none;
  }

  .aa_search-types > button:hover {
    background-color: rgba(130,130,130,.2);
  }

  .aa_search-types > button.active {
    background-color: #07f;
    color: #fff;
  }

@media (min-width: 480px) {
  .aa_search-types > button {
    font-size: 1.6rem;
  }
}



.aa_search-labels {
  padding: 20px;
  font-size: 0;
  text-align: center;
}

  .aa_sl__elem {
    display: inline-block;
    vertical-align: top;
    margin: 0 5px 5px 0;
    padding: 5px;
    border-radius: 2px;
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
    background-color: #888;
    transition: background-color .3s;
  }

  .aa_sl__elem:hover {
    background-color: #07f;
  }

@media (min-width: 480px) {
  .aa_sl__elem {
    padding: 5px 10px;
    font-size: 1.4rem;
  }
}





/*-----------*\
   #RESULTS
\*-----------*/




.aa_sr {
  padding: 0 14px;
  font-size: 0;
}

  .aa_sr__article {
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 14px) / 2);
    margin-bottom: 20px;
  }

    .aa_sr__article__ {
      display: block;
      color: inherit;
    }

      .aa_sr__article__media {
        position: relative;
        height: 120px;
        margin: 0 0 10px -14px;
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
      }

        .aa_sr__article__media:after {
          content: '';
          position: absolute;
          top:    0;
          right:  0;
          bottom: 0;
          left:   0;
          box-shadow: inset 0 0 0 1px rgba(130,130,130,.2);
        }

        .aa_sr__article__media__img {
          height: 100%;
          transition: transform .3s;
        }

        .aa_sr__article__:hover > .aa_sr__article__media > .aa_sr__article__media__img {
          transition: transform 2s cubic-bezier(.1,.7,.3,.8);
          -webkit-transform: scale(1.1);
                  transform: scale(1.1);
        }

      .aa_sr__article__title {
        font-size: 1.6rem;
        font-weight: 700;
      }

      .aa_sr__article__date {
        font-size: 1.2rem;
        font-weight: 300;
        opacity: .3;
      }

@media (max-width: 767px) {
  .aa_sr__article:nth-child(2n) {
    margin-left: 14px;
  }

  .aa_sr__article:nth-child(2n) > .aa_sr__article__ > .aa_sr__article__media {
    margin: 0 -14px 10px 0;
  }
}

@media (min-width: 768px) {
  .aa_sr__article {
    width: calc((100% - 42px) / 3);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .aa_sr__article:nth-child(3n+2) {
    margin-left:  21px;
    margin-right: 21px;
  }

  .aa_sr__article:nth-child(3n+2) > .aa_sr__article__ > .aa_sr__article__media {
    margin: 0 -7px 10px -7px;
  }

  .aa_sr__article:nth-child(3n) > .aa_sr__article__ > .aa_sr__article__media {
    margin: 0 -14px 10px 0;
  }
}

@media (min-width: 1024px) {
  .aa_sr__article {
    width: calc((100% - 70px) / 4);
  }
}

@media (min-width: 1024px) {
  .aa_sr__article {
    margin-right: 21px;
  }

  .aa_sr__article:nth-child(4n) {
    margin-right: 0;
  }

  .aa_sr__article:nth-child(4n+2) {
    margin-right: 28px;
  }

  .aa_sr__article:nth-child(4n+2) > .aa_sr__article__ > .aa_sr__article__media,
  .aa_sr__article:nth-child(4n+3) > .aa_sr__article__ > .aa_sr__article__media {
    margin: 0 -7px 10px -7px;
  }

  .aa_sr__article:nth-child(4n) > .aa_sr__article__ > .aa_sr__article__media {
    margin: 0 -14px 10px 0;
  }
}

@media (min-width: 1360px) {
  .aa_sr__article__media {
    height: 160px;
  }

  .aa_sr__article__title {
    font-size: 2rem;
  }

  .aa_sr__article__date {
    font-size: 1.4rem;
  }
}

@media (min-width: 1610px) {
  .aa_sr__article__media {
    height: 200px;
  }

  .aa_sr__article__title {
    font-size: 2.4rem;
  }

  .aa_sr__article__date {
    font-size: 1.6rem;
  }
}

  .aa_sr__app {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin-bottom: 14px;
  }

    .aa_sr__app__ {
      display: block;
      color: inherit;
    }

      .aa_sr__app__media {
        float: left;
        width: 80px;
        margin-right: 14px;
      }

      .aa_sr__app__media--tv {
        width: 142px;
      }

      .aa_sr__app__text {
        overflow: hidden;
      }

        .aa_sr__app__text:before {
          content: '';
          display: inline-block;
          vertical-align: middle;
          height: 80px;
        }

        .aa_sr__app__text__ {
          display: inline-block;
          vertical-align: middle;
          width: 100%;
        }

          .aa_sr__app__text__title {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
            transition: color .3s;
          }

          .aa_sr__app__:hover .aa_sr__app__text__title {
            color: #07f;
          }

          .aa_sr__app__text__developer {
            font-size: 1.2rem;
            font-weight: 300;
            opacity: .5;
          }

@media (min-width: 768px) {
  .aa_sr__app {
    width: calc((100% - 14px) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .aa_sr__app:nth-child(2n+1) {
    margin-right: 14px;
  }
}

@media (min-width: 1024px) {
  .aa_sr__app {
    width: calc((100% - 42px) / 3);
  }
}

@media (min-width: 1024px) and (max-width: 1359px) {
  .aa_sr__app:nth-child(3n+2) {
    margin-right: 14px;
    margin-left:  14px;
  }
}

@media (min-width: 1360px) {
  .aa_sr__app {
    width: calc((100% - 70px) / 4);
  }
}

@media (min-width: 1360px) {
  .aa_sr__app {
    margin-right: 14px;
  }

  .aa_sr__app:nth-child(4n) {
    margin-right: 0;
  }
}
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * LAYOUT RULES
 *
 *  1) SHARE
 *
 */



/*---------*\
   #SHARE
\*---------*/




.share {
  position: relative;
  padding: 0 10px;
  margin:  5px 0;
  overflow: hidden;
  font-size: 0;
}

  .share__link {
    font-size: 2rem;
    width: 2em;
    display: inline-block;
    text-align: center;
    line-height: 2em;
    color: rgba(125,125,125,1);
    -webkit-transition: .2s ease;
            transition: .2s ease;
  }

    .share__link:before {
      position: relative;
      top: 2px;
    }

  .share__link--fb:hover, .share__link--fb:focus {
    color: #3b5997;
  }

  .share__link--tw:hover, .share__link--tw:focus {
    color: #41b7d8;
  }

  .share__link--go:hover, .share__link--go:focus {
    color: #d64937;
  }

  .share__link--tu:hover, .share__link--tu:focus {
    color: #35465c;
  }

  .share__link--pi:hover, .share__link--pi:focus {
    color: #cb2027;
  }

  .share__link--re:hover, .share__link--re:focus {
    color: #ff5700;
  }

  .share__link:hover, .share__link:focus {
    box-shadow: 0 0 0 1px;
  }
/*------------*\
   #TAXONOMY
\*------------*/




.taxonomy {
  padding: 100px 0;
  text-align: center;
  background-color: #222;
  color: #fff;
  margin-bottom: 20px;
}

  .taxonomy__title {
    font-size: 3.6rem;
    font-weight: 100;
    padding: 0 20px;
  }

  .taxonomy__title--shadow {
    text-shadow: 2px 1px rgba(4, 186, 158, 1), -1px -3px rgba(0, 153, 255, 1);
  }

  .taxonomy__data {
    font-size: 1.4rem;
    opacity: .5;
    padding: 0 20px;
  }
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 *
 *  1) FEATURED ELEM
 *
 */





/*-----------------*\
   #FEATURED ELEM
\*-----------------*/




.aa_fp {
  position: relative;
  display: block;
  border-bottom: solid 7px;
  color: inherit;
}

  .aa_fp:before {
    content: '';
    display: block;
    padding-bottom: 150%;
  }

  .aa_fp:after {
    content: '';
    position: absolute;
    top: 100%;
    left:  0;
    width: 16.66667%;
    height: 7px;
    background-color: rgba(130,130,130,.5);
  }

  .aa_ws_lm:nth-child(1) > .aa_fp:after {left: 0}
  .aa_ws_lm:nth-child(2) > .aa_fp:after {left: 16.66667%}
  .aa_ws_lm:nth-child(3) > .aa_fp:after {left: 33.33337%}
  .aa_ws_lm:nth-child(4) > .aa_fp:after {left: 50%}
  .aa_ws_lm:nth-child(5) > .aa_fp:after {left: 66.66667%}
  .aa_ws_lm:nth-child(n+6) > .aa_fp:after {left: 83.33337%}

  .aa_fp__media,
  .aa_fp__overlay {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .aa_fp__media {
    overflow: hidden;
  }

    .aa_fp__media__img {
      position: relative;
      height: 100%;
      transition: transform .3s;
    }

    .aa_fp:hover > .aa_fp__media > .aa_fp__media__img {
      transition: transform 2s cubic-bezier(.1,.7,.3,.8);
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }

  .aa_fp__overlay {
    background-color: rgba(130,130,130,.35);
    box-shadow: inset 0 0 0 1px rgba(130,130,130,.2);
  }

  .aa_fp__data {
    position: absolute;
    right:  0;
    bottom: 0;
    left:   0;
    padding: 7px;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

    .aa_fp__data__title {
      margin: 0 0 7px;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.1;
      text-shadow: 1px 1px rgba(0,0,0,.5);
      color: #fff;
      transition: color .3s;
    }

    .touchevents .aa_fp__data__title {
      transition-delay: .3s;
    }

    .no-touchevents .aa_fp:hover > .aa_fp__data > .aa_fp__data__title,
    .touchevents .aa_fp:active > .aa_fp__data > .aa_fp__data__title {
      color: inherit;
      transition: color .15s;
      transition-delay: 0s;
    }

    .aa_fp__data__img {
      position: relative;
      float: left;
      width:  1.4rem;
      height: 1.4rem;
      margin-right: 5px;
      border: solid 1px #888;
      border-radius: 50%;
      background-color: #ccc;
      overflow: hidden;
    }

    .aa_fp__data__author {
      display: block;
      font-size: 1rem;
      font-weight: 500;
      color: #fff;
      opacity: .7;
    }

@media (min-width: 480px) {
  .aa_fp__data__title {
    font-size: 1.8rem;
  }
}

@media (min-width: 768px) {
  .aa_fp__data {
    padding: 14px;
  }

  .aa_fp__data__title {
    font-size: 2rem;
  }

  .aa_fp__data__img {
    width:  1.8rem;
    height: 1.8rem;
  }

  .aa_fp__data__author {
    font-size: 1.2rem;
  }
}

@media (min-width: 1024px) {
  .aa_fp__data__title {
    font-size: 2.2rem;
  }
}
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION CAREFULLY:
 *
 * https://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Indentations are 2px
 * - Columns are 120px wide
 * - don't use [] in html inside class="" for grouping
 * - in html class="" don't use 2 space between classes, but put the related ones next to each other
 * - low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */





/*
 *
 *  1) SCROLL BOX
 *
 */





/*--------------*\
   #SCROLL BOX
\*--------------*/




.aa_ws {
  padding: 1px 0 14px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 0;
  -webkit-overflow-scrolling: touch;
          overflow-scrolling: touch;
  -webkit-scroll-snap-type: mandatory;
          scroll-snap-type: mandatory;
  -webkit-scroll-snap-destination: 14px 0;
          scroll-snap-destination: 14px 0;
  -webkit-transform: translate3d(0,0,0); /* fix scrolling bug on desktop */
          transform: translate3d(0,0,0);
}

.aa_ws-small {

}

  .aa_ws_lm {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 42px);
    margin-right: 14px;
    white-space: normal;
    -webkit-scroll-snap-coordinate: 0 0;
            scroll-snap-coordinate: 0 0;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .aa_ws_lm-s {
    width: calc((100% - 56px) / 2);
  }

  .aa_ws_lm-xs {
    width: calc((100% - 28px) / 3);
  }

  .aa_ws-no-inset > .aa_ws_lm {
    width: calc(100% - 28px);
  }

  .aa_ws_lm:first-child {
    margin-left: 14px;
  }

@media (min-width: 480px) {
  .aa_ws_lm {
    width: calc((100% - 56px) / 2);
  }

  .aa_ws_lm-s {
    width: calc((100% - 70px) / 3);
  }

  .aa_ws_lm-xs {
    width: calc((100% - 42px) / 4);
  }

  .aa_ws-no-inset > .aa_ws_lm {
    width: calc((100% - 42px) / 2);
  }
}

@media (min-width: 1024px) {
  .aa_ws {
    -webkit-scroll-snap-destination:  50% 50%;
            scroll-snap-destination:  50% 50%;
  }

  .aa_ws_lm, .aa_ws-no-inset > .aa_ws_lm {
    width: calc(968px / 3);
    -webkit-scroll-snap-coordinate: 50% 50%;
            scroll-snap-coordinate: 50% 50%;
  }

  .aa_ws_lm-s, .aa_ws_lm-xs {
    width: calc(954px / 4);
  }

  .aa_ws_lm:first-child {
    margin-left: calc((100% - 996px) / 2);
  }

  .aa_ws_lm:last-child {
    margin-right: calc((100% - 996px) / 2);
  }

  .aa_ws-small > .aa_ws_lm:first-child {margin-left: 14px}
  .aa_ws-small > .aa_ws_lm:last-child {margin-right: 14px}
}

@media only screen and (min-width: 1224px) {
  .aa_ws_lm, .aa_ws-no-inset > .aa_ws_lm {
    width: calc((100% - 256px) / 3);
  }

  .aa_ws-small > .aa_ws_lm {
    width: calc((100% - 70px) / 3);
  }

  .aa_ws_lm-s, .aa_ws_lm-xs {
    width: calc((100% - 284px) / 5);
  }

  .aa_ws_lm:first-child {
    margin-left: 114px;
  }

  .aa_ws_lm:last-child {
    margin-right: 114px;
  }
}

@media only screen and (min-width: 1360px) {
  .aa_ws_lm, .aa_ws-no-inset > .aa_ws_lm {
    width: calc((100% - 270px) / 4);
  }

  .aa_ws_lm-s, .aa_ws_lm-xs {
    width: calc((100% - 284px) / 5);
  }
}

@media only screen and (min-width: 1740px) {
  .aa_ws_lm, .aa_ws-no-inset > .aa_ws_lm {
    width: calc((1540px - 70px) / 4);
  }

  .aa_ws_lm-s, .aa_ws_lm-xs {
    width: calc((100% - 298px) / 6);
  }

  .aa_ws_lm:first-child {
    margin-left: calc((100% - 1512px) / 2);
  }

  .aa_ws_lm:last-child {
    margin-right: calc((100% - 1512px) / 2);
  }
}
.watch-featured-head {
  text-align: center;
  font-size: 22px;
  font-weight: 100;
  padding-top: 10px;
  background-color: #ddd;
}

.watch-featured {
  white-space: nowrap;
  margin-bottom: 10px;
  font-size: 0;
  background-color: #ddd;
  color: #fff;
}

  .watch-featured__elem {
    position: relative;
    display: inline-block;
    padding: 5px 0 35px;
    white-space: normal;
    width: 25%;
    text-align: center;
    color: inherit;
  }

    .watch-featured__elem:after {
      content: "details";
      position: absolute;
      right:  0;
      bottom: 8px;
      left:   0;
      text-align: center;
      font-size: 12px;
      color: #f70;
      opacity: 0;
      -webkit-transition: .2s ease-in-out;
              transition: .2s ease-in-out;
    }

    .watch-featured__elem:hover:after {
      opacity: 1;
    }

    .watch-featured__icon {
      width:  100px;
      height: 100px;
      margin: 20px auto 10px;
      border-radius: 50%;
      overflow: hidden;
      background-color: rgba(125,125,125,.2);
    }

       .watch-featured__icon > img {
         width: 100%;
       }

    .watch-featured__title {
      font-size: 18px;
      text-align: center;
      -webkit-transition: .2s ease-in-out;
              transition: .2s ease-in-out;
    }

    .watch-featured__elem:hover > .watch-featured__title, .watch-featured__elem:focus > .watch-featured__title {
      color: #f70;
    }

    .watch-featured__developer {
      margin-top: -3px;
      font-size: 12px;
      opacity: .5;
      text-align: center;
    }



.watch-categories {
  font-size: 0;
  overflow: hidden;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}

  .watch-categories__term {
    display: block;
    color: inherit;
    padding: 40px 20px;
    box-shadow: 0 -1px rgba(0,0,0,.1);
    -webkit-transition: .2s ease-in-out;
            transition: .2s ease-in-out;
  }

  .watch-categories__term:hover, .watch-categories__term:focus {
    box-shadow: 0 1px 10px rgba(0,0,0,.1);
    background-color: #fff;
  }

    .watch-categories__term__text {
      text-align: center;
      -webkit-transition: .2s ease-in-out;
              transition: .2s ease-in-out;
    }

    .watch-categories__term:hover > .watch-categories__term__text, .watch-categories__term:focus > .watch-categories__term__text {
      color: #f70;
    }

      .watch-categories__term__text:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }

      .watch-categories__term__text__wrap {
        display: inline-block;
        vertical-align: middle;
      }

      .watch-categories__term__title {
        display: block;
        font-size: 28px;
        font-weight: 500;
        text-transform: uppercase;
      }

      .watch-categories__term__sub {
        font-size: 16px;
      }

    .watch-categories__term__samples {
      overflow: hidden;
    }

    .watch-categories__term__samples__sample {
      display: inline-block;
    }

    @media all and (min-width: 768px) {
      .watch-categories__term__samples {
        height: 180px;
      }

      .watch-categories__term__text {
        text-align: left;
        float: left;
        height: 180px;
        width: 320px;
        margin-left: 5%;
      }
    }



.watch-sample {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 33.33337%;
}

  .watch-sample__icon {
    width:  50px;
    height: 50px;
    margin: 20px auto 10px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    overflow: hidden;
    background-color: rgba(125,125,125,.2);
  }

    .watch-sample__icon > img {
      width: 100%;
    }

  .watch-sample__title {
    font-size: 18px;
  }

  .watch-sample__developer {
    margin-top: -3px;
    font-size: 12px;
    opacity: .5;
  }

@media all and (min-width: 768px) {
  .watch-sample__icon {
    width:  100px;
    height: 100px;
    margin: 40px auto 10px;
  }
}



.watch-category {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}

@media all and (min-width: 600px) {
  .watch-category {
    width: 50%;
  }
}

@media all and (min-width: 900px) {
  .watch-category {
    width: 33.33337%;
  }
}

@media all and (min-width: 1500px) {
  .watch-category {
    width: 25%;
  }
}

  .watch-category__pad {
    box-sizing: border-box;
  }

    .watch-category__wrap {
      display: block;
      padding: 40px 10px 30px;
      color: #222;
      text-align: center;
      box-shadow: 1px 1px rgba(0,0,0,.1);
      -webkit-transition: .2s ease-in-out;
              transition: .2s ease-in-out;
    }

    @media all and (min-width: 600px) {
      .watch-category__wrap {
        padding: 80px 10px 60px;
      }
    }

    .watch-category__wrap.search-result {
      padding: 0;
    }

    .watch-category__wrap:hover, .watch-category__wrap:focus {
      background-color: #fff;
      box-shadow: 1px 3px 10px rgba(0,0,0,.2);
    }

      .watch-category__icon {
        display: inline-block;
        vertical-align: top;
        width: 30px;
        height: 30px;
        background-color: rgba(0,0,0,.1);
        border-radius: 50%;
        margin: 0 10px;
        overflow: hidden;
      }

        .watch-category__icon > img {
          width: 100%;
        }

      .watch-category__elem {
        font-size: 22px;
        text-transform: uppercase;
        color: inherit;
        margin-top: 20px;
        -webkit-transition: .2s ease-in-out;
                transition: .2s ease-in-out;
      }

      .watch-category__wrap:hover > .watch-category__elem, .watch-category__wrap:focus > .watch-category__elem {
        color: #f70;
      }



.watch-title {
  margin:  20px 0 0;
}

h1.watch-title {font-size: 42px;}
h2.watch-title {font-size: 36px;}

  .watch-title > .fa {
    position: relative;
    top: -2px;
  }

.watch-developer {
  font-size: 14px;
}

  .watch-developer > span {
    font-style: italic;
    font-weight: 300;
    color: #888;
  }

  .watch-developer__name {
    text-decoration: none;
    font-weight: 300;
    color: #aaa;
    -webkit-transition: .2s ease-in-out;
            transition: .2s ease-in-out;
  }

  .watch-developer__name:hover, .watch-developer__name:focus {
    color: #f70;
  }



.watch-app-wrapper {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  margin-right: -3px;
  text-align: left;
  white-space: normal;
}

.watch-app-samples .watch-app-wrapper {
  box-shadow: none;
}

@media screen and (min-width: 600px) {
  .watch-app-wrapper {
    width: 50%;
  }
}

@media screen and (min-width: 900px) {
  .watch-app-wrapper {
    width: 33.333337%;
  }
}

@media screen and (min-width: 1500px) {
  .watch-app-wrapper {
    width: 25%;
  }
}

.watch-app-wrapper--only {
  width: 100%;
  margin-right: 0;
}

@media screen and (min-width: 768px) {
  .watch-app-wrapper--only {
    width: 360px;
    float: left;
  }
}

  .watch-app-wrapper__title {
    display: block;
    margin: 20px 0 0;
    padding: 0 20px;
    text-align: center;
    font-size: 26px;
    font-weight: 300;
    color: #333;
    text-decoration: none;
  }

  .watch-app-wrapper__link {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    color: #999;
    text-decoration: none;
    -webkit-transition: .2s ease-in-out;
            transition: .2s ease-in-out;
  }

  .watch-app-wrapper__link:hover, .watch-app-wrapper__link:focus {
    color: #f70;
  }

  .watch-app-wrapper__pad {
    padding: 15px;
  }



.watch-app {
  position: relative;
  padding-top: 10px;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.1)
}

.watch-app--simple {
  padding: 0;
}

.watch-app-wrapper--only .watch-app, .watch-app-samples .watch-app, .watch-featured .watch-app, .watch-app--simple {
  background-color: transparent;
  box-shadow: none;
}

.search-result .watch-app {
  background-color: transparent;
  box-shadow: none;
  padding-bottom: 40px;
  padding-top: 30px;
}

  .watch-app__watch, .watch-app__sample {
    position: relative;
    width:  228px;
    margin: 10px auto 0;
    padding-left: 8px;
  }

  .watch-app--simple > .watch-app__watch {
    padding: 0;
    margin: 0;
  }

  .watch-app__load {
    position: absolute;
    display: none;
    z-index: 1;
    width:  220px;
    padding-left: 8px;
    top: 50%;
    margin-top: -142px;
    left: 31px;
    -webkit-transition: .4s ease-in-out;
            transition: .4s ease-in-out;
  }

  .js .watch-app__load {
    display: block;
  }

    .watch-app__load:after {
      content: "";
      position: absolute;
      top:  50%;
      left: 50%;
      margin: -11px 0 0 -10px;
      width:  23px;
      height: 23px;
      background-repeat:   no-repeat;
      background-position: center center;
      background-size:     contain;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////9ZMre9AAAAHnRSTlMAgLNN5gcOcx1IASY4FK4waV1UfUDXoXlikiqIwKkg/Z6KAAAB/klEQVRIx42S2bLCIBBEQWTfyZ5c//83r4GIg7EqnsfurklPGPQFz90wOO7RT8S/e+Yv/pQe7gfDD3lfZpf51334HcAv4w7G3WV8gPGhaPSUslQo+j1O/WosUzAsZ9xxudIvZeS2jMsy715BrXy8PXGbtJ+riulW2GSdvT0ObUms/ZE2pzOjORZ5S24xqnkm4m6VpdT3QHLBwiNg2w3Q5+EBStsKT0w/gOXmfbzlVSgNAeYBPb7/HNbG4ZkoM57iNDggLRq+h2jicbcUgdrGEGQC1mPNksbv8Q5Uzx6wQnlXKhdYryVVD4tDsmQrQ8Zg0QdMbuNe5MbfFvURj8s49VahEzoFHGbfDhGr1xQ0aY/bnjRG2fcwpUIL25pakih7cQ4r5hMPPPaCvicnPGGM+WxOdRjheKebDXt1i/ggmM8mCVfP0yKRrmrTR591qlYXiyeKVEhtlQgsbvLN9BhqFu4pArA6QnO9Dsabi9QcjkqsblPL6+b/ttP3uJJ5OtiVaSOl0U9TzHCUpHl7KM0UiZ5keoEYHNXpslAAkkFCkgMp1Bre+URPCyXGelLpGTPh1TLWf2bmV9oiTQAaMT/n+TwJVZ9ayBB4OWoD42b3PIlRegbfg1otdO4mYVzmYcp+Oe78rVP8glOZCz5WvaL9kZdxBZ8JXQOP4BdUPbEz/0O+HjQZAg82AAAAAElFTkSuQmCC");
      -webkit-animation: spin .75s steps(6) infinite;
              animation: spin .75s steps(6) infinite;
    }

    .watch-app__load.loaded:after {
      display: none;
    }

    @-webkit-keyframes spin {
      from { -webkit-transform: rotate(0deg); }
      to   { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

  .watch-app__load.loaded {
    opacity: 0;
    pointer-events: none;
  }

    .watch-app__load__img {
      height: 245px;
      background-repeat:   no-repeat;
      background-position: center center;
      background-size:     contain;
      background-image: url("data:image/png;base64,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");
    }

  .js .watch-app__load ~ .watch-app__watch, .watch-app__load ~ .watch-app__data {
    opacity: 0;
    -webkit-transition: .4s ease-in-out;
            transition: .4s ease-in-out;
  }

  .js .watch-app__load.loaded ~ .watch-app__watch, .watch-app__load.loaded ~ .watch-app__data {
    opacity: 1;
  }

  .no-js .watch-app__sample, .js .watch-app__watch {
    display: block;
  }

  .js .watch-app__sample, .no-js .watch-app__watch, .no-js .watch-app__data {
    display: none;
  }

    .watch-app__watch__band {
      height: 399px;
      background-repeat:   no-repeat;
      background-position: 5px center;
      background-size:     contain;
      background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/sport-black.png");
    }

    .watch-app__watch__band--no-band {
      display: none;
    }

    .watch-app__watch__band--sport-black   {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/sport-black.png");}
    .watch-app__watch__band--sport-blue    {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/sport-blue.png");}
    .watch-app__watch__band--sport-green   {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/sport-green.png");}
    .watch-app__watch__band--sport-pink    {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/sport-pink.png");}
    .watch-app__watch__band--sport-white   {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/sport-white.png");}
    .watch-app__watch__band--modern-blue   {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/modern-blue.png");}
    .watch-app__watch__band--modern-brown  {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/modern-brown.png");}
    .watch-app__watch__band--modern-pink   {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/modern-pink.png");}
    .watch-app__watch__band--modern-red    {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/modern-red.png");}
    .watch-app__watch__band--modern-rose   {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/modern-rose.png");}
    .watch-app__watch__band--milanese      {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/milanese.png");}
    .watch-app__watch__band--link-black    {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/link-black.png");}
    .watch-app__watch__band--link-grey     {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/link-grey.png");}
    .watch-app__watch__band--leather-blue  {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/leather-blue.png");}
    .watch-app__watch__band--leather-brown {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/leather-brown.png");}
    .watch-app__watch__band--leather-stone {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/leather-stone.png");}
    .watch-app__watch__band--classic-black {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/classic-black.png");}
    .watch-app__watch__band--classic-blue  {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/bands/classic-blue.png");}

    .watch-app__watch__img {
      position: absolute;
      top:   76px;
      right: 0;
      left:  8px;
      height: 245px;
      background-repeat:   no-repeat;
      background-position: center center;
      background-size:     contain;
      background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/watches/watch_steel.png");
    }

    .watch-app__watch__band--no-band + .watch-app__watch__img {
      position: relative;
      top:   0;
      right: 0;
      left:  0;
    }

    .watch-app__watch__img--steel       {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/watches/watch_steel.png");}
    .watch-app__watch__img--steel-black {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/watches/watch_steel_black.png");}
    .watch-app__watch__img--alu         {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/watches/watch_alu.png");}
    .watch-app__watch__img--alu-grey    {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/watches/watch_alu_grey.png");}
    .watch-app__watch__img--gold        {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/watches/watch_gold.png");}
    .watch-app__watch__img--gold-rose   {background-image: url("https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/watches/watch_gold_rose.png");}

      .watch-app__watch__img__screen {
        position: relative;
        top:  35px;
        left: 38px;
        width:  136px;
        height: 170px;
      }

      .watch-app__watch__crown {
        position: absolute;
        top: 58px;
        right: 0;
        border: none;
        outline: none;
        background-color: transparent;
        width: 15px;
        height: 40px;
        border-radius: 10px;
        cursor: pointer;
      }



  .watch-app__controls {
    position: relative;
    margin: 0 20px;
    text-align: center;
    font-size: 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
  }

  .watch-app-wrapper--only .watch-app__controls {
    box-shadow: 0 -1px 0 rgba(0,0,0,.1);
  }

    .watch-control-btn {
      vertical-align: top;
      font-family: inherit;
      font-size: 17px;
      width:  50px;
      height: 30px;
      padding: 0;
      border:  none;
      outline: none;
      box-shadow: -6px 0 0 -5px rgba(0,0,0,.1);
      background-color: transparent;
      color: rgba(0,0,0,.4);
      cursor: pointer;
      -webkit-transition: .2s ease-in-out;
              transition: .2s ease-in-out;
    }

    .watch-control-btn:first-child {
      box-shadow: none;
    }

    .watch-control-btn.active {
      color: rgba(0,0,0,.7);
      box-shadow: -6px 0 0 -5px rgba(0,0,0,.1), 0 1px rgba(0,0,0,.7);
    }

    .watch-control-btn:first-child.active {
      color: rgba(0,0,0,.7);
      box-shadow: 0 1px rgba(0,0,0,.7);
    }

    .watch-app-wrapper--only .watch-control-btn.active {
      box-shadow: -6px 0 0 -5px rgba(0,0,0,.1), 0 -1px rgba(0,0,0,.7);
    }

    .watch-app-wrapper--only .watch-control-btn:first-child.active {
      box-shadow: 0 -1px rgba(0,0,0,.7);
    }

      .watch-control-btn:before, .watch-control-btn:after {
        content: attr(data-str);
        display: block;
        position: absolute;
        top: 0;
        font-size: 12px;
        font-weight: 300;
        line-height: 30px;
        opacity: 0;
        pointer-events: none;
        -webkit-transition: .2s ease-in-out;
                transition: .2s ease-in-out;
      }

      .watch-control-btn:before {
        left: 0;
      }

      .watch-control-btn:after {
        right: 0;
      }

      .watch-control-btn:hover:after {
        opacity: 1;
      }

      .watch-control-btn.active:before {
        opacity: 1;
      }

      .watch-control-btn.active:hover:after {
        opacity: 0;
      }

      .watch-control-btn > i {
        position: relative;
        top: 2px;
      }



.watch-app__data {
  display: block;
  color: inherit;
  max-width: 480px;
  margin:  0 auto;
  padding: 10px 20px;
}

.watch-app-wrapper--only .watch-app__data {
  max-width: 320px;
}

  .watch-app__data__first {
  }

    .watch-app__data__icon {
      width:  50px;
      height: 50px;
      margin: 0 10px 10px 0;
      border-radius: 50%;
      overflow: hidden;
      float: left;
    }

      .watch-app__data__icon > img {
        max-width:  100%;
        max-height: 100%;
      }

    .watch-app__data__title {
      display: block;
      margin-top: 6px;
      font-weight: 400;
      font-size: 19px;
      color: #222;
      -webkit-transition: .2s ease-out;
              transition: .2s ease-out;
    }

    .watch-app__data:hover .watch-app__data__title, .watch-app__data:focus .watch-app__data__title {
      color: #f70;
    }

    .watch-app__data__info {
      font-size: 12px;
      margin-top: 10px;
    }

    .watch-app__data__developer {
      font-size: 12px;
      margin-top: -5px;
      opacity: .5;
    }

  .watch-app__data__last {
    position: relative;
    font-size: 14px;
    height: 63px;
    overflow: hidden;
  }

  .description-short .watch-app__data__last {
    display: none;
  }

    .watch-app__data__last:after {
      content: "";
      position: absolute;
      right:  0;
      bottom: 0;
      left:   50%;
      height: 1.4em;
      background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
      background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
    }

  .description-no .watch-app__data__first, .description-no .watch-app__data__last {
    display: none;
  }

  .description-short .watch-app__data__last {
    display: none;
  }



.watch-stage {
  position: relative;
  height: 100%;
  overflow: hidden;
}

  .watch-stage__blur {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    background-image: url('https://wind-cdn.watchaware.com/wp-content/themes/watchaware/watch-app-experience/images/AppleWatch-screen-blur.png');
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     contain;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: .4s ease-in-out;
            transition: .4s ease-in-out;
  }

  .blurred > .watch-stage__blur {
    opacity: 1;
  }

  .watch-stage__base {
    position: relative;
    height: 100%;
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     contain;
    -webkit-transition: .4s ease-in-out;
            transition: .4s ease-in-out;
  }

  .watch-stage__base:active {
    cursor: -webkit-grabbing;
    cursor:         grabbing;
  }

  .blurred > .watch-stage__base {
    opacity: 0;
  }

    .watch-icon {
      position: absolute;
      width:  36px;
      height: 36px;
      border-radius: 50%;
      background-repeat:   no-repeat;
      background-position: center center;
      background-size:     contain;
      background-color: rgba(255,255,255,.2);
      -webkit-transition: .4s ease-in-out;
              transition: .4s ease-in-out;
    }

    .watch-icon--xs {width:  8px; height:  8px; opacity: .35;}
    .watch-icon--s  {width: 24px; height: 24px; opacity: .40;}
    .watch-icon--m  {width: 28px; height: 28px; left: 50%; margin-left: -14px; opacity: .45;}
    .watch-icon--l  {width: 32px; height: 32px; opacity: .5;}

    .watch-icon--1  {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAABUFBMVEXq+/7q/P4v8vkVqvIRoPHp+v4y9/ox9fou7vkt6vkr5fgTpfISo/ESofEVrPIXsfPp+f7//O4aufT//fAx9vow8/ov7/kt7Pks6Pgr5/gUqPIUpvIcv/QewvUo3vcWrvMl1vck0/YYsvMj0PYZtPMhy/UgyPUZtfMat/P/10Eq4/gbu/T+2kccvPQq4vgp4Pj+20so3Pf93VAn2/cn2fcm2PcfxPX93lUfxfUizfb94l7+2ET/1j3/++385GX+1kD1+/fO9f394mL94Fv931n8/PP+76T85Wni+P7/8713wamTxZTT0GLu+/yu8/yn5ftX0fd87fvB9P2p7PyJ3/pE4/k+0Pf9/PBIuc7+54HX33uJ7vt65fo6xPZU0tz/+Ng8t9Z81bqnyYXj0lZa5/pJ5/l82fkjs+uU2q3+4m7s3GDt0kkt0O/k9uiZ1qSp1ZbXWrQcAAACOUlEQVRYw83S2VfTQBTH8etSd6UBd0GUXRF3sdJWEzQxW/eFbnQFEXD5/9+kRzu5M9PE4Zz70M9T+/D7npucwHkiExi6ToQudI0IXegqEbrQAyJwnwicIzKBoRtExoS6bt8/Th37fbd7mtC8oOYNUiMDrzavCqZ4rp/CfHdKER868D6JvAPF0ALmPZF5C0pgCXGTY0JJd0kFrAZqfnIcv7aqANYC3jPZoeV0dNvIfcuvRYNppjuQMnUnfWInEz+Ry09HQSH3pWDLSv+lx4fs8m5UaJ3pC51DJ41CQ7nd9VCwwfivOduONmLGWWkjDMwyR3zI0pid+Eh5NgwKvefU01qAhex8aGiOOeJCjoYvYnJzIVCo8QWpa4gZD+TDQpvM78+IhUM6Chn28POsboogwfS2EEcOYUa5muDBykii3UChDn5FmZislF/hAPr9azuQngnosXGKfAmWA+3GRwaFTHQQVqouI4D/9P5V6pajSQfJylzoA/b965DVYRHUkRlVNIVF7MewZGlRHayFprDI6zW4jok6shIOPRa0f5ook4EoBtpJoRZkdN00Z0xTFzIyG4ceCbKgzkY7KWSAOgOH3glioK6EdvBWYIC6FtrBG0EWlBkVtINXgsIZZU28g4eCSlG1k63gHQsxqicV97gZvJA01e7Z41fwXFb4/9MZzYowgqdj7BeyRlQlW9iXNnCFCF3oHhG4SwQuE6EL3SECl4jQhW4TgbNEJjB0iwhcJEIXukkELhAhC/0BmO6y4VNw83oAAAAASUVORK5CYII=)}
    .watch-icon--2  {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAA4VBMVEX///8AAAC4uLgDAwOBgYHr6+sjIyOgoKD/+fn/UUf/8O///f3/x8T/Myj/gnv/bGP/ST4MDAz4+PgdHR0BAQH/fXb/eXH/XFL/OzExMTEEBATu7u7/4d//vbn/saz/lI6KiopiYmL/Y1ry8vL/7Ovq6ur/5uTc3Nz/1tP/zcq8vLy0tLT/ran/oZz/jIZ9fX1oaGhOTk48PDz/Qzj/9fTT09PDw8PAwMD/t7Ourq7/qaSjo6Oenp6FhYVycnL6+vr/2tfLy8vHx8eZmZn/dW1YWFj/Kx/o6OhXV1dISEgqKirwQMZqAAAB2UlEQVRYw+3T126jUBSF4bXjsYduMNjYGIPBvfcWl/RMef8HGog01iSKJebo5CIK/8UWV5/WBQdpaZ+kpVK75eHUbF1faE2cGw2ZnPYivG176qMMyJKAqPCRbZCqRHc4XsrbvB2OlsJYF4sKA9RTNQlxbjn0tGcvhkoskKCpet7vAVJPgCBqQL4EpoRaSXwub4Hm0PcXxReINUmxdakr2lqxzL5oO5Kje622x7oEWYwXFZkgT/WbUs8OBb+sSJ4aL7LbAgMklFRdLItduNHNi8V43WIEFqk7vFYkAE1FkVwXkLs1F2lfpEYrW/j78apW47+cq4qZ2yDuZOZeZU6QvMLRIKIB4mb0piC5s5oTWZZzhbjN4fs/nSyaJmXkQ45o9pMyMfS2CRn9hE51SuQc5fq7UNakJyRsQFTZAd/ehV74hO0oaOEC9MOkSiEpdH8ALkEPZD0geRehwpwqDR7Q3qE6OEDRIKPDA1o7dAIPKIgG8YDWBgXgAT1RZsADWhk0u+EBHckZgAPUiV8HD2hCVAcHqJqj31Ue0N6KBnGAqhUyszygPVEAHtAvMlY8oI1BU3CA5Bll7tgh6wzdOzQvsEITojM0JWsH1jr9/vkHvOuvb5CWlpb2of0BmtQoQ3ezbogAAAAASUVORK5CYII=);}
    .watch-icon--3  {background-image: url(data:image/png;base64,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);}
    .watch-icon--4  {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAY1BMVEXm387///8Zgfr6yNJ8xUkeg/rM4/5/ufwvjfugy/1ysvxRmu/8/v+s0v1kqvxXo/tLnPs6k/vs9f/c7f6LwP1dp/yVuuC6y9hgoOvQ1dPPu9ppuGq52P0ghfpzquc1lMk4l8IGghysAAABYElEQVRYw+2Wy3LDIAxFK6Xi4fc7TpO0/f+vbLOIgwzMIG/DWXjGC5/hygj0EQPCfMbIoizKoix6N5GyRWeITFdYdVw02Jlwg2Y7HBPVLe5o6wOiURN6kL5KRecGg/zGTDFPiRF+rhLRZUWH+919a0YIERZ9I/uUx9TpooXV2QAYVvE6VXThBSoACr4LhkTRggwFoJBhE0V8QaYCqFg2nNNEZ/Jrq/m+VL4oKZmfLUm0esm8bEWSqNwn87N1SSKzT+ZnM0kiCn7C9CQS8X7QcpHZJ/OzGXGxe9joxcVew52uxb9/2SWr2rbaZbPSFukfngaxqVg2UtKmnQCgeGaZRE3Ls6mtNNrNZqUHW+8sY3plawfpUTuBdQr8lFItPvzHGh3qUXD4s+uovxHri1uffB3xC7IjZFD3/yi/TkGkV/b68nCkQ4Tj4UjHmlMM4aAVF8lGv6MiThZlURZl0ZuJ/gAwcCbikii62wAAAABJRU5ErkJggg==);}
    .watch-icon--5  {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAz1BMVEX////+IV3+H176Wj38QUv9J1r+Hl/+I1z6VEH6Vz/6WD7+JVv9KVn9LFf8Pk38Q0r7UEP7RUn7R0j9MFT7SUf7UUL9LlX6VkD6VUD6WD/9NFP9M1P8NlL8NVL8N1H8OVD8OFD8O0/8Ok/8PU79MlT7U0L7T0T7TkT7S0b7TUX7TEX7VUT+jaD+hpr9mJv9hYj/4eL+eY3+cY/+cH/+srn9fX3/9vf/19r9jpL+v8P/6uz9bmj7WVb+p6X+zc37VU39U3X9Xnr9SnX+PW39QmS1/3JTAAACE0lEQVRYw93O6XLaMBSG4dN9oy1tQ/e9gZA4NiIVMrKxocv9X1N10sGWnO9QPKPpMHknP8J3NA/Q3UjFg25G6gChG5G6ztC9SMWDHvVuANd+0K8LnRsqIHRnz36mOi/obxfgvgc02Mz5d3B7Qvh3KPKToYFYar3fEULgtQwV5IoAzakn9FjofBcE3h8g9FJoJwTe94KUTTe/awF6IRRCJtfnP44vD6mDwPt/Q0bZrbGF5gg6FrqElE433QND4D29E3KQhQeGwExvhRz0HR4YAjN9EGIIHhgCM70XYggeGAIzfRRiCB4YAjN9FmIIHhgCM30SYggeGAIzfRViCB4YAjN9EWIIHpYOAjN9E8ocBA8MgZmeCDEEDw6agTkedFuIIXhgCMz/BVr0gp4KMQQPlYPA3BsqCwF6JsSQ/7msasWRawbe7wtpasPQcyGG2k8VBRB4L0LWh9YmgJYIOuo2XXEZOajZZhQ0O7paF8pyY4gLoCqESgRN/VYq+OJmXwaOWU+vRmd+OQVQs6+Mv9szEJ16LSiE2ov25mJ1CqITryqEFu1lYptVlScomnjpECr920KroiiUXa4nMBp6ZYGjhp2SJBmKBVAZQNmwTzTy055TJ6M+tdB4nIwSbbaOXbvF/XF85P/DOlCzJ67xuKzqPM/rquRhdyFL9yMVD3odKXoVKXoQqXjQm0jRw0jFg25F6vCgP8t+PsyW84/nAAAAAElFTkSuQmCC);}
    .watch-icon--6  {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAA2FBMVEX///8q0vska+wpy/opxvkpxPkpvvglfO8lee4lde4kb+0kaewlgO8pu/gq0/sq0PoqzvoqzfoqzPopyPkpwfgpwPglf+8ld+4lc+0lcu0kce0kbO0nofQoufcoqfUnnvMmi/EorPYlhPB70/onmvMotfcosvYmlvImk/Imj/EmiPD6/f9zr/Xv+P4npPQnpvUor/b2+/9vyvmZzflVs/ad1/t5vPdBsPY9mPOK0/pkx/mKw/jq9v5evfhotPaw3vs9p/RbpvRBvPgxsPYuqfVQnvMsl/ItkPEwFqSMAAACMUlEQVRYw83QyXqiQBiF4dPzmJ7npkHFIVoNyqQyGkzs3P8dNUrUA5GExb/It2FRdd6nHvBGKDnosVAPEPotFF4LJQf9Ego/hcIPofBKKDnou1B4KZQc9EIoOeibUHgrVA3K/7Yvr0K9ShsHbVObyrICLb3eMkG7rGXPu2ZoQi3hTVq+ydpMPHRoW4VUIeVtJCefxLAqUIcqIMSdHPem8k6MAqLq0E5yWjmwrhkaUzsI8ThTdzvZOMYOou0JCPNxhrvKxnPchs6pAiql8zka4lPrH23rUJPEToZT0Ii6UIfboyYpHmU4QLRtgFQ2ipscdRrqUwV0lPoebuf1fQcHiLdNEJTPEjtHyGDIoAqIJaMuBYavQJBG22bI8Q0jqDmGbzVCGlVA5GiBr61ot9J8T1tYBNm0rUALVXFgLbQVOYsEgUZvsq4Ysqkj5KS2BxSSvdo79kUCILBT5wjRFlPqAKl0GmBbspiGyXYTTi+L71aaFtIeoi10ag+pSA9RlqS6nrrplZ4mKAv1VO0h2p6EXN2kfxx19W60UsBBilQJXTLUpW4gt+uCcxIHnFmclxBtK9BalfdMNMRSHZpRO8icubgvd2buINpiSG2hcEhOszQ0txBt61DhKLQoGoY1aECtEQyiVg5UNAjUGW2rUDiIHKCtFK4Z+lMpQvvcyrIGuWb7atCZUHgulBz0VSh8EQrPhJKDngolB30WCk+EkoM+CYWPQuGDUHgvFB4J9QChd0L9B0tJO3kgSvvTAAAAAElFTkSuQmCC);}
    .watch-icon--7  {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAjVBMVEX///9c1iOE9G2B82lf2Chd1yZ/8WZu5EVs4kFk3DOD82tg2Spn3zlh2iz+//106FBy501x5ktw5Uh+8GN16VN872B26lV77l567Vx57Fli2zBp4Dxl3TaF9XCA8miF9W+E9W9i2i5461hq4T76/vny/e7m+9/a+M/L9r299KuR7XWo74+c7oKC5VyC6mJXjUkjAAACHUlEQVRYw93W6XLaMBSG4a9JG0NLD2HJ1jRpS44223D/l1fLMsTykvhM9IPJ84Mxlv2ORggMnhLBn0TwNxFcJHKGoe+JpAtdJnKGoedEcNVXuvxKrB8qNEFVpcuPhS4MAQQtn9Em8qRB5FNuI9QJaRDDU8/S0E2bAzERAIK9kYlDGoQQIhTC0F3LRqHShPSdSDdEqDERnCx036bRIBBxfi8QhwyOiAhGFHpoc4iUD9PFoZzQZiWhXUTFM9pNh9uIBdFpjfStQCd0oErdYaJcFNrGLDjsI4bdSnRDOVMIQe1koWWHQV0i2KVIL3RAwwlD110OFWLoaxH0T6k6RHCy0KqnrNeagHwlgFWfRfPR7SWh9QAF8h3o9XSDoQOHvQ0jCGVDCoAZFZNNhWyQbR5vsPJQzIAASQmzERpE9Xays0lGQ5kC+w5gxKHYUiGESGenk6tyPxZ6GbVVoDoEtW9OOQV2w1fjcZyfkw8xqPDvS/ZVqHzoYh8atdJhnQgwRaFxnKGdDYQWb3kJf5eC5tCXVbHowuJt5vWxwnwM+RmuJSHPAQSq+Pub33Mf56IT+v2eksCMFmpeTHSZD71j6ZccA/IoNJ/AYQhn8xbMp9grIHzzauHIzqUhz/m7Q8jzh1kc+jXRwgI4hYjh4nEfmmhmVatjOqP4J7AoDBqmO4afMo+5VazMvjfgQ0ngRyLpQl8TOcPQt0TOMPQlkU8c+g91thuICUBxSAAAAABJRU5ErkJggg==);}
    .watch-icon--8  {background-image: url(data:image/png;base64,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);}
    .watch-icon--9  {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAABaFBMVEX+lSv+lyr+mCn9fkD9fUD+kS/+liv9e0L+lCz9ekP9gT39fEH9iDf9fz7+ky39gD78XCT+ki78WST+jTP9hjj+izT9fEL+lir9gjz9gzv+jzH9hDr+jjL9ZyX8VCT+lC39YSX9YyX+ijX9fUT9aSX9f0f8VyT/////9O///fz9YCX/9vL/8uz/597+1MP/7ub/6+T9hTr9fEP/6+D9hTn/+/n9ZSX9fkv/+PX+wa79ZCX/5Nn8UyT/8uj+0L7/283+zbn+x6z+i179gUb9iVT+v6f9gUH/3tL+18j+yLT9ajX/4tX+rI3+qoH+mGv+uZj+oHX+k2H8Zzb+i2b9glv+oUr9cT/8YzD/38n9nX/+pHz+r3X9lHT9jm7+pFn9cjn+vKH+uI7+pIf9f1D9eUn8XCz+tZ7+rJT+rWX9eFD9ckv9bS//5s7/yZz+n2r9g0v+mjn/3Lz/17b/0Kr+xIv+uYH9jkj+kjszRTPxAAAF2klEQVRYw92SZ3PaQBCGSZzm9Or0CuR0Vk0UGRGhAgjTq001Bowd09zilr+fU4utoySZ8YdMnhluV7v3PqMZ5Ll8QfyDoksXxD8oenpBeK5dEBcn+o+5cUH8TvT2oNzq91vlg9+K3s7goH989H2Hl2V+53D3pH8w667n7lTKxzsihJCkIBdnAYRE7bg8/bZnqmZXBmlNAnwhy4a9RQlQNR7yxwdTRQ8mc8xCKXMlolI53z4b8/mKNFXYz/BgZ21KYLKofChQ+ajPlyc2fD6dCvt8vgKBzv2wQO4eTBZdnUBrByQiKJwjVHQWkQIRgw3DR4PD8qSMZ7In3EahUYLMGSLKFC2wdBQVnQHfy38mKu/A/GuDHKkZJYJERt2AGaOMwphpmujHdxC/ZYrCcs4oRVvkl1Vzrsvg6MUfiHZJQcrrIxSkmZH9Rq8tMV98/bpdjNECeTIueoHRl/l8WBSYrJ4nO2Zel2OWqMEmc9k0pPIdUWrhuTHRd5BdWsppPEmKkGlE9OvtLKHsj/YjxYImCiIlxSJLSzFwNCZ65WZNSLSXEP6GIkCOJyhaYiEpSSxB8DSESs7a8nIfC+KiQ1BYstC5dKPQSSoMD8i4ooTzhVyCy9nLPNzFRY9ctOR0+6uFTnXQuTRqN0hFH42MUZZuOEuOLruTmGgXZN7bZISG1QTkjj0q8kFnmxROZol+1ATdudohclYTIcJfrU7nmZS9zQpHmOjJeVo8335nE+MiVrOCRFY3L8Xn7W2Erf1wRd2iPqu9c0hKATtDBO1RSk1v2W0lwbdmiE6o/KKDplasZpWKOTNGCtjdu6Tcd4s+nGeDTG7OBzY3NwNbuTRdqGyhZj4jJiKVAKK9Eme7lS20DVQiKrHmimIiUeQ4jmVZjpMFQeY5oyOAwPIcgmcFSKE1gpcFGRPdPs+GyDI2cVJEnyHDKIwEqYRmjDSVECRjlkhoCZJac0UxEdlpV0upVKpUWlXTkcVqKlWt1klta7GEZosBlSugGeL+lkLOEp0QmfsOSTVlNZtUx5kp6XmnDRKzRGuydiaSBlaD/n57lIqnt+y2ovItt+jxeVo0XXFE6IO0mhUyuGh1W7TqrCNc7dQVdYtOa+LqQ5ttqmk1SHTf6lZppWpvu+LRY0zkYhdmHFFX6NpxImaP1jnUWSSFDUz0xcUaoZbsqxFi2xaRQXtU57p2N+DZPXfS88nFaU1Y/2hRkhKD6up6s54UpF6zubJZrSbpVXvZg9onN56XbjYA883y1FlRTdAICoqchGpCIaiMtazQ5BoWxEWncVBHlmZQpUVAqslYL5MU073udlBTZQA4ZjuCXB1w+AkXPcfIilJzRSNEKaZBZvARsUIEUfbht2GQiGs05GKrdZLdw3NIhBGGFJ0O1odvBjTz7Q0C/WtvTIJ08+Mwo9ASKeTHYp5nGM/1GqCaVtCq6I0+GnVAMVWj9iDQTp/hIBHOHi90TdE6Yb7SCmmJtmHGHMdgrTie8txELN900WDhthGtJsTm2RsNKXqISiUJ03s3x8FEFlkWaMNQKLQuqt/QSQbRGQqCOjpX4sDx4KJJpkIN8L1SKNQjeqEQ+rLfhEJ1KhgKlbYJoBRvThTdm0gxTMF4tzRIUOuhAbuNXovj1oddCfB5fXLCFi3j8+UsQwpqMA74ekYODtdpQChxkdD27k3Bc8di+Q6OnlVYUYAAkoBTKQAFkk42omd7LOhxDbA7e3mNScuETJBsXAlv5FxbLOaZc1henhtnWc8VstlMtlDU5yZxljknis79PVFMZA2X/1pjeBzRlTOi0St/Dn7f497M/ZFhDvPgIsT+HLo2M4+K2XijXtfSc8vNfnThV7+w8KszD+s0y4I/igVxEbridUUwlfXzoku4aAHHuOX1ouI1H4zqNQYOqPf7x1Oe6xP47Pd7P6NigZKfjeF1r/mEdpMylgjHb+A1Jabr+mdUvejJmKP9b0W4CyWRwAQ5MA0mmp+ON+Dg95uHd8ZlJLoYfgLCQh0a1lRilgAAAABJRU5ErkJggg==);}
    .watch-icon--11 {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAABFFBMVEX9fEH9e0L+lyr+mCn+lir9fkD+lSv+lCz9fUH9ekP9YCX9gT3+jTL+kS/9fz78VyT9YyX8XCT8UyT////9gD79hDr+ky79ZSX8VST9aCX9hjj9iDb+ki39fUD9gjz8WST8WiT+kDD9gzv+jzH9hzf+jDT9ZyX+ijX9YiX8XiX/9/P9aiX+izT+izX//fv/+vf/9O3/6t//28r+08H/7+b/4MT/5tf+vqT+pHf9j1L+qlr9cTv/39L+zbj+vZv+kWb+nUH+spn+qYj+uX7+h1j/y6H+v4v+l2T+jGH9hEr/5dD+sI7+pYL+tXD9bS3+x63/0qr+l3T9elL9cEj/2rj/yZj+mDP9f1r+m1H+lDn+pGX+kUH/J5HwAAADRElEQVRYw93Tdw/SQBzG8br3fFy496h6d92DtlJaNsh2vv/3IWgU7nctNbExxu9f9LjnEyBBO1ZT/yB0tKb+Qeh4Tf1V6EPrd6CTlU2cYadVeasa+uAAYlIXlFVDpypbAfak8lY1FA4Bff3hz6AwW89czhgTzqwb7rBWFirQjfImM5uBcdt1DZ0x8GG39eONDyvmhuSyVs44OrjptXvBYBD0/TS2wezOdyocgg1DAt0tLlwJGEnv/etdp9smg9HdvNlyAOa0pEEJlLkQyeA16b1vgq9ad0MXDBS6UNRah9lv/Kw52L0cCTjhpLNez0J5Ugh1wL1m41eJme8eehGM7mcyKIHW0EeNXe9NzPceByacVgH0SKkrO43Xlt7bf9a2krJSodBg3vP9Gpb+TjrIDcxU6AltBeu9Ckn5TEzoTIEybr+7KfV+A92Um8L5TKHzcp8deGTVUKHc4BkZUijjxuBmwSciJZuPdBhawbtM2kL0LBf65CD0yeDvCiFajA6Bnkl1mdmkm5uW3legMZyv0pJAM3gvlTaQcpbr9hcZeiPloH2W1jS5rx66LJOW2tv9vg4xVzapDjOnhy8tdKWp9mK/Ty7r08lIADxa0OMpOtKUQIae0+8QYRMfUcij0J39PhkifyXXdLEtfUXaQNKUQrx/hZSKjRMt6PH0ILT9senibKLDVPhXFhIZeirloH2F1ozYWD10WSYtCTSD91DJ0vvKWS7sLzJ0W2r7F1FGsZ0rZ2OYgbQk0Bebv3tA+zg/q5xNMb1NIDkHKZkUtrB5RqDrcl1uLC9Vl2IYyEMKBS7SamdpI7lOIVLC7I+VkAc3oNBjueuBCevhrcPNdT56TNpAJF8gPewsXMTKTLuvlHC9fchZmoh6ymoDKcVMjK+WtrRg+OpIO6cWWNDTSyXORxOiXTDaQqoUg8eLIuZS24AtOQQiDTwBo91UnHcxR+QXTrRrxfkmEI0+PthTlvNYwJ4GxYMdRAoSF7DjdNxfLJeLj/O2FzEIyy+7r10srZdEAoAwXNewGcCN2B+U3pYgWjD2rMgWuq4Lw5yOeofuaicqCnr+eOz7vUHFPQqV99egezWlna6p+qD/uCM19Q9CZ2qqNugbQMaVontIIOEAAAAASUVORK5CYII=);}
    .watch-icon--12 {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAvVBMVEX+lSv+lyr9e0L9fEH+mCn+kS7+lCz9fz78WiT9ekP9fUH9fkD8XST9gjv+kDD////9gT39ZyX9iDb+ky38VyT8UyT9YyX9YCX8VST9ZSX+jjL+jDP9hjj9aSX9fUD9YSX9hDr9hTr9fj/+ijX+izT+so7//Pr8UiT/9vH+nWn/8uv/7OL/28j/6Nz+h1T/18D+qob+qV/9aTL+y7H+nnj9bT3+wpz+kWH/0qr+u37+ljz9cyr9dj/9eyj8dEiCOt0yAAACn0lEQVRYw+3X2VLbMBiG4TSUkoDDl1AgQIAAQaosed+yc/+XVQVox/q9xMx4GKbT98Tbr8c6tDvfW+oLQt9a6l+G/veJ/Wipz4SWggvXz8JVPfSzrsPJdrtmEBI6uQhrRuugyXZ9p2Ng6/s5czjghNXQYVWzrUbeodfjMVPAYlUxXgWdasaEdOtAQoUfgmbruyKkO4jBl42h5UI7BmRcYdkQWgIno1wayl8mvFTqnNJCjmREIUMCD08LFaCVIutGc3c+IrJa7YcW8EekO3rDx2IvFEJsrnWjef+6so1AWIBuzBywt+G+Y1dLAZwbEoFCyOh92EYWVUGRQlgPLcAu/5TB9S4rCrCg0CTfSvLu3+HIBWfX5dCGy9XEyIRCOLlpjwNOv1xyENZBGdg0FwMgkmlZATICPefzMc9P6/fq4rQE8uA/G5mQi+44X19A53rjQhvuEmiWT8jInE+wiycFKJJiZmRCXE3Jghi7xIZCU5cT6Cwfd8eWWaSwy7NIY5efGRFIXVokjwMQ6QchISOLlgiIxKJFUtRBLrpWodRLS25yl0C3+XzMe83y4N8amVAG1hAKkNVBNpxxM8iBTaBHI8mPGzkpl49mBIrBeucNChBT6MHIhowaOFMF+8FMQ0ZOoy0FcB4oNDCzIfpX+0oF7AGJQoMY/nQf5CMe7IU8BWbVOwzKK4FoNkfSu6gpAbcHRWhYKAAPrBqHIxgW01AhBrBxlbN7OGwIDQIOv39VxqQ+eDAshY7KshUESy9+kaaBgLKPStNQWV4MKPbSyzMvTAGxd7QHotkOwB02f4nOL66i9P07m2yHQFVULKGTylVvJ7HBUOipJs/OfFdw/vovYntPdXVOWqo96L6lOsct1R500FJfEOq21BeE+i3VGvQbTNE0Mc7zmZ8AAAAASUVORK5CYII=);}
    .watch-icon--13 {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAdVBMVEXD604AAAWr+VOu91K48lC/7U+281Gy9lGs+FKq+lPF607C7E678FDB7U+w91K+7k+970+t+FK09FGz9FG68VC97k9feSoUGw2bykSQvUBRayZEWiEwPxiEsjwhLRN9pji46E2h10g5TBwJDAh1mTRqiS+q4UuZEaZLAAACKklEQVRYw+2S63LaMBBG2SKHtHUS0hJZsixbwpf3f8Tq6pKpVziCzngmOX/4xOwelpV2P+7EBkVffGp+roOPtEsWrBTVYKhvF1Fw0JToaQUcAhKvWSUao4jeKKIXogITFSvQvff0DK9JiZ5UUShlU+dFQ7FShMNED9VY3C5SnDNVJEUvaRTrBiqahr5cARcV00hF20NAZIgCFN7RXBG9YbAK3tO9pdgdMQb3ckQDEXFMgYvsP2uPR9VDhJtvyzzRaD5hpj56GFMLohLDinhZ8ot1lxbeGOW/5bjobFqnshTwFxb8UH1E1JqGslSXdzeWUxNmWy9S/oclXNKG/8gWRCcEZhtOp3re9Dmms1yqR0XaNp9O8Rn1OsxWDcv1O4LRAjBCqjhGiMOElOMiNnBCunnPhAwAQhOCipLMK5LmwDtCckXVvGFlj9kiCTMVuyJ6SDG4x+PH6odkaVok7Cj6IWyKZotYH9rHsKgpRxT7pU1d6xclcdGvBGe7mpC535TEapMi2yviwS9KoKLfONptOBw4OGqsOCVyM2ivOYfXpFHRAYW5i3KxBk+NVydE7qI6E4bKaxp9yBBNztOaJLymH03OEDlPZYTgEftDWvS8jB9Dx9B2z1dARP6SZEy1CVmixnm4jdKMY8J10X4Bf9udPzCp9ytYEonoiWSKZPDcLOLWQ/f5opkG8aRFrwtw9vphguh2do93YoOib3fif4keNzfRFkTf78T2RH8AZ8etAIUZPgsAAAAASUVORK5CYII=);}
    .watch-icon--14 {background-image: url(data:image/png;base64,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);}
    .watch-icon--15 {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAxlBMVEX///+R/H012jox2Dgv1zYs1jQq1jOD93M52z2N+3uB9nE+3UGK+Xl99W6I+XZB3kNr7mJ69GyS/H7+//6M+nlI4UiQ+3xz8WiU/X+T/X432jwz2Tkt1zVN40w83D9R5E5U5lFY51Ne6Vhn7F5h6lqF+HRE30WT+4FF4EZ48mt28mlK4kqM+Xtx8GZv72Rb6FZk613y/vL5/vnp/efh++DS+s+Z946l86GZ8ZbB97+M7onZ+tev9qq49rWG8n196X126XVu52/EB2m/AAACgUlEQVRYw63WCXOiMBjG8ad7Wc9a37XuZT1aa89tAwmX2OP7f6lFii4JScRpfoNEYfInjswgfjiCn45g4AiOHHEXOrM5GixLBkdnZmiaZJkiIKWaBqZQtpjBdnb2blCM5hK+azXPdopwthWa2hnQd+zudaGOxv0+mjnoqZRmx6CnsIR6/+cUM9+PFZ8UWCh6vc0uH4t9IT+Z2R5cyNCwWuS7Rf6yQ8MRtHKN1ke9hxYtg0ZnGWwsO3tD3Y1WV6cTpLFYcd/3+UrEaXDftYCxs0yFzzwibBB5zF+tA0voNNM9rQhinlVQQkSMx8GpAbSd5zXfVmhbyQePr58NoRuNQDCYMBHc6OC2KuTQy5dFfnirgVFF6MMWAlg6qqqGIh8g2BALNaEHRcIBkDZFu2X5wYMKfxUCOX1oN4gbdR76spChDi/tK5TQaEWoZTWyhwIGqpVioRq6kMQe6iFxIZNDr5xQkz9SQk9lCUNNxJInCS7LIgIRamHRpaQaQj0sVELzsoNCc0klVPe7sUgJPZY9e6iLJY8SzMr6fv2fvz+TYCaJPdQkZjJMJUndkBdOZUpoVtzahD1WczU0kUUMRNlmLm3OwgsnCkwUgmBHmwuJaSU0Vrxxyi9qCQH+y1iFsSphAMESAigaV+CuImLGRnGB8K4Kw6rEtz/WoqEGhhqvwhISL0MdXOtMjXc4DyfXWrjSmvvQIL5+uzLAiR7fPVYLHuMifDwxMoTeGDJsFcfFX784TeSKCm2tNQEeT9obw7thez996MUDvFSZb4dzjVcPLJ2fHwTHVe21SMbHB4Lu4Oz4cPjlCD454i702xF8dsRd6Isj7kJ/HMFXR9yFvjniLPQPqHNBEQs4Bo0AAAAASUVORK5CYII=);}
    .watch-icon--16 {background-image: url(data:image/png;base64,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);}
    .watch-icon--17 {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAjVBMVEX///9oaWpnaGmdnqBqa2ybnJ6hoqR3eHl8fX+QkZOfoKKgoaOTlJZ5enxvcHGYmZpsbW50dXaIiYp/gIKKi4yGh4htbm+am52MjY6PkJGBgoSVlphxcnOAgYPY2Nnx8fHS0tPGxseDhIb39/fo6OjLy8ze3t62t7ivsLGoqarj4+Ps7O2/wMG7vL38/PyndQMsAAAEFklEQVRYw82Wb3ebIBSH75bFJp1dtvxZmmZFiSKg4Pf/ePNegoqYtOcsL/a8qJwfl0cEooXkQTxO9P1BPE70/CAeJ1o8iA9Eec0sNXhViX8Q8QIgp1YN0NwXLe+RA0CJDdsZ27ul8yIuhPSiwmIAXmRyYT4tMiUA0zi+6AR516i6a4ZdsuuqZkXHGTh08K5hUdTII8/wGbGLYTA3ZlZkaLw6HgUgWVnQRVIPGWNgMwcDrOcigzG1yDFoxdyQeZEs4TbV5hMiK7if0k0E3YoLG4rOY2wDLdNdo4IrRc1yhJVZL+r6afOCoaGI09StEgUQLZN9nxR1S2Fj8YYARShKx1gSFP3NqzTA1OD6yVgGfRCWcjQN5GlIYoZ9bGQkCky+MqMzqNMJyu9nqcIOWE8wQDCtGV4W035dufmoSQ5RYUae43qd4Ira9ZSkptVb3xYpqf2MSo0Bp+WOTKrAJ1duxCA6efIWGmFojQpFyRLvbU8RHDpqY1gGmfHhIMqgh18jBfhejEQpgx7Wi149FXjK5TU64QjxGqGGm3KfwdBbDZ0eXI5Gx6a8P2jfe9G+5yyZm1AyZByL9xHKvaByNUQQFBia0ChI8fzJ2MTQo8cJbMec8WOhxomiH9V2Cs6UBUko0i1AFiS0B3xWVJ4D0cGzSRJZ4wE5BGhcDptOwpJWWunnPvKiRGTQAsIOIRzDhuWsYkSV51W//W3JN6GIgyc/RFO6i7qKLo6R6BKi2w9ErgzeHAvRXAewtxDjvkSCXalykWfDK92uXRkMI44JfYWq0LPJ6CSF4aKkW6pk00fwPmZZAJTvAQK3/32KwVlexgnsAjKAYjEOFtCpL7spEhczSEKRgg45TvA8JrsInGeTBqLVwFLQelejCM1iFbFwP1qzHqJBtPWfokL32aEGKNJYZMGRqV0sysHD+szgk8aedQ3EuBdePA306GuU4t68xAjo4T4bRLKA0iqb4eCViziudOxZtFgjlWigXIYi4pReur/PWGVccGNCFeZYezjv+xCepjT06NhiOKGnCHowMU0j0REIs7oIvESaSw7ujHwgOpXjfyLYy9Tz6jcsn4p+BaToGdC/JugMPPkq6AlFK/I0VQEOGfQ++f9EGPWLO6KTO2O/zg0QzWhKG1v2U7ngPpSh6M8YPN4SGxauVNxYKQ0XNEvi2PU/UeEYJxpM5wNdNdyk3VPFfh2OhB+zCLiNnB0xL6IJ8fWmCgw8XWCQbT8vwnrWXbeF20X3nuqCN2zZWdHvObD8HRs17tLv31vcMIHBswti5kUCiiVe6Vyduobux1sAPSv6Ocvbji70+8fGhRrEdjU7IhBFpLgi1MoAsrul8O0eTzXAiloKwNwtDUQxL8nrtbU5/vhA9CDgy4P4D0VfH8T/J/oL3EsEJU6s6OgAAAAASUVORK5CYII=);}
    .watch-icon--18 {background-image: url(data:image/png;base64,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);}
    .watch-icon--19 {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAABMlBMVEX9oCn+oCr/oStUp9FRocvzUk7zUE3+oSr0VU9UqNJTpc/yS0vxSkotxCQxxSRSosz0VE5MyydGyibyTkxSo809yCXyTUs4xyVTptD///9SoctOzCdPzCcqwyNDySZJyyZByCY0xiQnwyNYqdL/ozBYps+vrShXvCX9oiyvrihVo832amb+tlmg5JFrsdX7w8L5rauI3XX+rkfyoyuhzuX4mZeZ4or8zMv6tLO16qr/2Kf5pqSr557+qT1OzTXr9fq+3e1gq9L7vry+7bWP34B22GP0XVv3/PvM5fH/9uqx1+r/8uGPw9//7tfI8MD5oJ592mv1YV1p1VZl00nc7fXS8svo+eZ+u9t1t9n82Nf3iof+xn/2gH7+vmzzWlg1xij94+P/6cz+yINb0Do/yTL+yYYGRQHsAAAC/UlEQVRYw6zMMQrDMAyF4SwJhnYIGAw5gwdrERJ486DVeEwIJvc/RdOhzVS5EH+Pt/6D6aRfaNaY+W+DmjHFfxTTCI0a2YAhngPYyqjSQz7TSikEIor+Vgg5cY4ROGErNP0ynvcIkBExR0Y/qfTQHlYKb7SG7U4oLhdohKwmL5doVXpoP76dY2+EnEYwUWLmFBJWp1JC1jo3SSlVqogYpxsenfQLPTvpF3qxPu46DoNAFLXkNHbjJsUOLZpmCip6oLKFKCPZ//8leyHxagswiZQj5sGMOBLTl/ieaOwQxveoirTWZ3vEePxbTBrnI9F0tn7dXi8hKTREPzWwyEUjdkf2NS0OjWENiNqqYNB5cuZvWHJdNFcYAfM8m7hFuxE9rPUxhbxhxFyjLmJ+ih5E5OjJZrDRjPSuCIjwKXJFtBL5LOK5KbrXkZxM9Dblr6Vk7c6YIBpA1GQJAU83cse9z7B02N2azl6WNhciEST2q0fpM6hrjLUGRUR1GG4VFEJKUSEILswC1e2KpkipIkBCgQX0RG0US9EJJD2G31bnp0VBIIzj+OSl0wYFEUO7ZjL0B5rDzMKAol5UQkQRxS4R0Z99/29h3Whd6PCbBf0c5nmey5d57wmZ94SMkXlVNe+tDMZaOBTzqBrfBC/0JbIAYif0lOLccaL5QoNMAF6H3Mtz5dTeRAeGhOMJobjwQqEPmUAgVLwwJ7EqTC1iIYGISjOIK8sSnrAgMkUCr65Dx6mm5Z56UwiHigP9wYuc0kgTmiERfch5E4xmEA4V+0eIxyGlShNaAqNAhXno8GBZHqhaQmQEne/382OJo3IEvYRQUxN660l/oY+eEHu9/dyu7c6D2CvDMFZ250EMiDHWDmYgBEXw/f+Q8QKHhoi/a0k2hAjsXC9JkmZZliaJKzuEpEtbF11oAPjHrA25bACRASyd3OTZ2Q20IZz6SptM0nZQCJNulqZtB4R05Ol4vJ7khnTD5E76G+ZLn5EONo2/rUOGNX6PZkUpfev5k2Zg36zcYDlGPeQyAAAAAElFTkSuQmCC);}
    .watch-icon--20 {background-image: url(data:image/png;base64,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);}



    .watch-icon--10 {top: 50%; left: 50%; margin-top: -18px; margin-left: -18px; cursor: pointer;}

    .watch-icon--5  {top:  35px; left:  33px;}
    .watch-icon--6  {top:  35px; right: 33px;}
    .watch-icon--14 {top: 102px; left:  33px;}
    .watch-icon--15 {top: 102px; right: 33px;}

    .watch-icon--9  {top: 68px; left:  12px;}
    .watch-icon--11 {top: 68px; right: 13px;}

    .watch-icon--8  {top: 80px; left:  0;}
    .watch-icon--12 {top: 80px; right: 0;}

    .watch-icon--2  {top:    3px;}
    .watch-icon--18 {bottom: 5px;}

    .watch-icon--1  {top:    10px; left:  20px;}
    .watch-icon--3  {top:    10px; right: 20px;}
    .watch-icon--17 {bottom: 11px; left:  19px;}
    .watch-icon--19 {bottom: 11px; right: 20px;}

    .watch-icon--4  {top:    41px; left:  3px;}
    .watch-icon--7  {top:    41px; right: 3px;}
    .watch-icon--13 {bottom: 42px; left:  3px;}
    .watch-icon--16 {bottom: 42px; right: 3px;}

    .watch-icon--20 {bottom: 0; left: 43px;}



    .zoom > .watch-icon--10 {-ms-transform: scale(6); -webkit-transform: scale(6); transform: scale(6);}

    .zoom > .watch-icon--5 {-ms-transform: translate( -51px,-88px) scale(1.5); -webkit-transform: translate3d( -51px,-88px,0) scale(1.5); transform: translate3d(-51px,-88px,0) scale(1.5);}
    .zoom > .watch-icon--6 {-ms-transform: translate(  51px,-88px) scale(1.5); -webkit-transform: translate3d(  51px,-88px,0) scale(1.5); transform: translate3d( 51px,-88px,0) scale(1.5);}
    .zoom > .watch-icon--14 {-ms-transform: translate(-51px, 88px) scale(1.5); -webkit-transform: translate3d(-51px, 88px,0) scale(1.5); transform: translate3d(-51px, 88px,0) scale(1.5);}
    .zoom > .watch-icon--15 {-ms-transform: translate( 51px, 88px) scale(1.5); -webkit-transform: translate3d( 51px, 88px,0) scale(1.5); transform: translate3d( 51px, 88px,0) scale(1.5);}

    .zoom > .watch-icon--9 {-ms-transform: translate(-100px,0) scale(1.5); -webkit-transform: translate3d(-100px,0,0) scale(1.5); transform: translate3d(-100px,0,0) scale(1.5);}
    .zoom > .watch-icon--11 {-ms-transform: translate(100px,0) scale(1.5); -webkit-transform: translate3d(100px,0,0) scale(1.5); transform: translate3d( 100px,0,0) scale(1.5);}

    .zoom > .watch-icon--8 {-ms-transform: translate(-118px,0) scale(1.5); -webkit-transform: translate3d(-118px,0,0) scale(1.5); transform: translate3d(-118px,0,0) scale(1.5);}
    .zoom > .watch-icon--12 {-ms-transform: translate(118px,0) scale(1.5); -webkit-transform: translate3d(118px,0,0) scale(1.5); transform: translate3d( 118px,0,0) scale(1.5);}

    .zoom > .watch-icon--2 {-ms-transform: translate( 0,-108px) scale(1.5); -webkit-transform: translate3d( 0,-108px,0) scale(1.5); transform: translate3d(0,-108px,0) scale(1.5);}
    .zoom > .watch-icon--18 {-ms-transform: translate(0, 108px) scale(1.5); -webkit-transform: translate3d(0, 108px,0) scale(1.5); transform: translate3d(0, 108px,0) scale(1.5);}

    .zoom > .watch-icon--1 {-ms-transform: translate( -60px,-104px) scale(1.5); -webkit-transform: translate3d( -60px,-104px,0) scale(1.5); transform: translate3d(-60px,-104px,0) scale(1.5);}
    .zoom > .watch-icon--3 {-ms-transform: translate(  60px,-104px) scale(1.5); -webkit-transform: translate3d(  60px,-104px,0) scale(1.5); transform: translate3d( 60px,-104px,0) scale(1.5);}
    .zoom > .watch-icon--17 {-ms-transform: translate(-60px, 104px) scale(1.5); -webkit-transform: translate3d(-60px, 104px,0) scale(1.5); transform: translate3d(-60px, 104px,0) scale(1.5);}
    .zoom > .watch-icon--19 {-ms-transform: translate( 60px, 104px) scale(1.5); -webkit-transform: translate3d( 60px, 104px,0) scale(1.5); transform: translate3d( 60px, 104px,0) scale(1.5);}

    .zoom > .watch-icon--4 {-ms-transform: translate( -70px,-88px) scale(1.5); -webkit-transform: translate3d( -70px,-88px,0) scale(1.5); transform: translate3d(-70px,-88px,0) scale(1.5);}
    .zoom > .watch-icon--7 {-ms-transform: translate(  70px,-88px) scale(1.5); -webkit-transform: translate3d(  70px,-88px,0) scale(1.5); transform: translate3d( 70px,-88px,0) scale(1.5);}
    .zoom > .watch-icon--13 {-ms-transform: translate(-70px, 88px) scale(1.5); -webkit-transform: translate3d(-70px, 88px,0) scale(1.5); transform: translate3d(-70px, 88px,0) scale(1.5);}
    .zoom > .watch-icon--16 {-ms-transform: translate( 70px, 88px) scale(1.5); -webkit-transform: translate3d( 70px, 88px,0) scale(1.5); transform: translate3d( 70px, 88px,0) scale(1.5);}

    .zoom > .watch-icon--20 {-ms-transform: translate(-48px,110px) scale(1.5); -webkit-transform: translate3d(-48px,110px,0) scale(1.5); transform: translate3d(-48px,110px,0) scale(1.5);}



    .watch-stage__base:after {
      content: "";
      position: absolute;
      top:    -1px;
      right:  -1px;
      bottom: -1px;
      left:   -1px;
      background-color: #000;
      opacity: 0;
      pointer-events: none;
      -webkit-transition: .4s ease-in-out;
              transition: .4s ease-in-out;
    }

    .zoom:after {
      opacity: 1;
    }

.watch-stage__frame {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    pointer-events: none;
  }

  .watch-stage__frame.active {
    z-index: 1;
    pointer-events: auto;
  }

  .watch-stage__frame__bg {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    background-color: #000;
    opacity: 0;
    -webkit-transition: .4s ease-in-out;
            transition: .4s ease-in-out;
  }

  .animate > .watch-stage__frame__bg {
    opacity: .85;
  }



.watch-application {
  background-repeat:   no-repeat;
  background-position: center center;
  background-size:     contain;
  opacity: 0;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  -webkit-transition: .4s ease-in-out;
          transition: .4s ease-in-out;
      -ms-transform: scale(.17);
  -webkit-transform: scale(.17);
          transform: scale(.17);
}

.watch-application.active {
  opacity: 1;
      -ms-transform: scale(1);
  -webkit-transform: scale(1);
          transform: scale(1);
}

.watch-application--gallery {
  background-image: none !important;
}

  .watch-application--gallery:before {
    content: "";
    position: absolute;
    top:  50%;
    left: 50%;
    margin: -11px 0 0 -10px;
    width:  23px;
    height: 23px;
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     contain;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////9ZMre9AAAAHnRSTlMAgLNN5gcOcx1IASY4FK4waV1UfUDXoXlikiqIwKkg/Z6KAAAB/klEQVRIx42S2bLCIBBEQWTfyZ5c//83r4GIg7EqnsfurklPGPQFz90wOO7RT8S/e+Yv/pQe7gfDD3lfZpf51334HcAv4w7G3WV8gPGhaPSUslQo+j1O/WosUzAsZ9xxudIvZeS2jMsy715BrXy8PXGbtJ+riulW2GSdvT0ObUms/ZE2pzOjORZ5S24xqnkm4m6VpdT3QHLBwiNg2w3Q5+EBStsKT0w/gOXmfbzlVSgNAeYBPb7/HNbG4ZkoM57iNDggLRq+h2jicbcUgdrGEGQC1mPNksbv8Q5Uzx6wQnlXKhdYryVVD4tDsmQrQ8Zg0QdMbuNe5MbfFvURj8s49VahEzoFHGbfDhGr1xQ0aY/bnjRG2fcwpUIL25pakih7cQ4r5hMPPPaCvicnPGGM+WxOdRjheKebDXt1i/ggmM8mCVfP0yKRrmrTR591qlYXiyeKVEhtlQgsbvLN9BhqFu4pArA6QnO9Dsabi9QcjkqsblPL6+b/ttP3uJJ5OtiVaSOl0U9TzHCUpHl7KM0UiZ5keoEYHNXpslAAkkFCkgMp1Bre+URPCyXGelLpGTPh1TLWf2bmV9oiTQAaMT/n+TwJVZ9ayBB4OWoD42b3PIlRegbfg1otdO4mYVzmYcp+Oe78rVP8glOZCz5WvaL9kZdxBZ8JXQOP4BdUPbEz/0O+HjQZAg82AAAAAElFTkSuQmCC");
    -webkit-animation: spin .75s steps(6) infinite;
            animation: spin .75s steps(6) infinite;
  }

  .watch-application--gallery > img {
    position: absolute;
    top:    0;
    left:   0;
    width: 100%;
  }

  .watch-application--gallery > img.w-hidden {
    opacity: 0;
  }

  .watch-application--gallery > img.w-active {
    z-index: 1;
    opacity: 1;
  }



.watch-glance {

}

  .watch-glance__screen {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
  }

    .watch-glance__tape {
      position: absolute;
      top:    0;
      right:  0;
      bottom: 0;
      left:   0;
      white-space: nowrap;
      font-size: 0;
    }

      .watch-glance__img {
        display: inline-block;
        width:  100%;
        height: 100%;
        background-repeat:   no-repeat;
        background-position: center center;
        background-size:     contain;
      }

  .watch-glance__dots {
    position: absolute;
    height: 10px;
    right:  0;
    bottom: 0;
    left:   0;
    text-align: center;
    font-size: 0;
  }

    .watch-glance__dots__dot {
      display: inline-block;
      vertical-align: top;
      width:  4px;
      height: 4px;
      margin: 0 3px;
      background-color: #fff;
      opacity: .25;
      border-radius: 50%;
      cursor: pointer;
      -webkit-transition: .4s ease-in-out;
              transition: .4s ease-in-out;
    }

    .watch-glance__dots__dot.active {
      opacity: 1;
    }

  .watch-glance__animate {
    -webkit-transition: .4s ease-in-out;
            transition: .4s ease-in-out;
        -ms-transform: translate(0,100%);
    -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
  }

  .animate > .watch-glance__animate {
        -ms-transform: translate(0,0);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }



.watch-notification {

}

  .watch-notification__frame {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    -webkit-transition: .4s ease-in-out;
            transition: .4s ease-in-out;
        -ms-transform: translate(0,100%);
    -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
  }

  .animate > .watch-notification__frame {
        -ms-transform: translate(0,0);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

    .watch-notification__text {
      text-align: center;
      font-weight: 300;
      -webkit-transition: .4s ease-in-out;
              transition: .4s ease-in-out;
    }

    .animate .watch-notification__text {
      opacity: 0;
      -webkit-transition-delay: 1.5s;
              transition-delay: 1.5s;
    }

      .watch-notification__text__title {
        font-size: 17px;
        color: #fff;
        margin: 115px 0 5px;
      }

      .watch-notification__text__sub {
        font-size: 12px;
        color: #ff3333;
        text-transform: uppercase;
      }

    .watch-notification__tape {
      position: absolute;
      top:    0;
      right:  -16px;
      bottom: 0;
      left:   0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

      .watch-notification__tape__inner {
        position: absolute;
        top:    0;
        bottom: 0;
        left:   0;
        width: 136px;
      }

      .watch-notification__logo {
        position: absolute;
        top: 17px;
        left: 50%;
        margin-left: -43px;
        width:  86px;
        height: 86px;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0,0,0,.5);
        background-repeat:   no-repeat;
        background-position: center center;
        background-size:     contain;
        -webkit-transition-delay: .5s;
                transition-delay: .5s;
      }

      .animate .watch-notification__logo {
        -webkit-transition: .4s ease-in-out 1.5s;
                transition: .4s ease-in-out 1.5s;
            -ms-transform: scale(.45) translate(-90px,-85px);
        -webkit-transform: scale(.45) translate3d(-90px,-85px,0);
                transform: scale(.45) translate3d(-90px,-85px,0);
      }

      .watch-notification__img {
        padding-bottom: 20px;
            -ms-transform: translate(0,170px);
        -webkit-transform: translate3d(0,170px,0);
                transform: translate3d(0,170px,0);
        -webkit-transition-delay: .5s;
                transition-delay: .5s;
      }

      .animate .watch-notification__img {
        margin-bottom: -170px;
        -webkit-transition: .4s ease-in-out 1.5s;
                transition: .4s ease-in-out 1.5s;
            -ms-transform: translate(0,0);
        -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
      }

        .watch-notification__img__header {
          background-color: rgba(255,255,255,.25);
          padding: 7px 8px 7px 50px;
          margin: 18px 1px 0;
          border-radius: 7px 7px 0 0;
        }

          .watch-notification__img__header__title {
            font-weight: 100;
            text-transform: uppercase;
            text-align: right;
            font-size: 11px;
            letter-spacing: 1px;
            color: #fff;
          }

        .watch-notification__img > img {
          max-width: 100%;
        }

        .watch-notification__btn {
          font-weight: 100;
          font-size: 14px;
          font-family: inherit;
          letter-spacing: 1px;
          text-align: center;
          margin: 4px 1px 0;
          padding: 10px;
          border:  none;
          outline: none;
          background-color: #242424;
          color: #fff;
          border-radius: 7px;
          cursor: pointer;
        }

        .watch-notification__btn--base {
          margin-top: 13px;
          background-color: #333;
        }

      .watch-notification__time {
        position: absolute;
        top:   0;
        right: 5px;
        color: #fff;
        font-weight: 100;
        opacity: 0;
        -webkit-transition-delay: .5s;
                transition-delay: .5s;
      }

      .animate .watch-notification__time {
        opacity: .5;
        -webkit-transition: .4s ease-in-out 1.5s;
                transition: .4s ease-in-out 1.5s;
      }




.watch-app-samples {
  position: relative;
  margin: 10px 0 40px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 1px rgba(0,0,0,.1), 0 -1px rgba(0,0,0,.1);
}

  .watch-app-samples__tape {
    white-space: nowrap;
    -webkit-transition: .4s ease-out;
            transition: .4s ease-out;
  }

  .watch-app-samples__nav {
    position: absolute;
    top: 115px;
    height: 60px;
    padding: 12px 0 0;
    border:  none;
    outline: none;
    font-size: 36px;
    background-color: transparent;
    opacity: .25;
    cursor: pointer;
    -webkit-transition: .2s ease-in-out;
            transition: .2s ease-in-out;
  }

  .watch-app-samples__nav:hover {
    opacity: .5;
  }

  .watch-app-samples__nav.disable {
    opacity: 0;
    pointer-events: none;
  }

  .watch-app-samples__nav--prev {
    left: 0;
  }

  .watch-app-samples__nav--next {
    right: 0;
  }



.watch-app-details {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  max-width: 700px;
  margin: 10px auto;
  padding: 20px;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .watch-app-details {
    margin-top: 65px;
  }
}



.watch-developer-info {
  background-color: rgba(0,0,0,.05);
  border-radius: 3px;
  margin: 40px auto;
}

  .watch-developer-info__name {
    font-size: 26px;
    margin: -5px 0;
  }

  .watch-developer-info__link {
    display: inline-block;
    width: 20px;
    font-size: 16px;
    text-align: center;
    color: #999;
    -webkit-transition: .2s ease-in-out;
            transition: .2s ease-in-out;
  }

  .watch-developer-info__link:hover, .watch-developer-info__link:focus {
    color: #f70;
  }

  .watch-developer-info__apps {
    border-top: solid 1px rgba(0,0,0,.1);
  }

    .watch-developer-info__app {
      display: inline-block;
      width:  40px;
      height: 40px;
      margin: 5px 10px 5px 0;
      border-radius: 50%;
      background-repeat:   no-repeat;
      background-position: center center;
      background-size:     contain;
      background-color: #ccc;
    }

    .watch-developer-info__app--app {
      border-radius: 20%;
    }





.watch-all-apps {
  position: relative;
  width: 320px;
  height: 75px;
  margin: 5px auto 0;
  overflow: hidden;
}

  .watch-all-apps:before, .watch-all-apps:after {
    content: "";
    position: absolute;
    z-index: 1;
    top:    0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
  }

  .watch-all-apps:before {
    left: 0;
    background: -moz-linear-gradient(left, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(245,245,245,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(245,245,245,1) 0%,rgba(245,245,245,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(245,245,245,1) 0%,rgba(245,245,245,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(245,245,245,1) 0%,rgba(245,245,245,0) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(245,245,245,1) 0%,rgba(245,245,245,0) 100%); /* W3C */
  }

  .watch-all-apps:after {
    right: 0;
    background: -moz-linear-gradient(left, rgba(245,245,245,0) 0%, rgba(245,245,245,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(245,245,245,0)), color-stop(100%,rgba(245,245,245,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(245,245,245,0) 0%,rgba(245,245,245,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(245,245,245,0) 0%,rgba(245,245,245,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(245,245,245,0) 0%,rgba(245,245,245,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(245,245,245,0) 0%,rgba(245,245,245,1) 100%); /* W3C */
  }

  .watch-all-apps__scroll {
    position: relative;
    height: 95px;
    font-size: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

    .watch-all-apps__elem {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: 110px;
      height: 70px;
      font-size: 12px;
      text-align: center;
      line-height: 40px;
    }

    .watch-all-apps__elem:first-child {
      margin-left: -5px;
    }

    .watch-all-apps__elem:last-child {
      margin-right: 105px;
    }

      .watch-all-apps__elem__img {
        display: block;
        width:  40px;
        height: 40px;
        margin: 30px auto 0;
        border-radius: 50%;
        background-color: #ccc;
        background-repeat:   no-repeat;
        background-position: center center;
        background-size:     contain;
      }

      .watch-all-apps__elem__img--back {
        background-color: transparent;
        color: #f70;
      }

        .watch-all-apps__elem__img--back > .fa {
          margin: 0 1px;
        }

        .watch-all-apps__elem:nth-child(2) > .watch-all-apps__elem__img {
              -ms-transform: scale(1.25);
          -webkit-transform: scale(1.25);
                  transform: scale(1.25);
        }

        .watch-all-apps__elem__img:after {
          content: attr(data-str);
          position: absolute;
          top:   0;
          right: 0;
          left:  0;
          padding: 8px 5px 0;
          line-height: 1;
          text-overflow: ellipsis;
          color: rgba(0,0,0,.5);
          overflow: hidden;
        }

        .watch-all-apps__elem:nth-child(2) > .watch-all-apps__elem__img:after {
          display: none;
        }

@media screen and (min-width: 480px) {
  .watch-all-apps {
    width: 400px;
    padding: 0 40px;
  }

  .watch-all-apps__btn {
    position: absolute;
    bottom: 5px;
    width:  40px;
    height: 40px;
    padding: 3px 0 0;
    border:  none;
    outline: none;
    background-color: transparent;
    font-size: 20px;
    cursor: pointer;
  }

  .watch-all-apps__btn--prev {
    left: 0;
  }

  .watch-all-apps__btn--next {
    right: 0;
  }

  .watch-all-apps:before {
    left: 40px;
  }

  .watch-all-apps:after {
    right: 40px;
  }
}





.watch-share {
  text-align: center;
  overflow: hidden;
  margin-top: 25px;
}


@media all and (min-width: 786px) {
  .watch-share {
    position: absolute;
    top: 35px;
    left: 370px;
    padding: 0 1px;
    text-align: left;
  }
}




.truncate-box {
  position: relative;
  height: 15em;
  overflow: hidden;
}

  .truncate-box:after {
    content: "";
    position: absolute;
    right:  0;
    bottom: 0;
    left:   50%;
    height: 1.5em;
    background: -moz-linear-gradient(left, rgba(244,244,244,0) 0%, rgba(244,244,244,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(244,244,244,0)), color-stop(100%,rgba(244,244,244,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* W3C */

  }

.truncate-btn {
  color: #f70;
  outline: none;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
}



.get-btn {
  text-align: center;
  display: block;
  margin: 0 55px;
  color: #f70;
  border: solid 1px #f70;
  padding: 10px;
  border-radius: 2px;
  font-size: 22px;
  -webkit-transition: .2s ease;
          transition: .2s ease;
}

.get-btn:hover {
  background-color: #f70;
  color: #f3f3f3;
}



.embed-btn {
  outline: none;
  background-color: transparent;
  font-size: 16px;
  font-weight: 300;
  border: solid 1px;
  color: rgba(125,125,125,1);
  border-radius: 2px;
  padding: 0 10px;
  margin-right: 10px;
  position: relative;
  top: -3px;
  -webkit-transition: .2s ease;
          transition: .2s ease;
}

.embed-btn:hover {
  background-color: #f70;
  color: #f3f3f3;
  border: solid 1px #f70;
}

.embed-view {
  position: absolute;
  z-index: 1;
  left: 335px;
  background-color: #fff;
  top: 110px;
  padding: 15px;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
  font-size: 16px;
}

  .embed-view:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 60px;
    width:  0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fff transparent;
  }

  .embed-view__code {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 55px;
    padding: 7px 9px;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 14px;
    line-height: 21px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    resize: none;
    border: 1px solid #ccc;
    border-radius: 3px;
  }



.taxonomy__title > span {
  display: inline-block;
  padding: 5px;
  border-top: solid 1px;
  border-bottom: solid 1px;
}

.watch-taxonomy {
  background: radial-gradient(farthest-corner at 50% 0, hsla(331, 35%, 24%, 0) 20%, hsla(352, 42%, 27%, 0.5) 60%, hsla(291, 27%, 26%, 1)), linear-gradient(to bottom, hsl( 27,81%,79%) 0%, hsl( 8,43%,64%) 40%, hsl(345,25%,38%) 100%);
  padding-top: 40px;
  padding-bottom: 40px;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px rgba(0,0,0,.2);
}

  .watch-taxonomy__parent {
    display: inline-block;
    font-size: 18px;
    color: #fff;
    padding: 3px 5px;
    margin: 0 5px 0;
    opacity: .8;
    -webkit-transition: .2s ease;
            transition: .2s ease;
  }

  .watch-taxonomy__sub {
    display: inline-block;
    font-size: 18px;
    color: #fff;
    padding: 3px 5px;
    margin: 0 5px 5px;
    opacity: 0.8;
    -webkit-transition: .2s ease;
            transition: .2s ease;
  }

  .watch-taxonomy__sub:hover, .watch-taxonomy__parent:hover {
    opacity: 1;
    border-color: white;
  }



.side-control {
  text-align: center;
  font-size: 0;
}

@media all and (min-width: 768px) {
  .side-control {
    float: right;
  }
}

  .side-control__btn {
    font-size: 12px;
    display: inline-block;
    color: #fff;
    padding: 3px;
    width: 66px;
    background-color: rgba(0,0,0,.1);
    -webkit-transition: .2s ease;
            transition: .2s ease;
  }

  .side-control__btn:hover {
    background-color: rgba(0,0,0,.2);
  }

  .side-control__btn:first-child {
    border-top-left-radius:    2px;
    border-bottom-left-radius: 2px;
    margin-right: 1px;
  }

  .side-control__btn:last-child {
    border-top-right-radius:    2px;
    border-bottom-right-radius: 2px;
  }

  .side-control__btn.active {
    background-color: #f70;
    pointer-events: none;
  }
/*
 * BEFORE MODIFYING THIS DOCUMENT READ THIS DOCUMENTATION:
 *
 * http://cssguidelin.es/
 *
 * What differs from the guideline:
 *
 * - Use aa_ prefix for all classes
 * - Indentations are 2px
 * - Columns are 120px wide
 * - Don't use [] in html inside class="" for grouping
 * - In html class="" don't use 2 space between classes, but put the related ones next to each other
 * - Low level commenting is not necessary but u can use, just try to explain the things u think is important
 *
 */

/*
 * RULES
 *
 *  1) GLOBAL
 *
 *  2) VISIBILITY
 *
 *  3) ALIGN
 *
 *  4) OPACITY
 *
 *  5) TEXT FORMATTING
 *
 *  6) BOX FORMATTING
 *
 *  7) COLORS
 *
 *  8) GRADIENTS
 *
 *  9) BG IMG CONTAINER
 *
 * 10) WAIT TO LOAD
 *
 * 11) SCROLL TO VIEW
 *
 * 12) MISCELLANEOUS
 *
 */





/*--------------*\
   #VISIBILITY
\*--------------*/




.aa_hidden {
  display: none;
  visibility: hidden;
}

.touchevents .aa_hide--touchdevice {
  display: none;
}


/* hide above these screen sizes */
@media (min-width: 480px) {
  .aa_hide--xs {
    display: none;
  }
}

@media all and (min-width: 768px) {
  .aa_hide--s {
    display: none;
  }
}

@media (min-width: 1024px) {
  .aa_hide--m {
    display: none;
  }
}



/* show above these screen sizes + 1px */
@media (max-width: 479px) {
  .aa_show--xs {
    display: none;
  }
}

@media (max-width: 767px) {
  .aa_show--s {
    display: none;
  }
}

@media (max-width: 1023px) {
  .aa_show--m {
    display: none;
  }
}

@media (max-width: 1279px) {
  .aa_show--l {
    display: none;
  }
}

@media (max-width: 1439px) {
  .aa_show--xl {
    display: none;
  }
}



/*----------*\
   #ALIGN
\*----------*/



.aa_pull--left {
  float: left;
}

.aa_pull--right {
  float: right;
}



.aa_clearfix:before, .aa_clearfix:after {
  content: "";
  display: table;
}

.aa_clearfix:after {
  clear: both;
}



.aa_clear {
  clear: both;
}

/* clear below screen sizes */
@media (max-width: 481px) {
  .aa_clear--xs {clear: both}
}





/*-----------*\
   #OPACITY
\*-----------*/



.aa_opacity--0 {
  opacity: 0;
}

.aa_opacity--01 {
  opacity: .1;
}

.aa_opacity--02 {
  opacity: .2;
}

.aa_opacity--03 {
  opacity: .3;
}

.aa_opacity--04 {
  opacity: .4;
}

.aa_opacity--05 {
  opacity: .5;
}

.aa_opacity--06 {
  opacity: .6;
}

.aa_opacity--07 {
  opacity: .7;
}

.aa_opacity--08 {
  opacity: .8;
}

.aa_opacity--09 {
  opacity: .9;
}

.aa_opacity--1 {
  opacity: 1;
}





/*------------------*\
   #TEXT FORMATTING
\*------------------*/



.aa_text--condensed, .at__text--condensed {
  font-family: 'Roboto Condensed', sans-serif;
}

.aa_text--display, .at__text--display {
  font-family: 'Playfair Display', serif;
}



.aa_text--left {
  text-align: left;
}

.aa_text--right {
  text-align: right;
}

.aa_text--center {
  text-align: center;
}

.aa_text--justify {
  text-align: justify;
}

.aa_text--nowrap {
  white-space: nowrap;
}

.aa_text--lowercase {
  text-transform: lowercase;
}

.aa_text--uppercase {
  text-transform: uppercase;
}

.aa_text--capitalize {
  text-transform: capitalize;
}



.aa_text--thin {
  font-weight: 100;
}

.aa_text--light {
  font-weight: 300;
}

.aa_text--normal {
  font-weight: 400;
}

.aa_text--medium {
  font-weight: 500;
}

.aa_text--bold {
  font-weight: 700;
}

.aa_text--black {
  font-weight: 900;
}



.aa_text--0 {
  font-size: 0;
}

.aa_text--08 {
  font-size: 0.8rem;
}

.aa_text--12 {
  font-size: 1.2rem;
}

.aa_text--14 {
  font-size: 1.4rem;
}

.aa_text--16 {
  font-size: 1.6rem;
}

.aa_text--18 {
  font-size: 1.8rem;
}

.aa_text--20 {
  font-size: 2.0rem;
}

.aa_text--22 {
  font-size: 2.2rem;
}

.aa_text--24 {
  font-size: 2.4rem;
}

.aa_text--32 {
  font-size: 3.2rem;
}

.aa_text--36 {
  font-size: 3.6rem;
}

.aa_text--42 {
  font-size: 4.2rem;
}

.aa_text--50 {
  font-size: 5rem;
}



.aa_text--25p {
  font-size: 25%;
}

.aa_text--50p {
  font-size: 50%;
}

.aa_text--75p {
  font-size: 75%;
}



.aa_text--truncate, .aa_truncate { /* truncate for one line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.aa_text-shadow--1010 {
  text-shadow: 1px 1px rgba(0,0,0,1);
}





/*------------------*\
   #BOX FORMATTING
\*------------------*/



.aa_display--block {
  display: block;
}

.aa_display--inline {
  display: inline-block;
}



.aa_position--relative {
  position: relative;
}

.aa_position--absolute {
  position: absolute;
}



.aa_noverflow {
  overflow: hidden;
}



.aa_margin--0, .aa_nomargin {
  margin: 0;
}



.aa_margin-lr--5 {
  margin-left:  5px;
  margin-right: 5px;
}

.aa_margin-lr--10 {
  margin-left:  10px;
  margin-right: 10px;
}

.aa_margin-lr--15 {
  margin-left:  15px;
  margin-right: 15px;
}

.aa_margin-lr--20 {
  margin-left:  20px;
  margin-right: 20px;
}

.aa_margin-lr--30 {
  margin-left:  30px;
  margin-right: 30px;
}

.aa_margin-lr--40 {
  margin-left:  40px;
  margin-right: 40px;
}

.aa_margin-lr--50 {
  margin-left:  50px;
  margin-right: 50px;
}



.aa_margin-l--5 {
  margin-left: 5px;
}

.aa_margin-r--5 {
  margin-right: 5px;
}

.aa_margin-l--10 {
  margin-left: 10px;
}

.aa_margin-r--10 {
  margin-right: 10px;
}

.aa_margin-l--15 {
  margin-left: 15px;
}

.aa_margin-r--15 {
  margin-right: 15px;
}

.aa_margin-l--20 {
  margin-left: 20px;
}

.aa_margin-r--20 {
  margin-right: 20px;
}

.aa_margin-l--30 {
  margin-left: 30px;
}

.aa_margin-r--30 {
  margin-right: 30px;
}

.aa_margin-l--40 {
  margin-left: 40px;
}

.aa_margin-r--40 {
  margin-right: 40px;
}

.aa_margin-l--50 {
  margin-left: 50px;
}

.aa_margin-r--50 {
  margin-right: 50px;
}



.aa_margin-tb---20 {
  margin-top:    -20px;
  margin-bottom: -20px;
}

.aa_margin-tb---15 {
  margin-top:    -15px;
  margin-bottom: -15px;
}

.aa_margin-tb---10 {
  margin-top:    -10px;
  margin-bottom: -10px;
}

.aa_margin-tb---5 {
  margin-top:    -5px;
  margin-bottom: -5px;
}

.aa_margin-tb--5 {
  margin-top:    5px;
  margin-bottom: 5px;
}

.aa_margin-tb--10 {
  margin-top:    10px;
  margin-bottom: 10px;
}

.aa_margin-tb--15 {
  margin-top:    15px;
  margin-bottom: 15px;
}

.aa_margin-tb--20 {
  margin-top:    20px;
  margin-bottom: 20px;
}

.aa_margin-tb--30 {
  margin-top:    30px;
  margin-bottom: 30px;
}

.aa_margin-tb--40 {
  margin-top:    40px;
  margin-bottom: 40px;
}

.aa_margin-tb--50 {
  margin-top:    50px;
  margin-bottom: 50px;
}



.aa_margin-t---20 {
  margin-top: -20px;
}

.aa_margin-b---20 {
  margin-bottom: -20px;
}

.aa_margin-t---15 {
  margin-top: -15px;
}

.aa_margin-b---15 {
  margin-bottom: -15px;
}

.aa_margin-t---10 {
  margin-top: -10px;
}

.aa_margin-b---10 {
  margin-bottom: -10px;
}

.aa_margin-t---5 {
  margin-top: -5px;
}

.aa_margin-b---5 {
  margin-bottom: -5px;
}

.aa_margin-t--5 {
  margin-top: 5px;
}

.aa_margin-b--5 {
  margin-bottom: 5px;
}

.aa_margin-t--10 {
  margin-top: 10px;
}

.aa_margin-b--10 {
  margin-bottom: 10px;
}

.aa_margin-t--15 {
  margin-top: 15px;
}

.aa_margin-b--15 {
  margin-bottom: 15px;
}

.aa_margin-t--20 {
  margin-top: 20px;
}

.aa_margin-b--20 {
  margin-bottom: 20px;
}

.aa_margin-t--30 {
  margin-top: 30px;
}

.aa_margin-b--30 {
  margin-bottom: 30px;
}

.aa_margin-t--40 {
  margin-top: 40px;
}

.aa_margin-b--40 {
  margin-bottom: 40px;
}

.aa_margin-t--50 {
  margin-top: 50px;
}

.aa_margin-b--50 {
  margin-bottom: 50px;
}



.aa_padding--0 {
  padding: 0;
}



.aa_padding-lr--0 {
  padding-left:  0;
  padding-right: 0;
}

.aa_padding-lr--5 {
  padding-left:  5px;
  padding-right: 5px;
}

.aa_padding-lr--10 {
  padding-left:  10px;
  padding-right: 10px;
}

.aa_padding-lr--15 {
  padding-left:  15px;
  padding-right: 15px;
}

.aa_padding-lr--20 {
  padding-left:  20px;
  padding-right: 20px;
}

.aa_padding-lr--30 {
  padding-left:  30px;
  padding-right: 30px;
}

.aa_padding-lr--40 {
  padding-left:  40px;
  padding-right: 40px;
}

.aa_padding-lr--50 {
  padding-left:  40px;
  padding-right: 40px;
}



.aa_padding-l--0 {
  padding-left: 0;
}

.aa_padding-r--0 {
  padding-right: 0;
}

.aa_padding-l--5 {
  padding-left: 5px;
}

.aa_padding-r--5 {
  padding-right: 5px;
}

.aa_padding-l--10 {
  padding-left: 10px;
}

.aa_padding-r--10 {
  padding-right: 10px;
}

.aa_padding-l--15 {
  padding-left: 15px;
}

.aa_padding-r--15 {
  padding-right: 15px;
}

.aa_padding-l--20 {
  padding-left: 20px;
}

.aa_padding-r--20 {
  padding-right: 20px;
}

.aa_padding-l--30 {
  padding-left: 30px;
}

.aa_padding-r--30 {
  padding-right: 30px;
}

.aa_padding-l--40 {
  padding-left: 40px;
}

.aa_padding-r--40 {
  padding-right: 40px;
}

.aa_padding-l--50 {
  padding-left: 50px;
}

.aa_padding-r--50 {
  padding-right: 50px;
}



.aa_padding-tb--0 {
  padding-top:    0;
  padding-bottom: 0;
}

.aa_padding-tb--5 {
  padding-top:    5px;
  padding-bottom: 5px;
}

.aa_padding-tb--10 {
  padding-top:    10px;
  padding-bottom: 10px;
}

.aa_padding-tb--15 {
  padding-top:    15px;
  padding-bottom: 15px;
}

.aa_padding-tb--20 {
  padding-top:    20px;
  padding-bottom: 20px;
}

.aa_padding-tb--30 {
  padding-top:    30px;
  padding-bottom: 30px;
}

.aa_padding-tb--40 {
  padding-top:    40px;
  padding-bottom: 40px;
}

.aa_padding-tb--50 {
  padding-top:    50px;
  padding-bottom: 50px;
}



.aa_padding-t--0 {
  padding-top: 0;
}

.aa_padding-b--0 {
  padding-bottom: 0;
}

.aa_padding-t--5 {
  padding-top: 5px;
}

.aa_padding-b--5 {
  padding-bottom: 5px;
}

.aa_padding-t--10 {
  padding-top: 10px;
}

.aa_padding-b--10 {
  padding-bottom: 10px;
}

.aa_padding-t--15 {
  padding-top: 15px;
}

.aa_padding-b--15 {
  padding-bottom: 15px;
}

.aa_padding-t--20 {
  padding-top: 20px;
}

.aa_padding-b--20 {
  padding-bottom: 20px;
}

.aa_padding-t--30 {
  padding-top: 30px;
}

.aa_padding-b--30 {
  padding-bottom: 30px;
}

.aa_padding-t--40 {
  padding-top: 40px;
}

.aa_padding-b--40 {
  padding-bottom: 40px;
}

.aa_padding-t--50 {
  padding-top: 50px;
}

.aa_padding-b--50 {
  padding-bottom: 50px;
}



.aa_pb {
  position: relative;
}

  .aa_pb__elem {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
  }

.aa_pb--05  {padding-bottom:   5%}
.aa_pb--10  {padding-bottom:  10%}
.aa_pb--15  {padding-bottom:  15%}
.aa_pb--20  {padding-bottom:  20%}
.aa_pb--25  {padding-bottom:  25%}
.aa_pb--28  {padding-bottom:  28%}
.aa_pb--30  {padding-bottom:  30%}
.aa_pb--35  {padding-bottom:  35%}
.aa_pb--40  {padding-bottom:  40%}
.aa_pb--45  {padding-bottom:  45%}
.aa_pb--50  {padding-bottom:  50%}
.aa_pb--55  {padding-bottom:  55%}
.aa_pb--60  {padding-bottom:  60%}
.aa_pb--65  {padding-bottom:  65%}
.aa_pb--70  {padding-bottom:  70%}
.aa_pb--75  {padding-bottom:  75%}
.aa_pb--80  {padding-bottom:  80%}
.aa_pb--85  {padding-bottom:  85%}
.aa_pb--90  {padding-bottom:  90%}
.aa_pb--95  {padding-bottom:  95%}
.aa_pb--100 {padding-bottom: 100%}
.aa_pb--105 {padding-bottom: 105%}
.aa_pb--110 {padding-bottom: 110%}
.aa_pb--150 {padding-bottom: 150%}

@media (min-width: 375px) {
  .aa_pb--05-xs  {padding-bottom:   5%}
  .aa_pb--10-xs  {padding-bottom:  10%}
  .aa_pb--15-xs  {padding-bottom:  15%}
  .aa_pb--20-xs  {padding-bottom:  20%}
  .aa_pb--25-xs  {padding-bottom:  25%}
  .aa_pb--28-xs  {padding-bottom:  28%}
  .aa_pb--30-xs  {padding-bottom:  30%}
  .aa_pb--35-xs  {padding-bottom:  35%}
  .aa_pb--40-xs  {padding-bottom:  40%}
  .aa_pb--45-xs  {padding-bottom:  45%}
  .aa_pb--50-xs  {padding-bottom:  50%}
  .aa_pb--55-xs  {padding-bottom:  55%}
  .aa_pb--60-xs  {padding-bottom:  60%}
  .aa_pb--65-xs  {padding-bottom:  65%}
  .aa_pb--70-xs  {padding-bottom:  70%}
  .aa_pb--75-xs  {padding-bottom:  75%}
  .aa_pb--80-xs  {padding-bottom:  80%}
  .aa_pb--85-xs  {padding-bottom:  85%}
  .aa_pb--90-xs  {padding-bottom:  90%}
  .aa_pb--95-xs  {padding-bottom:  95%}
  .aa_pb--100-xs {padding-bottom: 100%}
  .aa_pb--105-xs {padding-bottom: 105%}
  .aa_pb--110-xs {padding-bottom: 110%}
}

@media (min-width: 480px) {
  .aa_pb--05-s  {padding-bottom:   5%}
  .aa_pb--10-s  {padding-bottom:  10%}
  .aa_pb--15-s  {padding-bottom:  15%}
  .aa_pb--20-s  {padding-bottom:  20%}
  .aa_pb--25-s  {padding-bottom:  25%}
  .aa_pb--28-s  {padding-bottom:  28%}
  .aa_pb--30-s  {padding-bottom:  30%}
  .aa_pb--35-s  {padding-bottom:  35%}
  .aa_pb--40-s  {padding-bottom:  40%}
  .aa_pb--45-s  {padding-bottom:  45%}
  .aa_pb--50-s  {padding-bottom:  50%}
  .aa_pb--55-s  {padding-bottom:  55%}
  .aa_pb--60-s  {padding-bottom:  60%}
  .aa_pb--65-s  {padding-bottom:  65%}
  .aa_pb--70-s  {padding-bottom:  70%}
  .aa_pb--75-s  {padding-bottom:  75%}
  .aa_pb--80-s  {padding-bottom:  80%}
  .aa_pb--85-s  {padding-bottom:  85%}
  .aa_pb--90-s  {padding-bottom:  90%}
  .aa_pb--95-s  {padding-bottom:  95%}
  .aa_pb--100-s {padding-bottom: 100%}
  .aa_pb--105-s {padding-bottom: 105%}
  .aa_pb--110-s {padding-bottom: 110%}
}

@media (min-width: 768px) {
  .aa_pb--05-m  {padding-bottom:   5%}
  .aa_pb--10-m  {padding-bottom:  10%}
  .aa_pb--15-m  {padding-bottom:  15%}
  .aa_pb--20-m  {padding-bottom:  20%}
  .aa_pb--25-m  {padding-bottom:  25%}
  .aa_pb--28-m  {padding-bottom:  28%}
  .aa_pb--30-m  {padding-bottom:  30%}
  .aa_pb--35-m  {padding-bottom:  35%}
  .aa_pb--40-m  {padding-bottom:  40%}
  .aa_pb--45-m  {padding-bottom:  45%}
  .aa_pb--50-m  {padding-bottom:  50%}
  .aa_pb--55-m  {padding-bottom:  55%}
  .aa_pb--60-m  {padding-bottom:  60%}
  .aa_pb--65-m  {padding-bottom:  65%}
  .aa_pb--70-m  {padding-bottom:  70%}
  .aa_pb--75-m  {padding-bottom:  75%}
  .aa_pb--80-m  {padding-bottom:  80%}
  .aa_pb--85-m  {padding-bottom:  85%}
  .aa_pb--90-m  {padding-bottom:  90%}
  .aa_pb--95-m  {padding-bottom:  95%}
  .aa_pb--100-m {padding-bottom: 100%}
  .aa_pb--105-m {padding-bottom: 105%}
  .aa_pb--110-m {padding-bottom: 110%}
}

@media (min-width: 1024px) {
  .aa_pb--05-l  {padding-bottom:   5%}
  .aa_pb--10-l  {padding-bottom:  10%}
  .aa_pb--15-l  {padding-bottom:  15%}
  .aa_pb--20-l  {padding-bottom:  20%}
  .aa_pb--25-l  {padding-bottom:  25%}
  .aa_pb--28-l  {padding-bottom:  28%}
  .aa_pb--30-l  {padding-bottom:  30%}
  .aa_pb--35-l  {padding-bottom:  35%}
  .aa_pb--40-l  {padding-bottom:  40%}
  .aa_pb--45-l  {padding-bottom:  45%}
  .aa_pb--50-l  {padding-bottom:  50%}
  .aa_pb--55-l  {padding-bottom:  55%}
  .aa_pb--60-l  {padding-bottom:  60%}
  .aa_pb--65-l  {padding-bottom:  65%}
  .aa_pb--70-l  {padding-bottom:  70%}
  .aa_pb--75-l  {padding-bottom:  75%}
  .aa_pb--80-l  {padding-bottom:  80%}
  .aa_pb--85-l  {padding-bottom:  85%}
  .aa_pb--90-l  {padding-bottom:  90%}
  .aa_pb--95-l  {padding-bottom:  95%}
  .aa_pb--100-l {padding-bottom: 100%}
  .aa_pb--105-l {padding-bottom: 105%}
  .aa_pb--110-l {padding-bottom: 110%}
}





/*----------*\
   #COLORS
\*----------*/




.aa_text-white--1, .aa_text-white--1 a {
  color: rgba(255,255,255,1);
}

.aa_text-white--08, .aa_text-white--08 a {
  color: rgba(255,255,255,.8);
}



.aa_bg-000--1  {background-color: rgba(0,0,0, 1);}

.aa_bg-888--1  {background-color: rgba(136,136,136, 1);}
.aa_bg-888--08 {background-color: rgba(136,136,136,.8);}
.aa_bg-888--06 {background-color: rgba(136,136,136,.6);}
.aa_bg-888--04 {background-color: rgba(136,136,136,.4);}
.aa_bg-888--02 {background-color: rgba(136,136,136,.2);}



.aa_grad--0 {background: radial-gradient(farthest-corner at 50% 0, hsl( 56,45%,50%) 0%, hsl(146,30%,30%) 100%)}
.aa_grad--1 {background: radial-gradient(farthest-corner at 50% 0, hsl(211,45%,50%) 0%, hsl(301,30%,30%) 100%)}
.aa_grad--2 {background: radial-gradient(farthest-corner at 50% 0, hsl( 38,45%,50%) 0%, hsl(302,30%,30%) 100%)}
.aa_grad--3 {background: radial-gradient(farthest-corner at 50% 0, hsl(122,45%,50%) 0%, hsl(212,30%,30%) 100%)}
.aa_grad--4 {background: radial-gradient(farthest-corner at 50% 0, hsl(171,45%,50%) 0%, hsl(261,30%,30%) 100%)}
.aa_grad--5 {background: radial-gradient(farthest-corner at 50% 0, hsl(  0,45%,50%) 0%, hsl(270,30%,30%) 100%)}
.aa_grad--6 {background: radial-gradient(farthest-corner at 50% 0, hsl(150,45%,50%) 0%, hsl(240,30%,30%) 100%)}
.aa_grad--7 {background: radial-gradient(farthest-corner at 50% 0, hsl(295,45%,50%) 0%, hsl(225,30%,30%) 100%)}
.aa_grad--8 {background: radial-gradient(farthest-corner at 50% 0, hsl( 87,45%,50%) 0%, hsl(177,30%,30%) 100%)}
.aa_grad--9 {background: radial-gradient(farthest-corner at 50% 0, hsl(244,45%,50%) 0%, hsl(274,30%,30%) 100%)}

.aa_color--0 {color: #cbb700}
.aa_color--1 {color: #0061cc}
.aa_color--2 {color: #cb2a00}
.aa_color--3 {color: #2ecd00}
.aa_color--4 {color: #00becc}
.aa_color--5 {color: #cd0036}
.aa_color--6 {color: #00cda4}
.aa_color--7 {color: #cd00c7}
.aa_color--8 {color: #16da48}
.aa_color--9 {color: #3e00cb}

.aa_bg--0 {background: #cbb700}
.aa_bg--1 {background: #0061cc}
.aa_bg--2 {background: #cb2a00}
.aa_bg--3 {background: #2ecd00}
.aa_bg--4 {background: #00becc}
.aa_bg--5 {background: #cd0036}
.aa_bg--6 {background: #00cda4}
.aa_bg--7 {background: #cd00c7}
.aa_bg--8 {background: #16da48}
.aa_bg--9 {background: #3e00cb}

.aa_bgc--0 {background-color: #746d5e}
.aa_bgc--1 {background-color: #5F628F}
.aa_bgc--2 {background-color: #745D62}
.aa_bgc--3 {background-color: #669386}
.aa_bgc--4 {background-color: #596C84}
.aa_bgc--5 {background-color: #775968}
.aa_bgc--6 {background-color: #5B7D92}
.aa_bgc--7 {background-color: #7C5C7C}
.aa_bgc--8 {background-color: #758260}
.aa_bgc--9 {background-color: #5B536C}

.aa_txtc-0 {color: #FFF77C}
.aa_txtc-1 {color: #7CBBFF}
.aa_txtc-2 {color: #FFCE7C}
.aa_txtc-3 {color: #7CFF81}
.aa_txtc-4 {color: #7CFFEC}
.aa_txtc-5 {color: #FF7C7C}
.aa_txtc-6 {color: #7CFFBE}
.aa_txtc-7 {color: #F37CFF}
.aa_txtc-8 {color: #C3FF7C}
.aa_txtc-9 {color: #847CFF}
.aa_txtc-f70 {color: #f70}
.aa_txtc-70f {color: #70f}
.aa_txtc-f07 {color: #f07}
.aa_txtc-0cc {color: #0cc}





/*-------------*\
   #GRADIENTS
\*-------------*/



.aa_gr {
  color: #fff;
  overflow: hidden;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

  .aa_gr:before {
    content: '';
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    transition: .3s;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .aa_gr--0:before {background: radial-gradient(farthest-corner, rgba(0,0,0,.15), rgba(0,0,0,0) 100%), linear-gradient(50deg, #F6D094 0%, #BD9480 100%)}
  .aa_gr--1:before {background: radial-gradient(farthest-corner, rgba(0,0,0,.15), rgba(0,0,0,0) 100%), linear-gradient(50deg, #AEAA98 0%, #94A7AE 100%)}
  .aa_gr--2:before {background: radial-gradient(farthest-corner, rgba(0,0,0,.15), rgba(0,0,0,0) 100%), linear-gradient(50deg, #AEAA98 0%, #F6D094 100%)}
  .aa_gr--3:before {background: radial-gradient(farthest-corner, rgba(0,0,0,.15), rgba(0,0,0,0) 100%), linear-gradient(50deg, #C4DCA0 0%, #B2BC87 100%)}
  .aa_gr--4:before {background: radial-gradient(farthest-corner, rgba(0,0,0,.15), rgba(0,0,0,0) 100%), linear-gradient(50deg, #889BCD 0%, #71A8C9 100%)}
  .aa_gr--5:before {background: radial-gradient(farthest-corner, rgba(0,0,0,.15), rgba(0,0,0,0) 100%), linear-gradient(50deg, #E5AEC7 0%, #C8A5CB 100%)}
  .aa_gr--6:before {background: radial-gradient(farthest-corner, rgba(0,0,0,.15), rgba(0,0,0,0) 100%), linear-gradient(50deg, #AEAA98 0%, #67B6B5 100%)}
  .aa_gr--7:before {background: radial-gradient(farthest-corner, rgba(0,0,0,.15), rgba(0,0,0,0) 100%), linear-gradient(50deg, #A8AED8 0%, #C8A5CB 100%)}
  .aa_gr--8:before {background: radial-gradient(farthest-corner, rgba(0,0,0,.15), rgba(0,0,0,0) 100%), linear-gradient(50deg, #AEAA98 0%, #B2BC87 100%)}
  .aa_gr--9:before {background: radial-gradient(farthest-corner, rgba(0,0,0,.15), rgba(0,0,0,0) 100%), linear-gradient(50deg, #67B6B5 0%, #A8AED8 100%)}

  .aa_gr--hover:hover:before {
    transition: 1s;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .aa_gr > div {
    position: relative;
  }





/*-----------------*\
   #IMG CONTAINER
\*-----------------*/



img.aa_img,
.aa_img > img {
  vertical-align: top;
  width:  100%;
  height: 100%;
  object-fit: cover;
}

img.aa_img--contain,
.aa_img--contain > img {
  object-fit: contain;
}





/*--------------------*\
   #BG IMG CONTAINER
\*--------------------*/



.aa_bg {
  overflow: hidden;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

  .aa_bg__ {
    height: 100%;
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     cover;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .aa_bg__--abs {
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    height: auto;
  }





/*----------------*\
   #WAIT TO LOAD
\*----------------*/



.js .aa_wait-to-load {
  opacity: 0;
  transition: opacity .5s;
}

.js .aa_wait-to-load.loaded {
  opacity: 1;
}

.js .aa_wait-to-load.aa_opacity--01.loaded {opacity: .1}
.js .aa_wait-to-load.aa_opacity--02.loaded {opacity: .2}
.js .aa_wait-to-load.aa_opacity--03.loaded {opacity: .3}
.js .aa_wait-to-load.aa_opacity--04.loaded {opacity: .4}
.js .aa_wait-to-load.aa_opacity--05.loaded {opacity: .5}
.js .aa_wait-to-load.aa_opacity--06.loaded {opacity: .6}
.js .aa_wait-to-load.aa_opacity--07.loaded {opacity: .7}
.js .aa_wait-to-load.aa_opacity--08.loaded {opacity: .8}
.js .aa_wait-to-load.aa_opacity--09.loaded {opacity: .9}

.js .aa_wait-to-load.error {
  display: none;
}





/*-----------------*\
   #SROLL TO VIEW
\*-----------------*/


.no-touchevents .aa_come-in--fade {
  opacity: 0;
  -webkit-transition: opacity .4s ease-out;
          transition: opacity .4s ease-out;
}

.no-touchevents .aa_come-in--fade.aa_come-in--slow {
  -webkit-transition: opacity .8s ease-out;
          transition: opacity .8s ease-out;
}

.in-view .aa_come-in--fade, .aa_come-in--fade.in-view, .no-js .aa_come-in--fade {opacity: 1}
.in-view .aa_come-in--fade.aa_opacity--09, .aa_come-in--fade.aa_opacity--09.in-view, .no-js .aa_come-in--fade.aa_opacity--09 {opacity: .9}
.in-view .aa_come-in--fade.aa_opacity--08, .aa_come-in--fade.aa_opacity--08.in-view, .no-js .aa_come-in--fade.aa_opacity--08 {opacity: .8}
.in-view .aa_come-in--fade.aa_opacity--07, .aa_come-in--fade.aa_opacity--07.in-view, .no-js .aa_come-in--fade.aa_opacity--07 {opacity: .7}
.in-view .aa_come-in--fade.aa_opacity--06, .aa_come-in--fade.aa_opacity--06.in-view, .no-js .aa_come-in--fade.aa_opacity--06 {opacity: .6}
.in-view .aa_come-in--fade.aa_opacity--05, .aa_come-in--fade.aa_opacity--05.in-view, .no-js .aa_come-in--fade.aa_opacity--05 {opacity: .5}
.in-view .aa_come-in--fade.aa_opacity--04, .aa_come-in--fade.aa_opacity--04.in-view, .no-js .aa_come-in--fade.aa_opacity--04 {opacity: .4}
.in-view .aa_come-in--fade.aa_opacity--03, .aa_come-in--fade.aa_opacity--03.in-view, .no-js .aa_come-in--fade.aa_opacity--03 {opacity: .3}
.in-view .aa_come-in--fade.aa_opacity--02, .aa_come-in--fade.aa_opacity--02.in-view, .no-js .aa_come-in--fade.aa_opacity--02 {opacity: .2}
.in-view .aa_come-in--fade.aa_opacity--01, .aa_come-in--fade.aa_opacity--01.in-view, .no-js .aa_come-in--fade.aa_opacity--01 {opacity: .1}



.no-touchevents .aa_come-in--up, .no-touchevents .aa_come-in--up-s,
.no-touchevents .aa_come-in--down, .no-touchevents .aa_come-in--left, .no-touchevents .aa_come-in--right {
  -webkit-transition: transform .4s ease-out;
          transition: transform .4s ease-out;
}

.no-touchevents .aa_come-in--up.aa_come-in--fade, .no-touchevents .aa_come-in--up-s.aa_come-in--fade,
.no-touchevents .aa_come-in--down.aa_come-in--fade, .no-touchevents .aa_come-in--left.aa_come-in--fade,
.no-touchevents .aa_come-in--right.aa_come-in--fade {
  -webkit-transition: transform .4s ease-out, opacity .4s ease-out;
          transition: transform .4s ease-out, opacity .4s ease-out;
}

.no-touchevents .aa_come-in--up.aa_come-in--slow, .no-touchevents .aa_come-in--up-s.aa_come-in--slow,
.no-touchevents .aa_come-in--down.aa_come-in--slow, .no-touchevents .aa_come-in--left.aa_come-in--slow,
.no-touchevents .aa_come-in--right.aa_come-in--slow {
  -webkit-transition: transform .8s ease-out;
          transition: transform .8s ease-out;
}

.no-touchevents .aa_come-in--up.aa_come-in--fade.aa_come-in--slow, .no-touchevents .aa_come-in--up-s.aa_come-in--fade.aa_come-in--slow,
.no-touchevents .aa_come-in--down.aa_come-in--fade.aa_come-in--slow, .no-touchevents .aa_come-in--left.aa_come-in--fade.aa_come-in--slow,
.no-touchevents .aa_come-in--right.aa_come-in--fade.aa_come-in--slow {
  -webkit-transition: transform .8s ease-out, opacity .8s ease-out;
          transition: transform .8s ease-out, opacity .8s ease-out;
}

.no-touchevents .aa_come-in--up {
  -webkit-transform: translate3d(0,100px,0);
          transform: translate3d(0,100px,0);
}

.no-touchevents .aa_come-in--up-s {
  -webkit-transform: translate3d(0,40px,0);
          transform: translate3d(0,40px,0);
}

.no-touchevents .aa_come-in--down {
  -webkit-transform: translate3d(0,-100px,0);
          transform: translate3d(0,-100px,0);
}

.no-touchevents .aa_come-in--left {
  -webkit-transform: translate3d(100px,0,0);
          transform: translate3d(100px,0,0);
}

.no-touchevents .aa_come-in--right {
  -webkit-transform: translate3d(-100px,0,0);
          transform: translate3d(-100px,0,0);
}

.in-view .aa_come-in--up, .aa_come-in--up.in-view, .no-js .aa_come-in--up,
.in-view .aa_come-in--up-s, .aa_come-in--up-s.in-view, .no-js .aa_come-in--up-s,
.in-view .aa_come-in--down, .aa_come-in--down.in-view, .no-js .aa_come-in--down,
.in-view .aa_come-in--left, .aa_come-in--left.in-view, .no-js .aa_come-in--left,
.in-view .aa_come-in--right, .aa_come-in--right.in-view, .no-js .aa_come-in--right {
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}



.no-touchevents .aa_come-in--rotate {
  -webkit-transition: -webkit-transform 2s cubic-bezier(.1,.7,.3,.8);
          transition:         transform 2s cubic-bezier(.1,.7,.3,.8);
  -webkit-transform: perspective(300px) rotateY(10deg);
          transform: perspective(300px) rotateY(10deg);
}

.no-touchevents .aa_come-in--rotate--right {
  -webkit-transform: perspective(300px) rotateY(-10deg);
          transform: perspective(300px) rotateY(-10deg);
}

.in-view .aa_come-in--rotate, .aa_come-in--rotate.in-view, .no-js .aa_come-in--rotate {
  -webkit-transform: perspective(300px) rotateY(0deg);
          transform: perspective(300px) rotateY(0deg);
}





/*-----------------*\
   #MISCELLANEOUS
\*-----------------*/


.aa_border--tb3-13003 {
  border-top:    solid 3px rgba(130,130,130,.3);
  border-bottom: solid 3px rgba(130,130,130,.3);
}

.aa_border--b1-13002 {
  border-bottom: solid 1px rgba(130,130,130,.2);
}