tabbit

Tue May 02 2017
Copied to clipboard! Copy reply
<style>
@font-face {
  font-family: gothambook;
  font-weight: normal;
  font-style: normal;
  src: url("../globals/fonts/gotham/gothamhtf-book.ttf"), url("../globals/fonts/gotham/gothamhtf-book.eot?#iefix"); }
@font-face {
  font-family: gothammedium;
  font-weight: normal;
  font-style: normal;
  src: url("../globals/fonts/gotham/gothamhtf-medium.ttf"), url("../globals/fonts/gotham/gothamhtf-medium.eot?#iefix"); }
#rs-ee-product-lightboxes {
  z-index: 1000;
  top: 50px;
  left: 10%;
  position: fixed;
  width: auto;
  height: auto;
  margin: 0px auto;
  background-color: #f1f1f1;
  display: none;
  font-family: 'gothambook', arial, sans-serif; }
  @media screen and (max-width: 1200px) {
    #rs-ee-product-lightboxes {
      position: absolute;
      left: 0px;
      margin: 5px; } }
  #rs-ee-product-lightboxes #rs-ee-product-close {
    right: 4px;
    top: -35px;
    position: absolute;
    font-size: 1em;
    cursor: pointer; }
    #rs-ee-product-lightboxes #rs-ee-product-close img {
      width: 1em;
      height: 1em; }
  #rs-ee-product-lightboxes h1 {
    color: #4487c0;
    font-size: 2em;
    font-family: 'gothambook', arial, sans-serif; }
    @media screen and (max-width: 1200px) {
      #rs-ee-product-lightboxes h1 {
        font-size: 1em; } }
  #rs-ee-product-lightboxes p {
    font-size: 1em;
    color: #3e3d3f;
    font-family: 'gothambook', arial, sans-serif; }
  #rs-ee-product-lightboxes button {
    margin-top: 16px;
    background-color: #0098db;
    border-radius: 5px;
    padding: 12px 28px;
    outline: none;
    border: none;
    cursor: pointer; }
    #rs-ee-product-lightboxes button a {
      color: white;
      text-transform: uppercase;
      font-size: 16px;
      text-decoration: none;
      letter-spacing: 1px;
      font-weight: 200; }
  #rs-ee-product-lightboxes.active {
    display: block; }
  #rs-ee-product-lightboxes .main_content {
    text-align: center;
    padding-bottom: 20px; }
    #rs-ee-product-lightboxes .main_content p {
      width: 65%;
      margin: 0px auto; }
      @media screen and (max-width: 1200px) {
        #rs-ee-product-lightboxes .main_content p {
          width: 90%; } }
  #rs-ee-product-lightboxes .products-container {
    overflow: auto;
    opacity: 1;
    z-index: 1000;
    text-align: center;
    margin: 0px auto;
    width: 90%; }
    @media screen and (max-width: 1200px) {
      #rs-ee-product-lightboxes .products-container {
        width: 100%; } }
    #rs-ee-product-lightboxes .products-container .product-column {
      z-index: 1000;
      float: left;
      max-width: 250px;
      padding: 5px;
      margin-left: 10px; }
      @media screen and (max-width: 1200px) {
        #rs-ee-product-lightboxes .products-container .product-column {
          min-width: 100%;
          max-width: 100%;
          margin-left: 0px;
          padding: 0px;
          margin-top: 20px; } }
      #rs-ee-product-lightboxes .products-container .product-column .header {
        padding: 10px;
        color: white;
        min-height: 80px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px; }
        #rs-ee-product-lightboxes .products-container .product-column .header .cta-container {
          display: none; }
          @media screen and (max-width: 1200px) {
            #rs-ee-product-lightboxes .products-container .product-column .header .cta-container {
              display: block;
              border-top-left-radius: 0px;
              border-top-right-radius: 0px; }
              #rs-ee-product-lightboxes .products-container .product-column .header .cta-container button {
                background-color: #f0c433; }
                #rs-ee-product-lightboxes .products-container .product-column .header .cta-container button a {
                  color: #3e3d3f; }
              #rs-ee-product-lightboxes .products-container .product-column .header .cta-container button.js-rsee-personal {
                background-color: #0098db; }
                #rs-ee-product-lightboxes .products-container .product-column .header .cta-container button.js-rsee-personal a {
                  color: white; } }
        @media screen and (max-width: 1200px) {
          #rs-ee-product-lightboxes .products-container .product-column .header {
            border-top-left-radius: 0px;
            border-top-right-radius: 0px; } }
        #rs-ee-product-lightboxes .products-container .product-column .header.yellow {
          background-color: #f0c433;
          color: black; }
        #rs-ee-product-lightboxes .products-container .product-column .header.blue {
          background-color: #4487c0; }
        #rs-ee-product-lightboxes .products-container .product-column .header.blue-dark {
          background-color: #2497b7; }
        #rs-ee-product-lightboxes .products-container .product-column .header.blue-darker {
          background-color: #71bbd5; }
        #rs-ee-product-lightboxes .products-container .product-column .header .product-name {
          text-transform: uppercase;
          border-bottom: 1px;
          font-size: 1em;
          font-weight: bold;
          padding-bottom: 5px; }
        #rs-ee-product-lightboxes .products-container .product-column .header hr {
          border-style: solid; }
        #rs-ee-product-lightboxes .products-container .product-column .header .product-details {
          font-size: 0.80em;
          margin-top: 18px;
          color: white; }
          #rs-ee-product-lightboxes .products-container .product-column .header .product-details .line-1 {
            font-family: 'gothammedium', arial, sans-serif;
            text-transform: uppercase; }
            #rs-ee-product-lightboxes .products-container .product-column .header .product-details .line-1.diff {
              color: #3e3d3f; }
          #rs-ee-product-lightboxes .products-container .product-column .header .product-details .line-2 {
            font-family: 'gothambook', arial, sans-serif; }
            #rs-ee-product-lightboxes .products-container .product-column .header .product-details .line-2.diff {
              color: #3e3d3f; }
      #rs-ee-product-lightboxes .products-container .product-column .content {
        z-index: 1000;
        background-color: #ffffff;
        margin: 0px;
        padding: 1px 0px 0px 0px;
        text-align: left;
        font-size: 0.80em;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px; }
        @media screen and (max-width: 1200px) {
          #rs-ee-product-lightboxes .products-container .product-column .content {
            display: none;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px; } }
        #rs-ee-product-lightboxes .products-container .product-column .content ul {
          list-style: none;
          padding: 0px 10px; }
          #rs-ee-product-lightboxes .products-container .product-column .content ul li {
            margin-top: 15px;
            position: relative;
            padding-left: 25px; }
          #rs-ee-product-lightboxes .products-container .product-column .content ul li:before {
            content: '';
            position: absolute;
            background-image: url("./check-mark.svg");
            width: 18px;
            height: 18px;
            left: 0px; }
        #rs-ee-product-lightboxes .products-container .product-column .content .special {
          text-transform: uppercase;
          padding-left: 15px;
          text-align: center; }
        #rs-ee-product-lightboxes .products-container .product-column .content .cta-container {
          background-color: #3e3d3f;
          min-height: 80px;
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px;
          text-align: center;
          font-weight: bold; }
          @media screen and (max-width: 1200px) {
            #rs-ee-product-lightboxes .products-container .product-column .content .cta-container {
              border-bottom-left-radius: 0px;
              border-bottom-right-radius: 0px; } }
          #rs-ee-product-lightboxes .products-container .product-column .content .cta-container button {
            margin-top: 16px;
            background-color: #0098db;
            border-radius: 5px;
            padding: 12px 28px;
            outline: none;
            border: none;
            cursor: pointer; }
            #rs-ee-product-lightboxes .products-container .product-column .content .cta-container button a {
              color: white;
              text-transform: uppercase;
              font-size: 16px;
              text-decoration: none;
              letter-spacing: 1px;
              font-weight: 200; }
  #rs-ee-product-lightboxes .spacer-column-4 {
    height: 45px; }
  #rs-ee-product-lightboxes .spacer-column-1 {
    height: 45px; }

#rs-ee-product-lightboxes:after {
  content: '';
  overflow: scroll;
  background-color: black;
  opacity: 0.5; }

/*# sourceMappingURL=style.css.map */
</style>

<div id="rs-ee-product-lightboxes">

    <div id="rs-ee-product-close">
         CLOSE <img src="./close.svg" alt="close">
    </div>
    
    <div class="main_content">
        <h1>Proven, results-based language learning.</h1>
        <p>Our award-winning learning approach has been used in thousands of homes, schools and businesses to help students and employees successfully learn a new language.</p>
    </div>

    <div class="products-container">
        <div class="product-column">
            <div class="header yellow">
                <span class="product-name">PERSONAL EDITION</span> 
                <hr width="10%"/> 
                <p class="product-details"><span class="diff line-1">$XXX per user, per year</span>
                <br/>
                <span class="diff line-2">Single user subscription</span></p>
                   <div class="cta-container">
                     <button class="js-rsee-personal"><a class="js-rsee-personal" href="#" >LEARN MORE</a></button>
                </div>
            </div>
           <div class="content" id="js-rsee-personal-content">
                <ul>
                    <li>Learn on any device—lessons sync instantly</li>
                    <li>Choose one of 24 available languages, including English</li>        
                    <li>TruAccent™ pronunciation training technology</li>
                    <li>Learn hands-free with audio lessons</li>
                    <li>Practice speaking with read aloud stories</li>
                    <li>Easily reference words and expressions with Phrasebook</li>
                    <li>Build confidence using native speaking tutors*</li>
                    <li>Web and telephone support</li>                    
                </ul>   
                 <div class="spacer-column-1"></div>
                 <div class="cta-container">
                    <button><a href="http://www.rosettastone.com/lp/sbsr/sitewide?ocid=link-homepage-personal">SHOP NOW</a></button>
                </div>

            </div>                   
        </div>
        <div class="product-column">
             <div class="header blue">
                 <span class="product-name">TEAM EDITION</span>  
                 <hr width="10%"/>
                  <p class="product-details"><span class="line-1">$389 per user, per year</span>
                  <br/><span class="line-2">Groups of up to 25 users</span></p>
                   <div class="cta-container">
                     <button class="js-rsee-team"><a class="js-rsee-team" href="#" >LEARN MORE</a></button>
                </div>
            </div>
            <div class="content" id="js-rsee-team-content">
                <ul>
                    <p class="special">MOST FEATURES IN THE PERSONAL EDITION†, PLUS:</p>
                    <li>24 available languages, including English</li>
                    <li>English Proficiency Testing</li>
                    <li>Synced desktop, tablet, and mobile capability</li>
                    <li>Automated placement testing</li>
                    <li>Learner usage reporting</li>
                    <li>Implementation, web, and telephone support</li>
                    <li>Guided self-paced experience focuses on fundamentals</li>
                    <li>Build confidence using native speaking tutors*</li>
                    <li>Transferable licenses</li>
                </ul> 
                 

                <div class="cta-container">
                     <button><a href="http://www.rosettastone.com/lp/team-edition/?ocid=link-homepage-eeteam">SHOP NOW</a></button>
                </div>             
            </div> 
                       
        </div>
        <div class="product-column">
             <div class="header blue-dark">
                    <span class="product-name">BUSINESS SOLUTION</span>  
                    <hr width="10%"/>                    
                     <p class="product-details"><span class="line-1">FOR ORGANIZATIONS</span>
                     <br/><span class="line-2">up to 20,000 users</span></p>
                      <div class="cta-container js-rsee-business">
                     <button class="js-rsee-business"><a href="#" class="js-rsee-business" >LEARN MORE</a></button>
                </div>
            </div>             
            <div class="content" id="js-rsee-business-content">
                <ul>
                    <p class="special">ALL FEATURES IN THE TEAM EDITION, PLUS:</p>
                    <li>Content adaptable to industry and culture</li>
                    <li>Recommends appropriate language-learning path based on testing and learner’s goals</li>
                    <li>Full suite of administrative and reporting tools</li>
                    <li>Full suite of administrative and reporting tools</li>
                </ul>  

                 <div class="cta-container">
                    <button><a href="http://www.rosettastone.com/lp/business?ocid=link-homepage-eebiz">PRICING OPTIONS</a></button>
                </div>
            </div>  
        </div>
        <div class="product-column">
            <div class="header blue-darker">                 
                <span class="product-name">EDUCATION SOLUTION</span>  
                <hr width="10%"/>
                <p class="product-details"><span class="line-2">Classroom to District</span><br/><span class="line-2">implementations</span></p>
                 <div class="cta-container">
                     <button class="js-rsee-education"><a class="js-rsee-education" href="#">LEARN MORE</a></button>
                </div>
            </div>                
            <div class="content" id="js-rsee-education-content">
                <ul>
                    <p class="special">ALL FEATURES IN THE TEAM EDITION, PLUS:</p>
                    <li>Easy integration with blended learning models</li>
                    <li>Games and activities</li>
                    <li>Supplemental materials</li>
                    <li>Full suite of administrative and reporting tools</li>
                </ul>
                <div class="spacer-column-4"></div>
                 <div class="cta-container">
                     <button><a href="http://www.rosettastone.com/lp/k12?ocid=link-homepage-eek12">PRICING OPTIONS</a></button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

$( document ).ready(function() {

$('.nav-items').append('<li style="background-color:#0098db" class="nav-item noselect espanol"><button tabindex="0">PRICING</button></li>');

var $rs_ee_product_lightboxes = $('#rs-ee-product-lightboxes');

$('#rs-ee-product-close, #js-rsee-lightbox-trigger').click(function(){
    $rs_ee_product_lightboxes.fadeToggle('active');
})

$('.header .cta-container').click(
    function(e){        
        $('#'+e.target.className+'-content').show();
        $('.'+e.target.className).hide();                                
        $('html, body').animate({
                  scrollTop:   $('#'+e.target.className+'-content').parent().offset().top
             }, 1000);         
    }
)    
});

</script>