@charset "UTF-8";
/*
*	Helper for the chart position styling
*/
/*
 *  Helpers for Flexbox containers and items
 */
/*
 *  Helper for track elements
 */
/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/
/**
 * Grid settings.
 * All values are defaults and can therefore be easily overidden.
 * @group jeet related
 **/
/**
 * $jeet-gutter
 * @type Interger
 */
/**
 * $jeet-parent-first
 * @type Bool
 */
/**
 * $jeet-parent-direction
 * @type String LTR or RTL
 */
/**
 * $jeet-max-width
 * @type Int in pixel
 */
/**
 * List functions courtesy of the wonderful folks at Team Sass.
 * Check out their awesome grid: Singularity.
 * @group jeet related
 **/
/**
 * Get  percentage from a given ratio.
 * @param {number} [$ratio=1] - The column ratio of the element.
 * @returns {number} - The percentage value.
 */
/**
 * Work out the column widths based on the ratio and gutter sizes.
 * @param {number} [$ratios=1] - The column ratio of the element.
 * @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
 * @returns {list} $width $gutter - A list containing the with and gutter for the element.
 */
/**
 * Get the set layout direction for the project.
 * @returns {string} $direction - The layout direction.
 */
/**
 * Replace a specified list value with a new value (uses built in set-nth() if available)
 * @param {list} $list - The list of values you want to alter.
 * @param {number} $index - The index of the list item you want to replace.
 * @param {*} $value - The value you want to replace $index with.
 * @returns {list} $list - The list with the value replaced or removed.
 * @warn if an invalid index is supplied.
 */
/**
 * Reverse a list (progressively enhanced for Sass 3.3)
 * @param {list} $list - The list of values you want to reverse.
 * @returns {list} $result - The reversed list.
 */
/**
 * Get the opposite direction to a given value.
 * @param {string} $dir - The direction you want the opposite of.
 * @returns {string} - The opposite direction to $dir.
 * @warn if an incorrect string is provided.
 */
/**
 * Jeet library
 * @group Jeet related
 * @link http://jeet.gs/
 **/
/**
 * Style an element as a column with a gutter.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
 * @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column mixin.
 * @param [$args...] - All arguments get passed through to column().
 * @alias column
 */
/**
 * Get the width of a column and nothing else.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Get the gutter size of a column and nothing else.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column-width function.
 * @param [$args...] - All arguments get passed through to column().
 * @alias column-width
 */
/**
 * An alias for the column-gutter function.
 * @param [$args...] - All arguments get passed through to column().
 * @alias column-gutter
 */
/**
 * Style an element as a column without any gutters for a seamless row.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
 * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
 */
/**
 * Reorder columns without altering the HTML.
 * @param {number} [$ratios=0] - Specify how far along you want the element to move.
 * @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Reset an element that has had shift() applied to it.
 */
/**
 * View the grid and its layers for easy debugging.
 * @param {string} [$color=black] - The background tint applied.
 * @param {boolean} [$important=false] - Whether to apply the style as !important.
 */
/**
 *  Alias for edit().
 */
/**
 * Horizontally center an element.
 * @param {number} [$max-width=1410px] - The max width the element can be.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 */
/**
 * Uncenter an element.
 */
/**
 * Stack an element so that nothing is either side of it.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 * @param {boolean/string} [$align=false] - Specify the text align for the element.
 */
/**
 * Unstack an element.
 */
/**
 * Center an element on either or both axes.
 * @requires A parent container with relative positioning.
 * @param {string} [$direction=both] - Specify which axes to center the element on.
 */
/**
 * Apply a clearfix to an element.
 */
/*
	resizeStoreLinks
	function for the resizing of the store links
*/
@font-face {
  font-family: "website";
  src: url("/assets/fonts/icon/website.eot");
  src: url("/assets/fonts/icon/website.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/icon/website.ttf") format("truetype"), url("/assets/fonts/icon/website.svg#website") format("svg"), url("/assets/fonts/icon/website.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
[data-icon]:before {
  font-family: "website";
  content: attr(data-icon);
  font-style: normal;
  font-weight: normal;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  margin-right: 3px;
  vertical-align: bottom; }

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "website";
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block; }

.icon-center:before {
  margin-left: 0.3em;
  text-align: center; }

/* # Icons
### Google Plus

    <span class="icon icon-googleplus">Google Plus</span>
*/
.icon-googleplus:before {
  content: "a\00A0"; }

/* ### Facebook

    <span class="icon icon-facebook">Facebook</span>
*/
.icon-facebook:before {
  content: "g\00A0"; }

/* ### Twitter

    <span class="icon icon-twitter">Twitter</span>
*/
.icon-twitter:before {
  content: "c\00A0"; }

/* ### Search

    <span class="icon icon-search">Search</span>
*/
.icon-search:before {
  content: "e\00A0"; }

/* ### Map

    <span class="icon icon-map">Map</span>
*/
.icon-map:before {
  content: "f\00A0"; }

/* ### Arrow Down

    <span class="icon icon-toggle">Down</span>
*/
.icon-toggle:before {
  content: "h\00A0"; }

/* ### Arrow Up

    <div class="js-active"><span class="icon icon-toggle">Up</span></div>
*/
.js-active .icon-toggle:before {
  content: "i\00A0"; }

/* ### Instagram

    <span class="icon icon-instagram">Instagram</span>
*/
.icon-instagram:before {
  content: "k\00A0"; }

/* ### LinkedIn

    <span class="icon icon-linkedin">LinkedIn</span>
*/
.icon-linkedin:before {
  content: "l\00A0"; }

/* ### Share

    <span class="icon icon-share"></span>
*/
.icon-share:before {
  content: "m\00A0"; }

/* ### Burger

    <span class="icon icon-hamburger"></span>
*/
.icon-hamburger:before {
  content: "j\00A0"; }

/* ### Arrow Link

    <span class="icon icon-arrow_link"></span>
*/
.icon-arrow_link:before {
  content: "n\00A0";
  font-size: 120%;
  vertical-align: bottom; }

@font-face {
  font-family: "website";
  src: url("/assets/fonts/icon/website.eot");
  src: url("/assets/fonts/icon/website.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/icon/website.ttf") format("truetype"), url("/assets/fonts/icon/website.svg#website") format("svg"), url("/assets/fonts/icon/website.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
[data-icon]:before {
  font-family: "website";
  content: attr(data-icon);
  font-style: normal;
  font-weight: normal;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  margin-right: 3px;
  vertical-align: bottom; }

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "website";
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block; }

.icon-center:before {
  margin-left: 0.3em;
  text-align: center; }

/* # Icons
### Google Plus

    <span class="icon icon-googleplus">Google Plus</span>
*/
.icon-googleplus:before {
  content: "a\00A0"; }

/* ### Facebook

    <span class="icon icon-facebook">Facebook</span>
*/
.icon-facebook:before {
  content: "g\00A0"; }

/* ### Twitter

    <span class="icon icon-twitter">Twitter</span>
*/
.icon-twitter:before {
  content: "c\00A0"; }

/* ### Search

    <span class="icon icon-search">Search</span>
*/
.icon-search:before {
  content: "e\00A0"; }

/* ### Map

    <span class="icon icon-map">Map</span>
*/
.icon-map:before {
  content: "f\00A0"; }

/* ### Arrow Down

    <span class="icon icon-toggle">Down</span>
*/
.icon-toggle:before {
  content: "h\00A0"; }

/* ### Arrow Up

    <div class="js-active"><span class="icon icon-toggle">Up</span></div>
*/
.js-active .icon-toggle:before {
  content: "i\00A0"; }

/* ### Instagram

    <span class="icon icon-instagram">Instagram</span>
*/
.icon-instagram:before {
  content: "k\00A0"; }

/* ### LinkedIn

    <span class="icon icon-linkedin">LinkedIn</span>
*/
.icon-linkedin:before {
  content: "l\00A0"; }

/* ### Share

    <span class="icon icon-share"></span>
*/
.icon-share:before {
  content: "m\00A0"; }

/* ### Burger

    <span class="icon icon-hamburger"></span>
*/
.icon-hamburger:before {
  content: "j\00A0"; }

/* ### Arrow Link

    <span class="icon icon-arrow_link"></span>
*/
.icon-arrow_link:before {
  content: "n\00A0";
  font-size: 120%;
  vertical-align: bottom; }

.fullscreen {
  position: absolute;
  right: 0;
  left: 0;
  top: 67px;
  bottom: 37px; }

.wf-footer {
  position: absolute;
  width: 100%;
  bottom: -96px; }

@media (max-width: 650px) {
  .fullscreen, .wf-footer {
    position: relative;
    top: auto;
    bottom: auto; } }
@media (max-height: 550px) {
  .fullscreen, .wf-footer {
    position: relative;
    bottom: auto;
    top: auto; } }
/*
	WEBSITE GENERIC BANNER HEADER
	PREFIX: bh
*/
/*
*	Store buttons
*/
.app-stores {
  margin: 20px 0; }
.app-stores a {
  margin-right: 10px; }
.app-stores img {
  width: 133px; }

.app-stores--mac img {
  width: 167px; }

/*
	Name: Apps Page
	Description: The product page showing the apps Shazam has.
	PREFIX: app
*/
#outern {
  background: #fff; }

.app-container {
  letter-spacing: 1px; }

/*
*	Main feature block
*/
.app-feature {
  background-color: #264E79;
  background-position: 50% 50%;
  background-repeat: repeat;
  background-image: url("/assets/images/website/apps/hero_header.jpg");
  color: #FFF;
  min-height: 310px;
  padding: 0 30px;
  overflow: hidden;
  text-align: center;
  background-size: cover; }
.app-feature .home-email {
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  position: relative;
  left: 50%;
  margin-top: 20px;
  display: inline-block;
  background-color: #009EDB;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  padding: 10px 10px 10px 44px;
  background-repeat: no-repeat;
  text-align: center;
  background-size: 24px;
  background-position: 4% center;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA4CAMAAACCJvW3AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAH7UExURQAAAP////////39/f////////////////////////////////////////39/f////////////////////////39/f////////3//f////////////////////////////////////////////////////////////////////////////////39/f////////////////////////////////////////////////////////////////////////////z8/P/////////////////////////////////////////////////////////////////////////////9//3//f////////////////////////////39//////////////////////////////////////////////////3//f////////39/f////////////////////////////////////////////////////////////r6+v////////////////////3//f/////////////////////////////////////////////7//////////////39/f////////////////////39/f3//f////////////////////////////////////////3//f////7+/vSux6kAAACndFJOUwDu7/v7A/3+/ASQjAEC/WH6XwUGXv6RePuThnpSmCVjFrVd8n6tj2LJhQerZfw2aXRH6KyLeebtQ5SCrpWx7OX4XKRV6ZyDZ94kwIhmf3d1fOebGMqWu4AaDLoPu1DyvziOduAcCRWm1SPI+M6y+sXwny+BM9tr9C7cHTBb1jg5wSH5ku8euWQ3bUyzqrDXE1TzWY3vbhDf2urcsladqGhUzd2eiTqbI2oJ9AAABAlJREFUWMOtlwV72zAQhm+tbdmb06ROk23d2m3timNmhrZjZmZmZmZm5u3yM3eSbMcQp0kaPc2TRNW9ue/0CQyTKu5UlKdNAixfAwVZeRoqoJctLd1lZZREZSktoWRCrB60jJ/FcP6f2nSf4lu6dvFHivbnpf2D0lpdqF6UZ+dISCaNYloyCX9/hTRSS6AyCsAoIiMa28EoLpAXRyuIv1WwCkZZkFwgouzE3Lw0/tKxtQtUsyCSqULXT9Q1OzbL0iQfK/HlPAC1ABSNedEo9Sk2TbIYti2SP9EPsRYK0EkjxovRXMyiNqFSsnT8At8QR/CPDLesBiO/TtOAwZuQ8VCKmQvzUHdZGg4H+D5CpMwUHDuZVyOPPhPGrESFicnXaPJbhEjJqsI4ZT3yvfN/7JtPJ1lhAi8tYkrBT2RKqAmwDAuez0CZLGLTxiidpG/zOHfcjHdgWVAdZPHf64tSp44Xr0EslgNFndd386qKkRNAxIVZfJ7HzJc6ScHDXIuAes7Zv1fJ68pjcrJ4/nu2I6uSpjmZDMEs2DtXWpHCblwCy4QoluMbXldNwwOXQfXqjKlw4ar0YUL40LBzzc3iOQ88IRdBAo81eHXSp5ZbjtW3DXTXRyQLYgbUH5GLgmx923TNQe/T7aXGcE09GDHojiV+v07CSGfrTWkOKmX9Id7BbYVpf77RLEp9v732WQJ7PeI91Le1UU4xXyY7vYbJw6KwIcKKzDbRaYB2gPW2FTJCYx0Vo3sWoY7KKNfcQwbDhnXOtwwTXl6QheWZR/OxKLCGWkJsKrTYz3Z0Sn0KDeVxBFvlwqJYlNVTkRXF1DyY6BDki6gTd+zCjIRNcWARLEJNs7PC+wD77slNShP+lGppzTIJc2qWm+WiqLMFVHJUG7rnDL1PBUiaMMCBrZWwqLU9ToRS3yBuK74IGrFfRuqrEFYnMyx1ZDYLWC4WRT4RWVGt4vI4IocebOUOpb/jd23XxrIy+3NYmKUSapgjsMY92Sww+yPORh5mr6YgLMxq96Gymyppjx/G81c8q4ZgKxxrvKYShlgRKLGTnmk65dt9CDZawqooM9W33/NzSG1yUHOCR7cKwfNXwOwJmE6Je1g6xX8WOyB9awifGqoa3PoJNsCROQUaPOcjw/hXx+3VhV11CLbcmYCFrzx5oTZL7Aq+GewetkzCEJ+x0D1H574yzAKvTAQbiixl700eln31GVRoVm7NWPbS5LkX6kWivLAAi8o+vHCBrvWmuhJ99VpSXFYiM5PXzH8v5FmVgLJhKS1wxxwF7YZafKNbzmJE5r1jzv4Bpbe3TMAkK4UfFqbTvUtqzenm2llEcDWyHj5d+XzPlJ60TPme+Vx/lfMZuZzP7jN7lam9mfkfBjvZf2xGgsQAAAAASUVORK5CYII=); }
.app-feature h1 {
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  padding: 40px 0 30px; }
.app-feature .app-feature-info {
  margin: 20px auto 70px;
  padding: 0 10px;
  overflow: hidden; }
.app-feature .app-mac-img {
  width: 52%; }

.app-new-container {
  position: relative; }
.app-new-container h2 {
  position: absolute;
  top: 2px; }
.app-new-container .app-new-label {
  color: #2C8CF6;
  background: white;
  display: inline-block;
  padding: 5px;
  font-size: 12px;
  display: inline-block;
  margin-right: 15px; }

/*
*	Product details - shared components
*/
.app-feature-info, .app-product {
  max-width: 965px; }

.app-product-details {
  display: inline-block;
  max-width: 41%;
  text-align: left;
  vertical-align: middle;
  width: auto; }

.app-feature-title {
  text-transform: uppercase;
  margin-bottom: 15px; }
.app-feature-title h2 {
  font-size: 18px;
  display: inline-block; }
.app-feature-title h3 {
  margin-top: 15px; }

.app-description {
  font-family: 'Lato light';
  font-size: 14px;
  line-height: 22px;
  text-align: left; }

.app-product h2 {
  color: #2C8CF6; }

.app-ios-android .app-product-details {
  margin-top: 70px; }

.app-windows .app-mobile-img, .app-ios-android .app-mobile-img {
  max-width: 43.6%; }
.app-windows .app-product-details, .app-ios-android .app-product-details {
  margin-left: 30px; }

.app-mac-img, .app-mobile-img {
  display: inline-block;
  margin: auto 20px;
  vertical-align: middle; }

/*
*	iOS / Android block
*/
.app-ios-android {
  margin: 0 auto;
  min-height: 344px;
  position: relative; }
.app-ios-android .app-mobile-img {
  bottom: 0;
  position: absolute;
  right: 0; }
.app-ios-android .app-i {
  text-transform: lowercase; }

/*
*	shazam.com block
*/
.app-shazam-com-container {
  background-image: url("/assets/images/website/apps/shazam_for_web.jpg");
  background-size: auto 344px;
  background-repeat: no-repeat;
  background-color: #F6F6F6;
  background-position: 26% 0; }

.app-shazam-com {
  margin: 0 auto;
  min-height: 344px; }
.app-shazam-com .app-product-details {
  float: right;
  margin-top: 100px; }

@media screen and (min-width: 1270px) and (max-width: 1480px) {
  .app-shazam-com-container {
    background-position: 16% 0; } }
@media screen and (min-width: 1080px) and (max-width: 1270px) {
  .app-shazam-com-container {
    background-position: 0; } }
@media screen and (min-width: 764px) and (max-width: 1080px) {
  .app-shazam-com-container {
    background-position: -150px 0; } }
/*
*	Windows block
*/
.app-windows {
  margin: 20px auto; }

/*
*	Mobile specific styling
*/
@media screen and (max-width: 764px) {
  .app-container .app-product-details {
    max-width: none;
    margin: 0; }

  .app-feature {
    padding: 10px;
    margin-bottom: 30px; }
  .app-feature .app-feature-info {
    margin-bottom: 0; }
  .app-feature .app-product-details {
    margin: 20px 0; }
  .app-feature .app-mac-img {
    width: 80%;
    float: none; }
  .app-feature h1 {
    font-size: 20px;
    line-height: 26px;
    padding: 30px 0; }
  .app-feature .app-feature-info, .app-feature .app-product {
    width: auto; }
  .app-feature .app-new-label {
    display: none; }
  .app-feature h2 {
    position: relative; }
  .app-feature .app-feature-info {
    margin: 0;
    padding: 0; }

  .app-description, .app-feature-title {
    text-align: center; }

  .app-stores {
    text-align: center; }

  .app-product {
    min-height: 100%;
    overflow: hidden;
    margin: 10px 10px 45px;
    text-align: center; }
  .app-product .app-mobile-img {
    width: 100%;
    max-width: 80%; }

  .app-ios-android .app-mobile-img {
    position: relative; }

  .app-shazam-com-container {
    background-image: none;
    background-color: inherit; }

  .app-description {
    line-height: 20px;
    text-align: center; } }

/*# sourceMappingURL=apps.css.map */