@charset "UTF-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: open sans, sans-serif;
	font-weight: normal;
	xborder: 1px solid yellow;
}
html {
	scroll-behavior: smooth;
}
strong {
	font-weight:bold;
}
/* VARIOUS PLACEMENTS ****************************************************************************/
.clr {
	clear: both;
}
.shim-10 {
	height: 10px;
}
.shim-20 {
	height: 20px;
}
.shim-40 {
	height: 40px;
}l
.shim-60 {
	height: 60px;
}
.shim-80 {
	height: 80px;
}
.enroll-button-large {
	display: block;
	background-color: #df6c00;
	color: #ffffff;
	padding: 20px 10px;
	box-sizing: border-box;
	border-radius: 6px;
	margin: 0 auto;
	text-decoration: none;
	width: 96%;
	max-width: 400px;
	font-size: 20px;
	text-align: center;
}
.enroll-button-large:hover {
	filter: brightness(1.1);
}
.enroll-button-shadow {
	box-shadow: 0px 0px 19px 0px #2b63cc;
}
/* HEADER ****************************************************************************************/
header {
	width: 100%;
	background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
	background-color: #1a1a1a;
	background-size: 16px 16px;
}
header .content {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 20px 20px;
	position: relative;
}
header .top-menu {
	float: right;
	font-size: 12px;
	margin-top: -18px;
}

@media (max-width:599px) {
header .top-menu {
	display: none;
}
}
header .top-menu a {
	color: #ccc;
	text-decoration: none;
}
header .top-menu a:hover {
	text-decoration: underline;
}
header img {
	color: rgba(0,0,0,0);
	height: 46px;
	display: block;
}

@media (max-width:599px) {
header img {
	margin: 0 auto;
}
}
header .enroll {
	color: #fff;
	background-color: #df6c00;
	position: absolute;
	padding: 10px 20px;
	border-radius: 20px;
	top: 30px;
	right: 20px;
	text-decoration: none;
}
header .enroll:hover {
	filter: brightness(1.2);
}

@media (max-width:599px) {
header .enroll {
	display: none;
}
}
menu {
	width: 100%;
	background-color: #dddddd;
}
menu .content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	justify-content: center;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	background-color: #fff;
}

@media (max-width:1023px) {
menu .content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-row-gap: 2px;
}
}
menu .content:last-child {
	border-right: 2px #fff solid;
}
menu .content a {
	background-color: #dddddd;
	border-left: 2px #fff solid;
	padding: 20px;
	color: #000;
	text-decoration: none;
	text-align: center;
}
menu a:hover {
	background-color: #bbb;
}
@media (max-width:599px) {
	menu {
		display:none;
	}
}
/* HEROIC ****************************************************************************************/
.heroic {
	background-color: #1e4ca1;
	background-image: url(../images/bg-zippy.jpg);
	background-size: cover;
}
.heroic h1 {
	margin: 0 auto;
	padding: 40px 20px;
	font-weight: 400;
	line-height: 1.2;
	color: #ffffff;
	text-align: center;
	font-size: 3.0625rem;
	width: 100%;
	max-width: 800px;
}

@media (max-width:599px) {
.heroic h1 {
	font-size: 1.5em;
}
}
.heroic img {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 685px;
}
.heroic p {
	text-align: center;
	color: #eee;
}
.heroic .offer-applied {
	max-width: 600px;
}
/* ARTICLE **************************************************************************************/
article {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
}

@media (max-width:767px) {
article {
	padding: 0;
	width: 98%;
}
}
article h2 {
	font-size: 2rem;
	margin-bottom: 1.25rem;
	line-height: 1.2;
	color: #333;
}
article h3 {
	font-size: 1.2rem;
	margin-bottom: 0.4em;
	line-height: 1.2;
	font-weight:600;
}
article h6 {
	font-size: 1.1rem;
	margin-bottom: 1em;
	line-height: 1.2;
	font-weight:600;
	font-style:italic;
	text-align:center;
}
article p {
	font-size: 1.05rem;
	margin-bottom: 18px;
	line-height: 1.4;
	color: #333;
}
article ul {
	list-style: outside none none;
	margin-left: 20px;
	font-size: 1.1rem;
	margin-bottom: 18px;
	line-height: 1.4;
	color: #333;
}
article li {
	background: transparent url("/images/icon-bullet.png") no-repeat scroll left 8px / 11px auto;
	padding-left: 25px;
	line-height: 1.4;
}
article .margin-05em {
	margin-bottom: 0.5em;
}
article .highlighter {
	background-color: #FFC;
}
article .margin-1em {
	margin-bottom: 1em;
}
/* MODULE GRID ********************************************************************************/
article .module-grid .item {
}
article .module-grid p {
	float: left;
	background-color: #333;
	color: #fff;
	padding: 10px;
	font-size: 16px;
	margin: 0;
	width: 50%;
	height: 76px;
}

@media (max-width:599px) {
article .module-grid p, article .module-grid .left, article .module-grid .right {
	font-size: 14px;
}
}
article .module-grid .stripe {
	display: block;
	float: right;
	width: 50%;
	height: 76px;
	color:rgba(0,0,0,0);
}
article .module-grid .dvd-rom {
	display: block;
	float: right;
	width: 300px;
	padding: 10px;
	color:rgba(0,0,0,0);
}
article .module-grid .info {
	font-size: 15px;
	margin: 0;
	display: table;
	background-color: #eee;
	color: #333;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	padding: 20px;
	margin-bottom: 20px;
}

@media (max-width:767px) {
article .module-grid .info {
	padding: 10px;
}
}
article .module-grid .info .left {
	display: table-cell;
	width: 50%;
	box-sizing: border-box;
	padding-right: 20px;
}
article .module-grid .info .right {
	display: table-cell;
	width: 50%;
}
/* DVD GRD *********************************************************************************/
.dvd-grid {
}
.dvd-grid h3 {
	font-size: 18px;
}
.dvd-grid p {
	font-size: 14px;
}
.dvd-grid .item {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	background-color: #eee;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid #ccc;
}

@media (max-width:599px) {
.dvd-grid .item {
	padding: 6px;
	grid-column-gap: 6px;
}
}
.dvd-grid img {
	width: 75%;
}
/* SAMPLE PAGES *****************************************************************************/
.sample-pages img {
	width: 100%;
}
.preview-border {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
/* VIDEO ************************************************************************************/
.vid {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin: 2em 0 40px 0;
}
.vid iframe, .vid object, .vid embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* EXAMPLES ********************************************************************************/
article .examples iframe {
	width: 100%;
	margin-bottom: 20px;
}
/* TESTIMONIALS ****************************************************************************/
.testimonials img {
	width: 100%;
	display: block;
}
.testimonials .text {
	background-color: #333;
	color: #fff;
	width: 100%;
	padding: 20px;
}
/* ENROLLMENT PANEL *********************************************************************************/
.enrollment-panel {
	width: 100%;
	background-color: #3a67c2;
	padding: 40px 0;
}
@media (max-width:767px) {
	.enrollment-panel {
	padding:20px 10px;
		
	}
}
.enrollment-panel h2 {
	width: 100%;
	max-width: 984px;
	margin: 0 auto;
	color: #fff;
	margin-bottom: 1em;
	font-size: 40px;
	text-align: center;
}
@media (max-width:767px) {
	.enrollment-panel h2 {
		font-size:24px;
	}
}
.enrollment-panel .option-container {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 40px;
}

@media (max-width:840px) {
.enrollment-panel .option-container {
	width: 96%;
}
}

@media (max-width:767px) {
.enrollment-panel .option-container {
	grid-template-columns: 1fr;
	grid-row-gap: 20px;
}
}
.enrollment-panel .no-option-container {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

@media (max-width:840px) {
.enrollment-panel .no-option-container {
	width: 96%;
}
}
.enrollment-panel .option {
	border: 2px #fff solid;
	border-radius: 10px;
	color: #fff;
	text-align: center;
	padding: 20px;
	position: relative;
}
.enrollment-panel .best-value {
	position: absolute;
	right: 0;
	top: 0;
}
.enrollment-panel .option h3 {
	font-size: 32px;
}
@media (max-width:767px) {
	.enrollment-panel .option h3 {
		font-size:20px;
	}
}
.enrollment-panel .strikesmall {
	font-size:24px;
}
.enrollment-panel .price {
	font-size: 48px;
}
.enrollment-panel .small {
	font-size: 20px;
}
@media (max-width:599px) {
	.enrollment-panel .price {
		font-size:20px;
	}
	.enrollment-panel .small {
		font-size:20px;
	}
}
.enrollment-panel .enroll {
	display: block;
	background-color: #df6c00;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	padding: 20px 0;
	font-size: 24px;
	width: 80%;
	margin: 40px auto 20px auto;
}
.enrollment-panel .period {
}
.enrollment-panel .payment-options {
	margin-top: 40px;
	width: 66%;
	max-width: 300px;
}
.enrollment-panel .gotopaymentbutton {
	display: block;
	background-color: #df6c00;
	color: #fff;
	text-decoration: none;
	border: none;
	border-radius: 6px;
	padding: 20px 0;
	font-size: 24px;
	width: 80%;
	margin: 40px auto 20px auto;
	-webkit-appearance: none;
}
.enrollment-panel .gotopaymentbutton:hover {
	filter: brightness(1.2);
	cursor:pointer;
}
.enrollment-panel .guarantee {
	color: #fff;
	width: 100%;
	margin: 0 auto;
	max-width: 984px;
}

@media (max-width:1023px) {
.enrollment-panel .guarantee {
	width: 96%;
}
}
.enrollment-panel .guarantee h4 {
	font-size: 32px;
	font-weight: 700;
	margin-top: 40px;
	margin-bottom: 1em;
}
/* ABOUT ***********************************************************************************/

.testimonials p {
	font-size: 15px;
	line-height: 1.2;
	color: #fff;
}
/* FOOTER ****************************************************************************************/
footer {
	width: 100%;
	background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
	background-color: #1a1a1a;
	background-size: 16px 16px;
	padding: 20px;
}

@media (max-width:767px) {
footer {
	padding: 20px 2%;
}
}
footer a {
	color: #a0a4aa;
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}
footer .frow1, footer .frow2 {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	font-size: 14px;
	color: #a0a4aa;
	overflow: hidden; /* that's a fudge because of the wrong font size on the iPhone in frow1 */
}
.panel1 {
	grid-area: panel1;
	font-size: 14px;
}
.panel2 {
	grid-area: panel2;
}
.panel3 {
	grid-area: panel3;
}
.panel4 {
	grid-area: panel4;
	margin-bottom: 20px;
}
.panel5 {
	grid-area: panel5;
	margin-bottom: 20px;
}
.panel6 {
	grid-area: panel6;
	margin-bottom: 20px;
}
footer .frow1 {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-areas: "panel1 panel2 panel3" "panel4 panel5 panel6";
	grid-column-gap: 40px;
}

@media (max-width:767px) {
footer .frow1 {
	grid-template-columns: 1fr;
	grid-template-areas: "panel1" "panel4" "panel2" "panel5" "panel3" "panel6";
}
}
footer .frow1 img {
	margin-bottom: 20px;
}
footer .frow1 h2 {
	font-size: 18px;
	font-weight: bold;
}
footer .frow1 ul {
	list-style: none;
}
footer .frow1 li {
	line-height: 2;
}
.check-your-spam-folder {
	box-sizing:border-box;
	padding:20px;
	border:2px #cc0000 solid;
	font-weight:bold;
	text-align:center;
	font-size:17px !important;
}
/* strike through */
s, strike{text-decoration:none;position:relative;}
s::before, strike::before {
    top: 50%; /*tweak this to adjust the vertical position if it's off a bit due to your font family */
    background:red; /*this is the color of the line*/
    opacity:.7;
    content: '';
    width: 110%;
    position: absolute;
    height:.2em;
    border-radius:.1em;
    left: -5%;
    white-space:nowrap;
    display: block;
    transform: rotate(-15deg);  
}
s.straight::before, strike.straight::before{transform: rotate(0deg);left:-1%;width:102%;}