• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99

$(function(){


	// ******************************************************
	// WS-1967 - CHOOSE EXPERIENCE B OR C
	// ******************************************************
	var experience = 'b';



	
	var lang = window.lang || 'esp';



	// ******************************************************
	// MOBILE PRODUCTS
	// ******************************************************


	// insert mobile product test markup
	(function(){


		// put in mobile subscription products
		var mobile_products_subscription = '<style> /********************************* UTILITIES **********************************/ .zerofont{ font-size: 0px; } .hide_for_test{ display: none; } .show_for_test{ display: block; } /********************************* STRUCTURE **********************************/ .oct_2016_container{ font-family: gothambook, sans-serif; background-color: #F7F6F0; color: #333; padding: 40px 10px; text-align: center; font-size: 20px; } .oct_2016_col{ box-sizing: border-box; vertical-align: top; /*font-size: 16px;*/ font-size: 14px; display: inline-block; /*width: 50%;*/ margin: auto; max-width: 540px; text-align: left; padding: 20px; /*border: 1px dotted red;*/ } .oct_2016_section_header{ font-size: 24px; max-width: 650px; margin: 0px auto 20px; /*border: 1px dotted orange;*/ } .mar_2017_product_image_mobile{ width: 100%; height: 0px; margin-bottom: 15px; background-repeat: no-repeat; background-position: center top; background-size: contain; } .mar_2017_subscription_image_mobile{ padding-top: 58%; /* to control aspect ratio */ background-image: url(\'/assets/catalog_mar_2017/online-lockup.png\'); } .mar_2017_cddl_image_mobile{ padding-top: 56%; /* to control aspect ratio */ background-image: url(\'/assets/catalog_mar_2017/oct_2016_cddl.png\'); } .oct_2016_subscription_image{ background-image: url(\'/assets/catalog_mar_2017/online-lockup.png\'); background-repeat: no-repeat; background-position: center 18px; background-size: 90%; ; margin-top: 40px; } .oct_2016_cddl_image{ background-image: url(\'/assets/catalog_mar_2017/oct_2016_cddl.png\'); background-repeat: no-repeat; background-position: center 18px; background-size: 95%; padding-bottom: 340px; } .oct_2016_subscription_image, .oct_2016_cddl_image{ display: none; } @media(min-width:750px){ .oct_2016_col{ width: 50%; } } /********************************* REVIEW STARS **********************************/ .oct_2016_review_star_container{ margin: 10px 0px 15px; } .hollow_stars{ position: relative; display: inline-block; vertical-align: middle; font-size: 16px; } .filled_stars{ position: absolute; left: 0px; top: 0px; overflow: hidden; white-space: nowrap; width: 91.5%; } .oct_2016_review_star_text{ font-size: 14px; display: inline-block; vertical-align: bottom; } /********************************* BLUE THEME **********************************/ .oct_2016_blue_bg{ background-color: #4788BE; color: #fff; } .oct_2016_blue_bg .oct_2016_language_header{ /*color: #EFDC00;*/ } .oct_2016_blue_bg .oct_2016_product_intro{ font-family: gothamlight; } .oct_2016_blue_bg .oct_2016_ul li{ /*font-family: gothambook;*/ font-family: gothamlight; } .oct_2016_blue_bg  b{ font-family: gothambold; } .oct_2016_blue_bg .oct_2016_ul li:before{ border-color: #FABF2C; } .oct_2016_blue_bg .oct_2016_guarantee_line1{ color: #FABF2C; } .oct_2016_blue_bg .hollow_stars{ color: #FABF2C; } /********************************* GOLD THEME **********************************/ .oct_2016_gold_bg{ background-color: #FABF2C; color: #392E0B; } .oct_2016_gold_bg .oct_2016_language_header{ /*color: #27a;*/ } .oct_2016_gold_bg .oct_2016_ul li:before{ border-color: #4788BE; } .oct_2016_gold_bg .oct_2016_product_square{ /*background-color: #0098db; background-image: radial-gradient(#0088cb 83%,#0098db);*/ } .oct_2016_gold_bg .hollow_stars{ color: #4788BE; } /********************************* PRODUCT INFO **********************************/ .oct_2016_language_header, .oct_2016_language_subhead{ /*font-size: 30px;*/ font-size: 22px; } .oct_2016_language_header{ font-family: gothambold; } .oct_2016_language_subhead{ font-family: gothamlight; text-transform: uppercase; } .oct_2016_language_subhead span{ text-transform: none; } .oct_2016_product_info_square{ text-align: left; } .oct_2016_product_intro{ line-height: 1.3; } .oct_2016_ul{ margin: 25px 0px 0px; padding: 0px 0px 0px 30px; list-style-type: none; } .oct_2016_ul li{ position: relative; margin-bottom: 20px; /*font-size: 15px; font-family: gothambold;*/ } .oct_2016_ul li:before{ content: \'\'; position: absolute; left: -29px; top: 2px; display: inline-block; border: 2px solid #0098db; border-top: none; border-right: none; height: 8px; width: 18px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .rs_classic{ background-color: #392E0B; color: #fff; font-size: 20px; padding: 20px; font-family: gothamlight; text-align: center; text-transform: uppercase; position: relative; } .rs_classic span{ font-family: gothambold; } .rs_classic:after{ content: \'\'; border-top: 20px solid #392E0B; border-left: 26px solid transparent; border-right: 26px solid transparent; position: absolute; bottom: -20px; left: calc(50% - 26px); } @media(min-width:600px){ .rs_classic{ font-size: 24px; } } /********************************* PRODUCT OPTIONS - SQUARE **********************************/ .oct_2016_product_square{ border-radius: 8px; /* border: 1px solid #EBEAE6; background-color: #D6BD31; background-image: radial-gradient(#ca2 83%,#db3); */ background-color: #fff; margin: 9px; display: inline-block; color: #333; width: 245px; vertical-align: baseline; overflow: hidden; } .oct_2016_product_square:last-of-type{ /*margin-bottom: 0px;*/ } .oct_2016_product_square_content{ display: block; /*background-color: #fff; border-top-left-radius: 110px 30px;*/ padding: 0px; } .oct_2016_product_square_header{ text-transform: uppercase; font-family: gothambold; font-size: 16px; border-bottom: 1px solid #d7d7d7; padding: 10px; background-color: #f1f1f1; } .oct_2016_product_square_subhead{ text-transform: uppercase; font-family: gothamlight; font-size: 14px; } /********************************* PRICES - SQUARE **********************************/ .oct_2016_price_container_square{ vertical-align: middle; margin: 6px 0px 2px; } .oct_2016_price_container_square_cddl{ /*margin-bottom: 0px;*/ } .oct_2016_big_price_square{ font-size: 60px; vertical-align: baseline; /*color: #0078bb;*/ font-family: gothamlight; } .oct_2016_big_price_square:before{ content: \'$\'; vertical-align: top; /*font-size: 50%;*/ /*position: relative;*/ /*top: 5px;*/ } .oct_2016_big_price_square:after{ content: \' / Month\'; font-size: 14px; vertical-align: baseline; position: relative; top: -2px; font-family: gothambook; color: #333; } .oct_2016_big_price_square.no_month:after{ display: none; } /********************************* GIFTING - SQUARE **********************************/ .oct_2016_gifting_square, .oct_2016_gifting_square *{ vertical-align: middle; } .oct_2016_gifting_square{ font-size: 15px; margin-right: 3px; display: inline-block; /*background-image: url(\'/assets/catalog_mar_2017/gift-icon.svg\');*/ background-image: url(\'/assets/catalog_mar_2017/gift-icon.svg\'); background-repeat: no-repeat; background-position: left 50%; background-size: 17px; padding-left: 21px; margin: 16px auto; } /********************************* CART - SQUARE **********************************/ .oct_2016_addtocart_square{ vertical-align: middle; /*background: #0098db;*/ background-color: #34A4D9; color: #fff; border-radius: 3px; padding: 16px; text-transform: uppercase; text-decoration: none; font-size: 16px; font-family: gothambold; display: block; margin: 0px 24px; } .oct_2016_addtocart_square:hover{ background-color: #ecc200; color: #363636; text-decoration: none; } /********************************* MULTIPAY and MSRP - SQUARE **********************************/ .oct_2016_product_square_multipay{ font-size: 12px; margin: 0px -20px; } .oct_2016_multipay_strikeprice_square{ color: #d00; position: relative; } .oct_2016_multipay_strikeprice_square:after{ content: \'\'; position: absolute; width: 110%; left: -5%; top: 50%; border-top: 1px solid #d00; } .oct_2016_msrp_square{ font-size: 14px; margin-bottom: 10px; } /********************************* BEST VALUE **********************************/ .oct_2016_best_value{ font-size: 15px; text-transform: uppercase; font-family: gothambold; background-color: #efc344; color: #392E07; padding: 10px 0px; /*display: inline-block;*/ /*margin-bottom: 5px;*/ position: relative; line-height: 17px; } /* .oct_2016_best_value:before, .oct_2016_best_value:after{ content: \'\'; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border: 12px solid transparent; border-right: 0px; border-left: 7px solid #fff; } .oct_2016_best_value:after{ left: auto; right: 0px; border-left: 0px; border-right: 7px solid #fff; } */ /********************************* GUARANTEE **********************************/ .oct_2016_guarantee_vertical{ /*background-image: url(\'/assets/catalog_mar_2017/guarantee-badge.svg\');*/ background-image: url(\'/assets/catalog_mar_2017/guarantee-badge.svg\'); background-repeat: no-repeat;   background-position: center top; padding-top: 130px; margin-top: 20px; } .oct_2016_blue_bg .oct_2016_guarantee_vertical {   margin-right: 75px; }  @media (max-width: 1087px) {   .oct_2016_blue_bg .oct_2016_guarantee_vertical {     margin-bottom: 20px;     display: block;     margin-right: 0;   } }  .oct_2016_guarantee_line1{ font-size: 16px; text-transform: uppercase; color: #4788BE; font-family: gothambold; } .oct_2016_guarantee_line2{ font-size: 14px; } .meclabs_guarantee_proof {   display: inline-block;   vertical-align: bottom;   margin: 0px 20px;   border: 1px solid #fff;   padding: 20px 30px; } /*  @media screen and (max-width: 1112px) {            .meclabs_guarantee_proof {              margin-top: 30px;            }            .oct_2016_guarantee_vertical {              margin-right: 0;            }        } */ .meclabs_trusted {   font-size: 16px;   line-height: 1;   margin-bottom: 14px;   font-family: gothamlight; } .meclabs_trusted span {     font-family: gothambold;     text-transform: uppercase;     color: #FABF2C;     display: block;     padding-bottom: 3px; } .meclabs_guarantee_proof img {   vertical-align: middle;   padding: 0px 10px;   width: 20%; } /********************************* CD / DOWNLOAD BUTTONS **********************************/ .oct_2016_cd_download_container{ margin-bottom: 30px; } .oct_2016_cd_download_buttons{ display: inline-block; border: 2px solid #392E07; border-radius: 4px; } .oct_2016_cd_download_container label{ font-size: 16px; display: inline-block; padding: 16px 0px; text-transform: uppercase; cursor: pointer; font-family: gothambold; width: 100%; } .oct_2016_cd_download{ /*display: none;*/ position: absolute; left: -1000px; } .oct_2016_cd_download:checked + label{ background: #392E07; color: #fff; } @media(min-width: 560px){ .oct_2016_cd_download_buttons{ width: 460px; } .oct_2016_cd_download_container label{ width: 50%; } } .accessibility_legend{ display: none; } .comparison_chart_link {     text-align: center;     font-size: 20px; } .comparison_chart_link span {     cursor: pointer;     text-decoration: underline; } .oct_2016_blue_bg .comparison_chart_link {     color: #EFDC00; padding-top: 52%; text-align: center; width: 100%;     font-family: gothammedium; } .oct_2016_gold_bg .comparison_chart_link {     color: #4788BE; padding: 0 0 50px 0; margin-top: 0px;     font-family: gothammedium; } .meclabs_cd_title .comparison_chart_link {     padding-top: 0px;     margin-bottom: 20px; } @media(max-width: 743px) {             .comparison_chart_link {                 display: none !important;             }         } .expand_box_svg {     width: 25px;     height: 25px;     vertical-align: middle;     cursor: pointer;     margin-left: 5px; } .expand_box_svg * {     stroke: #fff;     stroke-width: 4;     stroke-linejoin: round;     fill: none; } .oct_2016_gold_bg .expand_box_svg * {     stroke: #4788BE; } .comparison_chart_link .js_open_comparison_chart {     padding-bottom: 0px } .comparison_chart_container {     z-index: 1000;     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     text-align: center;     overflow: scroll;     display: none; } @media(max-width: 743px) {     .comparison_chart_container {         display: none !important;     } } .comparison_chart_bg_overlay {     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(33, 33, 33, 0.8); } .comparison_chart {     z-index: 1001;     display: inline-block;     margin-top: 40px;     /*width: 800px; max-width: 100%;*/     width: 100%;     max-width: 1000px; } .comparison_table_container {     font-family: gothambook;     color: #333;     padding: 60px 30px 20px 30px;     background: #f9f9f9;     border-radius: 8px; } .comparison_chart table {     width: 100%;     text-align: center;     border-collapse: collapse; } .comparison_chart td, .comparison_chart th {     width: 15%;     text-align: center;     border-bottom: 1px solid #999;     border-right: 1px solid #999; } .comparison_chart td:first-of-type, .comparison_chart th:first-of-type {     width: 40%;     padding-left: 45px; } .td_subtitle {     color: #aaa; } .comparison_chart td:first-of-type {     background-repeat: no-repeat;     background-position: 5px center; } .comparison_chart td.comparison_best {     background-image: url(\'/assets/stone-icon.svg\');     background-position: 10px center; } .comparison_truaccent {     background-image: url(\'/assets/truaccent-icon.svg\'); } .comparison_adaptive {     background-image: url(\'/assets/adaptive-recall-icon.svg\'); } .comparison_offline {     background-image: url(\'/assets/offline-access-icon.svg\'); } .comparison_instant {     background-image: url(\'/assets/instant-access-icon.svg\'); } .comparison_award {     background-image: url(\'/assets/award-winning-icon.svg\'); } .comparison_anydevice {     background-image: url(\'/assets/any-device-icon.svg\'); } .comparison_updates {     background-image: url(\'/assets/updates-icon.svg\'); } .comparison_tutoring {     background-image: url(\'/assets/tutors-icon.svg\'); } .comparison_phrasebook {     background-image: url(\'/assets/phrasebook-icon.svg\'); } .comparison_chart th {     font-size: 14px;     text-transform: uppercase;     font-family: gothambold;     font-weight: normal;     padding-bottom: 10px;     vertical-align: bottom; } .comparison_chart td {     font-size: 14px;     height: 2.2em;     padding: 0.5em; } .comparison_chart td:first-of-type {     text-align: left; } .comparison_chart th:last-of-type, .comparison_chart td:last-of-type {     border-right: none; } .th_subscription_img {     max-width: 110px; } .th_download_img {     max-width: 80px; } .th_cd_img {     max-width: 90px;     display: inline-block;     margin-bottom: 5px; } .comparison_chart td.asterisk_td {     text-align: right;     border: none;     color: #888;     font-family: gothamlight;     font-size: 13px;     padding-top: 15px;     background-image: none; } .comparison_asterisk_img {     /*display: block;*/     position: relative;     display: inline-block; } .comparison_asterisk_img:after {     content: \'*\'; position: absolute; top: 2px; right: -10px; } .comparison_table_container{ position: relative; } .comparison_close_x{ position: absolute; top: 20px; right: 20px; z-index: 1002; cursor: pointer; width: 40px; height: 40px; } .comparison_close_x svg{ width: 100%; height: 100%; } .meclabs_cd_close {         position: absolute;         top: 20px;         right: 10%;         color: #E9D600;         cursor: pointer;     }     .meclabs_cd_close:hover {         color: #fff;     }     .cddl_test_link_container{ padding: 20px 0px; font-size: 14px; }     .cddl_test_link_container a{ color: #0098db; text-decoration: none; }     .cddl_test_link_container a:hover{ color: #1ae; } @media(min-width:600px){ .oct_2016_col{ font-size: 16px; } .oct_2016_language_header, .oct_2016_language_subhead{ font-size: 30px; } .oct_2016_review_star_container{ margin: 10px 0px 30px; } .oct_2016_product_square_content{ padding: 0 0 24px; } .oct_2016_product_square_header{ padding: 24px; } .oct_2016_price_container_square{ margin: 20px 0px 10px; } .oct_2016_msrp_square{ margin-bottom: 18px; } .oct_2016_gifting_square{ margin: 20px auto 12px; } .oct_2016_guarantee_vertical{ padding-top: 140px; margin-top: 50px; } .oct_2016_guarantee_line1{ font-size: 18px; } .oct_2016_guarantee_line2{ font-size: 16px; } } @media(min-width:750px){ .mar_2017_product_image_mobile{ display: none; } .oct_2016_subscription_image, .oct_2016_cddl_image{ display: inline-block; } .oct_2016_gold_bg .oct_2016_cddl_image, .oct_2016_gold_bg .oct_2016_product_intro, .oct_2016_gold_bg .oct_2016_ul , .oct_2016_review_star_container { display: none; } .oct_2016_gold_bg .oct_2016_product_info_square { text-align: center; } } /*********************************************************** MOBILE PRODUCTS ************************************************************/ .mobile_products_container{ display: none; } @media(max-width: 560px){ /********************************* MOBILE PRODUCTS - SHOW vs HIDE **********************************/ .oct_2016_product_square, .oct_2016_container .oct_2016_guarantee_vertical, .cddl_row_1, .js_product_boxes_desktop{ display: none; } .mobile_products_container{ display: block; } /********************************* MOBILE PRODUCTS - MISC STYLES **********************************/ .oct_2016_gold_bg{ padding-bottom: 10px; } /********************************* MOBILE PRODUCTS **********************************/ .mobile_products_container{ padding: 0px 10px; } .mobile_product_label{ box-sizing: border-box; font-size: 16px; background-color: #fff; color: #382E0F; border-radius: 5px; padding: 20px; display: block; text-align: right; cursor: pointer; margin: 10px auto 0px; max-width: 370px; } .mobile_product_label:hover{ background-color: #fffdee; } .mobile_radio{ display: none; } .mobile_radio + span{ width: 22px; height: 22px; border-radius: 50%; display: inline-block; border: 2px solid #4696D1; background-color: #fff; vertical-align: middle; position: relative; } .mobile_radio:checked + span{ background-color: #4696D1; } .mobile_radio:checked + span:after{ content: \'\'; display: block; position: absolute; left: 5px; top: 6px; width: 10px; height: 5px; border: 2px solid #fff; border-top: none; border-right: none; -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .mobile_product_name_container{ float: left; vertical-align: middle; position: relative; top: -2px; left: -4px; } .mobile_product_name{ vertical-align: middle; margin-left: 5px; font-family: gothambold, sans-serif; } .mobile_prices_container{ vertical-align: middle; } .mobile_msrp{ position: relative; color: #d00; margin-right: 5px; } .mobile_msrp:after{ content: \'\'; position: absolute; width: 110%; left: -5%; top: 50%; border-top: 1px solid #d00; } .mobile_price{ font-family: gothambold, sans-serif; } .mobile_msrp:before, .mobile_price:before{ content: \'$\'; } /********************************* MOBILE GIFTING **********************************/ .mobile_gifting, .mobile_gifting *{ vertical-align: middle; } .mobile_gifting{ font-size: 15px; margin-right: 3px; display: inline-block; /*background-image: url(\'/assets/catalog_mar_2017/gift-icon.svg\');*/ background-image: url(\'/assets/catalog_mar_2017/gift-icon.svg\'); background-repeat: no-repeat; background-position: left 50%; background-size: 17px; padding-left: 21px; margin: 20px auto; } /********************************* MOBILE ADD TO CART **********************************/ .addtocart_mobile{ box-sizing: border-box; vertical-align: middle; background-color: #EFC344; color: #363636; border-radius: 5px; padding: 20px; text-transform: uppercase; text-decoration: none; font-size: 16px; font-family: gothambold; display: block; margin: 0px auto; max-width: 370px; transition: all 0.3s; } .addtocart_mobile:hover{ background-color: #fff0cc; color: #363636; text-decoration: none; } .oct_2016_gold_bg .addtocart_mobile{ background-color: #4788BE; color: #fff; } .oct_2016_gold_bg .addtocart_mobile:hover{ background-color: #e2f3ff; color: #363636; } /********************************* MOBILE GUARANTEE **********************************/ .mobile_guarantee{ /*background-image: url(\'/assets/catalog_mar_2017/guarantee-badge.svg\');*/ background-image: url(\'/assets/catalog_mar_2017/guarantee-badge.svg\'); background-repeat: no-repeat;   background-position: center top; background-size: auto 100px; padding-top: 120px; margin: 30px auto; font-family: gothambook, sans-serif; font-size: 16px; color: #fafafa; } .oct_2016_gold_bg .mobile_guarantee{ color: #363636; } /********************************* MOBILE GUARANTEE PROOF **********************************/ .meclabs_guarantee_proof_mobile{ margin: 0px 20px; border: 1px solid #fff; } .meclabs_guarantee_proof{ margin: 0px 20px; border: none; margin-left: -10px; margin-right: -10px; padding: 40px 0px; overflow: hidden; position: relative; background-color: #3E77A6; display: block; } .meclabs_guarantee_proof:before{ content: \'\'; display: block; position: absolute; left: 0px; top: 0px; width: 100%; box-shadow: 0px 0px 5px 0px rgba(33,33,33,0.9); height: 1px; } .meclabs_trusted{ margin-bottom: 30px; } .meclabs_guarantee_proof img{     width: 24%;     max-width: 100px; } .oct_2016_blue_bg{ padding-bottom: 0px; } /********************************* CLASSIC CLOSE **********************************/ .js_rs_classic_close{ width: 22px; height: 22px; border-radius: 50%; background-color: #4696D1; border: 2px solid #4696D1; vertical-align: middle; display: block; margin: auto; position: relative; top: 10px; cursor: pointer; } .js_rs_classic_close:after, .js_rs_classic_close:before{ content: \'\'; display: block; position: absolute; left: 18%; top: 45%; width: 65%; height: 0px; border-bottom: 2px solid #fff; border-top: none; border-right: none; } .js_rs_classic_close:before{ -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .js_rs_classic_close:after{ -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /********************************* CD DOWNLOAD TOGGLE - MOBILE **********************************/ .oct_2016_cd_download_container{ padding: 0px 10px; } .oct_2016_cd_download_buttons{ max-width: 370px; box-sizing: border-box; } .oct_2016_cd_download_container label{ text-align: left; position: relative; box-sizing: border-box; padding-left: 47px; } .oct_2016_cd_download_container label:before{ content: \'\'; position: absolute; left: 10px; top: 12px; width: 22px; height: 22px; border-radius: 50%; display: inline-block; border: 2px solid #392E07; vertical-align: middle; } .oct_2016_cd_download:checked + label:before{ background-color: #4696D1; border: 2px solid #4696D1; } .oct_2016_cd_download:checked + label:after{ content: \'\'; display: block; position: absolute; left: 17px; top: 20px; width: 10px; height: 5px; border: 2px solid #fff; border-top: none; border-right: none; -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } } </style> <!--********************************************* mobile products subscription start **********************************************--> <div class="mobile_products_container js_oct_2016_product"> <!-- 24-month --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile" type="radio" name="js_mobile_subscription_radios" data-lvl="24" data-media="subscription" autocomplete="off" checked><span></span> <span class="mobile_product_name">24 Months</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price" data-is-msrp="true" data-lvl="24" data-media="subscription">XX</span> <span class="mobile_price js_oct_2016_price no_month" data-lvl="24" data-media="subscription">XX</span> </span> </label> <!-- 12-month --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile" type="radio" name="js_mobile_subscription_radios" data-lvl="12" data-media="subscription" autocomplete="off"><span></span> <span class="mobile_product_name">12 Months</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price" data-is-msrp="true" data-lvl="12" data-media="subscription">XX</span> <span class="mobile_price js_oct_2016_price no_month" data-lvl="12" data-media="subscription">XX</span> </span> </label> <!-- 6-month --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile" type="radio" name="js_mobile_subscription_radios" data-lvl="06" data-media="subscription" autocomplete="off"><span></span> <span class="mobile_product_name">6 Months</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price" data-is-msrp="true" data-lvl="06" data-media="subscription">XX</span> <span class="mobile_price js_oct_2016_price no_month" data-lvl="06" data-media="subscription">XX</span> </span> </label> <!-- 3-month --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile" type="radio" name="js_mobile_subscription_radios" data-lvl="03" data-media="subscription" autocomplete="off"><span></span> <span class="mobile_product_name">3 Months</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price" data-is-msrp="true" data-lvl="03" data-media="subscription">XX</span> <span class="mobile_price js_oct_2016_price no_month" data-lvl="03" data-media="subscription">XX</span> </span> </label> <!-- gifting --> <label class="mobile_gifting"><input autocomplete="off" class="js_oct_2016_gifting" autocomplete="off" type="checkbox"> <span>Give as a gift!</span></label> <!-- cart --> <a href="#" class="addtocart_mobile js_oct_2016_addtocart js_addtocart_mobile" data-lvl="24" data-media="subscription" data-lang="'+lang+'" data-gifting="">Add to Cart</a> <!-- guarantee --> <div class="mobile_guarantee"> 30-Day Money-Back Guarantee </div> </div> <!--********************************************* mobile products subscription end **********************************************--> ';
		$('.oct_2016_product_square:eq(0)').parent()
			.addClass('js_product_boxes_desktop')
			.before(mobile_products_subscription);


		// put in mobile cd/download products
		var mobile_products_cddl = '<!--********************************************* mobile products cd/download start **********************************************--> <div class="mobile_products_container js_oct_2016_product"> <!-- Levels 1-5 --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile js_cddl_media" type="radio" name="js_mobile_cddl_radios" data-lvl="S5" data-media="download" autocomplete="off" checked><span></span> <span class="mobile_product_name">Levels 1-5</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price js_cddl_media" data-is-msrp="true" data-lvl="S5" data-media="download">XX</span> <span class="mobile_price js_oct_2016_price js_cddl_media no_month" data-lvl="S5" data-media="download">XX</span> </span> </label> <!-- Levels 1-3 --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile js_cddl_media" type="radio" name="js_mobile_cddl_radios" data-lvl="S3" data-media="download" autocomplete="off"><span></span> <span class="mobile_product_name">Levels 1-3</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price js_cddl_media" data-is-msrp="true" data-lvl="S3" data-media="download">XX</span> <span class="mobile_price js_oct_2016_price js_cddl_media no_month" data-lvl="S3" data-media="download">XX</span> </span> </label> <!-- Level 1 --> <label class="mobile_product_label"> <span class="mobile_product_name_container"> <input class="mobile_radio js_radio_lvl_mobile js_cddl_media" type="radio" name="js_mobile_cddl_radios" data-lvl="L1" data-media="download" autocomplete="off"><span></span> <span class="mobile_product_name">Level 1</span> </span> <span class="mobile_prices_container"> <span class="mobile_msrp js_oct_2016_price js_cddl_media" data-is-msrp="true" data-lvl="L1" data-media="download">XX</span> <span class="mobile_price js_oct_2016_price js_cddl_media no_month" data-lvl="L1" data-media="download">XX</span> </span> </label> <!-- gifting --> <label class="mobile_gifting"><input autocomplete="off" class="js_oct_2016_gifting" autocomplete="off" type="checkbox"> <span>Give as a gift!</span></label> <!-- cart --> <a href="#" class="addtocart_mobile js_oct_2016_addtocart js_addtocart_mobile js_cddl_media" data-lvl="S5" data-media="download" data-lang="'+lang+'" data-gifting="">Add to Cart</a> <!-- guarantee --> <div class="mobile_guarantee"> 30-Day Money-Back Guarantee </div> </div> <!--********************************************* mobile products cd/download end **********************************************-->';
		$(mobile_products_cddl).insertBefore('.comparison_chart_container');



		// wrap cddl products in js_product_boxes_desktop div (for styling and script purposes)
		$('.oct_2016_gold_bg .zerofont:eq(0)').append('<div class="js_product_boxes_desktop"></div>');
		$('.oct_2016_gold_bg .js_product_boxes_desktop').append($('.oct_2016_gold_bg .oct_2016_product_square'));
	})();



	// close mobile cd/download products when x clicked
	$('.rs_classic').append('<div class="js_rs_classic_close"></div>');
	$('.js_rs_classic_close').on('click', function(){
		$('.cddl_test_link_container').slideDown();
		$('.rs_classic, .oct_2016_gold_bg').slideUp();
	});


	// update prices and cart buttons for new mobile product elements
	$(document).trigger('price_update');
	$(document).trigger('cart_update');






	// ******************************************************
	// NEW FEATURES TOGGLE - experience c only
	// ******************************************************

	// if experience is c (upper or lower case both fine)
	if(/^c$/i.test(experience)){

		// insert mobile new features toggle
		(function(){
			var html = '<style> .mobile_new_features_toggle_container{ display: none; background-color: #F4C12E; text-align: center; font-size: 16px; padding: 20px; position: relative; z-index: 1; } @media(max-width: 600px){ .new_features{ display: none; } .mobile_new_features_toggle_container{ display: block; } } .mobile_new_features_toggle_container:after { content: \'\'; border-top: 20px solid #F4C12E; border-left: 26px solid transparent; border-right: 26px solid transparent; position: absolute; bottom: -20px; left: calc(50% - 26px); -ms-transform: scaleY(0); -ms-transform-origin: top; -ms-transition: transform 0.3s; -o-transform: scaleY(0); -o-transform-origin: top; -o-transition: transform 0.3s; -moz-transform: scaleY(0); -moz-transform-origin: top; -moz-transition: transform 0.3s; -webkit-transform: scaleY(0); -webkit-transform-origin: top; -webkit-transition: transform 0.3s; transform: scaleY(0); transform-origin: top; transition: transform 0.3s; } .mobile_show_down_arrow:after{ -ms-transform: scaleY(1); -o-transform: scaleY(1); -moz-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } .mobile_new_features_title{ text-transform: uppercase; font-family: gothambold, sans-serif; } .mobile_new_features_subtitle{ text-transform: uppercase; } .js_mobile_features_open{ color: #0098db; margin-top: 16px; display: inline-block; } .mobile_features_toggle{ position: relative; } .js_mobile_features_close_container{ position: absolute; left: 0px; top: 3px; width: 100%; display: none; } .js_mobile_features_close{ width: 22px; height: 22px; border-radius: 50%; background-color: #4696D1; border: 2px solid #4696D1; vertical-align: middle; display: inline-block; margin: auto; position: relative; top: 10px; cursor: pointer; } .js_mobile_features_close:after, .js_mobile_features_close:before{ content: \'\'; display: block; position: absolute; left: 18%; top: 45%; width: 65%; height: 0px; border-bottom: 2px solid #fff; border-top: none; border-right: none; } .js_mobile_features_close:before{ -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .js_mobile_features_close:after{ -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } </style> <div class="mobile_new_features_toggle_container"> <div class="mobile_new_features_title"> New Features </div> <div class="mobile_new_features_subtitle"> For Rosetta Stone Online&nbsp;Subscriptions! </div> <div class="mobile_features_toggle"> <a href="#" class="js_mobile_features_open"> See what\'s new </a> <div class="js_mobile_features_close_container"> <div class="js_mobile_features_close"></div> </div> </div> </div> ';
			$(html).insertBefore('.new_features');
		})();

		// open new features on mobile
		$('.js_mobile_features_open').on('click', function(e){
			e.preventDefault();
			$('.js_mobile_features_close_container').fadeIn();
			$('.js_mobile_features_open').animate({'opacity':'0'});
			$('.new_features').slideDown();

			$('.mobile_new_features_toggle_container').addClass('mobile_show_down_arrow');
		});

		// close new features on mobile
		$('.js_mobile_features_close').on('click', function(){
			$('.js_mobile_features_close_container').fadeOut();
			$('.js_mobile_features_open').animate({'opacity':'1'});
			$('.new_features').slideUp();

			$('.mobile_new_features_toggle_container').removeClass('mobile_show_down_arrow');
		});

	}



});