tabbit

Tue Aug 07 2018
Copied to clipboard! Copy reply
<template>
  <div class="root">

    <!-- TopNavBar Component  -->
    <TopNav />

    <!-- Only show masthead-offer if we have a message to show -->
    <section class="masthead-offer" v-if="mastheadOfferMessage">
      {{ mastheadOfferMessage }}
    </section>
    
    <!-- Masthead Component-->
    <div class="masthead desktop"
    v-if="!this.isMobile"
    :style="{'background-image': `url(/lp/static/data/us/masthead/desktop/${this.modelName}.jpg)`}">
    </div>
    <div class="masthead mobile"
      v-else
      :style="{'background-image': `url(/lp/static/data/us/masthead/mobile/${this.modelName}.jpg)`}">
    </div>

    <!-- Holds lang select for desktop and mobile. and Desktop's languages list. -->
    <section class="languages-wrap">
      <div class="content">
        <div>I want to learn</div>
        <div>
          <SelectLanguage v-bind={onLangChange} :selectedLang='selectedLang' />
        </div>
      </div>
    </section>
    
    
    <section class="products-container">
      <div class="content">             
        <div class="products">
          <!-- Loop through our products | ProductBox Component -->
          <ProductBox  v-for="(product, key) in products"
            :msrp='product.msrp'
            :price='product.price'
            :level='product.lvl'
            :name='product.rsi'
            :cartlink='product.cart'
            :key=key 
          />
        </div>
        <!--  Guarantee Component -->
        <div class="guarantee-wrapper">
          <Guarantee />
        </div>
      </div>
    </section>
    


    <section class="highlights content">
      <h3>Get the proven program and start speaking</h3>
      <div>
        <div class="bullets">
          <div>
            <p>
              The flexibility to learn a new language <b>on your schedule, with any device, from anywhere in the world</b>. You'll get full access to all of our latest features and can <b>start learning immediately</b> - no lengthy downloads or installations required.
            </p>
            <ul>
              <li>
                <b>Immediate access to all levels</b> of the world's best language learning program
              </li>
              <li>
                <b>Access on any device</b>, including our award winning mobile app
              </li>
              <li>
                <b>The most advanced speech technology</b>
                with our only product that updates as new features are released
              </li>
              <li>
                <b>Download lessons</b> to your mobile device to continue learning offline
              </li>
            </ul>
          </div>
        </div>
        <div class="product-img" data-bg='/lp/static/img/online-lockup.png'></div>
      </div>
    </section>


    <section class="trusted">
      <div class="content">
        <h3>Trusted for <b>25 years</b> by top companies and agencies</h3>
        <div class="logos">
          <img alt="NASA" data-src="/lp/static/img/nasa-logo.svg">
          <img alt="calvinklein" data-src="/lp/static/img/calvinklein-logo.png">
          <img alt="fender" data-src="/lp/static/img/fender-logo.png">
          <img alt="tripadvisor" data-src="/lp/static/img/tripadvisor-logo.png">
          <img alt="tommyhilfiger" data-src="/lp/static/img/tommy-logo.png">
        </div>
      </div>
    </section>

 
    <section class="macworld">
      <div class="content"  data-bg='/lp/static/img/macworld-review.svg'>
        <h3>Macworld</h3>
        <p>
          "With its excellent user interface, clear instructions, wide variety of games and challenges...
          <br>
          <b>Rosetta Stone has got it going on</b>
        </p>
      </div>
    </section>

 

    <section class="footer">
      <div class="content">
        <div class="socialicons">
          <a target="_blank" class="facebook" href="http://www.facebook.com/RosettaStone" rel='noopener'>
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAwJJREFUSA3FV01oE0EUfjNJf4x/obVBY7WKXiwVEUGkaFL0ph4Kak3EowgSKoqCBwVXqTd/oBrFiwcRUq3FFqnebKkiIhbBVsSDYCMkkqgVo8Yi2fG9TXeXLFlnoel2Dtk37++bN/PmzQsDR0PhW/c1tHIO7YyxTQJEkAEEyVQApBiwlBBiVFWh/1lv9jmAosrcor39WNWm1DYtazgqgJ1AxYC9pinBhWQYiEsT6Wz3x2HljykppWyBt3Vc3cM4v4IRrig1cTbDHfgkVPX403udfeUsPGWYLBSNd3HOryHo4jJyRyyyxYV3rGzZVZ0cHxyyGlkjZqFIPIFG+62KM5lj9HdHemJR9IEnURwlEVOkCHpEF1bqiz5bMPIqjPyJ7tOImM6Uezz3dYHsu25NAA5Ht8DqxjrwL5qnqScevoabiRe2pmqhsFc/c05alL2USLYWFkGd3wfdZ9thY/NyA9SiUnZKGIRFQg2Yrgxuh+Ps3dG6Fqq8JadUFsjKJAzCIr4XLzufvqdWPdt5oH6BIcv9nIJjXQPw/Uce8lN/Db4dQViIedFLFclpcdCd+WqrdRKS6Un4kPxqzGUEYRGml8qgTFmXUxJ5OIOaGtyo6eFBB/V45jQo4t95edRa6Q1Hrg8BgzbNUvJz5/IBaFxqX1Nu9b6E2w9GJV5QLGAYz1doxV6uLdfIfvslV9JwRRA3rvjKOLKQKH2ZdAZMmCwcieeAMTNNJc5JfPJQGHZvb9Y0x96nofNcvwMrUwXrZg63GlImyyVKiDRuNXMdmDA5dQ4uxWnAYEK/4tSuGByXCLUAA5x6JDznjEuY9CBnCBMfCUWlHskt4CKWomqvEzVm1CPNNjhhEBbhaMDUDVJjNuvAiKF3nlhEzKG1PsBOm5zKUZjJF0YSsTO6xxJgZM5Ns0ermRh/1Ne0fqcXL3lIX91MvlqkPbEY+sCENoc1YkMyFw29Bp58+/gdW7L5hn+hL4ftygZc4XxjVf8h6J7ilTmf/Jw9+Gbw1Jidqm3EpQaV/9P2D47UF0R/C/JaAAAAAElFTkSuQmCC" alt="facebook">
          </a>
          <a target="_blank" class="twitter" href="http://twitter.com/rosettastone" rel='noopener'>
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAeCAYAAADU8sWcAAAAAXNSR0IArs4c6QAABEVJREFUSA3FV1toVEcY/mZ2swmJWxOTtGTVYNWNhGAjVGsL0hpKQRSCtcYHjT70ArFKKaUtLRSaFnxoKaUvMUtaQSzNUx9Kq+IFq5ZCKFFEvG4spRr3pkbNavaSzZ7pPznOnnN2Z7MxKh04zMx/++b/zz//zDBMtwUu+mG414OxNkDMBYMPAl6ARWkchhBDZOo33E8ewketY9Mxy0oK7b7cDsa/JNDWkrKmQIoW0o8M+xzv+a9PpVMcvGeoGS70kWerpjJQlCeQpAh9i1ioG91tEzo5PfjuoXUUyn7y9imd0kPRBH5HcrwDH7TcztcrBA9ceYv+ZR+B83zhGc8F/kY6tQrvL43ZbTjBey+tBlxHyWO3XegxjQcwjjbKg7SyZ3nXc24+Af/8hIAl3ktwGz0KWPYWOK/YRcC1duZjH3P+JnqCK5RdEzwQlNtoiyKqvtrD4XL+GMXK9TUk0/dyPUKdCxDbtgD9rz6DhkoXnvW6sbNlNqWOo1Em8a8VxeQFgj9SEDoVUfWfLqvBsjoPthyLYUIoqtUTLgY3zMdzteUWkUZjGQPltOq3T97A/qtjGEkbDj6yxgvYsWSQo/u4G4Kvc3LNWVN1GTYt8uLgWh8aZxXmYKffWwAsNavKOO7RArY1eZExNKvmfL2U46jzvUKxqZGT/PZPPDNJem1eJc53NKL7+TmORSyvr8hXyc3j4wY2HokintGAQ0yCM/QOfUyJ9lVOyzaQ/06GdW6V5bUhBE7fTOPCnXG01Hiw4mn9Ag4Pj2HNwYjNWt4wcbNSWvXlkXNTGbazI2kHOGdsErAYqFKOJbNqqO8r6hooZViDnguMpAysbawqxp6SfuZWrpbo5YTwWftcI7I3GMdAlM6HGbRDw4mSWgQuiv4Yub3aD0fw/aVRZLK6xNHbPx5K4PJdM1n1EkRlLCw9DxcVIIaHM8gtVVaq2jwwIighvzhdcIAVQtwISXDjVCHHooQTWWw6GsXddIkEeqDy3blRnIykLAO6kRAX6YxPccQif9ARekcno2j7ryWwsP8qAhdGFUnb//rvfXzy1y0tz0lkv8g5VTi6ZTDjgJNpnjhUqNBMVa5j4Sz8RDW7i2q1rslQ99LC3qCiQrWldDOMSXBVPb4h7zfbLxBuAt682IsPW6vRMsdZu5V1WXBOhJP4bPA2BmIlQq2USEXWdTm1Dp3eK/totlXJqF4KLK8vxxKKQNNsD2orXIgkJnDt3gSOXE8gWqqYKENmL+hQWVkILi8TvPzMEz3TBX7Adv87aj1yq5ltx9JhILuRrr3am6YSe4R+ABnstOtb4JK6vfkEed5F/386aWO3M/VYXiBTqdft9zep4ASXlC7/HvK+nb64nD56E8fo6rwy/+Yq7RaCS+q7TQfI9xep9P4ppzNq8tEgxC5EQ2t0d3Zp08r2Ygj/y3MpfzH2hyLDPIpKA+WG+VA0D6cgqTzUQ/E/7PxfPq3+Mb0AAAAASUVORK5CYII=" alt="twitter">
          </a>
          <a target="_blank" class="youtube" href="http://www.youtube.com/user/rosettastone" rel='noopener'>
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAeCAYAAADU8sWcAAAAAXNSR0IArs4c6QAAA5NJREFUSA3FV11IU2EYfnY2nT/pRmrghKwFCv2QGeIMA6+0NFdIRd12V5fqXdBF0aXdedWFd12U5DLQNCgIw1hkQkHoTc3cBGflDzXX5tbzLc845+yc41JHL3zne7/37/l+3u/nWJAlPQP20vScBWhncZN3JYEK1t/ZXiAfID/+GxjuBILktyT6mdMIcNgK3KVVJ43JbknsB16x3GwFXptZG4I/BPY4gHt0vpYlaAYOe+FjuXGGM5OhpEAXfBQ4wCEOU39Mz+kfZUF24Hwb8E7rlwE+Bhyl8CUNy7XGO2hHNjvwXBlDBf6UgPmAn8KDSqNd4pc3AM9ZYEaOJ8kMa4sdeJQjYAHjFEvJmS2WMdPgXOcrFLbIihzVNRxctxybPMDMzncCn8i6ZYWoLXl5KO/oQFFNDWwOB2ylpbAWF8NitcJis6XqZDyOZCyGhCiRCOJra9hgiS4sYGl0FLFwWBkSXPs1Tv+hdiBsE5pS4CIrFTAsFhz3+VDRTrNt0nooBH9jI6Lz8+kIHG0Jp/s6BbdZA/xcSGs3mX1dXTsCFmEKXC5Ud6dnOQ0h40k8weycCp4Daipr4840oNWpKSxPThpo1WKHx6MW/G2d4M7aLxFYJEGJ1sJeWakVpdvRYBBvm5sx29uLjfX1tFyPySvXPy64s05KnAKXnpPNyRQ0o0QCgb4+vKmrM50FkaQG5JK493SHKNnZtyzo18yM6SyYxHGlEi4LjO2bJLmwBiS2WkhPl9hiLWWfotpaHBkYgLOpSRapapM4ISlmcN3FV1ZUQTIazJbqnh54pqcNgYWPSZyQjZk+K04dbcZHeUAYkb2qCg0TE6agsq846fQoyitW4vkVJTBfSWr6NjamFihapfX1WQELl6URniSZ9J5PrblUwiX44tDqF4eGENZ31Joatlf8fnzt78/Qy3gctPnFUuH1otDthlRQAGthISRRZJ7bMclsTl0uvGBEcolLJb66ikgggMXBwZRMiS6WWL5YUuBCySv1Kvf8A6VhjvhbrcAdETsNLvhx4AXrFpZckUju+jbgpwBQHjJJZuAlKj/nCFk8o7wysBYczMAlCr0sot5NEg/Iy8r3mwiuHHkKjD37yB42sPEhJdj5RzydTzOu6uUqwmaACyF7+GUZOEWn+yzsy/aIvj5uqwYCZ7zZRURlwuki/JffJW1PHgNlRUAHe6v6UWT7B21DHOUca/Gj+IS5k9WP4h/gIAxZgTXNiAAAAABJRU5ErkJggg==" alt="youtube">
          </a>
        </div>

        <p>
          Offer limited to purchases made directly from Rosetta Stone and cannot be combined with any other offer. Offer valid <span id="expirationdate">{{ this.expirationdate }}</span>. Online services must be activated within 6 months of purchase or are subject to forfeiture.
        </p>
        <p>
          If you elect to pay via an available Easy Payment plan option, the full payment price will be charged in the applicable number of installments. The first payment (plus any applicable shipping and tax on the total purchase price), will be charged to the payment account you selected on the Order Page on the Purchase Date. Thereafter, your account will be charged each month for the remaining number of payments of the plan you selected, with 0% APR and no interest charged from Rosetta Stone.
        </p>
        <p>
          * Installment Payment Plan options are made available on select product purchases only and require a valid billing address. Additional restrictions may apply.
        </p>
        <p>
          † 3 months online access included with purchase for one user for CD-ROM and Download products.
        </p>
        <p>
          The thirty-day (30-day) money back guarantee is limited to software purchases made directly from Rosetta Stone, and does not apply to any supplemental purchases, including additional online access, subscription renewals, and headsets. <a href="//rosettastone.com/global/return" target="_blank"  rel='noopener'>See Full Details</a>
        </p>

        <p>©&nbsp;1999 - 2018 Rosetta Stone Ltd. All Rights Reserved.&nbsp;</p>

        <p><a href="//rosettastone.com/terms" target="_blank" rel='noopener'>Terms and Conditions</a></p>
        <p><a href="//rosettastone.com/agreements" target="_blank" rel='noopener'>>Agreements</a></p>
        <p><a href="//rosettastone.com/privacy" target="_blank" rel='noopener'>>Privacy Policy</a>.</p>
      </div>
    </section>
  </div>
</template>


<script>

// Import our Components
import TopNav from '~/components/TopNav.vue'
import SelectLanguage from '~/components/SelectLanguage.vue'
import ProductBox from '~/components/ProductBox.vue'
import Guarantee from '~/components/Guarantee.vue'
import fetch from 'isomorphic-unfetch'


export default {

  /* Components this page uses. They are imported above */
  components: { 
    TopNav,
    SelectLanguage,
    ProductBox,
    Guarantee
  },  


  /*
   * Sets head information for this page.
   * Metadata, scripts, css, title, etc, can
   * all be set and fetched here
   */
  
  head ()
  {    
    return {
      title: 'Rosetta Stone - Learn a New Language',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: 'Rosetta Stone' },        
      ],
      link: [        
        { rel: 'prefetch', href: `/lp/static/data/us/masthead/desktop/${this.modelName}.jpg`},
        { rel: 'prefetch', href: `/lp/static/data/us/masthead/mobile/${this.modelName}.jpg`},
        {
          rel: 'prefetch', href:'//assets.adobedtm.com/289d54d757557d351111069aa8acc743e67b15e6/satelliteLib-7aef1085f7c59294e8610e2f691a22c48a200841.js',
          as: 'script'
        }
      ],
      script: [
        { src: `/lp/static/data/us/models/js/${this.modelName}.js`, body: true },
        { src: '/lp/static/js/jquery.slim.js', body: true},
        { 
          src: '//assets.adobedtm.com/289d54d757557d351111069aa8acc743e67b15e6/satelliteLib-7aef1085f7c59294e8610e2f691a22c48a200841.js',
          body: true
        },
        { src: '/lp/static/js/clock.js', body: true },
        { src: '/lp/static/js/crescendo.js', body: true }       
      ]
    }

  },


  /*
   * This function is called on the server. (ie, when Nuxt Generate is ran)
   * The purpose of this function here is to do two things:
   * 1. Insert the <script> tag in header with the right model as the src
   *    We set the state's `modelName`, which is passed via `route.params.page`
   *    and so then in the `head()` method above, we insert the script to
   *    the right src file (ie, <script src="rs.com/path/to/sitewide.js")
   * 
   * 2. Generate products in the back end, so initial load shows products.
   *    This will generate the initial list of products on the server so when
   *    the browser first loads the page, products are already shown.
   *    This prevents FOUC. To do this we fetch a the JSON data for this
   *    model (provided via route.params.page) and crease an RSI model out of,
   *    and we can then generate a list of products.   
   * 
   * The only reason we have the RSI() function here is so we can
   * generate products on the server side, and client will be rendered
   * with the products (no flicker / delayed view). It fills the 
   * `productList` state data
   * 
   * The parms here are passed by the `generate.route()` function
   * in nuxt.config.js. The docs on Nuxt Generate will clear any questions.
   * 
   */     

    async asyncData ({ payload, route })
    {
      
      let modelURI = `https://www.rosettastone.com/lp/static/data/us/models/js/${route.params.page}.js`
      let js = await fetch(modelURI)
      js = await js.text()
      
      let RSI = eval('(' + js + ')')   
      /*
      // eval() won't work because RSI function has props to it.
      // So we split the string in two - Function, and props.
      // function ends on ..}RSI.name, so we use regex there
      let fn = js.match(/^.+(?=RSI\.name)/)[0]      
      let RSI = eval('(' + fn + ')')           
  
      // So now the RSI function is in scope.
      // Parse the props. For unknown reasons, RSI.name is readonly
      Object.defineProperty(RSI, 'name', {
        writable: true,
        value: ''
      })           
      
      var props = js.match(/RSI\.name.+$/)[0]
      eval(props)   
      */
      
      // Prefill some of client's state data here
      return {
        modelName: route.params.n,
        productList: RSI({cat: 'esp', media: 'subscription'}),
        expirationdate: RSI.expirationdate
      }  
    },
  

  
  
    
  /*
   * Page state data.
   * These get set in the "server" when `nuxt generate` is ran,
   * and for this reason, we cannot use window.RSI here to fill these,
   * so we set them to null, and then the client will give them values
   * in the `beforeMount` method, since that is ran on the client
   * and we will have fetched our RSI model js file in the `head`.
   * NOTE: these values can be set on beforeMount directly,
   * there's no need to set values here to null and have beforeMount
   * overwrite them.
   * The only values we need here are variables we use in 
   * `computed()`
   */
  data()
  {    
    return {
      
      // Holds name RSI.rsi value (sitewide, sale, etc). Set on the server with $route
      modelName: null,

      // Our current 3-letter selected lang code (esp, ita, etc)
      // Set via click, dropdown change, url param, etc
      selectedLang: this.$route.query.lang || 'esp',

      // Full name of the selectedLang (French, Italian, etc)
      languageName: null,      

      // List of products to show. Each time a language is changed, this
      // gets populated and the product view gets updated (new cart urls, etc)
      productList: [],

      // Products we don't want to show
      // TODO is is possible to change this via console, from window? so if onemonth=true is in url,
      // we change the state from outside app
      filter: [ '1', '8', '18', '3F3', '6F6' ],

      // If there's a special offer message, this will hold it.
      mastheadOfferMessage: null,

      // Holds RSI.expirationdate
      expirationdate: null,

      // Needed for the sole purpose of hiding/showing masthead components.
      isMobile: null,

      
    }
  },
  

  /* 
   * Called on client side.
   * We use this to fill State data above
   * before mount, since the /lp/globals/models/<model>.js
   * has been loaded into the browser's window object.
   * This essentially is our state data.
   */

  beforeMount()
  {
    this.productList = RSI({cat: this.selectedLang, media: 'subscription'})      
    this.languageName = RSI({cat: this.selectedLang})[0].language    
    this.isMobile = window.innerWidth <= 540 ? true : false
    //this.expirationdate = RSI.expirationdate
    
    if (this.$route.query.onemonth )
    {
      this.filter = this.filter.map(e => e+'' == '1' ? `3` : e)    
    }    

    // This exposes state data to window. Maybe needed when using TnT, etc
    window.data = this


    // Lazy load images
    let imgs = document.querySelectorAll('[data-src], [data-bg]')

    
    let observer = new IntersectionObserver(loadImg, {
      // Start downloading when img is within 50px of Y axis
      rootMargin: '50px 0px',
      threshold: 0.01
    });

    // Start observing the images
    imgs.forEach(img => observer.observe(img))     

    function loadImg (entries, observer)
    {
      entries.forEach(e => {

        // If in viewport
        let el = e.target
        if (e.intersectionRatio > 0)
        {
          let bg = el.dataset.bg || null
          let src = el.dataset.src || null
          
          if (bg)
          {
            el.style.backgroundImage = `url('${bg}')`
          }
          if (src)
          {
            el.src = src
          }     
          // Stop observing
          observer.unobserve(e.target);
        }
      })
    }

    
    // If RSI has custom js or css, insert them
    if (RSI.js)
    {
      let script = document.createElement('script')
      script.src = `/lp/static/data/us/custom-js/${this.modelName}.js`
      document.body.appendChild(script)
    }
    if (RSI.css)
    {
      let css = document.createElement('link')
      css.rel = 'stylesheet'
      css.type = 'text/css'
      css.href = `/lp/static/data/us/custom-css/${this.modelName}.css`      
      document.body.appendChild(css)
    }    
  },
   
  

  /* 
    Any method called by the template view (ie, event handling)
    goes in here. ie, <button @click="a_method_here">click me</button>
    */
  methods: {    

    // Usually called from inside a select-language component
    onLangChange(langCode)
    {
      this.selectedLang = langCode
      this.languageName  = RSI({cat: langCode})[0].language       
      this.productList = RSI({cat: langCode, media: 'subscription'})
    },

},

  computed: {

    /*
     * Everytime state's productList gets updated with a new value,
     * this computed property will automatically be updated too.
     * We have this computed property so we don't have to 
     * filter/map/sort theproductsList each time we update it.
     * Use this in the template view instead of productList
     */
    products ()
    {
      return this.productList
      .filter(p => this.filter.indexOf(p.lvl) == -1 )   
      .map(p => { p.rsi = p.lvl; return p })
      .sort( (a, b) => parseInt(a.lvl) < parseInt(b.lvl) ? -1 : 1)
    }    
  },

}

</script>

<style lang='stylus'>
  @require '~assets/css/variables'

  body
    margin 0
    padding 0
    font-family gothambook, arial
    //font-family gothamlight
    
  .content
    max-width 1150px
    margin 0 auto
    padding 0 1em      


  .masthead-offer
    background $yellow  
    text-align center
    padding  1.3em 0
    font-size 1.3em
  
  .masthead
    background-color #333
    background-size 100% 100%
    padding 27% 0 0 0
    line-height 1
    box-shadow 0 4px 10px -6px inset
    box-sizing border-box
    &.desktop          
      @media $small
        display none
  
    &.mobile
      display none 
      @media $small
        display block        
        padding 36% 0% 1% 0%

  .languages-wrap
    background #f1f1f1
    padding-top 3em
    .content
      display flex
      flex-direction row
      justify-content center
      & > div:first-of-type
        align-self center
        font-size 1.8em
        padding-right 1em
    @media $small
      padding-top 2em
      .content
        flex-direction column
        & > div:first-of-type
          font-size 1.2em
          font-weight 100
          padding 0 0 20px 0
  
  .products-container
    padding 3em 0
    background #f1f1f1
    p:first-of-type
      margin 4em 0 

  .products
    display flex
    flex-wrap wrap
    justify-content space-between  
    @media $medium
      justify-content space-around
    @media $small
      // Reverse product order in mobile
      list = 1..15
      for n in list    
        .product:nth-child({n})        
          order list[-(n)]


  
  .highlights
    padding 3em
    h3
      margin 0 0 2 0
      font-size 180%
    & > div
      display flex

    .bullets 
      flex-basis 50%
      p
        margin-bottom 3em
        line-height 26px
      ul
        padding 0
        margin 0
        list-style none
      li
        margin-bottom 1em
        background url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjNweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMjMgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUwLjIgKDU1MDQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5jaGVjazM1PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkxwLWxheW91dC12YWx1ZS1wcm9wLXByb21vIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYuMDAwMDAwLCAtNDI3LjAwMDAwMCkiIGZpbGw9IiMzRjkzRDMiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxnIGlkPSJjaGVjazM1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4wMDAwMDAsIDQyNy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMi43MjMxMjY2LDIuNDg2ODk2NTUgTDguNTc2Mzc5NzUsMTUuODkxMzEwMyBDOC40NTE3NzIxNSwxNi4wMDkzNzkzIDguMjUwMDEyNjYsMTYuMDA5Mzc5MyA4LjEyNTY5NjIsMTUuODkxMzEwMyBMMC4wOTMxNjQ1NTcsOC4yOCBDLTAuMDMxMTUxODk4Nyw4LjE2MjQ4Mjc2IC0wLjAzMTE1MTg5ODcsNy45NzEzMTAzNCAwLjA5MzE2NDU1Nyw3Ljg1MzI0MTM4IEwyLjA0NDk2MjAzLDYuMDAzODYyMDcgQzIuMTY5NTY5NjIsNS44ODYwNjg5NyAyLjM3MTMyOTExLDUuODg2MDY4OTcgMi40OTU2NDU1Nyw2LjAwMzg2MjA3IEw4LjM1MTMyOTExLDExLjU1MiBMMjAuMzIwOTM2NywwLjIxMDQ4Mjc1OSBDMjAuNDQ1ODM1NCwwLjA5MjY4OTY1NTIgMjAuNjQ3MDEyNywwLjA5MjY4OTY1NTIgMjAuNzcxNjIwMywwLjIxMDQ4Mjc1OSBMMjIuNzIzMTI2NiwyLjA1OTg2MjA3IEMyMi44NDc3MzQyLDIuMTc3NjU1MTcgMjIuODQ3NzM0MiwyLjM2ODU1MTcyIDIyLjcyMzEyNjYsMi40ODY4OTY1NSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') no-repeat 0 12px
        padding 10px 0 0 30px
        
    .product-img
      flex-basis 50%
      background-repeat no-repeat
      background-size contain
      margin-left 5em
    @media $medium
      & > div
        flex-direction column
      .bullets
        order 1
      .product-img
        order 0
        height 290px
        
        margin 2em 0
        background-position center

  .trusted
    background #f1f1f1
    padding 5em 0
    box-sizing border-box
    box-shadow 0 2px 3px rgba(0,0,0,.3)
    & > div
      text-align center
    h3
      font-size 1.6em
      font-weight lighter
      margin-bottom 2em
    .logos
      display flex
      align-items center
      justify-content space-between
      img:nth-of-type(1)
        height 95px
      img:nth-of-type(2)
        height 30px
        width 20%
      img:nth-of-type(3)
        height 35px
      img:nth-of-type(4)
        width 12%
      img:nth-of-type(5)
        width 12%
  
  .reviews
    overflow hidden
    margin 4em 0


  .macworld
    margin 0
    background #269acd
    color #fff
    text-align center
    padding 1em
    .content
      line-height 25px
      background-repeat no-repeat
      background-position center
      background-size contain            
    h3
      color #fff
      margin-bottom 10px
      font-size 160%
      margin 0
      font-weight 100
    p
      margin-bottom 0
  
  
  
  .footer    
    background $lightblack
    color #fff
    font-size 80%
    padding 4em 0
    line-height 20px
    .socialicons
      text-align center
      margin-bottom 2em
      a
        display inline-block
        margin-right 20px
    a
      color $yellow

</style>