tabbit

Wed Apr 24 2019
Copied to clipboard! Copy reply
<template>
  <div>

    <Nav />    
    
    <section class="masthead-wrap">
      <div class="content">
        <div class="masthead">
          <h1>Be fearless.</h1>
          <h3>Speak one of 24 languages with confidence.</h3>
          <a href="#" class="cta desktop">START 3-DAY FREE TRIAL</a>        
          <a href="#" class="cta mobile">DOWNLOAD THE APP</a>
          <a href="#" class="tvad">Watch our latest TV ad</a>
        </div>
      </div>      
    </section>

    <div class="content-wrap">

      <!-- App Reviews -->
      <section class="one">
        <div class="content">
          <h2>App Store ratings and reviews.</h2>
          <div class="score-wrap" v-if='appReviews != null'>            
            <div class="score">
              <div>
                <div>{{ appReviews.customerRatings }}</div>
                <div>
                  <div>out of 5</div>
                  <div>{{ appReviews.totalRatings }}</div>
                </div>
              </div>
              <p>Check it out in the <a href="">App Store.</a></p>                   
            </div>                              
            <div class="score-graph">
              <ul>
                <li v-for="(obj, k) in appReviews.graphBars" :key=k>                  
                  <div class="stars">
                    <div class="star" v-for="n in obj.stars" :key=n></div>
                  </div>
                  <div class="graph">
                    <div class="bg">
                      <div class="fill" :style="{width: obj.percentage + '%'}" ></div>
                    </div>
                  </div>                 
                </li>
              </ul>
            </div>
          </div>       
        </div> 
      </section>


      <!--  Trusted Brands, mobile -->
      <section class="two">
        <div class="content">
          <h3>Trusted for 27 years by top organizations</h3>
          <div class="flex-1">
            <div class="logo"></div>
            <div class="logo"></div>
            <div class="logo"></div>
            <div class="logo"></div>
          </div>
        </div>
      </section>

      <!-- Sound Amazing -->
      <section class="three">        
        <div class="content">
          <!-- This div holds "Sounds Amazing" and Iphone img -->
          <div>
            <div class="left">
              <h2>Sound Amazing.</h2>
              <p>
                Start fine-tuning your pronunciation from the very first lesson with our patented 
                TruAccent speech-recognition engine. That way, you’ll be confident that you know what 
                to say and how to say it.
              </p>
            </div>
            <div class="right">
              <div class="blob"></div>
              <img src="/img/iphonewhite.gif" alt="iPhone">              
            </div>
          </div>          
        </div>
      </section>

       <!-- Words, circle images carousel -->
        <section class="four">
          <div class="content">
            <div class="left">
              <h2>Thrive in <i></i> real-world conversations.</h2>
              <p>
                The best way to learn a language is to surround yourself with it, 
                so our Dynamic Immersion® method does just that.
              </p>
            </div>              
            <div class="right">
              <div class="">Azul</div>
              <div class="left-arrow"></div>
              <div class="images">
                <div class="">1</div>
                <div>2</div>
              </div>
              <div class="right-arrow"></div>
            </div>
          </div>
        </section>


    
    


      <!-- Get out there -->
      <div class="section-wrap five">
        <section class="four no-padding">         
            <h2>Get out there.</h2>            
            <div class="text">              
              <div class="content">
                Rosetta Stone is different because it works. If you’re tired of 
              playing games and ready for real experiences, come learn with us. 
              </div>
            </div>
        </section>
      </div>


      <!--  Carroussel -->
      <section class="six">
        <div class="content">
          <h2>Online or off, our award-winning app <i></i> speaks for itself.</h2>
          </div>
          <div class="carousel-wrap">
            <!-- <div class="left-arrow"> </div> -->
            <div class="carousel-cards">
              <div class="card">
                <div class="card-content">
                  1
                </div>
              </div>
              <div class="card">
                <div class="card-content">
                  2
                </div>
              </div>
              <div class="card">
                <div class="card-content">
                  3
                </div>
              </div>
               <div class="card">
                <div class="card-content">
                  1
                </div>
              </div>
              <div class="card">
                <div class="card-content">
                  2
                </div>
              </div>
              <div class="card">
                <div class="card-content">
                  3
                </div>
              </div>
              <div class="card">
                <div class="card-content">
                  3
                </div>
              </div>              
            </div>
            <!-- <div class="right-arrow"></div> -->
          </div> <!-- /carousel wrap -->
        
      </section>


      <!-- Company quotes -->
      <section class="seven">
        <div class="content">
          <div class="quote quote-1">
            <p>
              “I love <i></i> Rosetta Stone's software, and I think the <i></i> approach to learning languages works.”
            </p>
            <div class="logo macworld"></div>
          </div>
          <div class="quote quote-2">
            <p>
              “With its excellent user interface, clear instructions, wide variety of games and challenges...
              Rosetta Stone has got it going on.”
            </p>
            <div class="logo techcrunch"></div>
          </div>
          <div class="quote quote-3">
            <p>
              "Rosetta Stone is the gold standard when it comes to learning a new language"
            </p>
            <div class="logo mashable"></div>            
          </div>
        </div>
      </section>


      <!-- CTA -->
      <section class="eight">
        <div class="content">
          <h2>What are you waiting for?</h2>
          <a href="#" class="cta desktop">START 3-DAY FREE TRIAL</a>
          <a href="#" class="cta mobile">DOWNLOAD THE APP</a>
        </div>
      </section>

      <!-- Social Icons -->
      <section class="nine">
        <div class="content">
          <h4>CONNECT WITH US</h4>
          <div class="sociallinks">
            <a href="https://www.facebook.com/RosettaStone" target="_blank" class="facebook"></a>
            <a href="https://www.instagram.com/rosettastone" target="_blank" class="instagram"></a>
            <a href="https://www.youtube.com/user/rosettastone" target="_blank" class="youtube"></a>
            <a href="https://www.facebook.com/RosettaStone" target="_blank" class="twitter"></a>
            <a href="" target="_blank" class="linkedin"></a>
          </div>
        </div>
      </section>


      <!-- Accordion footer -->
      <section class="ten">
        <div class="footer">
         <ul>
          <li>
            <input type="checkbox" checked>
            <i></i>
            <h5>Buy now</h5>
            <p>
              <a href="/buy-spanish">Spanish</a>
              <a href="/buy-french">French</a>
              <a href="/buy-italian">Italian</a>
              <a href="/buy-german">German</a>
              <a href="/buy-english">English</a>
              <a href="//espanol.rosettastone.com/aprende-ingles">Inglés</a>
              <a href="/buynow">See All Languages</a>
            </p>
          </li>
          <li>
            <input type="checkbox" checked>
            <i></i>
            <h5>Learn more</h5>
            <p>
              <a href="/learn-spanish">Spanish</a>
              <a href="/learn-french">French</a>
              <a href="/learn-italian">Italian</a>
              <a href="/learn-german">German</a>
              <a href="/learn-english">English</a>
              <a href="/learn-japanese">Japanese</a>
              <a href="/learn-chinese">Chinese</a>
              <a href="//espanol.rosettastone.com/aprende-ingles">Aprende Inglés</a>
              <a href="/learn-language"></a>         
            </p>
          </li>
          <li>
            <input type="checkbox" checked>
            <i></i>
            <h5>Where to start</h5>
            <p>
              <a href="/freetrial">Try it Free</a>
              <a href="/mobile-apps">Mobile Apps</a>
              <a href="/reviews">Reviews</a>
              <a href="/testimonials">Testimonials</a>              
              <a href="/blog">Blog</a>
              <a href="/translate">Translate Now</a>
            </p>
          </li>
          <li>
            <input type="checkbox" checked>
            <i></i>
            <h5>About</h5>
            <p>
              <a href="/about">About Us</a>
              <a href="/retail">Retail Partners</a>
              <a href="//www.lexialearning.com/" target="_blank">Reasing Solutions for K-12</a>
              <a href="/student-discount">Student Discount</a>
              <a href="/lp/military/military-discount/">Military Discount</a>
              <a href="https://jobs.jobvite.com/rosettastone/" target="_blank">Careers</a>
              <a href="//pr.rosettastone.com">Press</a>
              <a href="//investors.rosettastone.com">Investor Relations</a>
              <a href="/endangered">Endangered Languages</a>
            </p>
          </li>
          <li>
            <input type="checkbox" checked>
            <i></i>
            <h5>Support</h5>
            <p>
              <a href="//support.rosettastone.com">Support Site</a>
              <a href="/faq">FAQ</a>
              <a href="/contact">Contact us</a>
              <a href="/system-requirements">System Requirements</a>
              <a href="/lp/accessibility">Accessibility Statement</a>
            </p>
          </li>
          
        </ul>
        </div>
      </section>

      <section class="eleven">

        <div class="content">
          <div class="legalese">
            <a href="/anti-piracy">Anti-Piracy</a>
            <a href="/agreements">Agreements</a>
            <a href="/terms">Terms &amp; Conditions</a>
            <a href="/privacy">Privacy Policy</a>
          </div>
          <div class="copyright">
            <a href="/" class="logo"></a>
            <div class="text">
              <div>©1999-2019</div>
              <div>Rosetta Stone Ltd. All Rights Reserved.</div>
            </div>
          </div>
        </div>
      </section>

    </div> <!-- /content-wrap -->
  </div>
</template>

<script>
  import Nav from '~/components/Nav.vue'
  
  export default {
    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: 'stylesheet', href: '//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css' },
          { rel: 'stylesheet', href: '//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css' }
        ],
        script: [
          { src: `//code.jquery.com/jquery-1.11.0.min.js` },
          { src: `//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js` },         
        ]
      }
    },  

    components: { 
      Nav,      
    },  

    data ()
    {
      return {
        appScore: 4.8,
        appReviews: null        
      }
    },

    async mounted()
    {      
      try
      {
        this.appReviews = await this.$axios.$get('https://www.rosettastone.com/docs/itunes/ratings.json')
      }
      catch (e)
      {
        this.appReviews = {
          "customerRatings" : "4.8",
          "totalRatings" : "66.4K Ratings",
          "graphBars" : [
            { stars: 5, percentage: 84 },
            { stars: 4, percentage: 12 },
            { stars: 3, percentage: 2 },
            { stars: 2, percentage: 1 },
            { stars: 1, percentage: 2 },            
          ]
        }
      }

      
      

      

      $(document).ready(function(){
        $('.carousel-cards').slick({
          centerMode: true,
          centerPadding: '0',
          slidesToShow: 3,
          infinite: true,
          dots: true,
          
          responsive: [
            {
              breakpoint: 768,
              settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 3
              }
            },
            {
              breakpoint: 480,
              settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 1
              }
            }
          ]
        });
      });
        
      //let totalScore = reviews.feed.entry
    },

    computed: {
      sorted ()
      {
        
        let graph = this.appReviews.graphBars
        let newArray = Object.keys(graph)        
        .sort()
        .reverse()
        
        .map( o => {
          console.log(o)
          return { [o] : graph[o] }
        })
        
        return newArray
        
      }
    }


  
    
}
</script>



<style lang='stylus' scoped>
  $max-content-width = 960px
  a
    text-decoration none
  h1, h2, h3, h4
    margin 0
  h1
    font-size 68px
   .cta
      background $lightblack
      color #fff
      display  block
      text-align center
      padding 1.3em 1em
      border-radius 5px    
      font-family effra    
      letter-spacing 3px
      font-size 110%
      &.desktop
        display none

  //*************************** Masthead
  .masthead-wrap
    border-top 10px solid #C19E2A
    box-shadow 0 10px 0 #D8AF2F inset
    font-family helvetica, Arial
    background #EEC132
    h3
      color $lightblack
      margin 2em 0 1.5em
      
    .masthead
      color #fff
      box-sizing border-box
      height 70vh
      display flex
      flex-direction column
      flex-direction column
      justify-content  center
      position relative

   
    .tvad
      position absolute
      bottom 1em
      font-weight 100
      left 0
      right 0
      margin auto
      text-align center
      color $lightblack


  //*************************** Sections
  section
    //padding 2em
    
    
    & > .content
      max-width $max-content-width
      
      margin 0 auto
      display flex
      flex-direction column
      padding 1.3em 1.5em
    h2 
      font-size 2.4em
      color $darkblack
      margin-bottom .5em
      font-family helvetica      
      line-height 45px
    p
      font-family effra
      font-weight 100
      font-size 1.25em
    a
      color $blue

  // App Store ratings
  section.one
    color #848484
    a, p
      font-weight bold
      
    
    .score-wrap 
      display flex
      flex-direction column
      font-family effra, Helvetica, Arial, sans-serif
      font-weight 100      
      .score       
        & > div
          display flex
          margin 2.5em 0 1em        
          display flex      
          // Holds score digits
          & > div:first-of-type
            font-size 5em
            color $blue
            line-height 20px   
          // Holds "out of 5.."  text
          & > div:last-of-type
            align-self baseline
            font-weight 700
            display flex
            flex-direction column
            padding-left 6px
            & > div:first-child
              color $lightblack
              font-size 1.3em
      

    .score-graph
      margin-top 1.2em
      ul, li
        list-style none
        padding 0
        margin 0
        width 100%
        display flex
      ul
        flex-direction column
      li
        height 24px
        
      .stars
        width 210px
        display flex
        justify-content flex-end
        .star
          height 100%
          width 24px
          margin-right 2px
          background-size contain
          display flex
          background-repeat no-repeat
          background-image url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjIzcHgiIGhlaWdodD0iMjNweCIgdmlld0JveD0iMCAwIDMwNiAzMDYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwNiAzMDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnIGlkPSJzdGFyLXJhdGUiIGZpbGw9IiNmMGM0MzMiPg0KCQk8cG9seWdvbiBwb2ludHM9IjE1MywyMzAuNzc1IDI0Ny4zNSwyOTkuNjI1IDIxMS42NSwxODcuNDI1IDMwNiwxMjEuMTI1IDE5MS4yNSwxMjEuMTI1IDE1Myw2LjM3NSAxMTQuNzUsMTIxLjEyNSAwLDEyMS4xMjUgDQoJCQk5NC4zNSwxODcuNDI1IDU4LjY1LDI5OS42MjUgCQkiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==')

        
        
      .graph
        width 100%
        padding 9px 0 9px 4px
        .bg
          background #ccc
          overflow hidden
          width 100%
          overflow auto
          height 100%
          border-radius 4px
          .fill        
            background $blue
            height 100%
            border-radius 4px
          
  // "Trusted By" logos
  section.two
    background #F1F1F1
    h3
      color $lightblack
      width 70%
    .flex-1
      margin-top 1em
      display flex
      flex-flow row wrap
      justify-content space-between
      .logo
        display flex
        background-repeat no-repeat       
        background-position center
        background-size contain
        &:nth-of-type(1)
          width 147px
          height 48px
          margin-bottom 1em
          background-image url(/img/logos/tripadvisor-dark.png)
        &:nth-of-type(2)
          width 147px
          height 48px
          background-image url(/img/logos/fender-dark.png)
        &:nth-of-type(3)
          width 147px
          height 48px
          background-image url(/img/logos/ck-dark.png)
        &:nth-of-type(4)
          width 147px
          height 48px
          background-image url(/img/logos/nasa-dark.png)

  
  // Sound Amazing 
  section.three
    .no-padding
      padding 0
    overflow-x hidden
    i
      display block        
    .wrap > div
      display flex
      flex-direction column // take this out for desktop
    .left 
      // in desktop, set width 50%, take out nottom margin
      width 100%
      margin-bottom 1em
      line-height 28px
    .right
      position relative
      overflow visible
      
        
      img 
        width 100%
        z-index 2
      .blob
        background url(/img/blobs/blob-grey.svg) no-repeat
        position absolute
        top 0
        left 0
        
        width 100%
        height 100%
        background-size cover
        z-index -1

  // Get out there
  section.four
    padding-top 334px
    background url(/img/painted-woman-mobile.jpg) no-repeat
    background-attachment fixed
    background-size 100% 100%
    overflow auto
    
    h2
      text-align center
      color #fff
      padding 1em 0 2em
      margin-bottom -57px

      background alpha(black, 60%)      
    .text      
      position relative    
      background-image url(/img/blobs/white-stone-mark-mobile.svg)
      background-position top center
      background-size cover
      padding-top 2em
      .content
        
        max-width $max-content-width
        padding 1.3em 1.5em
        line-height 30px
        
      // background-size contain
      // background-position top center
      
      
  section.five
    background #F1C433
    border-top 10px solid #C19E2A
    box-shadow 0 10px 0 #D8AF2F inset
    padding 2em 0
    h2      
      
      i 
        display none
    //background url(/img/blobs/blue.svg) no-repeat transparent top center
    .carousel-wrap
      display block
      max-width 900px
      margin 0 auto
      
      .carousel-cards
        display block
      .card
        height 300px        
        background #fff
        transform scale(0.9)
        transition all 1s ease                   
        // This is the center, active card.
        &.slick-center        
          transform scale(0.95)        
      .card-content          
        border 1px solid black
      
  // Company quotes
  section.six
    .content
      display flex
      flex-direction column
      padding 0
    .quote
      color #fff      
      padding 2em 1em
      display flex
      height 400px
      flex-direction column
      p
        font-size 2.2em
        font-weight 400
        line-height 37px
    .logo
      
      margin 2em auto 0
    .quote-1, .quote-3
      background #2497CE      
    .quote-2
      background #14A613
    .logo.macworld
      width 145px
      height 35px
      margin-top 4em
      order 1
      background url(/img/logos/macworld.svg)
    .logo.techcrunch
      width 240px
      height 33px
      order 2
      background url(/img/logos/techcrunch.svg)
    .logo.mashable
      width 158px
      height 28px
      margin-top 4em
      order 3
      background url(/img/logos/mashable.svg)
    


  // CTA
  section.seven
    div.content
      display block
    a.cta
      background $blue


  // Social Links
  section.eight
    .content
      background #E7E7E7
      h4
        letter-spacing 2px
        color #333
    .sociallinks
      padding 1em 0 0
      display flex
      a
        height 25px
        width 25px
        background-size contain        
        margin-right 1.4em
        background-position center
    .facebook
      background url('/img/social-icons/facebook-dark.svg') no-repeat
    .instagram
      background url('/img/social-icons/instagram-dark.svg') no-repeat
    .youtube
      background url('/img/social-icons/youtube-dark.svg') no-repeat
    .twitter
      background url('/img/social-icons/twitter-dark.svg') no-repeat
    .linkedin
      background url('/img/social-icons/linkedin-dark.svg') no-repeat
  // Accordion footer
  section.nine
    div.footer
      color #e7e7e7
      h5
        letter-spacing 1px
        display block        
        margin 0
        cursor pointer
        color inherit        
        background #333
        padding 22px 0 22px 2em
      p
        color rgba(48, 69, 92, 0.8)
        font-size 17px
        line-height 26px
        letter-spacing 1px
        position relative
        overflow hidden
        max-height 800px
        opacity 1
        transform translate(0, 0)
        padding 0 0 0 2em        
        color inherit        
        a
          display block
          color inherit
          padding 4px 0
          &:first-child
            margin-top 2em  
          &:last-child
            margin-bottom 2em
      ul 
        list-style none
        padding 0
        margin 0
        background #252525
        color #fff
        li 
          position relative                  
          i 
            position absolute
            transform translate(-6px, 0)
            margin-top 24px
            right 23px
            &:before 
              transform translate(-2px, 0) rotate(45deg)
            &:after 
              transform translate(2px, 0) rotate(-45deg)
          input[type=checkbox] 
            position absolute
            cursor pointer
            width 100%
            height 100%
            z-index 1
            opacity 0            
          input[type=checkbox]:checked            
            & ~ p 
              margin-top 0
              max-height 0
              opacity 0
              transform translate(0, 50%)
            & ~ i 
              &:before 
                transform translate(2px, 0) rotate(45deg)
              &:after 
                transform translate(-2px, 0) rotate(-45deg)
      ul li i:before, ul li i:after 
        content ""
        position absolute
        // Arrow color
        background-color #e7e7e7
        width 3px
        height 9px


    .transition, p, ul li i:before, ul li i:after 
      transition all .4s ease-in-out
    .flipIn, ul li 
      animation flipdown 0.5s ease both
    @keyframes flipdown 
      0% 
        opacity 0
        transform-origin top center
        transform rotateX(-90deg)
      5% 
        opacity 1
      80% 
        transform rotateX(8deg)
      83% 
        transform rotateX(6deg)
      92% 
        transform rotateX(-3deg)
      100% 
        transform-origin top center
        transform rotateX(0deg)



  // Legal Footer
  section.ten
    background #F1C433
    border-top 10px solid #C19E2A
    box-shadow 0 10px 0 #D8AF2F inset
    font-size 80%
    .content
      
      flex-wrap wrap
      padding 3em 1.5em
    .legalese
      flex-direction row
      a
        text-decoration none
        color #222
        position relative
        margin-bottom .8em
        padding 0 11px
        display inline-block
        &:after
          content ' '
          position absolute
          width 1px
          top 0
          right 0
          bottom 0
          background #333
        &:last-child, &:nth-of-type(2)
          &:after
            display none
    .copyright
      display flex
      margin-top 2em
      align-items center
    .logo
      width 45px
      height 40px
      background url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzdweCIgaGVpZ2h0PSIxMjFweCIgdmlld0JveD0iMCAwIDc3IDEyMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTMuMiAoNzI2NDMpIC0gaHR0cHM6Ly9za2V0Y2hhcHAuY29tIC0tPgogICAgPHRpdGxlPnJzX2xvZ29fb3JpZ2luYWw8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjU3Ljk3MTk0NDQlIiB5MT0iMS44NTEyNTg4NiUiIHgyPSI1MCUiIHkyPSIxMDAlIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwNThFRDQiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwMkQ1NiIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjY5LjY4NTgyMiUiIHkxPSIxLjg1MTI1ODg2JSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJsaW5lYXJHcmFkaWVudC0yIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzA1OEVENCIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMDAyRDU2IiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iMjYuNzYwNzYyOSUiIHkxPSI2NS4xNzE5MTQ4JSIgeDI9IjYyLjc4OTI4NTUlIiB5Mj0iMzYuMjIzNjUxJSIgaWQ9ImxpbmVhckdyYWRpZW50LTMiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMDE2RkM1IiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMyQTlDRTMiIG9mZnNldD0iNTUuMjAyNDQwNyUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzQ3QkJGNyIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9Ii0yNy42NjY0ODM2JSIgeTE9IjY1LjE3MTkxNDglIiB4Mj0iOTIuNzQyMzE2NyUiIHkyPSIzNi4yMjM2NTElIiBpZD0ibGluZWFyR3JhZGllbnQtNCI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMTZGQzUiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzJBOUNFMyIgb2Zmc2V0PSI1NS4yMDI0NDA3JSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDdCQkY3IiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iNTguMTA0NzY3NiUiIHkxPSIyLjI2MzA1OTg1JSIgeDI9IjM3Ljk1NjYxODMlIiB5Mj0iMTAwJSIgaWQ9ImxpbmVhckdyYWRpZW50LTUiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNzJDNkVDIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiM5OEQ2RjEiIG9mZnNldD0iNTUuMzE3MjgzMiUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzM0QUFFMiIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9Ijc3Ljk1MzE3NzklIiB5MT0iMi4yNjMwNTk4NSUiIHgyPSI4LjQ2MjYyMjIxJSIgeTI9IjEwMCUiIGlkPSJsaW5lYXJHcmFkaWVudC02Ij4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzcyQzZFQyIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjOThENkYxIiBvZmZzZXQ9IjU1LjMxNzI4MzIlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzNEFBRTIiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJsaW5lYXJHcmFkaWVudC03Ij4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZERkVGRSIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRERGM0ZEIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIiBpZD0ibGluZWFyR3JhZGllbnQtOCI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGREZFRkUiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0RERjNGRCIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8cGF0aCBkPSJNNjEuMDM3LDcuNjgyIEM2MC44MzUsNS4yMDEgNjAuNjQ4LDIuOTAxIDYwLjQ4MiwwLjg3MSBDMjcuODExLDcuNDExIDcuNTMsMjMuOTQ5IDAuMzgyLDMyLjA1NyBDMC4zNzgsMzIuNjYxIDAuMzc0LDMzLjI2NCAwLjM3LDMzLjg2OCBDNy40NDMsMjYuNDExIDI2LjUxLDEyLjQ2NSA2MS4wMzcsNy42ODIiIGlkPSJwYXRoLTkiPjwvcGF0aD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSIgaWQ9ImxpbmVhckdyYWRpZW50LTExIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZERkVGRSIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRERGM0ZEIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIiBpZD0ibGluZWFyR3JhZGllbnQtMTIiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRUZFIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNEREYzRkQiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiPgogICAgICAgICAgICA8ZyBpZD0icnNfbG9nb19vcmlnaW5hbCI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ2xpcC0xMyIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0yKSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMC4xOTQsMTEyLjM2NSBDMC43NTUsMTE3LjIyMSA2LjE4NSwxMTguOTQ1IDEwLjI0MiwxMTkuNzcgQzEwLjgxNSwxMTkuODc5IDExLjM5LDExOS45ODggMTEuOTYyLDEyMC4wOTggQzE0Ljg4OCwxMjAuNjQ0IDE2Ljg2OCwxMjAuNTQ1IDE3Ljc5LDEyMC40MzUgQzE4LjE2NywxMjAuMzg3IDE4LjU0MiwxMjAuMzM2IDE4LjkxOCwxMjAuMjgxIEMyMi4yMjUsMTE5LjgwNyAyNS41MzEsMTE5LjMzMiAyOC44MzgsMTE4Ljg1OSBDMzQuMTgzLDExNy45NjUgMzkuNjAzLDExNy40NDEgNDQuOTc1LDExNi43MTkgQzQ2LjY0MywxMTYuNDk2IDQ5LjMxOCwxMTYuMTI5IDQ5Ljg3LDExNi4wNDcgQzUxLjE4OSwxMTUuODUzIDUyLjI2MiwxMTUuNTA4IDUyLjkzLDExNS4yNTIgQzU2LjI5OCwxMTMuOTU5IDU5LjYyMiwxMTEuNzQgNjEuNzgsMTA4LjgwMSBDNjEuODE5LDEwOC43NSA2OS4zMzUsOTguMzkzIDY5LjY0Niw5Ny45NTkgQzcwLjA3NCw5Ny4zNTcgNzAuNDk1LDk2Ljc1IDcwLjkzNSw5Ni4xNTIgQzcyLjY3Myw5My43ODkgNzIuNyw5My43NSA3Mi45NTUsOTMuMzYzIEM3My40NjQsOTIuNTk2IDczLjkxNiw5MS42NSA3My45Miw5MS42NDEgQzc0LjIwNCw5MS4wMzEgNzQuNjM1LDkwLjEwOSA3NS4wMDQsODguOTg4IEM3NS42NDEsODcuMDQ5IDc2LjEyNSw4NS4wNDEgNzYuMjUsODIuOTk4IEM3Ni40NDEsNzkuODE4IDc1LjgxNyw3Ni41MzkgNzUuNTEsNzMuMzk1IEM3NC45MDIsNjcuMTggNzQuMjk5LDYwLjk2MyA3My42ODcsNTQuNzQ5IEM3My4yNTgsNTAuMzMyIDcyLjgzNyw0NS45MTMgNzIuMzk0LDQxLjQ5OSBDNzIuMzUyLDQxLjA4MiA3Mi4yNzQsNDAuNTM0IDcyLjIxMyw0MC4xMjQgQzcyLjExLDM5LjQzMiA3MS42NjcsMzYuODIxIDcwLjI3MywzMi4yNTYgQzY5LjE0NiwyOC41NjUgNjcuOTE0LDI1LjE0MyA2Ny40MzcsMjMuODQ0IEM2Ni44NTksMjIuMjcgNjYuMzE1LDIwLjc4NCA2NS4yODQsMTguMTM5IEM2NS4xMDIsMTcuNjYzIDYzLjQ2NSwxMy40NjEgNjIuOTkxLDEyLjQxNSBDNjEuNjczLDkuNDk4IDU5LjUyOCw3LjM1NiA1OC42MTIsNi40NCBDNTYuMjM3LDQuMTI3IDUzLjQ5MiwxLjI4NiA1MC4wNzYsMC42OTIgQzQ5LjAzNywwLjUxIDQ3Ljk5MSwwLjYxOCA0Ni45OTMsMC45NTIgQzQ2LjYwNiwxLjA4MiA0Ni4xMDEsMS4yODIgNDUuNzE4LDEuNDI2IEM0NS4yMzIsMS42MDggNDAuOTgyLDMuMTUzIDM5Ljk2NCwzLjUyNiBDMzguODYxLDMuOTIyIDM3Ljc2Nyw0LjMzOCAzNi42NjksNC43NDcgQzMyLjg5Niw2LjE1OSAyOS4xNDMsOS4wODEgMjYuOTI3LDEyLjQzNiBDMjAuNjIyLDIxLjYyIDE0LjMxOSwzMC44MDEgOC4wMTcsMzkuOTgzIEM3Ljc1Niw0MC4zNjQgNy40MDcsNDAuODY2IDcuMTQ4LDQxLjI0NyBDNi43MTUsNDEuODc3IDYuMjgxLDQyLjUwOCA1Ljg0OCw0My4xNDEgQzUuMjcxLDQzLjk3OSA0LjY4MSw0NC44MTEgNC4xMTYsNDUuNjU5IEMzLjgzOSw0Ni4wNzMgMy40OTYsNDYuNTkgMi45ODYsNDcuNjEyIEMyLjg5MSw0Ny44MDMgMi42OTUsNDguMiAyLjQ2OCw0OC43MjkgQzIuMjk4LDQ5LjExOCAyLjE0Nyw0OS41MTYgMS45ODksNDkuOTExIEMxLjMzNyw1MS41NDUgMC44NzksNTMuMzA1IDAuNjE1LDU1LjA0NyBDMC41NDUsNTUuNTA0IDAuNTA4LDU1Ljk2MyAwLjQ3NCw1Ni40MjQgQzAuNDYyLDU2LjU3NyAwLjQ2OCw1Ni43ODIgMC40NTgsNTYuOTM0IEMwLjQ0Niw1Ny4xNDEgMC40NTcsNTcuMzUgMC40NTUsNTcuNTU1IEMwLjQxNSw2NC4yODMgMC4zNzYsODEuNTQ1IDAuMzcsODMuODYzIEMwLjM0LDkxLjEyNiAwLjM0MSw5OC4zOTMgMC4yOTcsMTA1LjY1NiBDMC4yODQsMTA3Ljg1OSAtMC4wNzgsMTEwLjE3NiAwLjE5NCwxMTIuMzY1IiBpZD0icGF0aC0yIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ2xpcC0xNiIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC00KSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMi43MzQsMTE1Ljg0OCBDMi45OTUsMTE1Ljk0NSAzLjI3LDExNi4wMSAzLjU1NiwxMTYuMDM5IEMzLjg0MiwxMTYuMDY4IDQuMTM4LDExNi4wNTkgNC40NDIsMTE2LjAxMiBDNS4yMTgsMTE1Ljg5MSA1Ljk5OCwxMTUuNzY4IDYuNzc5LDExNS42NDUgQzcuNTY1LDExNS41MjIgOC4zNTMsMTE1LjM5NyA5LjE0MywxMTUuMjczIEM5LjkzNSwxMTUuMTQ4IDEwLjczMiwxMTUuMDIyIDExLjUzLDExNC44OTcgQzEyLjMzNCwxMTQuNzcyIDEzLjEzOSwxMTQuNjQ0IDEzLjk0OCwxMTQuNTE2IEMxNS45ODIsMTE0LjE5NyAxOC4wMjIsMTEzLjkwNCAyMC4wNiwxMTMuNjA1IEMyMS43NDcsMTEzLjM2MSAyMy41OTEsMTEzLjA5NCAyNS40NDgsMTEyLjgyNiBDMjcuODE4LDExMi40ODIgMzAuMjEyLDExMi4xMzcgMzIuMzIsMTExLjgyOCBDMzQuNDQ4LDExMS41MTggMzYuMjgxLDExMS4yNDQgMzcuNTAyLDExMS4wNTMgQzM4LjM1NiwxMTAuOTIyIDM5LjMwNywxMTAuNjIxIDQwLjI5MSwxMTAuMTkzIEM0MS4yNzgsMTA5Ljc2MiA0Mi4yOTgsMTA5LjIwMyA0My4yODQsMTA4LjU1OSBDNDUuMTYsMTA3LjMzIDQ2Ljk2MywxMDUuODI4IDQ4LjI3MywxMDMuOTk0IEM0OS41MzMsMTAyLjIzNiA1MC43OTgsMTAwLjQ4MiA1Mi4wNjMsOTguNzI4IEM1Mi41NjksOTguMDI5IDUzLjA3NCw5Ny4zMyA1My42NzgsOTYuNDk2IEM1NC4yNzksOTUuNjYgNTQuOTgsOTQuNjkxIDU1Ljg3Myw5My40NTEgQzU2Ljc1OCw5Mi4xOTcgNTcuMjI5LDkxLjUyNSA1Ny40OTQsOTEuMTQ0IEM1Ny43NTgsOTAuNzY2IDU3LjgxNyw5MC42NzggNTcuODc5LDkwLjU5NCBDNTcuOTQsOTAuNTA2IDU4LjAwNCw5MC40MjIgNTguMjc5LDkwLjA0NyBDNTguNTU2LDg5LjY3MiA1OS4wNDMsODkuMDA4IDU5Ljk1MSw4Ny43NjIgQzYwLjU0NCw4Ni45NCA2MS4xMDMsODUuOTMyIDYxLjU5OSw4NC44MjIgQzYyLjA5Niw4My43MTMgNjIuNTMyLDgyLjUwNiA2Mi44ODMsODEuMjc3IEM2My4yMzMsODAuMDUzIDYzLjQ5OSw3OC44MSA2My42NTYsNzcuNjM1IEM2My44MTMsNzYuNDYxIDYzLjg2Myw3NS4zNTIgNjMuNzgzLDc0LjM5MSBDNjMuNTQ3LDcxLjQ5NCA2My4yNjUsNjguMDI3IDYyLjk2Miw2NC4zMDEgQzYyLjU2NSw1OS40MzggNjIuMTcyLDU0LjU3NyA2MS43NzMsNDkuNzE3IEM2MS41NDYsNDYuOTIgNjEuMzIyLDQ0LjE4NiA2MS4xMTQsNDEuNjI0IEM2MC44MzEsMzguMTY1IDYwLjU3NSwzNS4wMSA2MC4zNjQsMzIuNDIgQzYwLjIsMzAuMzgxIDU5LjYzNiwyNy43MjMgNTguODY3LDI0Ljg1OCBDNTguMTA3LDIyLjAyMiA1Ny4xNTIsMTguOTg5IDU2LjE5MSwxNi4xNDMgQzU0Ljg0MiwxMi4xNDMgNTMuMzM4LDguMjAyIDUxLjg2Nyw0LjI0NSBDNTEuNjE4LDMuNTcxIDUxLjM2MywyLjg5MyA1MS4wMTcsMi4yNjIgQzUwLjg2MiwxLjk4NSA1MC42OTksMS43MzcgNTAuNTIxLDEuNTMyIEM1MC4zNDMsMS4zMjMgNTAuMTQ5LDEuMTU5IDQ5LjkzNiwxLjA0NSBDNDkuNzIyLDAuOTIyIDQ5LjQ4MywwLjgyOSA0OS4yMjcsMC43NjggQzQ4Ljk3MSwwLjcwNyA0OC42OTUsMC42NzYgNDguNDA2LDAuNjc2IEM0OC4xMTYsMC42NzYgNDcuODE0LDAuNzA2IDQ3LjUsMC43NjggQzQ3LjE4NywwLjgyOSA0Ni44NjMsMC45MTggNDYuNTM1LDEuMDQyIEM0NC42MywxLjc1MiA0My40ODksMi4xNzIgNDIuNzI5LDIuNDUgQzQxLjk3MSwyLjcyNyA0MS41ODgsMi44NjIgNDEuMjA3LDIuOTk3IEM0MC44MjUsMy4xMzEgNDAuNDQ2LDMuMjY2IDM5LjY5NSwzLjU0IEMzOC40NDQsMy45OTcgMzcuMTgxLDQuNDM0IDM1Ljk0NCw0LjkyOCBDMzQuMzExLDUuNTQ0IDMyLjgxNCw2LjU1OSAzMS40NDcsNy42MjcgQzMwLjY3MSw4LjIzMyAyOS45MTQsOC44OTUgMjkuMjE5LDkuNTczIEMyOC41MjMsMTAuMjUyIDI3Ljg5MiwxMC45NSAyNy4zNjMsMTEuNjMzIEMyNy4yMTQsMTEuODI3IDI3LjE3OSwxMS44NzQgMjcuMTQ0LDExLjkyMiBDMjcuMDcyLDEyLjAyMiAyNy4wMDIsMTIuMTIyIDI2LjkzNCwxMi4yMjMgQzI2LjE5NiwxMy4yOTUgMjUuMTE5LDE0Ljg2MiAyMy44NzQsMTYuNjcyIEMyMi42MywxOC40ODEgMjEuMjE4LDIwLjUzMiAxOS44MDksMjIuNTgyIEMxOC40LDI0LjYyNyAxNi45OTUsMjYuNjcgMTUuNzYsMjguNDY1IEMxNC41MjYsMzAuMjU4IDEzLjQ2MywzMS44MDcgMTIuNzM1LDMyLjg2NCBDMTIuMDA3LDMzLjkyNiAxMS4yNzcsMzQuOTg5IDEwLjU0OSwzNi4wNDkgQzkuODIsMzcuMTEgOS4wOTMsMzguMTY4IDguMzY1LDM5LjIyNyBDNy42MzcsNDAuMjg2IDYuOTEsNDEuMzQyIDYuMTg0LDQyLjM5NyBDNS40NTgsNDMuNDUyIDQuNzMyLDQ0LjUwNCA0LjAwOCw0NS41NTUgQzMuNTMsNDYuMjQ4IDMuMDcsNDcuMDg1IDIuNjQ4LDQ3Ljk5NSBDMS44MTUsNDkuNzg4IDEuMTgxLDUxLjY5IDAuNzc4LDUzLjYyNyBDMC41ODYsNTQuNTc3IDAuNDQsNTUuNTQ1IDAuNDM2LDU2LjUxNiBDMC40MzUsNTYuNjY1IDAuNDM0LDU2LjgxMSAwLjQzNCw1Ni45NjEgQzAuNDMzLDU3LjExIDAuNDMxLDU3LjI1OCAwLjQzLDU3LjQwOSBDMC40MjksNTcuNTU3IDAuNDI5LDU3LjcwOCAwLjQyNyw1Ny44NTggQzAuNDI3LDU4LjAwNiAwLjQyNiw1OC4xNTcgMC40MjQsNTguMzAzIEMwLjM5Nyw2Mi41NTkgMC4zNzEsNjYuNzY4IDAuMzQ1LDcwLjk3NyBDMC4zMTcsNzUuMjM2IDAuMjkxLDc5LjQ5NiAwLjI2NCw4My44MDUgQzAuMjM2LDg4LjE2NiAwLjIwOCw5Mi41OCAwLjE4LDk3LjA5OCBDMC4xNSwxMDEuNjcyIDAuMTIxLDEwNi4zNTUgMC4wOTEsMTExLjIwNyBDMC4wODgsMTExLjU4NCAwLjExNywxMTEuOTQ3IDAuMTcxLDExMi4yOTMgQzAuMjI4LDExMi42MzkgMC4zMSwxMTIuOTY5IDAuNDIsMTEzLjI3OSBDMC42MjIsMTEzLjg2NSAwLjkzMywxMTQuNDIgMS4zNSwxMTQuODgxIEMxLjcyOSwxMTUuMzAzIDIuMiwxMTUuNjQ1IDIuNzM0LDExNS44NDggWiIgaWQ9InBhdGgtNSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9IkNsaXAtMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuMDAwMDAwLCAwLjAwMDAwMCkiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtNikiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU2LjIxMSwzMS42MzEgQzU2LjQxMywzNC4xMjIgNTcuMzQ4LDQ1LjU3NyA1Ny41NjYsNDguMjY2IEM1Ny45NDksNTIuOTQyIDU4LjMyOCw1Ny42MTggNTguNzA5LDYyLjI5MyBDNTkuMDAxLDY1Ljg3OSA1OS4yNzMsNjkuMjEzIDU5LjQ5OSw3MS45OTggQzU5LjU3Niw3Mi45MjQgNTkuNDMsNzUuNzQgNTkuMjc5LDc2Ljg3MSBDNTkuMTI3LDc4IDU4Ljg3Myw3OS4xOTcgNTguNTM0LDgwLjM3NSBDNTguMTk4LDgxLjU1NSA1Ny43NzcsODIuNzE5IDU3LjMwMSw4My43ODMgQzU2LjgyMiw4NC44NTIgNTYuMjg1LDg1LjgxOCA1NS43MTUsODYuNjA5IEM1NC44NDIsODcuODEgNTIuNjQzLDkwLjg3NyA1MS43OTEsOTIuMDg0IEM1MC45MzMsOTMuMjc3IDQ1LjY5MywxMDAuNTM1IDQ0LjQ4MiwxMDIuMjIzIEM0My4yMjEsMTAzLjk4OCA0MS40ODgsMTA1LjQzNSAzOS42ODQsMTA2LjYxNSBDMzguNzM0LDEwNy4yMzYgMzcuNzU0LDEwNy43NzIgMzYuODA1LDEwOC4xODggQzM1Ljg1NywxMDguNiAzNC45NDQsMTA4Ljg4OSAzNC4xMjIsMTA5LjAxNiBMMC4zNDgsMTE0Ljg4MSBDMC43MjgsMTE1LjMwNSAxLjE5OSwxMTUuNjQ1IDEuNzMzLDExNS44NDggQzEuOTk0LDExNS45NDUgMi4yNywxMTYuMDEgMi41NTUsMTE2LjAzOSBDMi44NDEsMTE2LjA2OCAzLjEzNywxMTYuMDU5IDMuNDQxLDExNi4wMTIgQzQuMjE3LDExNS44OTEgNC45OTcsMTE1Ljc2OCA1Ljc3OCwxMTUuNjQ1IEM2LjU2NCwxMTUuNTIyIDcuMzUyLDExNS4zOTcgOC4xNDMsMTE1LjI3MyBDOC45MzUsMTE1LjE0OCA5LjczMSwxMTUuMDIzIDEwLjUyOSwxMTQuODk3IEMxMS4zMzMsMTE0Ljc3MiAxMi4xMzksMTE0LjY0NCAxMi45NDcsMTE0LjUxOCBDMTQuOTgxLDExNC4xOTcgMTcuMDIxLDExMy45MDQgMTkuMDU5LDExMy42MDcgQzIwLjc0NiwxMTMuMzYxIDIyLjU5LDExMy4wOTQgMjQuNDQ3LDExMi44MjYgQzI2LjgxOCwxMTIuNDgyIDI5LjIxMSwxMTIuMTM3IDMxLjMyLDExMS44MjggQzMzLjQ0NywxMTEuNTE4IDM1LjI4LDExMS4yNDYgMzYuNTAyLDExMS4wNTUgQzM3LjM1NiwxMTAuOTIyIDM4LjMwNiwxMTAuNjIxIDM5LjI5LDExMC4xOTMgQzQwLjI3NywxMDkuNzYyIDQxLjI5NywxMDkuMjAzIDQyLjI4MywxMDguNTU5IEM0NC4xNiwxMDcuMzMyIDQ1Ljk2MiwxMDUuODI4IDQ3LjI3MiwxMDMuOTk0IEM0OC41MzMsMTAyLjIzNiA0OS43OTcsMTAwLjQ4MiA1MS4wNjIsOTguNzI4IEM1MS41NjgsOTguMDI5IDUyLjA3Myw5Ny4zMyA1Mi42NzcsOTYuNDk2IEM1My4yNzgsOTUuNjYyIDUzLjk3OSw5NC42OTEgNTQuODcyLDkzLjQ1MSBDNTUuNzU3LDkyLjE5NyA1Ni4yMjcsOTEuNTI1IDU2LjQ5Miw5MS4xNDcgQzU2Ljc1OCw5MC43NjYgNTYuODE2LDkwLjY3OCA1Ni44NzgsOTAuNTk0IEM1Ni45NCw5MC41MDYgNTcuMDA0LDkwLjQyMiA1Ny4yNzksOTAuMDQ3IEM1Ny41NTUsODkuNjcyIDU4LjA0Miw4OS4wMDggNTguOTQ5LDg3Ljc2MiBDNTkuNTQzLDg2Ljk0IDYwLjEwMiw4NS45MzIgNjAuNTk4LDg0LjgyMiBDNjEuMDk1LDgzLjcxNSA2MS41MzEsODIuNTA2IDYxLjg4Miw4MS4yNzcgQzYyLjIzMiw4MC4wNTMgNjIuNDk4LDc4LjgxIDYyLjY1NSw3Ny42MzUgQzYyLjgxMyw3Ni40NjEgNjIuODYzLDc1LjM1MiA2Mi43ODEsNzQuMzkxIEM2Mi41NDYsNzEuNDk0IDYyLjI2NCw2OC4wMjcgNjEuOTYxLDY0LjMwMSBDNjEuNTY1LDU5LjQ0IDYxLjE3Miw1NC41NzcgNjAuNzczLDQ5LjcxNyBDNjAuNTQ1LDQ2LjkyIDYwLjMyMSw0NC4xODYgNjAuMTEzLDQxLjYyNCBDNTkuODMsMzguMTY1IDU5LjU3NCwzNS4wMSA1OS4zNjMsMzIuNDIyIEM1OS4xOTksMzAuMzgzIDU4LjYzNSwyNy43MjMgNTcuODY3LDI0Ljg1OCBDNTcuMTA3LDIyLjAyMiA1Ni4xNTEsMTguOTg5IDU1LjE5MSwxNi4xNDMgQzUzLjg0MSwxMi4xNDMgNTIuMzM4LDguMjAyIDUwLjg2Nyw0LjI0NSBDNTAuNjE3LDMuNTcxIDUwLjM2MiwyLjg5MyA1MC4wMTYsMi4yNjIgQzQ5Ljg2MSwxLjk4NSA0OS42OTgsMS43MzcgNDkuNTE5LDEuNTMyIEM0OS4zNDIsMS4zMjUgNDkuMTQ4LDEuMTYxIDQ4LjkzNSwxLjA0NSBDNDguNzIxLDAuOTIyIDQ4LjQ4MiwwLjgyOSA0OC4yMjcsMC43NjggQzQ3Ljk3MSwwLjcwNyA0Ny42OTQsMC42NzYgNDcuNDA0LDAuNjc2IEM0Ny4zOTcsMC43IDU0Ljc3MSwyNC4zNTYgNTQuNzcxLDI0LjM1NiBDNTUuNTEsMjcuMTEyIDU2LjA1NSwyOS42NjggNTYuMjExLDMxLjYzMSBaIiBpZD0icGF0aC04Ij48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ2xpcC0yOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDMyLjAwMDAwMCkiIGZpbGw9IiMyOTc4QzgiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTYwLjk2NCw3Ljc4MSBDNjAuNzQsNS4wNDggNjAuNTc3LDIuNTQzIDYwLjQwNCwwLjQyNCBDNjAuNDAzLDAuNDE0IDYwLjM2MSwwLjM5OCA2MC4zNjEsMC4zODggQzI4LjIxMyw2Ljg5NiA3LjY2NCwyMy4yNzQgMC4zOTIsMzEuNDIyIEMwLjM4OCwzMi4wNDkgMC4zODQsMzIuNjc4IDAuMzgsMzMuMzA1IEM3LjkwNywyNS43OTEgMzIuNTc1LDEwLjQ5NSA2MC45NjQsNy43ODEiIGlkPSJwYXRoLTEwIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ2xpcC0zMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDYxLjAwMDAwMCkiIGZpbGw9IiMyOTc4QzgiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTYzLjAxNiwzLjMxMyBDNjIuOTQyLDIuNDE3IDYyLjgzOSwxLjUwNSA2Mi43NjYsMC42MDkgQzI5LjU4NSw1LjU1MSA3LjA3OSwyMC44MSAwLjIzNCwyNy40MDcgQzAuMjI5LDI4LjE3OSAwLjIyNSwyOC45NDMgMC4yMiwyOS43MTkgQzYuNzUyLDI0IDMxLjkyOCw5LjA2OSA2My4yMjYsNi41NDggQzYzLjE0LDUuNDkgNjMuMTA2LDQuNDI0IDYzLjAxNiwzLjMxMyIgaWQ9InBhdGgtMTIiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJDbGlwLTM1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzMuMDAwMDAwKSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC04KSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNjEuMDM3LDcuNjgyIEM2MC44MzUsNS4yMDEgNjAuNjQ4LDIuOTAxIDYwLjQ4MiwwLjg3MSBDMjcuODExLDcuNDExIDcuNTMsMjMuOTQ5IDAuMzgyLDMyLjA1NyBDMC4zNzgsMzIuNjYxIDAuMzc0LDMzLjI2NCAwLjM3LDMzLjg2OCBDNy40NDMsMjYuNDExIDI2LjUxLDEyLjQ2NSA2MS4wMzcsNy42ODIiIGlkPSJwYXRoLTE1Ij48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iRmlsbC0zMS1DbGlwcGVkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMTAiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC05Ij48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9InBhdGgtMTUiPjwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNjMuMDE2LDMxLjMxMyBDNjIuOTQyLDMwLjQxNyA2Mi44MzksMjkuNTA1IDYyLjc2NiwyOC42MDkgQzI5LjU4NSwzMy41NTEgNy4wNzksNDguODEgMC4yMzQsNTUuNDA3IEMwLjIyOSw1Ni4xNzkgMC4yMjUsNTYuOTQzIDAuMjIsNTcuNzE5IEM2Ljc1Miw1MiAzMS45MjgsMzcuMDY5IDYzLjIyNiwzNC41NDggQzYzLjE0LDMzLjQ5IDYzLjEwNiwzMi40MjQgNjMuMDE2LDMxLjMxMyIgaWQ9IkZpbGwtMzEiIG1hc2s9InVybCgjbWFzay0xMCkiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJDbGlwLTQyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgNjMuMDAwMDAwKSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xMikiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTYyLjk2MiwxLjMwMSBDNjIuOTMyLDAuOTI1IDYyLjksMC41NDggNjIuODcsMC4xNzIgQzI3Ljc5OCw1LjQwNSA2Ljc4MiwyMC4zNzggMC4yMjYsMjYuODg5IEMwLjIyMSwyNy42MzUgMC4yMTYsMjguMzkyIDAuMjExLDI5LjE0MiBDNi4yOTcsMjMuNzYzIDI5LjI4NSwxMC42NTMgNjMuNDQ3LDcuMjY3IEM2My4yOTUsNS4zOTIgNjMuMTMyLDMuMzk2IDYyLjk2MiwxLjMwMSIgaWQ9InBhdGgtMTciPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+')
      background-size contain
      background-repeat no-repeat
    
      

</style>