BODY {COLOR: #000000; FONT-FAMILY: "Trebuchet MS", Helvetica, sans-serif; background-image:url("https://www.mathmammoth.com/images/bak.jpg"); background-attachment: fixed; margin:0px; padding:0px; scroll-behavior: smooth; -webkit-scroll-behavior: smooth; -o-scroll-behavior: smooth; -ms-scroll-behavior: smooth; -moz-scroll-behavior: smooth;}

H1 {font-size: 1.63em; margin-top:0px; color:darkblue;}
H2 {font-size: 1.375em; color: #045388}
H3 {font-size: 1em; color: #045388; margin:0px; padding:0px; font-weight:bold}

li {margin-bottom: 0.7em; margin-top: 0.7em}
blockquote{overflow: auto}
img{border:0px}
ol.m li, ul.m li {margin-left:-20px}
ol.n li, ul.n li {margin-left:-12px}

p.12 {margin-top:12px; margin-bottom:12px}


.sales-bar {
  padding: 10px; 
  background-color: #F9F935; 
  font-size: 16px; 
  display: block; 
  width: 99%; 
  filter: drop-shadow(4px 4px 4px #999);
  -moz-filter: drop-shadow(4px 4px 4px #999);
  -ms-filter: drop-shadow(4px 4px 4px #999);
  -webkit-filter: drop-shadow(4px 4px 4px #999);
  -o-filter: drop-shadow(4px 4px 4px #999);
}
.sales-bar-parent {
  transform: translateY(0); 
  transition: transform 1.5s;
  position: fixed; 
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
}
.you {
  font-size:0.8em;
  font-style:italic;
  background-color:#DDDDDD;
  height:1.1em;
  padding:6px;
}
.has-badge {position: relative}
.badge {
  position: absolute;
  right: 3px;
  top: 3px;
  background-color: orange;
  padding: 3px;
  border-radius: 10px;
}
.midcolumntext {padding:1em; background-color:#FFFFFF;line-height:135%}

.green {background-color:#BCF2BC; color:green; padding:6px;border-radius:15px;}
.goldentext {background-color:#FFe88C; color:darkorange; padding:6px;border-radius:15px;}
.bluetext {background-color:#91CFF6; color:blue; padding:6px; border-radius:15px;background:linear-gradient(to right, #7ACDFF, #E4F3FC); box-shadow: 2px 2px 2px #999999;}

.lightblue {background-color:#B9E0F9; color:#0099FF; padding:6px;border-radius:15px; 
background:linear-gradient(to right, #B9E0F9, #E4F3FC); box-shadow: 2px 2px 2px #999999;}
.mirl {background-color:#B3C5DD; color:#000000; padding:3px;border-radius:15px; }
.skills {color:#042A6B; padding:6px;border-radius:15px; 
background:linear-gradient(to right, #82CFDA, #C0D9DC); box-shadow: 2px 2px 2px #999999; background-color:#82CFDA;}

A {COLOR: #0055EE;  FONT-WEIGHT: bold; TEXT-DECORATION: none}
A:hover { COLOR: #0055EE; FONT-WEIGHT: bold; TEXT-DECORATION: underline}

A.golden {COLOR: blue; COLOR: #ff8022; FONT-WEIGHT: bold; TEXT-DECORATION: none }
A.golden:hover { COLOR: #ff8022;  FONT-WEIGHT: bold;  TEXT-DECORATION: underline}

DIV.bookdisplay, DIV.bookdisplay-wide, .bookdisplay-horizontal {
  padding:10px;
  color:black;
  font-weight:bold;
  float:right;
  margin-left:10px;
  background-color:#D0D0D0;
  border-radius:15px;
}
DIV.bookdisplay{font-size:0.875em; text-align:center; width:220px}
div.bookdisplay-horizontal {text-align:left}

@media screen and (max-width: 550px) {
DIV.bookdisplay {float:none; margin:auto; margin-bottom: 20px}
div.mobile {float:none!important; margin:auto!important}
.you {display:none}
}

div.order {border:2px solid #999999; margin-left:12px; margin-right:12px; padding:12px; background-color:#DDDDDD; border-radius:15px}
@media screen and (max-width: 500px) {
div.order  {margin-left:0px; margin-right: 0px}
}

.also-interested {margin:auto; max-width:500px; border-radius:15px; box-shadow:3px 3px 5px #C0C0C0; 
background-color:#aedeff; background:linear-gradient(#aedeff, #E4F3FC);font-style:italic; padding:12px}
.testimonial {display:block; border-radius:12px;background-color:#D7FF99; background:linear-gradient(#D7FF99,#E5F6CA); padding:10px; box-shadow: 2px 2px 2px #999999, -1px -1px 2px #E0E0E0; margin:12px 12px 20px 12px}

a.pl, .pl {font-weight:normal}
.p16 {font-size:1em}

a.kagilink, a.goldlink, a.lululink {display:block; text-align:center; line-height:20px; padding:3px; border:2px solid white; color:#222222; border-radius: 10px; max-width:130px;}
a.kagilink, a.goldlink { background-color:#FFE87C;}
a.kagilink:hover, a.goldlink:hover {background-color:#ffd925; text-decoration:none}

a.goldlink {border:2px solid gold !important}
a.lululink {background-color:#a4fbad}
a.lululink:hover {background-color:#5EFB6E; text-decoration:none}

.kagibutton, .currclickb, .lulubutton{padding:5px; border:2px solid white;  font-size:0.875em; border-radius: 10px;}
.kagibutton {background-color:#FFE87C}
.currclickb {background-color:#FFE87C}
.lulubutton {background-color:#5EFB6E}
.discounts {padding:10px; background-color:#FFEE70; max-width:600px; margin:auto}

#greenbutton {width:130px; text-align:center;  background-color:#78b43b; padding:6px; border-radius: 15px;}
.greenbuttonlink {background-color:#78b43b; padding:6px 12px 6px 12px; text-shadow:1px 1px 2px #404040; color:white; font-weight:bold; text-decoration:none;  border-radius: 15px}
.greenbuttonlink:hover {
  background-color:#ACF251;
  color:white;
  text-decoration:none;
  text-shadow:1px 1px 2px black;
}

#wrap{max-width:842px; margin:auto; background:url("https://www.mathmammoth.com/images/glow.png"); background-repeat:repeat-y;}
#wrapInner{ margin:0 7px 0 10px;}
#InnerContent{margin:0 7px 0 10px;}
#mainNavi{ 	
 background: -webkit-linear-gradient(#0B66A5, #88B1CD); 
 background: -o-linear-gradient(#0B66A5, #88B1CD); 
 background: -moz-linear-gradient(#0B66A5, #88B1CD); 
 background: linear-gradient(#0B66A5, #88B1CD); 
 background-color: #93BBD6;
 min-height:44px;
 display: block;
 }

#toptext {display:none}
 
#headerBotArea{width:100%; height:107px; padding-top:6px; 
  background: -webkit-linear-gradient(#DAE8F1, #0B66A5); 
  background: -o-linear-gradient(#DAE8F1, #0B66A5); 
  background: -moz-linear-gradient(#DAE8F1, #0B66A5); 
  background: linear-gradient(#CCDFEC, #0B66A5);
  background-color: #93BBD6;
}

@media screen and (max-width: 900px) {
.social {display: none}
}

@media screen and (max-width: 700px) {
#search, #subscribe  {display: none}
}

img.bt {width:80%; height:auto}
img.mo {width:65%; height:auto; float:right; margin-left:10px}

@media screen and (max-width: 600px) {
img.bt, img.mo {width:100%; height:auto}
img, div.ig {float:none !important; margin:auto !important}
}

table.BlueGradBox td, div.BlueGradBox{padding:15px; background-color: #CCE8FD; text-align:left; float:left; border-radius:15px}

#Footer{ background:#ADCFFF; padding:15px 5px 15px 5px; font-size:1em; color:#000000; margin:10px 7px 0 10px; text-align:center; line-height:150%;  clear:both;}
	
.space{clear:both; height:10px;}

.blueBulet{ background:url("https://www.mathmammoth.com/images/blue_bulet.jpg"); background-repeat:no-repeat; padding:0 0 0 15px; display:block; margin-bottom:10px; background-position:left 5px; text-align:left}
a.FooterLink{ color:#000000; text-decoration:none; font-weight:normal}
a.FooterLink:hover{ color:#333333;  text-decoration:underline; font-weight:normal}

.BlueGradBox textbox{ border:1px solid #5FABDD; background:#FFFFFF !important;}

@media screen and (max-width: 640px) {
img.large {width:480px !important; height:auto !important}
img.large2 {width:360px !important; height:auto !important}
}
@media screen and (max-width: 520px) {
blockquote {margin:0px}
img.large {width:460px !important; height:auto !important}
img.large2 {width:330px !important; height:auto !important}
#InnerContent {margin:0px!important}
#wrapInner{margin:0px!important}
#Footer{margin:0px!important}
#bio_ep {min-width:350px!important}

}
@media screen and (max-width: 480px) {
blockquote {margin:0px}
img.large {width:300px !important; height:auto}
img.large2 {width:250px !important; height:auto}
#bio_ep {min-width:250px!important}

}

@media screen and (max-width: 800px) {
.video {width: 480px !important; height: 270px !important}
}
@media screen and (max-width: 680px) {
.video {width: 320px !important; height: 180px !important}
.video2 {width: 320px !important; height: 240px !important}

}

  /* Scroll To Top CSS */
#myBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 30px;
  z-index: 1000;
  filter: drop-shadow(2px 2px 3px #999);
  -o-filter: drop-shadow(2px 2px 3px #999);
  -webkit-filter: drop-shadow(2px 2px 3px #999);
  -moz-filter: drop-shadow(2px 2px 3px #999);
  -ms-filter: drop-shadow(2px 2px 3px #999);
  border: none;
  outline: none;
  background-color: #0E0EF5;
  color: white;
  text-decoration: none!important; 
  padding: 15px;
  border-radius: 10px;
  transition: background-color .3s;
}
#myBtn:hover	{background-color: #07079c;}

/*exit intent popup css */
  #bio_ep_bg {} 
  #bio_ep {max-width:400px!important; padding:12px; min-height:280px!important; background-color:#B2FF29!important; border-radius:12px; font-size:17px!important; border:6px solid #F0F0F0; font-family: Trebuchet MS; } 
  #bio_ep_close {font-size:16px!important;  background-color:orange!important}  /* close button*/

.sales-close {}
.sales-close-button {
  background-color:orange!important;
  width: 35px;
  height: 35px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: filter .3s ease-out;
  filter: drop-shadow(3px 3px 3px #999);
}

.sales-close-button:hover {
  filter: drop-shadow(5px 5px 4px #999);
}