@charset "ISO-8859-1";

body {font-family: Arial, Helvetica, sans-serif; }


@media (max-width: 740px){
	
	body {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0f9ff+87,cbebff+94,a1dbff+100 */
			background: linear-gradient(to right,  rgba(240,249,255,1) 87%,rgba(203,235,255,1) 94%,rgba(161,219,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		}
	
	a.button {align-self: center;
		display: block;
	    width: 12em;
	    height: 1em;
	    background: rgba(252, 223, 0, 1);
	    padding-left: 1em;
	    padding-top: 0.5em;
	    padding-right: 1em;
	    padding-bottom: 0.5em;
	    text-align: center;
	    text-decoration: none;
	    border-radius: 7px;
	    color: rgb(255, 0, 0);
	    font-weight: bold;
	    line-height: 1.2; 
	 }
	
	#head {display: flex; flex-direction: column; justify-content: space-evenly; padding-left: 0.5em; padding-top: 0.25em; padding-right: 0.5em; padding-bottom: 0.25em; background: rgba(3, 181, 252, 0.8); }
	#head a {text-decoration: none; color: rgb(128,128,128); }
	#head a:link {color: rgb(128,128,128); }
	#head a:active {color: rgb(128,128,128); }
	#head a:visited {color: rgb(128,128,128); } 
	#head a:hover {color: rgb(128,128,128); }
	#head h1 {margin: 0; padding: 0; display: flex-item; align-self: center; color: rgb(0,0,0); }
	#head form {display: flex-item; align-self: center; }
	#head form input {width:8em; font-size: 8pt; }
	
	#head a.button {display: flex-item; align-self: center;
		display: block;
	    width: 12em;
	    height: 1em;
	    background: rgba(252, 223, 0, 1);
	    padding-left: 1em;
	    padding-top: 0.5em;
	    padding-right: 1em;
	    padding-bottom: 0.5em;
	    text-align: center;
	    text-decoration: none;
	    border-radius: 4px;
	    color: rgb(255, 0, 0);
	    font-weight: bold;
	    font-size: 8pt;
	    line-height: 1.2; 
	 }
		
	#mainpanel {padding: 1em; }
	
	#wizframe {width: 98%; margin-left: auto; margin-right: auto; margin-bottom: 20em; }
	#email {width: 12em; }
	
	#menu {margin: 0; padding: 0; padding-top: 0.5em; padding-bottom: 0.5em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
	background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
	}
	#menu li {list-style-type: none; font-size: 12pt; display: inline; padding-top: 0.5em; padding-bottom: 0.5em; 
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
	background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-right: 3px groove rgb(255,255,255);
	 }
	#menu li:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b7deed+0,71ceef+50,21b4e2+51,b7deed+100;Shape+1+Style */
	background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: rgb(252, 252, 0); text-shadow: 1px 1px 2px #c0c0c0;
	 }
	 #menu li.cur {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b7deed+0,71ceef+50,21b4e2+51,b7deed+100;Shape+1+Style */
	background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
	 }
	 
	#menu li a {text-decoration: none; font-weight: bold; width: 100%; padding-left: 1em; padding-top: 0.5em; padding-right: 1em; padding-bottom: 0.5em; }
	
	#menu li a:link {color: rgb(128,128,128); }
	#menu li a:active {color: rgb(128,128,128); }
	#menu li a:visited {color: rgb(128,128,128); } 
	#menu li a:hover {color: rgb(252, 252, 0); text-shadow: 1px 1px 2px rgb(0, 0, 255); }
	#menu li.cur a {color: rgb(253, 240, 0); text-shadow: 1px 1px 2px #000000; }
	
	#coursemenu {margin: 0; padding: 0; width: 80%; margin-left: auto; margin-right: auto; text-align: center; border-radius: 12px; }
	#coursemenu li {border-radius: 12px; list-style-type: none; padding-top: 3em; padding-bottom: 3em; background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); margin-bottom: 1em; }
	#coursemenu li:hover {
							background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
							color: rgb(252, 252, 0); text-shadow: 1px 1px 2px #c0c0c0;
	 }
	#coursemenu li a {text-decoration: none; color: rgb(128,128,128); font-weight: bold; font-size: 14pt; padding-left: 1em; padding-top: 0.5em; padding-right: 1em; padding-bottom: 0.5em; }
	#coursemenu li a:link {color: rgb(128,128,128); }
	#coursemenu li a:active {color: rgb(128,128,128); }
	#coursemenu li a:visited {color: rgb(128,128,128); } 
	#coursemenu li a:hover {color: rgb(252, 252, 0); text-shadow: 1px 1px 2px rgb(0, 0, 255); }
	
	div.banner {width: 88%; margin-left: auto; margin-right: auto; margin-bottom: 2em; text-align: center; color: rgba(100,100,100, 0.5); }
	div.banner h3 {font-style: italic; font-weight: normal; font-size: 24pt; }
	div.banner p {font-size: 14pt; }
	div.banner a {display: inline; }
	
	#mainpanel {background: rgba(242, 242, 242, 0.2); }
	
	#previewframe {width: 100%; height: 63em; border: none; }
	
	#vidcon {position: relative; overflow: hidden; width: 90%; margin-left: auto; margin-right: auto; padding-top: 56.25%;}
	#vidcon iframe.videolink {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
	
	div.businessnamediv {width: 90%; margin-left: auto; margin-right: auto; }
	
	div.businesspreview {background: rgba(255, 255, 255, 0.4); border-radius: 10px; box-shadow: 10px 10px 60px #555; }
	div.businessname {text-align: center; font-size: 36pt; padding-top: 1em; padding-bottom: 1em; }
	
	div.businessname a {color: rgb(0,0,0); text-decoration: none;}
	div.businessname a:link {color: rgb(0,0,0); }
	div.businessname a:active {color: rgb(0,0,0); }
	div.businessname a:visited {color: rgb(0,0,0); } 
	div.businessname a:hover {color: rgb(0,0,0); }
	
	img.businesslogo {height: 175px; }
	input.imageoption {display: inline; margin-right: 2em; }
	
	#headingoptions {width: 100%; }
	#headingoptions div.headingoption {border: 1px solid rgb(128,128,128); border-radius: 12px; padding:0.5em; margin-bottom: 0.5em; }
	#headingoptions div.headingoption label {display: block; }
	h1.businessname {font-size: 42pt; width: 80%; margin-left: auto; margin-right: auto; padding: 0; margin: 0; margin-bottom: 12px; }
	img.businesslogo {height: 80px; }
	input.imageoption {display: inline; margin-left: 2em; }
	div.businessnamediv {width: 80%; height: 1em; margin-bottom: 12px; }
	p.businessnam {padding: 0; margin: 0; margin-bottom: 12px; }
	
	p.courseheading {width: 90%; margin-left: auto; margin-right: auto; font-size: 18pt; font-weight: bold; }
	p.coursesubheading {width: 90%; margin-left: auto; margin-right: auto; font-size: 14pt; margin-top: 0.5em;}
	p.courseparagraph {width: 90%; margin-left: auto; margin-right: auto; line-height: 1.2; margin-bottom: 2em; }
	div.coursequestion {width: 90%; margin-left: auto; margin-right: auto; line-height: 1.2; margin-top: 1em; }
	div.question {margin-bottom: 1em; }
	div.answers {margin-bottom: 1em; }
	
	div.formfield p.error {display: inline; font-size: 8pt; color: rgb(255, 0, 0); }
	
	#dashitems {display: flex; flex-direction: row; flex-wrap: wrap; }
	fieldset.frame {display: flex-item; flex-grow: 1; background: rgba(0, 125, 255, 0.1); }
	fieldset.Calframe {display: flex-item; flex-grow: 2; background: rgba(0, 125, 255, 0.1); }
	fieldset.courseframe {background: rgba(255, 255, 255, 0.1); }
	
	fieldset.frame {border-radius: 12px; margin-bottom: 1em; padding: 0.5em; border: 1px solid rgba(0, 128, 255, 0.3); }
	fieldset.Calframe {border-radius: 12px; margin-bottom: 1em; padding: 1.5em; border: 1px solid rgba(0, 128, 255, 0.3); }
	fieldset.courseframe {border-radius: 12px; margin-bottom: 1em; padding: 1.5em; border: 1px solid rgba(0, 128, 255, 0.3); }
	
	fieldset.frame legend {font-weight: bold; font-size: 10pt; padding-bottom: 0.7em; color: rgba(0, 128, 255, 0.5); }
	fieldset.frame fieldset form {margin-bottom: 2em; }
	fieldset.courseframe legend {font-weight: bold; font-size: 10pt; padding-bottom: 0.7em; color: rgba(0, 128, 255, 0.5); }
	
	fieldset.frame p.about {width: 94%; margin-left: auto; margin-right: auto; line-height: 1.2em; }
	fieldset.frame h2.about {width: 94%; margin-left: auto; margin-right: auto;}
	
	div.leftmailframe {width: 26em; }
	div.leftmailframe label {display: inline-block; width: 5em; margin-right: 1em; text-align: right; }
	div.leftmailframe input {width: 20em; }
	
	div.righttmailframe {width: 6em; text-align: left; }
	input.submitsend {margin: 2em; width: 5em; height: 5em; cursor: pointer; }
	
	#mailframe {width: 48%;  }
	textarea.message {
		  width: 50%;
		  height: 150px;
		  padding: 12px 20px;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 10px;
		  background-color: #f8f8f8;
		  resize: none;
		  font-family: Arial, Helvetica, sans-serif;
		}
	
	textarea.formtextarea {
		  width: 50%;
		  height: 150px;
		  padding: 12px 20px;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 10px;
		  background-color: #f8f8f8;
		  resize: none;
		  font-family: Arial, Helvetica, sans-serif;
		}
	
	#business {width: 25em; }
	
	img.logo {height: 2em; }
	#settings iframe {border: 0; width: 30em; height: 20em; overflow: hidden; }
	#settings fieldset {margin-top: 1.6em; }
	span.info {font-size: 8pt; color: rgb(100, 100, 100); }
	#paymenthistory table {width: 100%; }
	#paymenthistory table td {text-align: center; }
	
	input.button {margin-top: 1em; padding-left: 1em; padding-top: 0.25em; padding-right: 1em; padding-bottom: 0.25em; border-radius: 10px; color: rgb(128, 128, 128);
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
		background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		
	}
	
	input.button:hover {background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: rgb(252, 252, 0); text-shadow: 1px 1px 2px #c0c0c0; cursor: pointer;
	}
	
	#subaccount label.radio {display: inline; }
	#subaccount label.norm {display: block; margin-top: 0.25em; }
	
	label.selector {display: block; }
	
	div.mediaplayer {position: relative; overflow: hidden; width: 88%; margin-left: auto; margin-right: auto; padding-top: 56.25%;}
	div.mediaplayer video {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: auto; }
	
	#footerpanel {background: rgb(128,128,128); }
	
	#footer {margin: 0; padding: 0; width: 100%; height: 11em; text-align: center; padding-top: 1em; }
	
	#footermenu a {text-decoration: none; }
	#footermenu a:link {color: rgb(255,255,255); }
	#footermenu a:active {color: rgb(255,255,255); }
	#footermenu a:visited {color: rgb(255,255,255); } 
	#footermenu a:hover {color: rgb(255,255,255); }
	
	
}

@media (min-width: 740px) {
	
	body {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0f9ff+87,cbebff+94,a1dbff+100 */
			background: linear-gradient(to right,  rgba(240,249,255,1) 87%,rgba(203,235,255,1) 94%,rgba(161,219,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		}
	
	a.button {align-self: center;
		display: block;
	    width: 12em;
	    height: 1em;
	    background: rgba(252, 223, 0, 1);
	    padding-left: 1em;
	    padding-top: 0.5em;
	    padding-right: 1em;
	    padding-bottom: 0.5em;
	    text-align: center;
	    text-decoration: none;
	    border-radius: 7px;
	    color: rgb(255, 0, 0);
	    font-weight: bold;
	    line-height: 1.2; 
	 }
	
	#head {display: flex; flex-direction: row; justify-content: space-between; padding-left: 2em; padding-top: 0.25em; padding-right: 2em; padding-bottom: 0.25em; background: rgba(3, 181, 252, 0.8); }
	#head a {text-decoration: none; color: rgb(128,128,128); }
	#head a:link {color: rgb(128,128,128); }
	#head a:active {color: rgb(128,128,128); }
	#head a:visited {color: rgb(128,128,128); } 
	#head a:hover {color: rgb(128,128,128); }
	#head h1 {margin: 0; padding: 0; display: flex-item; align-self: center; color: rgb(0,0,0); }
	#head form {display: flex-item; align-self: center; }
	#head form input.formfield {width:8em; font-size: 10pt; }
	
	#head a.button {display: flex-item; align-self: center;
		display: block;
	    width: 12em;
	    height: 1em;
	    background: rgba(252, 223, 0, 1);
	    padding-left: 1em;
	    padding-top: 0.5em;
	    padding-right: 1em;
	    padding-bottom: 0.5em;
	    text-align: center;
	    text-decoration: none;
	    border-radius: 7px;
	    color: rgb(255, 0, 0);
	    font-weight: bold;
	    line-height: 1.2; 
	 }
		
	#mainpanel {padding: 1em; }
	
	#wizframe {width: 68%; margin-left: auto; margin-right: auto; margin-bottom: 20em; }
	#email {width: 14em; }
	
	#menu {margin: 0; padding: 0; padding-top: 0.5em; padding-bottom: 0.5em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
	background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
	}
	#menu li {list-style-type: none; font-size: 12pt; display: inline; padding-top: 0.5em; padding-bottom: 0.5em; 
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
	background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-right: 3px groove rgb(255,255,255);
	 }
	#menu li:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b7deed+0,71ceef+50,21b4e2+51,b7deed+100;Shape+1+Style */
	background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: rgb(252, 252, 0); text-shadow: 1px 1px 2px #c0c0c0;
	 }
	 #menu li.cur {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b7deed+0,71ceef+50,21b4e2+51,b7deed+100;Shape+1+Style */
	background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
	 }
	 
	#menu li a {text-decoration: none; font-weight: bold; width: 100%; padding-left: 1em; padding-top: 0.5em; padding-right: 1em; padding-bottom: 0.5em; }
	
	#menu li a:link {color: rgb(128,128,128); }
	#menu li a:active {color: rgb(128,128,128); }
	#menu li a:visited {color: rgb(128,128,128); } 
	#menu li a:hover {color: rgb(252, 252, 0); text-shadow: 1px 1px 2px rgb(0, 0, 255); }
	#menu li.cur a {color: rgb(253, 240, 0); text-shadow: 1px 1px 2px #000000; }
	
	#coursemenu {margin: 0; padding: 0; width: 80%; margin-left: auto; margin-right: auto; text-align: center; border-radius: 12px; }
	#coursemenu li {border-radius: 12px; list-style-type: none; padding-top: 3em; padding-bottom: 3em; background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); margin-bottom: 1em; }
	#coursemenu li:hover {
							background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
							color: rgb(252, 252, 0); text-shadow: 1px 1px 2px #c0c0c0;
	 }
	#coursemenu li a {text-decoration: none; color: rgb(128,128,128); font-weight: bold; font-size: 18pt; padding-left: 2em; padding-top: 1.3em; padding-right: 2em; padding-bottom: 1.3em; }
	#coursemenu li a:link {color: rgb(128,128,128); }
	#coursemenu li a:active {color: rgb(128,128,128); }
	#coursemenu li a:visited {color: rgb(128,128,128); } 
	#coursemenu li a:hover {color: rgb(252, 252, 0); text-shadow: 1px 1px 2px rgb(0, 0, 255); }
	
	div.banner {width: 78%; margin-left: auto; margin-right: auto; margin-bottom: 2em; text-align: center; color: rgba(100,100,100, 0.5); }
	div.banner h3 {font-style: italic; font-weight: normal; font-size: 24pt; }
	div.banner p {font-size: 14pt; }
	div.banner a {display: inline; }
	
	#mainpanel {background: rgba(242, 242, 242, 0.2); }
	
	#previewframe {width: 100%; height: 63em; border: none; }
	
	div.businessnamediv {width: 90%; margin-left: auto; margin-right: auto; }
	
	#vidcon {position: relative; overflow: hidden; width: 88%; margin-left: auto; margin-right: auto; padding-top: 56.25%;}
	#vidcon iframe.videolink {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
	
	div.businesspreview {background: rgba(255, 255, 255, 0.4); border-radius: 10px; box-shadow: 10px 10px 60px #555; }
	div.businessname {text-align: center; font-size: 36pt; padding-top: 1em; padding-bottom: 1em; }
	
	div.businessname a {color: rgb(0,0,0); text-decoration: none;}
	div.businessname a:link {color: rgb(0,0,0); }
	div.businessname a:active {color: rgb(0,0,0); }
	div.businessname a:visited {color: rgb(0,0,0); } 
	div.businessname a:hover {color: rgb(0,0,0); }
	
	img.businesslogo {height: 175px; }
	input.imageoption {display: inline; margin-right: 2em; }
	
	#headingoptions {width: 100%; }
	#headingoptions div.headingoption {border: 1px solid rgb(128,128,128); border-radius: 12px; padding:0.5em; margin-bottom: 0.5em; }
	#headingoptions div.headingoption label {display: block; }
	h1.businessname {font-size: 42pt; width: 80%; margin-left: auto; margin-right: auto; padding: 0; margin: 0; margin-bottom: 12px; }
	img.businesslogo {height: 80px; }
	input.imageoption {display: inline; margin-left: 2em; }
	div.businessnamediv {width: 80%; height: 1em; margin-bottom: 12px; }
	p.businessnam {padding: 0; margin: 0; margin-bottom: 12px; }
	
	p.courseheading {width: 88%; margin-left: auto; margin-right: auto; font-size: 18pt; font-weight: bold; }
	p.coursesubheading {width: 88%; margin-left: auto; margin-right: auto; font-size: 14pt; margin-top: 0.5em;}
	p.courseparagraph {width: 88%; margin-left: auto; margin-right: auto; line-height: 1.2; margin-bottom: 2em; }
	div.coursequestion {width: 88%; margin-left: auto; margin-right: auto; line-height: 1.2; margin-top: 1em; }
	div.question {margin-bottom: 1em; }
	div.answers {margin-bottom: 1em; }
	
	div.formfield p.error {display: inline; font-size: 8pt; color: rgb(255, 0, 0); }
	
	#dashitems {display: flex; flex-direction: row; flex-wrap: wrap; }
	fieldset.frame {display: flex-item; flex-grow: 1; background: rgba(0, 125, 255, 0.1); }
	fieldset.Calframe {display: flex-item; flex-grow: 2; background: rgba(0, 125, 255, 0.1); }
	fieldset.courseframe {background: rgba(255, 255, 255, 0.1); }
	
	fieldset.frame {border-radius: 12px; margin-bottom: 1em; padding: 1.5em; border: 1px solid rgba(0, 128, 255, 0.3); }
	fieldset.Calframe {border-radius: 12px; margin-bottom: 1em; padding: 1.5em; border: 1px solid rgba(0, 128, 255, 0.3); }
	fieldset.courseframe {border-radius: 12px; margin-bottom: 1em; padding: 1.5em; border: 1px solid rgba(0, 128, 255, 0.3); }
	
	fieldset.frame legend {font-weight: bold; font-size: 10pt; padding-bottom: 0.7em; color: rgba(0, 128, 255, 0.5); }
	fieldset.frame fieldset form {margin-bottom: 2em; }
	fieldset.courseframe legend {font-weight: bold; font-size: 10pt; padding-bottom: 0.7em; color: rgba(0, 128, 255, 0.5); }
	
	fieldset.frame p.about {width: 90%; margin-left: auto; margin-right: auto; line-height: 1.2em; }
	fieldset.frame h2.about {width: 66%; margin-left: auto; margin-right: auto;}
	
	div.leftmailframe {width: 26em; }
	div.leftmailframe label {display: inline-block; width: 5em; margin-right: 1em; text-align: right; }
	div.leftmailframe input {width: 20em; }
	
	div.righttmailframe {width: 6em; text-align: left; }
	input.submitsend {margin: 2em; width: 5em; height: 5em; cursor: pointer; }
	
	#mailframe {width: 48%;  }
	textarea.message {
		  width: 50%;
		  height: 150px;
		  padding: 12px 20px;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 10px;
		  background-color: #f8f8f8;
		  resize: none;
		  font-family: Arial, Helvetica, sans-serif;
		}
	
	textarea.formtextarea {
		  width: 50%;
		  height: 150px;
		  padding: 12px 20px;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 10px;
		  background-color: #f8f8f8;
		  resize: none;
		  font-family: Arial, Helvetica, sans-serif;
		}
	
	#business {width: 25em; }
	
	img.logo {height: 2em; }
	#settings iframe {border: 0; width: 30em; height: 20em; overflow: hidden; }
	#settings fieldset {margin-top: 1.6em; }
	span.info {font-size: 8pt; color: rgb(100, 100, 100); }
	#paymenthistory table {width: 100%; }
	#paymenthistory table td {text-align: center; }
	
	input.button {margin-top: 1em; padding-left: 1em; padding-top: 0.25em; padding-right: 1em; padding-bottom: 0.25em; border-radius: 10px; color: rgb(128, 128, 128);
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
		background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		
	}
	
	input.button:hover {background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: rgb(252, 252, 0); text-shadow: 1px 1px 2px #c0c0c0; cursor: pointer;
	}
	
	#subaccount label.radio {display: inline; }
	#subaccount label.norm {display: block; margin-top: 0.25em; }
	
	label.selector {display: block; }
	
	div.mediaplayer {position: relative; overflow: hidden; width: 78%; margin-left: auto; margin-right: auto; padding-top: 56.25%;}
	div.mediaplayer video {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: auto; }
	
	#footerpanel {background: rgb(128,128,128); }
	
	#footer {margin: 0; padding: 0; width: 100%; height: 11em; text-align: center; padding-top: 1em; }
	
	#footermenu a {text-decoration: none; }
	#footermenu a:link {color: rgb(255,255,255); }
	#footermenu a:active {color: rgb(255,255,255); }
	#footermenu a:visited {color: rgb(255,255,255); } 
	#footermenu a:hover {color: rgb(255,255,255); }
	
	
}

@media (min-width: 1200px) {
	
	body {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0f9ff+87,cbebff+94,a1dbff+100 */
			background: linear-gradient(to right,  rgba(240,249,255,1) 87%,rgba(203,235,255,1) 94%,rgba(161,219,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		}
	
	a.button {align-self: center;
		display: block;
	    width: 12em;
	    height: 1em;
	    background: rgba(252, 223, 0, 1);
	    padding-left: 1em;
	    padding-top: 0.5em;
	    padding-right: 1em;
	    padding-bottom: 0.5em;
	    text-align: center;
	    text-decoration: none;
	    border-radius: 7px;
	    color: rgb(255, 0, 0);
	    font-weight: bold;
	    line-height: 1.2; 
	 }
	
	#head {display: flex; flex-direction: row; justify-content: space-between; padding-left: 2em; padding-top: 0.25em; padding-right: 2em; padding-bottom: 0.25em; background: rgba(3, 181, 252, 0.8); }
	#head a {text-decoration: none; color: rgb(128,128,128); }
	#head a:link {color: rgb(128,128,128); }
	#head a:active {color: rgb(128,128,128); }
	#head a:visited {color: rgb(128,128,128); } 
	#head a:hover {color: rgb(128,128,128); }
	#head h1 {margin: 0; padding: 0; display: flex-item; align-self: center; color: rgb(0,0,0); }
	#head form {display: flex-item; align-self: center; }
	
	#head a.button {display: flex-item; align-self: center;
		display: block;
	    width: 12em;
	    height: 1em;
	    background: rgba(252, 223, 0, 1);
	    padding-left: 1em;
	    padding-top: 0.5em;
	    padding-right: 1em;
	    padding-bottom: 0.5em;
	    text-align: center;
	    text-decoration: none;
	    border-radius: 7px;
	    color: rgb(255, 0, 0);
	    font-weight: bold;
	    line-height: 1.2; 
	 }
		
	#mainpanel {padding: 1em; }
	
	#wizframe {width: 50%; margin-left: auto; margin-right: auto; margin-bottom: 20em; }
	#email {width: 16em; }
	
	#menu {margin: 0; padding: 0; padding-top: 0.5em; padding-bottom: 0.5em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
	background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
	}
	#menu li {list-style-type: none; font-size: 12pt; display: inline; padding-top: 0.5em; padding-bottom: 0.5em; 
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
	background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-right: 3px groove rgb(255,255,255);
	 }
	#menu li:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b7deed+0,71ceef+50,21b4e2+51,b7deed+100;Shape+1+Style */
	background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: rgb(252, 252, 0); text-shadow: 1px 1px 2px #c0c0c0;
	 }
	 #menu li.cur {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b7deed+0,71ceef+50,21b4e2+51,b7deed+100;Shape+1+Style */
	background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
	 }
	 
	#menu li a {text-decoration: none; font-weight: bold; width: 100%; padding-left: 1em; padding-top: 0.5em; padding-right: 1em; padding-bottom: 0.5em; }
	
	#menu li a:link {color: rgb(128,128,128); }
	#menu li a:active {color: rgb(128,128,128); }
	#menu li a:visited {color: rgb(128,128,128); } 
	#menu li a:hover {color: rgb(252, 252, 0); text-shadow: 1px 1px 2px rgb(0, 0, 255); }
	#menu li.cur a {color: rgb(253, 240, 0); text-shadow: 1px 1px 2px #000000; }
	
	#coursemenu {margin: 0; padding: 0; width: 68%; margin-left: auto; margin-right: auto; text-align: center; border-radius: 12px; }
	#coursemenu li {border-radius: 12px; list-style-type: none; padding-top: 3em; padding-bottom: 3em; background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); margin-bottom: 1em; }
	#coursemenu li:hover {
							background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
							color: rgb(252, 252, 0); text-shadow: 1px 1px 2px #c0c0c0;
	 }
	#coursemenu li a {text-decoration: none; color: rgb(128,128,128); font-weight: bold; font-size: 24pt; padding-left: 5em; padding-top: 1.3em; padding-right: 5em; padding-bottom: 1.3em; }
	#coursemenu li a:link {color: rgb(128,128,128); }
	#coursemenu li a:active {color: rgb(128,128,128); }
	#coursemenu li a:visited {color: rgb(128,128,128); } 
	#coursemenu li a:hover {color: rgb(252, 252, 0); text-shadow: 1px 1px 2px rgb(0, 0, 255); }
	
	div.banner {width: 68%; margin-left: auto; margin-right: auto; margin-bottom: 2em; text-align: center; color: rgba(100,100,100, 0.5); }
	div.banner h3 {font-style: italic; font-weight: normal; font-size: 24pt; }
	div.banner p {font-size: 14pt; }
	div.banner a {display: inline; }
	
	#mainpanel {background: rgba(242, 242, 242, 0.2); }
	
	#previewframe {width: 100%; height: 63em; border: none; }
	
	div.businessnamediv {width: 90%; margin-left: auto; margin-right: auto; }
	
	#vidcon {position: relative; overflow: hidden; width: 80%; margin-left: auto; margin-right: auto; padding-top: 56.25%;}
	#vidcon iframe.videolink {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
	
	div.businesspreview {background: rgba(255, 255, 255, 0.4); border-radius: 10px; box-shadow: 10px 10px 60px #555; }
	div.businessname {text-align: center; font-size: 36pt; padding-top: 1em; padding-bottom: 1em; }
	
	div.businessname a {color: rgb(0,0,0); text-decoration: none;}
	div.businessname a:link {color: rgb(0,0,0); }
	div.businessname a:active {color: rgb(0,0,0); }
	div.businessname a:visited {color: rgb(0,0,0); } 
	div.businessname a:hover {color: rgb(0,0,0); }
	
	img.businesslogo {height: 175px; }
	input.imageoption {display: inline; margin-right: 2em; }
	
	#headingoptions {width: 100%; }
	#headingoptions div.headingoption {border: 1px solid rgb(128,128,128); border-radius: 12px; padding:0.5em; margin-bottom: 0.5em; }
	#headingoptions div.headingoption label {display: block; }
	h1.businessname {font-size: 42pt; width: 80%; margin-left: auto; margin-right: auto; padding: 0; margin: 0; margin-bottom: 12px; }
	img.businesslogo {height: 80px; }
	input.imageoption {display: inline; margin-left: 2em; }
	div.businessnamediv {width: 80%; height: 1em; margin-bottom: 12px; }
	p.businessnam {padding: 0; margin: 0; margin-bottom: 12px; }
	
	p.courseheading {width: 80%; margin-left: auto; margin-right: auto; font-size: 18pt; font-weight: bold; }
	p.coursesubheading {width: 80%; margin-left: auto; margin-right: auto; font-size: 14pt; margin-top: 0.5em;}
	p.courseparagraph {width: 80%; margin-left: auto; margin-right: auto; line-height: 1.2; margin-bottom: 2em; }
	div.coursequestion {width: 80%; margin-left: auto; margin-right: auto; line-height: 1.2; margin-top: 1em; }
	div.question {margin-bottom: 1em; }
	div.answers {margin-bottom: 1em; }
	
	div.formfield p.error {display: inline; font-size: 8pt; color: rgb(255, 0, 0); }
	
	#dashitems {display: flex; flex-direction: row; flex-wrap: wrap; }
	fieldset.frame {display: flex-item; flex-grow: 1; background: rgba(0, 125, 255, 0.1); }
	fieldset.Calframe {display: flex-item; flex-grow: 2; background: rgba(0, 125, 255, 0.1); }
	fieldset.courseframe {background: rgba(255, 255, 255, 0.1); }
	
	fieldset.frame {border-radius: 12px; margin-bottom: 1em; padding: 1.5em; border: 1px solid rgba(0, 128, 255, 0.3); }
	fieldset.Calframe {border-radius: 12px; margin-bottom: 1em; padding: 1.5em; border: 1px solid rgba(0, 128, 255, 0.3); }
	fieldset.courseframe {border-radius: 12px; margin-bottom: 1em; padding: 1.5em; border: 1px solid rgba(0, 128, 255, 0.3); }
	
	fieldset.frame legend {font-weight: bold; font-size: 10pt; padding-bottom: 0.7em; color: rgba(0, 128, 255, 0.5); }
	fieldset.frame fieldset form {margin-bottom: 2em; }
	fieldset.courseframe legend {font-weight: bold; font-size: 10pt; padding-bottom: 0.7em; color: rgba(0, 128, 255, 0.5); }
	
	fieldset.frame p.about {width: 66%; margin-left: auto; margin-right: auto; line-height: 1.2em; }
	fieldset.frame h2.about {width: 66%; margin-left: auto; margin-right: auto;}
	
	div.leftmailframe {width: 26em; }
	div.leftmailframe label {display: inline-block; width: 5em; margin-right: 1em; text-align: right; }
	div.leftmailframe input {width: 20em; }
	
	div.righttmailframe {width: 6em; text-align: left; }
	input.submitsend {margin: 2em; width: 5em; height: 5em; cursor: pointer; }
	
	#mailframe {width: 48%;  }
	textarea.message {
		  width: 50%;
		  height: 150px;
		  padding: 12px 20px;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 10px;
		  background-color: #f8f8f8;
		  resize: none;
		  font-family: Arial, Helvetica, sans-serif;
		}
	
	textarea.formtextarea {
		  width: 50%;
		  height: 150px;
		  padding: 12px 20px;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 10px;
		  background-color: #f8f8f8;
		  resize: none;
		  font-family: Arial, Helvetica, sans-serif;
		}
	
	#business {width: 25em; }
	p.displayurl {text-align: center; font-size: 10pt; }
	
	img.logo {height: 2em; }
	#settings fieldset {margin-top: 1.6em; }
	#settings fieldset iframe {border: 0; width: 30em; margin-left: 8%; margin-right: auto; height: 20em; overflow: hidden; }
	span.info {font-size: 8pt; color: rgb(100, 100, 100); }
	#paymenthistory table {width: 100%; }
	#paymenthistory table td {text-align: center; }
	
	input.button {margin-top: 1em; padding-left: 1em; padding-top: 0.25em; padding-right: 1em; padding-bottom: 0.25em; border-radius: 10px; color: rgb(128, 128, 128);
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
		background: linear-gradient(to bottom,  #e0f3fa 0%,#d8f0fc 50%,#b8e2f6 51%,#b6dffd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		
	}
	
	input.button:hover {background: linear-gradient(to bottom,  #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: rgb(252, 252, 0); text-shadow: 1px 1px 2px #c0c0c0; cursor: pointer;
	}
	
	#subaccount label.radio {display: inline; }
	#subaccount label.norm {display: block; margin-top: 0.25em; }
	
	label.selector {display: block; }
	
	div.mediaplayer {position: relative; overflow: hidden; width: 68%; margin-left: auto; margin-right: auto; padding-top: 56.25%;}
	div.mediaplayer video {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: auto; }
	
	#footerpanel {background: rgb(128,128,128); }
	
	#footer {margin: 0; padding: 0; width: 100%; height: 11em; text-align: center; padding-top: 1em; }
	
	#footermenu a {text-decoration: none; }
	#footermenu a:link {color: rgb(255,255,255); }
	#footermenu a:active {color: rgb(255,255,255); }
	#footermenu a:visited {color: rgb(255,255,255); } 
	#footermenu a:hover {color: rgb(255,255,255); }
	
}

#popbkgrd{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}
#popbkgrd span.helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
#popbkgrd > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 551px;
    min-height: 200px;
    vertical-align: middle;
    width: 60%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
}
#popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
#popupCloseButton a{
	text-decoration: none;
}
#popupCloseButton:hover {
    background-color: #ccc;
}
#popbkgrd {
    cursor: pointer;
    font-size: 20px;
    display: inline-block;
    font-weight: bold;
}
#popbkgrd iframe {border: none; }

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: blue;
  font-style: italic;
  font-size: 8pt;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  font-size: 10pt;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}