:root {

			--highlight: #8AAEB5;
			--premium: #EB9D53;
			--bg: #E8EBE8;
			--exercises: #E4CEA0;
			--callout: #EB9D53;
			--alert: #E85A5A;
			--teams: #ACB4CD;
			--subtle: #F9F9F9;
			--text: black;
			--textlink: black;
		}
		body { 
				margin:0; padding: 0; 
				font-family: sans-serif; font-size: 18px;
				color: var(--text);
				background: var(--bg);
		}


		div,a {box-sizing: border-box;}
					
		/* core */
		a { color: var(--textlink); }
		a.nounderline, .nounderline a { text-decoration: none; }
		a.nounderline:hover, .nounderline a:hover { text-decoration: underline; }
		

		
		/* structures */
		.container { padding-bottom: 30px; margin-bottom: 30px; }
		.inner { width: 100%; max-width: 1000px; padding-top: 15px; padding-left: 15px; padding-right: 15px; margin: 0 auto; box-sizing: border-box; }
		
		@media only screen and (min-width: 600px) {
			.inner.wider { max-width: 1030px; padding-left: 30px; }
		}
		.hero { padding-top: 50px; }
		.nudgedown { margin-top: 50px; }
		.nobum { margin-bottom: 0;}


	
		.br { display: block; }
		.cols { display: grid; grid-template-columns: 50% 50%; }
		.cols6040 { display: grid; grid-template-columns: 60% 40%; }
		.col:first-child { padding-right: 100px; }
		.cols6040 .image {  overflow-y: visible; height: 100px;  }
		.cols6040 .image img { width: 100%; }
		.cols3 { display: grid; grid-template-columns: 33% 33% 33%; }
		.cols3 .col { padding-right: 50px;}

		@media only screen and (max-width: 900px) {
			.cols6040, .cols, .cols3 { display: block; }
			.cols3 { text-align: center;}
			.col { width: 100%; max-width: none; padding: 0 !important; padding-bottom: 50px; margin-bottom: 50px; }
			.cols6040 .image, .cols .image { display: block; text-align: center;  overflow-y: none; height: auto; }
			.cols6040 .image img, .cols .image img { width: auto; max-height: 300px; }
		}

		
		
		
		h1 { font-family: Poppins,sans-serif; margin:0; padding:0; font-size: 40px; line-height: 40px; }
		@media only screen and (min-width: 600px) { 
			h1 { font-size: 60px; line-height: 60px; margin-bottom: 15px; }
		}
		h1 + .sub { font-family: "Poppins"; font-weight: 200; font-size: 32px; line-height: 30px; margin-bottom: 50px; line-height: 32px; }
		h2 { font-family: Poppins,sans-serif; margin:0; margin-bottom: 10px; padding:0; font-size: 30px; line-height: 30px; }
		h3 { margin-bottom: 5px; padding-bottom: 0; }
		p { margin-top: 0; max-width: 600px; }
		.smallprint { font-size: 14px; }
		.strikethru { text-decoration:line-through;}
		input[type=text],input[type=email] { font-size: 24px; padding: 10px; margin-bottom: 15px; display: block; width: 100%; max-width: 400px; box-sizing: border-box; }
		@media only screen and (max-width: 600px) {
			input[type=text],input[type=email] { max-width: none;}
		}



		
		.highlight { background: var(--highlight); }
		.highlight.premium { background: var(--premium); }
		.highlight.exercises { background: var(--exercises); }
		.highlight.callout { background: var(--callout); }
		.highlight.alert { background: var(--alert); color:white; }
		.highlight.alert a { color:white; }
		
		.highlight.teams { background: var(--teams); }
		.highlight.subtle { background: var(--subtle); }
		
		
		
		
		

		/* supernav */
		#supernav { padding-top: 15px; }
		#supernav .inner { display: flex; justify-content: space-between; }
		#supernav .nav a { display: inline-block; margin-left: 15px; }
		#supernav .nav a:first-child { margin-left: 0px; }

		#supernav .logo { font-family: Poppins; font-weight: 800; padding-bottom: 5px; border-bottom: 3px solid black; font-size: 25px; }
		#supernav .logo a { text-decoration: none; ;}
		
		@media only screen and (max-width: 600px) {
			#supernav .inner { display: block; }
			#supernav .logo { display: block;  text-align: center;; }
			#supernav .nav { margin-top: 15px; }
		}

		/* superfooter */
		#superfooter { padding-top: 300px; padding-bottom: 30px; margin-top: -30px; }
		#superfooter .nav { display: flex; }
		#superfooter .nav div:first-child { padding-right: 30px; }
		@media only screen and (max-width: 600px) {
			#superfooter .nav { display: block; }
		  }
		
		
		/* buttons */
		.buttonbox { text-align: left; 50px; border-top: 1px solid black; border-bottom: 1px solid black; max-width: 400px; margin-top: 15px; }
		@media only screen and (max-width: 600px) {
			.buttonbox { max-width: none;  }
		}
		.buttonbox input[type=submit], .buttonbox button { width: 100%; font-size: inherit !important; text-align: left; border: 0; }
		.buttonbox a, .buttonbox input[type=submit], .buttonbox button { display: block; padding: 15px; text-decoration: none; font-family: Poppins; font-weight: 300; border-bottom: 1px solid black; cursor: pointer; background:none; }
		.buttonbox a:before { content:'⟩ ' }
		.buttonbox a.leftarrow:before { content:'⟨ ' }
		.buttonbox a.downarrow:before { content:'⤓ ' }
		
		

		.buttonbox a.noprefix:before { content:'' }		
		.buttonbox a:hover, .buttonbox input[type=submit]:hover, .buttonbox button:hover { padding-left: 30px; }
		.buttonbox a.primary, .buttonbox input[type=submit].primary, .buttonbox button.primary { background: black; color: white;  }
		.buttonbox a:last-child,.buttonbox input[type=submit], .buttonbox button { border: none; }
		
		
		.listbox { margin-bottom: 50px; }
		.listbox > a, .listbox > div, .listbox > tr, .listbox > label { display: block; padding: 15px; padding-left: 0; text-decoration: none; font-family: Poppins; font-weight: 300; border-bottom: 1px solid black; margin-bottom: 5px;   }
		.listbox > a, .listbox > label {cursor: pointer;}
		.listbox > a:hover {  }
		.listbox .primary { background: black; color: white;  }
		.listbox > a:last-child, .listbox div:last-child { border: none; }
		.listbox h2 { margin-top: 15px; }
		.listbox.tight > a, .listbox.tight > div { padding: 5px; padding-left: 15px; padding-right: 15px; }
		

		.exerciselist { display: flex; flex-wrap: wrap; margin-bottom: 50px}
		.exerciselist a.exercise { 
			border: 5px solid black; 
			border-radius: 15px;
			padding: 15px; 
			text-decoration: none;;
			margin-bottom: 5px;
			display: block;
			width: 40%; 
			min-width: 250px;
			margin-right: 15px;
			text-align: center;

		}
		.exerciselist a.exercise .image {
			width: 100px;
			margin: 0 auto;
		}
		.exerciselist a.exercise .image img {
			width: 100%;
		}

		@media only screen and (max-width: 600px) {
			.exerciselist { display: block; }
			.exerciselist a.exercise { 
				width: 100%; }
		}


		
		.minibutton { display:inline-block !important; margin: 5px; height: 30px; padding: 5px; text-decoration: none; text-align: center; background: black; color: white;  font-size: 14px; font-family: sans-serif !important; text-transform: uppercase; border-radius:10px; min-width: 50px; }
		
		.confirmbox {
            width: 80%; margin: 0 auto;
            border-radius: 30px;
            padding: 15px;
            text-align: center;
            background: white;
            color: black;
        }
        .confirmbox p { max-width: 400px; margin: 15px auto;; }
        .confirmbox a { border: 1px solid white; padding: 15px; border-radius: 15px; min-width: 200px; display: block; max-width: 320px; margin: 5px auto; }
        .confirmbox > a:first-of-type { background: var(--alert); color: white; text-decoration: none; font-weight: bold;}
        .confirmbox > a:last-of-type { background: white; border: 1px solid black; text-decoration: none; font-weight: bold; }