/*Correct order of properties- style; color; weight; size; line-height; font-family;*/
/*Deprecated tags: valign=top, font, center, align*/
/*Site Colors: text=1e1e1e, table bkgd=DCD9D9, red=cc0000, header bkgd=333366, link blue=003399, almost-white gray=f0f0f0*/
/*padding/margin order: Top Right Bottom Left*/
/*letter-spacing: 2px;*/

@font-face { font-family: montserrat; src: url("https://www.harmonicalessons.com/fonts/montserrat-regular-webfont.ttf"); }
@font-face { font-family: montserrat; src: url("https://www.harmonicalessons.com/fonts/montserrat-bold-webfont.ttf"); font-weight: bold; }
@font-face { font-family: montserrat; src: url("https://www.harmonicalessons.com/fonts/montserrat-light-webfont.ttf"); font-weight: 100; }

@font-face { font-family: roboto; src: url("https://www.harmonicalessons.com/fonts/Roboto/Roboto-Regular.ttf"); }
@font-face { font-family: roboto; src: url("https://www.harmonicalessons.com/fonts/Roboto/Roboto-Bold.ttf"); font-weight: bold; }
@font-face { font-family: roboto; src: url("https://www.harmonicalessons.com/fonts/Roboto/Roboto-Thin.ttf"); font-weight: 100; }

html, body { overflow: auto; }
body {background-color:#fff; padding: 0px; margin: 0px; font-family: "montserrat", Verdana, Geneva, Arial, Helvetica;} /*F2F2F2 (from Apple) e6e6e6 (darker)*/
/*background-image:url(http://www.harmonicalessons.com/images/background_grad3.jpg); background-repeat: repeat-x;*/

a {text-decoration:none; color:#003399;}
a:visited {color:#003399;}  /*purple 990099*/ /*orange FF6600*/ /*purple 800080 IE or 880088 Opera or FF 581C90*/
a:hover {text-decoration: underline; color:#CC0000;}/*#FF6600*/ /*background-color: #cccccc;*/
a.blackhoverClass:hover {color: red;}
.whitelinks2 A {text-decoration:none; color: #FFFFFF; font-family: Verdana, Geneva, Arial; font-size: 10px}
.whitelinks2 A:hover {text-decoration: none; color:#FFFFFF;}
.store-blacklinks A {color: #666; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-size: 14px; line-height: 1.5;}
.store-blacklinks A:visited {color: #666;}
.store-blacklinks A:hover {text-decoration: underline; color: #CC0000;}

.bold {font-weight: bold;}
.italic {font-style: italic;}
.red {color: #CC0000;}
.gray-bkground {background-color: #DCD9D9;}
.size4bold {font-size: 18px; font-weight: bold;}
.float-left {float: left;}
.float-right {float: right;}
.center {text-align: center;}
.center-block {margin-left: auto; margin-right: auto;}
.right {text-align: right;}
.left {text-align: left;} /*No need to specify align left unless some previous selector assigns margin:auto or text-align:left.*/
.top {vertical-align: top;} /*Use for table TD or DIV or P*/
.text-top {vertical-align: text-top;} /*use for inline text in STYLE or SPAN tag*/
.middle {vertical-align: middle;}
.bottom {vertical-align: text-bottom;}
.content-bottom {position: absolute; bottom: 0;}
.nowrap {white-space: nowrap;}
.tabpicture {border-style: solid; border-color: #CCCCCC; border-width: 1px; -moz-border-radius: 5px; border-radius: 5px;}
.featured-vid-header {width: 220px; background-color: #336; padding: 6px 0px 6px 0px;  -moz-border-radius: 6px; border-radius: 6px; margin-left: auto; margin-right: auto; margin-bottom: 50px; margin-top: 40px; color: #f90; font-size: 18px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; text-align: center; font-weight: bold; line-height: 17px; text-shadow: 0px 1px 0px rgb(0, 0, 0); letter-spacing: .05em;}
.videolist-left {float: left; padding: 4px 16px 0px 0px;}
.videolist-right {float: right; padding: 4px 0px 0px 4px;}
.hard-right {position: absolute; right: 0; top: 0; margin: 5px; margin-right: 25px;}
@media (max-width: 798px) {.hide-mobile {display:none;}}
.resize {max-width: 100%; height: auto;}
.divtable-multi-columns {display: flex; margin:auto;}
.container {width: 1170px; margin: auto;}
.flex-vertical-center {align-items: center;}
@media (max-width: 798px) {.divtable-multi-columns {display: block; text-align: left;}}

/* Sections
----------------------------------------------*/
.section-gray {margin: 0; padding: 10px; background-color: #F5F5F5;}
.section-blue-336 {margin: 0; padding: 10px; background-color: #336;} /*ededed FF9900 4d4d99 894545 994d4d aa5656 cc3300 336*/
.section-white {margin: 0; padding: 10px; background-color: #fff;}
.section-ltblue {margin: 0; padding: 10px; background-color: #e2f0f3;}
.section-orange {margin: 0; padding: 10px; background-color: #cc3300;}
.section-ltblue-purple {margin: 0; padding: 10px; background-color: #efeff7;}
.section-purple {margin: 0; padding: 10px; background-color: #714d82;}
.section-blue-purple {margin: 0; padding: 10px; background-color: #5454a7;}
.section-dark-blue {margin: 0; padding: 10px; background-color: #1a1a33;}
.section-signup {margin: 0; padding: 10px; background-color: #1a1a33; background: linear-gradient(rgba(26, 26, 51, 0.8), rgba(26, 26, 51, 0.8)), url("https://www.harmonicalessons.com/images/case2_crop_horizontal.jpg") center; background-size: cover;}
.section-int-adv {margin: 0; padding: 10px; background-color: #fff; background: linear-gradient(rgba(245, 245, 245, 0.1), rgba(245, 245, 245, 1.0)), url("https://www.harmonicalessons.com/images/int-adv-group-background.jpg") center; background-size: cover;}
.section-big-header { color: #f90; font-size: 22px; line-height: normal; font-kerning: normal; text-align: center; font-family: montserrat, Verdana, Arial, Helvetica; width: 26%; background-color: #26265f; padding: 6px 0px 6px 0px; margin-left: auto; margin-right: auto; -moz-border-radius: 8px; border-radius: 8px;} /*-moz-border-radius: 10px; border-radius: 10px; 1a1a33*/
.section-big-header2 {font-size: 38px; color: #336; font-weight: bold; line-height: normal; text-align: center; font-family: montserrat, Verdana, Arial, Helvetica; background-color: #fff; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; -moz-border-radius: 8px; border-radius: 8px;}
.section-big-header3 {font-size: 38px; color: #333; font-weight: bold; line-height: normal; text-align: center; font-family: montserrat, Verdana, Arial, Helvetica; background-color: #fff; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; -moz-border-radius: 8px; border-radius: 8px;}
.section-big-header-wide {color: #ccc; font-size: 24px; line-height: normal; font-kerning: normal; text-align: center; font-family: montserrat, Verdana, Arial, Helvetica; width: 85%; background-color: #f5f5f5; padding: 6px 0px 6px 0px; margin-left: auto; margin-right: auto;} /*-moz-border-radius: 10px; border-radius: 10px; 1a1a33*/
.section-sub-header { color: #f90; font-size: 18px; line-height: normal; text-align: center; font-family: montserrat, Verdana, Arial, Helvetica; width: 30%; background-color: #26265f; padding: 9px 0px 9px 0px; margin: 16px auto 16px auto; -moz-border-radius: 8px; border-radius: 8px;} /*-moz-border-radius: 10px; border-radius: 10px; color: #e0e0e0;*/
.section-title-white {width: 100%; color: #fff; font-weight: bold; font-size: 28px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 0px 0px 0px 0px; margin-top: 0px;}
.section-title-gold {width: 100%; color: #FF9900; font-weight: bold; font-size: 26px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 0px 0px 0px 0px; margin-top: 0px;}
.section-store {color: #666666; font-size: 12px; width: 80%; margin: auto; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; padding: 2px; background-color: #fff; display: flex; justify-content: space-around; align-items: baseline;}
.store-cell {padding: 20px; padding-top: 0px; text-align: center;}
.store-cell img {display: block; padding-bottom: 20px;}
.section-content {width: 80%; margin: auto;}
@media only screen and (max-width: 1170px) {
  .mainpage-centertd2 {width: 100% !important;}
  .section-content {width: 100% !important;}
  .header-dropdown2 {width: 100%;}
  .section-store {display: block; text-align: center;}
  .store-cell {width: 300px; display: inline-block;}
  .section-sub-header, .section-big-header {width: 90%;}
  .abovelinks {width: 90%;}}
.container-column {width: 1170px; margin: auto;}
@media only screen and (max-width: 1170px) {
  .container-column {width: 95%;}}

  /* Divided-Sections
----------------------------------------------*/
.cols {width: 1170px; margin: auto; display: flex; align-items: center; padding: 50px;}
.cols h1 {font-size: 38px; color: #333;}
.cols div {margin: 30px; flex-grow: 1; flex-basis: 0;}
.cols p {color: #333; font-weight: 100; line-height: 40px; font-size: 24px; font-style: none; padding: 0px 0px 14px 0px;}
.cols img {max-width: 100%;}
.cols ol { list-style: none; counter-reset: item; padding: 0; }
.cols ol li { counter-increment: item; margin-bottom: 15px; font-size: 18px;}
.cols ol li::before { margin-right: 10px; content: counter(item); background: #ff9900; border-radius: 100%; color: white; width: 1.4em; text-align: center; display: inline-block; font-size: 25px;}
@media screen and (max-width: 1170px) {
  .cols {width: 100%; display: block; padding: 0 !important;}
  /* .cols img {max-width:none;} */ }

.two-panel-section {width: 1200px; margin: auto; display: flex; align-items: center; padding: 50px;}
.two-panel-section h1 {font-size: 32px; color: #333; font-family: roboto, montserrat, Verdana, Arial, Helvetica;}
.two-panel-section div {margin: 40px; flex-grow: 1; flex-basis: 0;}
.two-panel-section p {font-weight: 100; line-height: 35px; font-size: 16px; color: #333; font-style: none;}
.two-panel-section img {max-width: 100%;}
@media screen and (max-width: 1170px) {
.two-panel-section {width: 100%; display: block; padding: 0;}
.two-panel-section.flip-mobile {display: flex; flex-direction: column-reverse;}
  /* .cols img {max-width:none;} */ }

.three-section {width: 1170px; margin: auto; display: flex; align-items: center; padding: 50px;}
.three-section div {margin: 30px;}
.three-section img {max-width: 100%;}
.three-section p {font-weight: 100; text-align: left; line-height: 25px;}
@media screen and (max-width: 1170px) {
  .three-section {width: 100%; display: block; padding: 0;}
}

/* Homepage Header
----------------------------------------------*/
/* Begin navigation */
.homepage-header.header {background: linear-gradient(rgba(51, 51, 102, 0.8), rgba(51, 51, 102, 0.8)), url("https://www.harmonicalessons.com/images/header-class_photo.jpg") center; background-size: cover;}
.homepage-header #navbar {position: fixed; top: 0; width: 100%;}
.homepage-header #navbar.fixed { background-color: #336; transition: 0.5s; z-index: 9999;}
.homepage-header #nav { width: 1170px; margin: auto; list-style-type: none; padding: 10px; overflow: hidden; font-size: 14px; display: flex; justify-content: space-between; align-items: center; font-weight: 100;}
.homepage-header #nav li { display: inline-block; }
.homepage-header #nav li a { display: block; color: #f0f0f0; text-align: center; padding: 14px 12px; text-decoration: none; box-sizing: border-box; border-bottom: 2px solid rgba(0, 0, 0, 0); cursor: pointer;}
/* #nav li > a { font-weight: bold; } */
.homepage-header #nav li:hover a { border-color: #f0f0f0;}
.homepage-header #nav li.dir:hover a { border-color: rgba(0, 0, 0, 0); }
.homepage-header #nav li:hover>.dropdown-content { display: flex; justify-content: space-around; }
/* .dropdown-content { display: none; position: absolute; background-color: #F5F5F5; width: 60%; left: 20%; -webkit-box-shadow: 2px 18px 23px -7px rgba(163, 163, 163, 1); -moz-box-shadow: 2px 18px 23px -7px rgba(163, 163, 163, 1); box-shadow: 2px 18px 23px -7px rgba(163, 163, 163, 1); z-index: 1; color: black; }
.dropdown-content a { display: block; padding: 3px !important; text-align: left !important; color: #333 !important;  background-color: #F5F5F5 !important; border: none !important;}
.dropdown-content a:hover { background-color: #F5F5F5 !important;  color: #cc0000 !important; text-decoration: underline !important; }
.dropdown-content h3 { font-size: 18px; }
.dropdown-content h4 { margin-bottom: 1px !important; margin-top: 10px !important; } */
.homepage-header .dropdown-content { display: none; position: absolute; background: #F5F5F5; /*background: linear-gradient(rgba(245, 245, 245, 0.9), rgba(245, 245, 245, 0.9)), url("https://www.harmonicalessons.com/images/header-harmonicas.jpg") center;*/ background: #f5f5f5; width: 100%; left: 0; z-index: 1; color: black; }
.homepage-header .dropdown-content a { display: block; padding: 3px !important; text-align: left !important; color: #333 !important; background-color: rgba(0, 0, 0, 0) !important; border: none !important;}
.homepage-header .dropdown-content a:hover { background-color: rgba(0, 0, 0, 0) !important;  color: #cc0000 !important; text-decoration: underline !important; }
.homepage-header .dropdown-content h3 { font-size: 18px; }
.homepage-header .dropdown-content h4 { margin-bottom: 1px !important; margin-top: 10px !important; }
.homepage-header .dropdown-content-small { display: none; position: absolute; background-color: #f5f5f5; min-width: 160px;  z-index: 1; padding-bottom: 7px; padding-right: 7px; padding-top: 7px;}
.homepage-header .dropdown-content-small a { text-align: left !important; color: #333 !important; padding: 6px 16px !important; border: none !important; }
.homepage-header .dropdown-content-small a:hover { color: #cc0000 !important; text-decoration: underline !important; }
.homepage-header .dir:hover .dropdown-content-small { display: block; }
.homepage-header .column { padding: 10px; }
.homepage-header .downarrow { font-size: 10px; }
.homepage-header .big-logo { height: auto; width: 174px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.homepage-header .big-logo a { padding: 0 !important; }
.homepage-header .big-logo a:hover { border-bottom: 2px solid rgba(0, 0, 0, 0) !important; }
.homepage-header .fixed .big-logo { height: auto; width: 130px; }
.homepage-header .header-logo { width: 100%; height: auto; }
/* Begin Login/Sign-Up buttons */
.homepage-header .signup-button a { text-align: center !important; display: block !important; background: #ffcc00 !important; color: black !important; padding: 8px 0 !important; font-weight: bold; font-size: 18px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 180px; }
.homepage-header .signup-button a:hover { background: #ffcc00 !important; color: black !important;}
.homepage-header .top-login-button, .top-signup-button {display: inline-block;}
.homepage-header .top-login-button a, .top-signup-button a {text-decoration: none; color: #F5F5F5; font-size: 15px;}
.homepage-header .top-login-button a:hover, .top-signup-button a:hover {text-decoration: none;}
.homepage-header .top-signup-button a { text-align: center; background-color: rgba(255, 255, 255, 0.2); color: white !important; padding: 8px 18px; border-radius: 20px; -moz-border-radius: 20px; transition: 0.3s;}
.homepage-header .fixed .top-signup-button a {background-color: #2d9d5d; }
.homepage-header .fixed .top-signup-button a:hover {background-color: #38c574;}
.homepage-header .top-login-button a { text-align: center; padding: 8px 18px; transition: 0.3s;}
.homepage-header .top-signup-button a:hover { background-color: rgba(255, 255, 255, 0.4); }
.homepage-header .top-login-button a:hover { border-bottom: 2px solid white; }
.homepage-header .big-signup-button a { text-decoration: none; text-align: center; background-color: #2d9d5d; border: 2px solid white; color: white; padding: 20px 70px; border-radius: 100px; -moz-border-radius: 100px; transition: 0.3s; font-size: 20px; }
.homepage-header .big-signup-button a:hover {background-color: #38c574;}
/* End Login/Sign-Up buttons */
/* Begin Mobile Nav */
.homepage-header #showmore-nav div { width: 35px; height: 2px; background-color: white; margin: 6px 0; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.homepage-header #showmore-nav { display: none !important; }
.homepage-header #mobile-logo { display: none !important; }
.homepage-header .mobile-nav, .mobile-nav-lessons { display: none; }
.homepage-header .mobile-nav ul, .mobile-nav-lessons ul { list-style-type: none; margin: 0; padding: 0; }
.homepage-header .mobile-nav ul li a, .mobile-nav-lessons ul li a { display: block; color: white; padding: 10px 15px; background-color: #336; }
.homepage-header .mobile-nav ul li a:hover, .mobile-nav-lessons ul li a:hover { text-decoration: none; background-color: #222244; }
@media screen and (max-width: 1170px) {
  .homepage-header #nav {width: 100%;}
  .homepage-header .top-signup-button {padding-right: 20px;}
}
@media screen and (max-width: 950px) {
  .homepage-header #showmore-nav { display: inline-block !important; }
  .homepage-header #nav li {display: none;}
  .homepage-header #nav li a {border: 0 !important;}
  /* .top-signup-button {margin-right: 15px;} */
  .homepage-header #mobile-logo { display: inline-block !important; margin-left: 20px; }
  .homepage-header #mobile-logo a {padding: 0 !important;}
}
/* End Mobile Nav */
/* End navigation */
.homepage-header .hero {width: 1170px; margin: auto;}
.homepage-header .hero h1 {color: #f5f5f5; font-size: 40px; font-family: montserrat, verdana, arial; font-weight: 400; letter-spacing: 0px;}
.homepage-header .hero p {color: white; font-weight: 100;}
@media screen and (max-width: 950px) {
  .homepage-header .hero {width: 100%; text-align: center;}
  .homepage-header .hero p {text-align: center;}
  .homepage-header .hero ul {text-align: left;}
}

/* Regular Header
----------------------------------------------*/
/* Begin navigation */
.regular-header.header {background: #336;}
.regular-header #navbar {background: #336; transition: all 1s ease-in-out;}
.regular-header #navbar.fixed {position: fixed; top: 0; width: 100%;}
.regular-header #nav { width: 1170px; margin: auto; list-style-type: none; padding: 10px; overflow: hidden; font-size: 14px; display: flex; justify-content: space-between; align-items: center; font-weight: 100;}
.regular-header #nav li { display: inline-block; }
.regular-header #nav li a { display: block; color: #dedede; text-align: center; padding: 14px 12px; text-decoration: none; box-sizing: border-box; border-bottom: 2px solid rgba(0, 0, 0, 0); cursor: pointer; }
/* #nav li > a { font-weight: bold; } */
.regular-header #nav li:hover a { border-color: #dedede;}
.regular-header #nav li.dir:hover a { border-color: rgba(0, 0, 0, 0); }
.regular-header #nav li:hover>.dropdown-content { display: flex; justify-content: space-around; }
/* .dropdown-content { display: none; position: absolute; background-color: #F5F5F5; width: 60%; left: 20%; -webkit-box-shadow: 2px 18px 23px -7px rgba(163, 163, 163, 1); -moz-box-shadow: 2px 18px 23px -7px rgba(163, 163, 163, 1); box-shadow: 2px 18px 23px -7px rgba(163, 163, 163, 1); z-index: 1; color: black; }
.dropdown-content a { display: block; padding: 3px !important; text-align: left !important; color: #333 !important;  background-color: #F5F5F5 !important; border: none !important;}
.dropdown-content a:hover { background-color: #F5F5F5 !important;  color: #cc0000 !important; text-decoration: underline !important; }
.dropdown-content h3 { font-size: 18px; }
.dropdown-content h4 { margin-bottom: 1px !important; margin-top: 10px !important; } */
.regular-header .dropdown-content { display: none; position: absolute; background: #F5F5F5; background: linear-gradient(rgba(245, 245, 245, 0.9), rgba(245, 245, 245, 0.9)), url("https://www.harmonicalessons.com/images/header-class_photo.jpg") center; width: 100%; left: 0; z-index: 1; color: black; }
.regular-header .dropdown-content a { display: block; padding: 3px !important; text-align: left !important; color: #333 !important; background-color: rgba(0, 0, 0, 0) !important; border: none !important;}
.regular-header .dropdown-content a:hover { background-color: rgba(0, 0, 0, 0) !important;  color: #cc0000 !important; text-decoration: underline !important; }
.regular-header .dropdown-content h3 { font-size: 18px; }
.regular-header .dropdown-content h4 { margin-bottom: 1px !important; margin-top: 10px !important; }
.regular-header .dropdown-content-small { display: none; position: absolute; background-color: #f5f5f5; min-width: 160px;  z-index: 1; padding-bottom: 7px; padding-right: 7px; padding-top: 7px;}
.regular-header .dropdown-content-small a { text-align: left !important; color: #333 !important; padding: 6px 16px !important; border: none !important; }
.regular-header .dropdown-content-small a:hover { color: #cc0000 !important; text-decoration: underline !important; }
.regular-header .dir:hover .dropdown-content-small { display: block; }
.regular-header .column { padding: 10px; }
.regular-header .downarrow { font-size: 10px; }
.regular-header .big-logo { height: auto; width: 130px; /*width: 174px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;*/}
.regular-header .big-logo a { padding: 0 !important; }
.regular-header .big-logo a:hover { border-bottom: 2px solid rgba(0, 0, 0, 0) !important; }
.regular-header .fixed .big-logo { height: auto; width: 130px; }
.regular-header .header-logo { width: 100%; height: auto; }
/* Begin Login/Sign-Up buttons */
.regular-header .signup-button a { text-align: center !important; display: block !important; background: #ffcc00 !important; color: black !important; padding: 8px 0 !important; font-weight: bold; font-size: 18px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 180px; }
.regular-header .signup-button a:hover { background: #ffcc00 !important; color: black !important;}
.regular-header .top-login-button, .top-signup-button {display: inline-block;}
.regular-header .top-login-button a, .top-signup-button a {text-decoration: none; color: #F5F5F5; font-size: 15px;}
.regular-header .top-login-button a:hover, .top-signup-button a:hover {text-decoration: none;}
.regular-header .top-signup-button a { text-align: center; background-color: #2d9d5d; color: white !important; padding: 8px 18px; border-radius: 20px; -moz-border-radius: 20px; transition: 0.3s;}
.regular-header .top-login-button a { text-align: center; padding: 8px 18px; transition: 0.3s;}
.regular-header .top-signup-button a:hover { background-color: #38c574; }
.regular-header .top-login-button a:hover { border-bottom: 2px solid white; }
.regular-header .big-signup-button a { text-decoration: none; text-align: center; background-color: #2d9d5d; border: 2px solid white; color: white; padding: 20px 70px; border-radius: 100px; -moz-border-radius: 100px; transition: 0.3s; font-size: 20px; }
.regular-header .big-signup-button a:hover {background-color: #38c574;}
/* End Login/Sign-Up buttons */
/* Begin Mobile Nav */
.regular-header #showmore-nav div { width: 35px; height: 2px; background-color: white; margin: 6px 0; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.regular-header #showmore-nav { display: none !important; }
.regular-header #mobile-logo { display: none !important; }
.regular-header .mobile-nav, .mobile-nav-lessons { display: none; }
.regular-header .mobile-nav ul, .mobile-nav-lessons ul { list-style-type: none; margin: 0; padding: 0; }
.regular-header .mobile-nav ul li a, .mobile-nav-lessons ul li a { display: block; color: white; padding: 10px 15px; background-color: #336; }
.regular-header .mobile-nav ul li a:hover, .mobile-nav-lessons ul li a:hover { text-decoration: none; background-color: #222244; }
@media screen and (max-width: 1170px) {
  .regular-header #nav {width: 100%;}
  .regular-header .top-signup-button {padding-right: 20px;}
}
@media screen and (max-width: 950px) {
  .regular-header #showmore-nav { display: inline-block !important; }
  .regular-header #nav li {display: none;}
  .regular-header #nav li a {border: 0 !important;}
  /* .top-signup-button {margin-right: 15px;} */
  .regular-header #mobile-logo { display: inline-block !important; margin-left: 20px; }
  .regular-header #mobile-logo a {padding: 0 !important;}
}
/* End Mobile Nav */

/* Text Styles
----------------------------------------------*/
.content-reg {color: #333333; font-size: 15px; line-height: 1.8; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.content-bigintro {width: 84%; color: #333333; font-size: 20px; line-height: 34px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 0px 0px 0px 60px; font-style: italic; }
.content-bigintro-2col {width: 84%; color: #333333; font-size: 20px; line-height: 34px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 0px 0px 0px 60px; font-style: italic;}
.content-medintro-3col {width: 84%; color: #555; font-size: 16px; line-height: 28px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 12px 0px 10px 44px; font-style: italic; font-weight: bold; text-align: center;}
.content-medintro-3col2 {width: 84%; color: #555; font-size: 16px; line-height: 28px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 0px; font-style: italic; font-weight: bold; text-align: center;}
.intro-undernavbox {color: #333333; font-size: 15px; line-height: 1.8; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; padding: 10px 0px 0px 0px;}
.content-reg333 {color: #333333; font-size: 15px; line-height: 1.8; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.content-reg666 {color: #666666; font-size: 15px; line-height: 1.8; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.content-regC00 {color: #CC0000; font-size: 15px; line-height: 1.8; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.content-regFC0 {color: #FF6600; font-size: 15px; line-height: 1.8; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.content-regfff {color: #fff; font-size: 15px; line-height: 1.8; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.content-italic {font-style: italic; color: #1e1e1e; font-size: 15px; line-height: 1.8; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.content-italic-largeF90 {font-style: italic; color: #FF9900; font-size: 16px; line-height: 24px; font-family: Verdana, Geneva, Arial, Helvetica;}
.content-storeads {color: #1e1e1e; font-size: 12px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;} /* Size=1 */
.content-small {color: #1e1e1e; font-size: 13px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;} /* Size=1 */
.content-small333 {color: #333333; font-size: 13px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;} /* Size=1 */
.content-small666 {color: #666666; font-size: 13px; line-height: 16px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;} /* Size=1 */
.content-large {color: #1e1e1e; font-size: 16px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;} /* Size=3 */
.content-large333 {color: #333333; font-size: 16px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;} /* Size=3 */
.content-large666 {color: #666666; font-size: 16px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;} /* Size=3 */
.content-largeC00 {color: #CC0000; font-size: 16px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;} /* Size=3 */
.content-largefff {color: #fff; font-size: 16px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;} /* Size=3 */
.content-header {color: #000000; font-size: 16px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;}
.content-header-black {color: #333; font-size: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;}/* Size=4 */
.content-header-prices {color: #333; font-size: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;}/* Size=4 */
.content-header-red {color: #CC0000; font-size: 18px; font-family: Arial, montserrat, Verdana, Helvetica;} /* Size=4 */
.photo-text {color: #1e1e1e; font-size: 11px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;}
.photo-text666 {color: #666666; font-size: 11px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;}
.searchboxtext {color: #666666; font-size: 12px font-family: montserrat, Verdana, Geneva, Arial, Helvetica; }
.searchboxtext2 {color: #000000; font-size: 12px font-family: montserrat, Verdana, Geneva, Arial, Helvetica; }
.youtube-video-text {font-weight: 100; color: #666666; font-size: 14px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 10px 0px 0px 0px; text-align: left; width: 550px; margin: auto;}
.content-bigintro-2column {width: 84%; color: #333333; font-size: 20px; line-height: 34px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 0px 0px 0px 80px; font-style: italic;}
.content-bigintro-2column2 {color: #333333; font-size: 20px; line-height: 34px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 0px 0px 0px 0px; font-style: italic;}

.ul-reg {list-style-type: square; color: #333333; font-size: 15px; line-height: 1.7; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;} /*line-height: 18px;*/
.ul-reg333 {list-style-type: square; color: #333333; font-size: 15px; line-height: 1.7; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.ul-reg444 {list-style-type: square; color: #444444; font-size: 15px; line-height: 1.7; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.ul-reg666 {list-style-type: square; color: #666666; font-size: 15px; line-height: 1.7; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.ul-small {list-style-type: square; color: #1e1e1e; font-size: 13px; line-height: 17px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;} /*line-height: 18px;*/
.ul-square {list-style-type: square;}
.ul-disc {list-style-type: disc;}
.ul-circle {list-style-type: circle;}
.ul-numbers {list-style-type: decimal;}

.white-popup { background: white; padding: 20px 30px; text-align: left; max-width: 450px; margin: 40px auto; position: relative; }
.white-popup p {font-weight: 100;}

/* Pagetitles and H1s
-----------------------------------------------*/
.pagetitle {width: 100%; color: #333333; font-weight: bold; font-size: 30px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 8px 0px 14px 24px; margin-top: 0px;}
.pagetitle-homepage {width: 100%; color: #333333; font-weight: bold; font-size: 26px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 28px 0px 10px 28px; margin-top: 0px;}
.pagetitle-no-bc {width: 100%; color: #333333; font-weight: bold; font-size: 30px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 26px 0px 14px 24px; margin-top: 0px;}
.pagetitle-no-bc2 {width: 100%; color: #333333; font-weight: bold; font-size: 30px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 0px; margin-top: 0px;}
.pagetitle-2column {width: 100%; color: #333333; font-weight: bold; font-size: 30px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 28px 0px 10px 52px; margin-top: 0px; letter-spacing: .01em;}
.pagetitle-2column2 {width: 100%; color: #333333; font-weight: bold; font-size: 26px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 28px 0px 0px 0px; margin-top: 0px; letter-spacing: .01em;}
.pagetitle-small {color: #333333; font-weight: bold; font-size: 22px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; margin-top: 0px; margin-bottom: -12px;}
.sub-pagetitle {color: #999999; margin-top:-8px; margin-bottom:8px;
 font-weight: bold; font-size: 22px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;}
.datetext {color: #333333; font-weight: bold; font-size: 11px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}

/* Header
----------------------------------------------*/
.table-header {width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: 4px; margin-top: 16px; padding: 1px; background-color: #999; -moz-border-radius: 6px; border-radius: 6px;}/*-moz-border-radius-topright 6px; -moz-border-radius-topleft 6px; border-top-right-radius: 6px; border-top-left-radius: 6px;*/ /*border-collapse: collapse;*//* -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px#ccc; box-shadow: 0 0 10px #ccc;*/  /*MARGIN with Year Special Banner- margin-bottom: 15px; (or less) normal is 24px*/
.table-header2 {width: 100%; margin-left: auto; margin-right: auto; background-color: #336; padding: 0px 0px 0px 0px;}
/* .fixed { position: fixed; top: 0; left: 0; width: 100% } */
/* .header-logo {width: 200px; height: auto; padding: 0; margin: 0;} */
@media only screen and (max-width: 798px) {
  .header-logo {width: 200px;}
}
@media only screen and (max-width: 500px) {
  .header-logo {width: 150px;}
}
.abovelinks {width: 1000px; margin-left: auto; margin-right: auto; background-color: #fff; color: #ccc; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 11px;}
.abovelinks A {text-decoration: none; color: #999; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 11px;}
.abovelinks A:visited {color:#999;}
.abovelinks A:hover {text-decoration: underline; color:#CC0000;}
.top-strip-links A {text-decoration: none; color: #ccc; font-size: 13px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;} /*font-weight: bold;*/
.top-strip-links A:visited {color:#ccc; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.top-strip-links A:hover {text-decoration: underline; color:#ff9900;}
@media (max-width: 950px) {
  .top-strip-links {display: none;}
}
.headerslogan A {text-decoration: underline; color: #FF9900; font-style: italic; font-weight: bold; font-family: Arial, Helvetica; font-size: 15px}
.headerslogan A:visited {text-decoration: underline; color: #FF9900;}
.headerslogan A:hover {text-decoration: none; color:#9999CC;}
.table-memberbox {width: 150px; margin-left: auto; margin-right: 16px; margin-bottom: 85px; padding: 8px 8px 6px 4px; background-color: #666; border:0px #a9a9a9 solid; -moz-border-radius: 8px; border-radius: 8px;} /*options: same: 333366, 19194C, very subtlely darker: 2e2e5c, bit more 26265f or med-dark1e1e57*/
.table-memberbox2 {margin-left: auto; margin-right: 16px; padding: 8px 8px 6px 4px;}
.memberbox A {text-decoration: none; color: #F5F5F5; font-weight: bold; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-size: 13px}
.memberbox2 A {text-decoration: none; color: #F5F5F5; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-size: 18px}
.memberbox A:visited {color:#F5F5F5;}
.memberbox A:hover {text-decoration: none; color:#FF9900;} /*text-decoration: underline;*/
.memberbox2 A:hover {text-decoration: none;}
.memboxtext {color: #999999; font-weight: bold; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-size: 11px}
.memboxtextgold {color: #999999; font-weight: bold; font-family: montserrat, Verdana, Arial, Helvetica; font-size: 16px; letter-spacing: .05em;}
.header-dropdown {white-space: nowrap; padding: 0px; background-color: #999;}
.header-dropdown2 {width: 1000px; margin-left: auto; margin-right: auto; white-space: nowrap; padding: 0px; margin-bottom: 2px;}
.header-dropdown-gray {width: 1000px; margin-left: auto; margin-right: auto; white-space: nowrap; padding: 0px;  margin-bottom: 20px; margin-top: 5px; background-color: #0f5895; -moz-border-radius: 6px; border-radius: 6px;} /*background-color: #fff;*/

/* 2018 Video Tables
----------------------------------------------*/
.youtube-resizewrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;}
.youtube-resizewrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}
.youtube-video-text {font-weight: 100; color: #333; font-size: 14px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 10px 0px 0px 0px; text-align: left; width: 556px; margin: auto; max-width: 100%;}
.video-samples-header {color: #336; font-size: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica;}
.smallvideos4-div {color: #666666; font-size: 12px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; margin-left: auto; margin-right: auto; padding: 2px; background-color: #F5F5F5; width: 84%; text-align: center; display: flex; justify-content: center;}
.smallvideos3-div {color: #666666; font-size: 12px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; margin-left: auto; margin-right: auto; padding: 2px; background-color: #F5F5F5; width: 64%; text-align: center; display: flex; justify-content: center;}

.smallvideos256-div {color: #666666; font-size: 12px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; margin-left: auto; margin-right: auto; padding: 2px; background-color: #efeff7; width: 76%; text-align: center; display: flex; justify-content: center;}
.smallvideos192-div {color: #666666; font-size: 12px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; margin-left: auto; margin-right: auto; padding: 2px; width: 100%; text-align: center; display: flex; justify-content: center;}   /*These are typically embedded within a page*/
.smallvideos-div {color: #666666; font-size: 12px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; margin-left: auto; margin-right: auto; padding: 2px; background-color: #F5F5F5; width: 60%; text-align: center; display: flex; justify-content: center;}

.smallvideos-title {font-weight: bold; padding: 12px 0px 12px 0px; margin: auto;}
.smallvideos-cell {vertical-align: top; margin: auto; text-align: center; margin-top: 25px;}
.smallvideos-text {line-height: 24px; text-align: left; width: 310px; margin: auto;}
.smallvideos256-text {line-height: 24px; text-align: left; width: 250px; margin: auto;}
.smallvideos192-text {line-height: 24px; text-align: left; width: 194px; margin: auto;}

@media only screen and (max-width: 1000px) {
  .smallvideos4-div {display: block; width: 100%;}
  .smallvideos4-div .smallvideos-cell {width: 30%; display: inline-block;}
  .smallvideos3-div {display: block; width: 100%;}
  .smallvideos3-div .smallvideos-cell {width: 30%; display: inline-block;}
  .smallvideos192-div {display: block; width: 100%;}
  .smallvideos192-div .smallvideos-cell {width: 30%; display: inline-block;}
  .smallvideos256-div {display: block; width: 100%;}
  .smallvideos256-div .smallvideos-cell {width: 30%; display: inline-block;}
  .smallvideos-div {display: block; width: 100%;}
  .smallvideos-div .smallvideos-cell {width: 30%; display: inline-block;}
  }
@media only screen and (max-width: 798px) {
  .smallvideos4-div .smallvideos-cell {width: 45%;}
  .smallvideos3-div .smallvideos-cell {width: 45%;}
  .smallvideos192-div .smallvideos-cell {width: 45%;}
  .smallvideos256-div .smallvideos-cell {width: 45%;}
    .smallvideos-div .smallvideos-cell {width: 45%;}
    }
@media only screen and (max-width: 500px) {
  .smallvideos4-div .smallvideos-cell {width: 100%; display: block;}
  .smallvideos3-div .smallvideos-cell {width: 100%; display: block;}
  .smallvideos256-div .smallvideos-cell {width: 100%; display: block;}
  .smallvideos192-div .smallvideos-cell {width: 100%; display: block;}
    .smallvideos-div .smallvideos-cell {width: 100%; display: block;}
    }

/* Main Tables
----------------------------------------------*/
.table-mainpage {width: 1000px; margin-left: auto; margin-right: auto; padding: 0px; background-color: #FFFFFF; -moz-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 8px #ddd; -webkit-box-shadow: 0 0 8px#ddd; box-shadow: 0 0 8px #ddd;} /*border-collapse: collapse; border:1px #efefef solid;*/
.table-mainpage2 {width: 100%; padding: 0px; margin: 0; background-color: #FFFFFF;}
.mainpage-centertd {width: 90%; vertical-align: top;}
.mainpage-centertd2 {vertical-align: top; width: 80%; margin: auto;}
.table-centercontent {width: 93%; color: #333333; font-size: 13px; line-height: 20px; font-family: montserrat, Verdana, Geneva; margin-left: auto; margin-right: auto; padding: 0px;}
.top-row {display: flex; justify-content: space-between;}
.top-row div {margin-top: 16px;}
.top-row .big-logo {margin-left: 16px}
.top-row2 {width: 1000px; margin-left: auto; margin-right: auto; padding: 5px 0px; display: flex; justify-content: space-between;}
@media only screen and (max-width: 1170px) {
  .top-row2  {width: 100%;}
}
.top-row2 div {margin-top: 16px;}
.top-row2 .big-logo {margin-left: 16px}
.right-container {width: 300px; display: inline-block;}
@media only screen and (max-width: 1170px) {
  .right-container  {width: 60%; display: block; margin: auto;}
}
@media only screen and (max-width: 798px) {
  .right-container  {width: 90%;}
}
.top-intro {padding: 15px; text-align: center;}
.top-intro div {display: inline-block;}
.top-intro .description {vertical-align: top; max-width: 450px; padding: 20px;}
@media only screen and (max-width: 798px) {
  .top-intro div {max-width: 100%;}
}

/* Footer
----------------------------------------------*/
.table-footer {color: #333333; font-weight: bold; font-size: 10px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; width: 1000px; margin-left: auto; margin-right: auto; padding: 0px; background-color: #e6e6e6;} /*F2F2F2 (from Apple) e6e6e6 (darker)*/
.table-footer2 {color: #fff; font-size: 12px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; width: 100%; margin-left: auto; margin-right: auto; padding: 0px; background-color: #336; position: relative;}
.footer-text {color: #333333; font-weight: bold; font-size: 10px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.footer-text2 {color: #333333; font-size: 12px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.footerlinks A {text-decoration: none; color: #003399; font-size: 10px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;} /*font-weight: bold;*/
.footerlinks A:visited {color:#003399; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.footerlinks A:hover {text-decoration: underline; color:#CC0000; font-weight: bold;}
.footerlinks2 A, .footerlinks2 .link-style {text-decoration: none; color: #ccc; font-size: 12px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;} /*font-weight: bold;*/
.footerlinks2 A:visited {color:#ccc; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100;}
.footerlinks2 A:hover {text-decoration: underline; color:#ff9900;}
.footer-column {display: inline-block; text-align: left; vertical-align: top; margin: 10px; width: 250px;}
.footer-column a, .footer-column .link-style {display: block; padding: 8px;}
.footer-social-media {position: absolute; left: 0; top: 0; margin: 25px;}
.AuthorizeNetSeal {position: absolute; right: 0; top: 0; margin: 25px !important;}
@media only screen and (max-width: 1000px) {
  .AuthorizeNetSeal {position: static; margin: auto !important; padding: 20px !important;}
  .footer-social-media {position: static; padding-top: 20px; text-align: center;}
  .table-footer2.center {text-align: left;}
}

  /* Buttons
----------------------------------------------*/
.top-login-button, .top-signup-button, .top-login-button a, .top-signup-button a {display: inline-block;}
.top-login-button, .top-signup-button {padding-left: 10px; padding-right: 10px;}
.top-signup-button a { text-align: center; background-color: #2d9d5d; border: 2px solid white; color: white !important; padding: 8px 18px; border-radius: 20px; -moz-border-radius: 20px; transition: 0.3s; width: 85px;}
.top-login-button a { text-align: center; background-color: #555; padding: 8px 18px; border-radius: 20px; -moz-border-radius: 20px; border: 2px solid white; transition: 0.3s; width: 85px; }
.top-signup-button a:hover { background-color: #38c574; }
.top-login-button a:hover { background-color: #777; }
.bottom-nav-button {text-align: center; display: inline-block; background-color: #38c574; color: white; font-size: 18px; font-weight: bold; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2); width: 200px; height: 60px; line-height: 60px; margin: 10px;}
.bottom-nav-button:hover {text-decoration: none;}
.join-now-ad-button a { text-align: center; background-color: #2d9d5d; color: white !important; padding: 15px 25px; width: 200px; border-radius: 40px; -moz-border-radius: 20px; transition: 0.3s; font-style: normal; display: inline-block; }
.join-now-ad-button a:hover {background-color: #38c574; text-decoration: none;}
.pricing-button a { text-align: center !important; display: block !important; margin: auto; background: #ffcc00 !important; color: #333 !important; padding: 8px 0 !important; font-weight: bold; font-size: 17px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 140px; }
.pricing-button a:hover {background: #ffcc00 !important; color: #333 !important;}
.learnmore-button { text-align: center; background-color: #666; color: white !important; padding: 15px 25px; border-radius: 25px; -moz-border-radius: 25px; transition: 0.3s; margin-right: 20px;}
.learnmore-button:hover { background-color: #888; text-decoration: none;}
.buynow-button { text-align: center; background-color: #2d9d5d; color: white !important; padding: 15px 35px; border-radius: 25px; -moz-border-radius: 25px; transition: 0.3s; margin: 12px;}
.buynow-button:hover { background-color: #38c574; text-decoration: none; }
@media (max-width: 798px) {
  .learnmore-button, .buynow-button { margin: 25px auto; display: block; }
}

/* BreadCrumb Links
----------------------------------------------*/
.table-bc {width: 100%; padding: 9px 0px 12px 24px;}
.crumbarrows {color: #999; font-weight: bold; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 11px} /*003399 or 333 or 999*/
.crumblinks A {color: #999; font-weight: bold; font-family: Verdana, Geneva, Arial, Helvetica; font-weight: 100; text-decoration: underline; font-size: 11px} /*003399 or 333 or 999*/
.crumblinks A:visited {color: #999;} /*003399 or 333 or 999*/
.crumblinks A:hover {text-decoration: underline; color:#CC0000;}

/* More Tables
----------------------------------------------*/
.table-pricing {color: #333333; font-size: 15px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial; font-weight: 100; border: 1px #ddd solid; width: 96%; -moz-border-radius: 6px; border-radius: 6px; margin-left: auto; margin-right: auto; padding: 20px 20px 14px 20px;}
.table-pricing-td1 {width: 43%; padding: 8px 0px 12px 0px; border-bottom: 1px #ccc solid;}
.table-pricing-td2 {text-align: center; width: 19%; padding: 8px 0px 12px 0px; border-bottom: 1px #ccc solid;}
.table-pricing-td3 {text-align: center; width: 19%; padding: 8px 0px 12px 0px; border-bottom: 1px #ccc solid;}
.table-pricing-td4 {text-align: center; width: 19%; padding: 8px 0px 12px 0px; border-bottom: 1px #ccc solid;}
.gray-bkground {background-color: #e6e6e6;}
.table-pricing th {border: 1px #ccc solid;}
.table-pricing tbody {background: #FFF;}

.table-reg {color: #333333; font-size: 13px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; border:1px #999 solid;}
.table-reg td {border: 1px #999 solid; padding: 3px;}
.table-reg100wd {color: #333333; font-size: 13px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; border:1px solid black; width:100%;}

.table-shortcuts {color: #333333; font-size: 13px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; margin-left: auto; margin-right: auto; padding: 2px; background-color: #FFFFFF; width:100%;}
.table-shortcuts td {padding: 10px;} /*vertical-align: top;*/

.table-recommended {color: #333333; font-size: 13px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial; font-weight: 100; border: 1px #ccc solid; width: 100%; margin-left: auto; margin-right: auto; padding: 10px; border-collapse: collapse;}
.table-recommended td {line-height: 20px; border: 1px #ccc solid; padding: 10px; border-collapse: collapse;}

.table-cds {color: #333333; font-size: 13px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial; font-weight: 100; border: 1px #ccc solid; width: 95%; margin-left: auto; margin-right: auto; padding: 0px; border-collapse: collapse;}
.table-cds td {border: 1px #ccc solid; padding: 3px;}
.table-cds th {border: 1px #ccc solid;}
.table-cds tbody {background: #FFF;}

.table-keys {color: #333333; font-size: 13px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; border:1px #999 solid; width: 80%; margin-left: auto; margin-right: auto; padding: 0px; border-collapse: collapse;}
.table-keys td {border: 1px #999 solid; padding: 8px;}

/* Top Gray Nav Box
----------------------------------------------*/
.table-graynavbox {width: 70%; background-color: #f5f5f5; margin-left: auto; margin-right: auto; margin-top: 24px; margin-bottom: 20px; line-height: 12px; -moz-border-radius: 5px; border-radius: 5px;}  /*background-color: #F0F0F0 or #EEEEEE or #DEE7EC or #DCD9D9 or #dddddd*/
.graynavboxheader {color: #333333; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; font-size: 12px;}
.blackheader {color: #333333; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; line-height: 1.5; font-size: 12px;}
.bluelinks A {color: #003399; font-weight: bold; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; line-height: 1.7; font-size: 12px}
.bluelinks A:visited {color: #003399;}
.bluelinks A:hover {text-decoration: underline; color:#CC0000;}
@media only screen and (max-width: 1000px) {
  .table-graynavbox td {display: block; padding: 10px !important; text-align: center;}
}

/* Sub-topics Nav Box
----------------------------------------------*/
.table-subtopics {color: #333333; font-size: 14px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; margin-left: auto; margin-right: auto; padding: 10px; background-color: #f5f5f5;  -moz-box-shadow: 0 0 3px #ddd; -webkit-box-shadow: 0 0 3px#ddd; box-shadow: 0 0 3px #ddd;}
.table-subtopics-2column {color: #333333; font-size: 14px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; margin-left: auto; margin-right: 70px; padding: 10px 10px 10px 10px; background-color: #f5f5f5;  -moz-box-shadow: 0 0 3px #ddd; -webkit-box-shadow: 0 0 3px#ddd; box-shadow: 0 0 3px #ddd;}
.table-subtopics-eee {color: #333333; font-size: 14px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; margin-left: auto; margin-right: auto; padding: 4px; background-color: #f5f5f5;}
.table-subtopics-white {color: #666666; font-size: 14px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; margin-left: auto; margin-right: auto; padding: 4px; background-color: #ffffff; border: 1px #ccc solid;  -moz-border-radius: 6px; border-radius: 6px;}
.table-subtopics-header {color: #333333; font-weight: bold; font-size: 16px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; text-align: center;}
.table-subtopics2 {color: #333333; font-size: 13px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; margin-left: auto; margin-right: auto; padding: 1px; background-color: #ffffff;}
.table-subtopics-header2 {color: #333333; font-weight: bold; font-size: 13px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; text-align: center;}

/* Video and Audio Tables
----------------------------------------------*/
.table-video {margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border:1px #ccc solid; width: 80%; -moz-border-radius: 6px; border-radius: 6px; padding: 10px 18px;}
.videobox-title {text-align: left; color: #333333; font-weight: bold; font-size: 14px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial; padding: 12px 10px 12px 15px;}
.videobox-image {padding: 0px 4px 12px 12px;}
.videobox-text {text-align: left; color: #666666; font-size: 13px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; padding: 0px 6px 12px 10px;} /*padding: Top Right Bottom Left*/

.table-audio {margin-top: 10px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border:1px #ccc solid; width: 55%; -moz-border-radius: 5px; border-radius: 5px;}
.table-audio-noborder {margin-top: 6px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 50%;}
.audiobox-text {text-align: center; color: #666666; font-size: 13px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; padding: 0px 15px 10px 15px;} /*padding: Top Right Bottom Left*/
.audiobox-title {text-align: center; color: #CC0000; font-weight: bold; font-size: 13px; line-height: normal; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; padding: 9px 15px 0px 15px;}

/*3 Audio Players*/
.table-smallaudio {margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;  width: 88%; color: #333333; font-weight: bold; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; font-size: 11px}
.table-smallaudio-pad {line-height: 18px; padding: 6px 2px; text-align: center; border:1px #ccc solid;}
.table-smallaudio-none {padding: 0px;}

/*Two Audio Players*/
.table-smallaudio2 {margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;  width: 75%; color: #333333; font-weight: bold; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; font-size: 12px}
.table-smallaudio2-pad {line-height: 18px; padding: 4px 2px; text-align: center; border:1px #ccc solid;}
.table-smallaudio2-none {padding: 0px;}

.videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*.rounded-corners {-moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; -khtml-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px;} use this for tables. Examples - http://www.css3.info/preview/rounded-border*/

/* Miscellaneous Code
----------------------------------------------*/
.addcomment A {text-decoration: underline; color: #003399; font-weight: bold; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-size: 14px}
.addcomment A:visited {color:#003399;}
.addcomment A:hover {text-decoration: underline; color:#CC0000;}

.checkmark-bullets {width: 80%; padding: 30px 0px 30px 0px;}
.checkmark-bullets img {float: left; padding: 10px 50px 0px 0px;}

.backtotop A {color: #003399; font-weight: bold; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-size: 11px}
.backtotop A:visited {color:#003399;}
.backtotop A:hover {text-decoration: underline; color:#CC0000;}

.ajax-poll * {color: #333 !important;}

/* ---------------------------------------------- */
@media only screen and (max-width: 1000px) {
  .newsl-resize {max-width: 90%; display: block !important;}
  .newsl-resize div {display: block !important;}
}

/* jquery-1.2.6.min.js Slide Show
----------------------------------------------*/
/* set the width and height below to match your jquery images */

#slideshow {
    position:relative;
    height:370px;
    width: 500px;
    margin: 0 auto;
}

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 370px;
    background-color: #FFF;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
    height: 293px;
    display: block;
    border: 0;
    margin-bottom: 10px;
}



/* OLDER Code
----------------------------------------------*/
.blacktext {color: #000000; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 10px}
.blacklinks A {color: #333333; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 10px}
.blacklinks A:visited {color:#333333;}
.blacklinks A:hover {text-decoration: underline; color:#CC0000;}
.blacklinks3 A {color: #000000; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 12px}
.blacklinks3 A:hover {text-decoration: underline; color:#CC0000;}
.blacklinks4 A {color: #000000; font-weight: bold; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 12px}
.blacklinks4 A:hover {text-decoration: underline; color:#CC0000;}
.bluelinks11 A {color: #003399; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 11px}
.bluelinks11 A:visited {color: #003399;}
.bluelinks11 A:hover {text-decoration: underline; color:#CC0000;}
.whitelinks A {color: #FFFFFF; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 10px}
.whitelinks A:visited {color:#FFFFFF;}
.whitelinks A:hover {text-decoration: underline; color:#CCCCCC;}
.bluelinks2 A {color: #003399; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 12px}
.bluelinks2 A:visited {color: #003399;}
.bluelinks2 A:hover {text-decoration: underline; color:#CC0000;}
.greyheader A {text-decoration: none; color: #999999; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 18px}
.blueheader {color: #003399; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 10px}
.yellowtext {color: #FFFFFF; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 10px}
.yellowcontentlinks A {color: #FDF8D9; font-family: Verdana, Geneva, Arial, Helvetica;}
.yellowcontentlinks A:hover {text-decoration: underline; color:#FFCCCC;}
table.headerborder { width: 950px; /*padding: 0px; border: 1px solid #789DB3;*/background: #000000; }
table.pageborder { width: 950px; /*padding: 0px; border: 1px solid #789DB3;*/background: #ff0000; }
.padding-left10 {padding-left: 10px;}
.padding-top10 {padding-top: 10px;}
.padding-bottom10 {padding-bottom: 10px;}

/* Left Column
----------------------------------------------*/
.table-leftmain {width: 170px; margin-left: auto; margin-right: auto; padding: 0px; border-spacing: 0px; background-color: #FFFFFF; border-collapse: collapse;}
.table-leftlinks {width: 100%; background-color: #ffffff; line-height: 13px; padding: 2px; border:0px #cccccc solid;} /*very light gray backgrounds: e5e5e5 or f0f0f0-with e5e5e5 border*/
.leftlinks A {text-decoration: none; color: #666666; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 11px;}
.leftlinks A:visited {color:#666666;}
.leftlinks A:hover {text-decoration: underline; color:#CC0000;}
.leftheader{background-color: #999; padding: 2px 0px 6px 15px; -moz-border-radius: 6px; border-radius: 6px;} /*-moz-border-radius: 6px; border-radius: 6px;*/ /*-moz-border-radius: 1em 2em 1em 2em; border-radius: 1em 2em 1em 2em;*/ /*background-color: #333366;*/
.leftheader-gray{background-color: #0f5895; padding: 6px 0px 10px 15px; -moz-border-radius: 6px; border-radius: 6px;} /*-moz-border-radius: 6px; border-radius: 6px;*/ /*-moz-border-radius: 1em 2em 1em 2em; border-radius: 1em 2em 1em 2em;*/ /*background-color: #333366;*/
.leftheaderlinks A {color: #FFFFFF; font-weight: bold; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 12px; letter-spacing: .05em;}
.leftheaderlinks A:visited {color:#FFFFFF;}
.leftheaderlinks A:hover {text-decoration: none; color:#FF9900;}
.subleftlinkstext {color: #FFFFFF; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 10px}
.subleftlinkstext2 {color: #000000; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 10px}
.subleftlinksheader {color: #FFFFFF; font-weight: bold; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 11px}
.subleftlinks A {text-decoration:none; font-weight: bold; color: #003399; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 11px}
.subleftlinks A {text-decoration:none; font-weight: bold; color: #003399; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 11px}
.subleftlinks A:hover {text-decoration: underline; font-weight: bold; color:#CC0000;}

/* Right Column
----------------------------------------------*/
.rightlinks A {text-decoration:none; color: #003399; font-weight: bold;}
.rightlinks A:visited {color:#003399; font-family: Verdana, Geneva, Arial, Helvetica;}
.rightlinks A:hover {text-decoration: underline; color:#CC0000; font-weight: bold;}
.rightredheader {color: #CC0000; font-weight: bold; font-size: 13px; font-family: Verdana, Geneva, Arial, Helvetica; }
.right-ads {color: #000000; font-size: 10px; line-height: 125%; font-family: Verdana, Geneva, Arial, Helvetica;}
.right-red-ads {color: #CC0000; font-weight: bold; font-size: 10px; line-height: 125%; font-family: Verdana, Geneva, Arial, Helvetica;}
.table-memcomments {color: #666; font-size: 11px; line-height: 16px; font-family: Verdana, Geneva, Arial, Helvetica; border: 1px #ededed solid; width: 130px; -moz-border-radius: 6px; border-radius: 6px; margin-left: auto; margin-right: auto; padding: 3px;}
.table-memcomments th {background-color: #fff; padding: 4px;}
.table-memcomments td {padding: 10px; text-align: left;}

/* 2 Column Pages
----------------------------------------------*/
.table-header-2column {width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: 16px; padding: 0px; background-color: #999; -moz-border-radius: 6px; border-radius: 6px;}/*-moz-border-radius-topright 6px; -moz-border-radius-topleft 6px; border-top-right-radius: 6px; border-top-left-radius: 6px;*/ /*border-collapse: collapse;*//* -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px#ccc; box-shadow: 0 0 10px #ccc;*/
.table-video-2column {margin-top: 0px; margin-right: 120px; margin-bottom: 0px; margin-left: auto; border:1px #ccc solid; width: 72%; -moz-border-radius: 6px; border-radius: 6px;}
.socialmedia-2column {width: 78%; padding: 2px 0px 0px 0px;}

/* Old 2017 Small Videos
----------------------------------------------*/
.table-smallvideos {color: #666666; font-size: 12px; line-height: 18px; font-family: montserrat, Verdana, Geneva, Arial, Helvetica; font-weight: 100; margin-left: auto; margin-right: auto; padding: 2px; background-color: #FFFFFF; width: 100%;}
.table-smallvideos-title {font-weight: bold; padding: 8px 0px 10px 0px;}
.table-smallvideos-cell {vertical-align: top;}
.table-smallvideos-text {text-align: left; width: 200px;}
.table-smallvideos-title160 {font-weight: bold; padding: 8px 0px 10px 0px;}
.table-smallvideos-cell160 {vertical-align: top;}
.table-smallvideos-text160 {width: 90%;}