<div id="sesCountBox" style="background-color: transparent;">
<div class="pop-up" style="padding-bottom: 30px;border-radius: 10px;position: absolute;left: 5%;background-color: rgba(0, 0, 0, 0.85);color: black;text-align: center;width: 90%;padding-top: 15px;font-size: 17px;font-family: sans-serif;display: flex;align-items: center;justify-content: center;">
<div>
<div style="margin-top: 10px;font-size: 70px;font-weight: 900;color: #ffffff;">Go Pro Now!</div>
<div style="color: #2a8cdd;font-size: 20px;">Unlock all the features</div>
<div style="padding: 30px;text-align: center;border: 0px;">
<div style="display: inline-block;">
<div id="priceContainer" style="display: inline-block;float: left;">
<div id="yearlyPrice" style="width: 450px;height: 350px;color: #333333;margin: 15px;margin-left: 0px;margin-right: 30px;text-align: center;font-size: 25px;cursor: pointer;transition: background 0.15s linear;border-radius: 10px;border: solid;border-color: #ffffff;border-width: 1px;box-shadow: 3px 3px 12px rgba(0,0,0,0.44);">
<div style="position: relative;background: #2a8cdd;border-color: #ffffff;border-top-left-radius: 8px;border-top-right-radius: 8px;color: #ffffff;font-size: 37px;line-height: 50px;text-transform: uppercase;border-style: solid;border-width: 0px;border-bottom-width: 1px;top: 0px!important;">
<text msgid="save25">Save 25%</text>
</div>
<div style="position: relative;margin: auto;content: ""width: 0;height: 0;border-left: 16px solid transparent;border-right: 16px solid rgba(255, 255, 255, 0);border-top: 16px solid #ffffff;top: 0px!important;"></div>
<div style="position: relative;margin: auto;content: ""width: 0;height: 0;border-left: 16px solid transparent;border-right: 16px solid transparent;border-top: 16px solid #2a8cdd;z-index: 999;top: -18px!important;"></div>
<div style="top: 5px;position: relative;">
<text msgid="yearlyPrice_alone" style="color: #ffffff;font-weight: bold;font-size: 70px;line-height: 60px;text-transform: uppercase;padding-top: 20px;display: block;">$2.99</text>
<br>
<text msgid="monthly" style="font-size: 30px;color: #ffffff;margin-top: -20px;display: block;">Monthly</text>
<text msgid="annual_billing" style="font-size: 15px;color: #ffffff;margin-top: 0px;display: block;">Annual Billing</text>
</div>
<div id="sesUpgradeButton" style="top: 0px;background-color: #49bd11;box-shadow: 0px 3px 0px #308404;position: relative;font-weight: 400;height: 45px;padding-top: 5px;padding-bottom: 5px;border-radius: 7px;text-align: center;font-size: 40px;text-transform: uppercase;color: white;cursor: pointer;transition: background 0.15s linear;padding-left: 0px;padding-right: 0px;width: 400px;margin: auto;margin-top: 30px;" >
<text msgid="upgrade_now">Upgrade Now</text>
</div>
</div>
<div id="checkoutStudentsTeachers1" style="display: none;color: #333333;width: 200px;height: 200px;margin: 15px;margin-left: 0px;margin-right: 30px;text-align: center;font-size: 25px;cursor: pointer;transition: background 0.15s linear;border-radius: 10px;border: solid;border-color: #ffffff;border-width: 1px;box-shadow: 3px 3px 12px rgba(0,0,0,0.44);">
<div style="position: relative;top: 30%;">
<text msgid="checkout_schools" style="font-size: 25px;">Offer for Schools</text>
</div>
<div id="priceButtonStudents" style="position: relative;top: 30%;">
<text msgid="upgrade_now">Upgrade Now</text>
</div>
</div>
</div>
<div id="featuresContainer" style="text-align: left;float: left;display: inline-block;margin-left: 50px;margin-top: 30px;">
<table id="featuresTable" style="margin-bottom: 10px;">
<tbody>
<tr style="font-size: 25px;color: #2a8cdd;">
<td colspan="2" style="padding-bottom: 15px;">
<text msgid="what_get_pro">Pro Version Features:</text>
</td>
</tr>
<tr style="font-size: 18px;color: #ffffff;font-weight: 100;">
<td style="padding-bottom: 15px;"><img src="<!--%img/icons/check-30.png%-->" style="padding-top: 6px;margin-right: 15px;"></td>
<td style="padding-bottom: 15px;">
<text msgid="unlimited_reading"><strong>Unlimited</strong> Words for non-stop Listening</text>
</td>
</tr>
<tr style="font-size: 18px;color: #ffffff;font-weight: 100;">
<td style="padding-bottom: 15px;"><img src="<!--%img/icons/check-30.png%-->" style="padding-top: 6px;margin-right: 15px;"></td>
<td style="padding-bottom: 15px;">
<text msgid="no_barriers">Read Text in 27 Different Languages</text>
</td>
</tr>
<tr style="font-size: 18px;color: #ffffff;font-weight: 100;">
<td style="padding-bottom: 15px;"><img src="<!--%img/icons/check-30.png%-->" style="padding-top: 6px;margin-right: 15px;"></td>
<td style="padding-bottom: 15px;">
<text msgid="fast_or_slow">Read Text at 21 Different Speed Settings</text>
</td>
</tr>
<tr style="font-size: 18px;color: #ffffff;font-weight: 100;">
<td style="padding-bottom: 15px;"><img src="<!--%img/icons/check-30.png%-->" style="padding-top: 6px;margin-right: 15px;"></td>
<td style="padding-bottom: 15px;">
<text msgid="read_autoplay">Autoplay Text - Fast and Easy</text>
</td>
</tr>
<tr style="font-size: 18px;color: #ffffff;font-weight: 100;">
<td style="padding-bottom: 15px;"><img src="<!--%img/icons/check-30.png%-->" style="padding-top: 6px;margin-right: 15px;"></td>
<td style="padding-bottom: 15px;">
<text msgid="detect_lang">Automatic Language Detection</text>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="sesContinue">
<div id="sesCountNumber" style="cursor: pointer;top: calc(50% - 0.5em);position: relative;font-size: 23px;text-align: center;color: #afafaf;text-decoration: underline;"></div>
</div>
</div>
</div>
</div>