/* Colors
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.color-keyofA, .keyofA .grid-content .page ul.tabbernav li.tabberactive a, .keyofA .grid-content ul.tabbernav li a:hover, .keyofA .grid-content ul.tabbernav li a:focus, .keyofA .grid-content ul.tabbernav li a:active, .keyofA #BL h1, #intro #tab-pane-3 h2, #tab-pane-3 h2 {
	color:#007236;
}
/* make the green a little lighter on dropdown menu */
/*{
color: #559a75;
}*/
li#menu-A.mm-listitem_selected, li#menu-A:hover, div#mm-7, #mm-7 .mm-navbar{
	background-color:#007236;
}

.color-keyofBb, .keyofBb .grid-content .page ul.tabbernav li.tabberactive a, .keyofBb .grid-content ul.tabbernav li a:hover, .keyofBb .grid-content ul.tabbernav li a:focus, .keyofBb .grid-content ul.tabbernav li a:active, .keyofBb #BL h1, #intro #tab-pane-10 h2, #tab-pane-10 h2 {
	color:#8dc73f;
}
li#menu-Bb.mm-listitem_selected, li#menu-Bb:hover, div#mm-8, #mm-8 .mm-navbar{
	background-color:#6d9c2c;
}
.color-keyofB, .keyofB .grid-content .page ul.tabbernav li.tabberactive a, .keyofB .grid-content ul.tabbernav li a:hover, .keyofB .grid-content ul.tabbernav li a:focus, .keyofB .grid-content ul.tabbernav li a:active, .keyofB #BL h1, #intro #tab-pane-5 h2, #tab-pane-5 h2 {
	color:#f7ac1d;
}
li#menu-B.mm-listitem_selected, li#menu-B:hover, div#mm-14, #mm-14 .mm-navbar{
	background-color:#f7ac1d;/*f7b41d;/*#f7cb1d;*/
}
.color-keyofC, .keyofC .grid-content .page ul.tabbernav li.tabberactive a, .keyofC .grid-content ul.tabbernav li a:hover, .keyofC .grid-content ul.tabbernav li a:focus, .keyofC .grid-content ul.tabbernav li a:active, .keyofC #BL h1, #intro #tab-pane-0 h2, #tab-pane-0 h2 {
	color:#ee5b50;
}
li#menu-C.mm-listitem_selected, li#menu-C:hover, div#mm-4, #mm-4 .mm-navbar{
	background-color:#ee5b50;
}
.color-keyofDb, .keyofDb .grid-content .page ul.tabbernav li.tabberactive a, .keyofDb .grid-content ul.tabbernav li a:hover, .keyofDb .grid-content ul.tabbernav li a:focus, .keyofDb .grid-content ul.tabbernav li a:active, .keyofDb #BL h1, #intro #tab-pane-7 h2, #tab-pane-7 h2 {
	color:#9e005d;
}
/* make the pink a little lighter on dropdown menu */
/*{
color: #d43793;
}*/
li#menu-Db.mm-listitem_selected, li#menu-Db:hover, div#mm-12, #mm-12 .mm-navbar{
	background-color:#9e005d;
}

.color-keyofD, .keyofD .grid-content .page ul.tabbernav li.tabberactive a, .keyofD .grid-content ul.tabbernav li a:hover, .keyofD .grid-content ul.tabbernav li a:focus, .keyofD .grid-content ul.tabbernav li a:active, .keyofD #BL h1, #tab-pane-2 h2 {
	color:#5c3274;
}
/* make the purple a little lighter on dropdown menu */
#intro #tab-pane-2 h2 {
color: #9a56c1;
}
li#menu-D.mm-listitem_selected, li#menu-D:hover, div#mm-6, #mm-6 .mm-navbar{
	background-color:#5c3274;
}
.color-keyofEb, .keyofEb .grid-content .page ul.tabbernav li.tabberactive a, .keyofEb .grid-content ul.tabbernav li a:hover, .keyofEb .grid-content ul.tabbernav li a:focus, .keyofEb .grid-content ul.tabbernav li a:active, .keyofEb #BL h1, #intro #tab-pane-9 h2, #tab-pane-9 h2 {
	color:#605ca9;
}
/* make the purple a little lighter on dropdown menu */
/*{
color: #9490da;
}*/
li#menu-Eb.mm-listitem_selected, li#menu-Eb:hover, div#mm-10, #mm-10 .mm-navbar{
	background-color:#605ca9;
}

.color-keyofE, .keyofE .grid-content .page ul.tabbernav li.tabberactive a, .keyofE .grid-content ul.tabbernav li a:hover, .keyofE .grid-content ul.tabbernav li a:focus, .keyofE .grid-content ul.tabbernav li a:active, .keyofE #BL h1, #intro #tab-pane-4 h2, #tab-pane-4 h2 {
	color:#8393ca;
}
li#menu-E.mm-listitem_selected, li#menu-E:hover, div#mm-15, #mm-15 .mm-navbar{
	background-color:#8393ca;
}
.color-keyofF, .keyofF .grid-content .page ul.tabbernav li.tabberactive a, .keyofF .grid-content ul.tabbernav li a:hover, .keyofF .grid-content ul.tabbernav li a:focus, .keyofF .grid-content ul.tabbernav li a:active, .keyofF #BL h1, #intro #tab-pane-11 h2, #tab-pane-11 h2 {
	color:#0072bc;
}
/* make the blue a little lighter on dropdown menu */
/*{
color: #2b99e0;
}*/
li#menu-F.mm-listitem_selected, li#menu-F:hover, div#mm-9, #mm-9 .mm-navbar{
	background-color:#0072bc;
}

.color-keyofF-sharp, .keyofF-sharp .grid-content .page ul.tabbernav li.tabberactive a, .keyofF-sharp .grid-content ul.tabbernav li a:hover, .keyofF-sharp .grid-content ul.tabbernav li a:focus, .keyofF-sharp .grid-content ul.tabbernav li a:active, .keyofF-sharp #BL h1, #intro #tab-pane-6 h2, #tab-pane-6 h2 {
	color:#ed6c15;
}
li#menu-F-sharp.mm-listitem_selected, li#menu-F-sharp:hover, div#mm-13, #mm-13 .mm-navbar{
	background-color:#ed6c15;
}
.color-keyofG, .keyofG .grid-content .page ul.tabbernav li.tabberactive a, .keyofG .grid-content ul.tabbernav li a:hover, .keyofG .grid-content ul.tabbernav li a:focus, .keyofG .grid-content ul.tabbernav li a:active, .keyofG #BL h1, #intro #tab-pane-1 h2, #tab-pane-1 h2 {
	color:#0076a3;
}
li#menu-G.mm-listitem_selected, li#menu-G:hover, div#mm-5, #mm-5 .mm-navbar{
	background-color:#0076a3;
}
.color-keyofAb, .keyofAb .grid-content .page ul.tabbernav li.tabberactive a, .keyofAb .grid-content ul.tabbernav li a:hover, .keyofAb .grid-content ul.tabbernav li a:focus, .keyofAb .grid-content ul.tabbernav li a:active, .keyofAb #BL h1, #intro #tab-pane-8 h2, #tab-pane-8 h2 {
	color:#1cbbb4;
}
li#menu-Ab.mm-listitem_selected, li#menu-Ab:hover, div#mm-11, #mm-11 .mm-navbar{
	background-color:#158e89;
}
.color-TIPs, .TIPs .grid-content .page ul.tabbernav li.tabberactive a, .TIPs .grid-content ul.tabbernav li a:hover, .TIPs .grid-content ul.tabbernav li a:focus, .TIPs .grid-content ul.tabbernav li a:active {
	color:#a195af;
}

.color-PP, .PP .grid-content .page ul.tabbernav li.tabberactive a, .PP .grid-content ul.tabbernav li a:hover, .PP .grid-content ul.tabbernav li a:focus, .PP .grid-content ul.tabbernav li a:active {
	color:#448ba4;
}

#menu-BL:hover, #menu-BL2:hover{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#484848+53,664f90+93 */
background: #484848; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #484848 53%, #664f90 93%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #484848 53%,#664f90 93%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #484848 53%,#664f90 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484848', endColorstr='#664f90',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
#menu-SB:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#484848+53,ee5b50+93 */
background: #484848; 
background: -moz-linear-gradient(-45deg,  #484848 53%, #ee5b50 93%); 
background: -webkit-linear-gradient(-45deg,  #484848 53%,#ee5b50 93%); 
background: linear-gradient(135deg,  #484848 53%,#ee5b50 93%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484848', endColorstr='#ee5b50',GradientType=1 ); 
}
#menu-KK:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#484848+53,ffb82b+93 */
background: #484848; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #484848 53%, #ffb82b 93%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #484848 53%,#ffb82b 93%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #484848 53%,#ffb82b 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484848', endColorstr='#ffb82b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#menu-PP:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#484848+53,448ba4+93 */
background: #484848; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #484848 53%, #448ba4 93%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #484848 53%,#448ba4 93%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #484848 53%,#448ba4 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484848', endColorstr='#448ba4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#menu-GB:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#484848+53,3674c4+93 */
background: #484848; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #484848 53%, #3674c4 93%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #484848 53%,#3674c4 93%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #484848 53%,#3674c4 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484848', endColorstr='#3674c4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/*#menu-SB:hover{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#484848+53,d4a4f4+93 */
/*background: #484848; 
background: -moz-linear-gradient(-45deg,  #484848 53%, #d4a4f4 93%); 
background: -webkit-linear-gradient(-45deg,  #484848 53%,#d4a4f4 93%); 
background: linear-gradient(135deg,  #484848 53%,#d4a4f4 93%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484848', endColorstr='#d4a4f4',GradientType=1 ); 
}*/

div#mm-0 .mm-navbar {
    background-color: #7a7a7a;
}

div#mm-1 .mm-navbar, div#mm-2 .mm-navbar{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#664f90+0,7a7a7a+42 */
background: #664f90; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #664f90 0%, #7a7a7a 42%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #664f90 0%,#7a7a7a 42%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #664f90 0%,#7a7a7a 42%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#664f90', endColorstr='#7a7a7a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

div#mm-21 .mm-navbar{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ee5b50+0,7a7a7a+42 */
background: #ee5b50; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ee5b50 0%, #7a7a7a 42%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ee5b50 0%,#7a7a7a 42%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ee5b50 0%,#7a7a7a 42%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee5b50', endColorstr='#7a7a7a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

div#mm-3 .mm-navbar{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffb82b+0,7a7a7a+42 */
background: #ffb82b; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ffb82b 0%, #7a7a7a 42%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ffb82b 0%,#7a7a7a 42%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ffb82b 0%,#7a7a7a 42%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb82b', endColorstr='#7a7a7a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

div#mm-16 .mm-navbar{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#448ba4+0,7a7a7a+42 */
background: #448ba4; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #448ba4 0%, #7a7a7a 42%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #448ba4 0%,#7a7a7a 42%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #448ba4 0%,#7a7a7a 42%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#448ba4', endColorstr='#7a7a7a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

div#mm-17 .mm-navbar{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3674c4+0,7a7a7a+42 */
background: #3674c4; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #3674c4 0%, #7a7a7a 42%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #3674c4 0%,#7a7a7a 42%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #3674c4 0%,#7a7a7a 42%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3674c4', endColorstr='#7a7a7a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

div#mm-18 .mm-navbar, div#mm-19 .mm-navbar, div#mm-20 .mm-navbar{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3674c4+0,7a7a7a+100 */
background: #3674c4; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #3674c4 0%, #7a7a7a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #3674c4 0%,#7a7a7a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #3674c4 0%,#7a7a7a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3674c4', endColorstr='#7a7a7a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/*div#mm-21 .mm-navbar{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d4a4f4+0,7a7a7a+42 */
/*background: #d4a4f4; 
background: -moz-linear-gradient(-45deg,  #d4a4f4 0%, #7a7a7a 42%); 
background: -webkit-linear-gradient(-45deg,  #d4a4f4 0%,#7a7a7a 42%); 
background: linear-gradient(135deg,  #d4a4f4 0%,#7a7a7a 42%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4a4f4', endColorstr='#7a7a7a',GradientType=1 ); 
}*/
 
#RM-menu:not(.mm-menu) {
  display: none;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*
$rembase = 10
$line-height-base = 26
margin: use 24px or 48px
*/

html {
	font-size:62.5%; 
	font-family: "Lato","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
    font-family: "Lato","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #555;
	background-color:#fff;
 	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:column;
	flex-flow:column;
	-webkit-justify-content:flex-start;
	justify-content:flex-start;
	font-size: 1.8rem; /* 16 ÷ $rembase */
    line-height:1.618;
    margin:auto;
    font-weight:normal;
    font-weight:300;
    line-height:1.45;
}


p {
	color:#3c3c3c;
	font-size: 1.8rem; /* 16 ÷ $rembase */
    line-height:1.618;
	margin:auto;
	max-width:81rem;
	/*width:100%;*/
	margin-bottom:2.4rem;
	text-align:left;
	font-weight:normal;
	font-weight:300;
	letter-spacing:.015rem;
    font-family:Georgia, "Lato","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height:1.45;
}

p.indent {
	padding-left:7rem;
}
p.intro {
	font-weight:300;
	font-size:2.6rem;
	line-height:1.4;
	margin-top:6rem;
	margin-bottom:3rem;
}
p.callout {
	position: relative;
	background: #f0f0f0;
	text-align: center;
	margin:3rem auto;
	padding:2rem;
	text-align:left;
	line-height:1.618;
	
}

aside.wide {
	margin: 2.4rem auto 4.8rem;
	max-width: 80rem;
}


p.callout::before {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #2072a7;
    box-shadow: 30px 0 #2072a7, -30px 0 #2072a7;
}

p.callout.positive {
	background:#fff;
	color:#646069;
}

p.callout.left {
	text-align:left;
}

h1 {
	color: #3c3c3c;
	font-size:3.6rem;
	line-height:1;
	text-transform:none;
	font-weight:700;
	margin: 4.8rem auto 2.4rem;
	text-align:center;
	letter-spacing: -0.01rem;
	padding: 3.9rem 2.6rem 2.6rem;
    font-size: 2.4rem;
    margin-top: 0;
    border-top:1px solid rgba(33,33,33,.1);
    border-bottom:1px solid rgba(33,33,33,.1);
    width:100%;
    text-align:center;
    font-size:2.8rem;
    background-color:white;
    padding-top:5.6rem;
    
}
h1:first-of-type {
	border-top:0;
	
}
#pagination + h1 {
	padding-top:0;
	margin-top:0;
}
h1.short{
	margin-top:4.8rem;
	border-top:1px solid rgba(33,33,33,.1);
    
}
h2, h3 {
	color: #606060;
	font-size:1.8rem;
	line-height:1.625;
    margin: 5.2rem auto 0.6rem;
    text-align: left;
    max-width:81rem;
  }

h3 {
	color: #a2afd4;
    
}

h4 {
      font-size: 1.8rem; /* 18 ÷ $rembase */
      line-height:1.8;
	  margin:auto;
	  text-align:left;
	  color:#232323;
	  max-width:81rem;
}
  
h5 {
	  color: #5c6d9e;
	  font-size:2.6rem;
	  line-height:1.3;
	  margin:2.4rem auto 2.4rem; 
  }
.page h5{
	color:#232323;
	max-width:81rem;
}  
h6 {
	  color: #448ba4;
	  font-size:2.1rem;
	  text-transform:uppercase;
	  font-weight:700;
	  letter-spacing:.02rem;
	  text-align:center;
	  margin-top:4.8rem;
	  margin-bottom:1.6rem;
  }
  
.littlecaps {
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	color: #555;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}
p.littlecaps {
	color:rgb(208, 200, 218);
	text-transform:none;
	font-style:italic;
	line-height: 3.8rem;
	letter-spacing:0;
	-webkit-justify-content:flex-start;
	justify-content: flex-start;
}




.smaller {
	font-size:1.28rem;
	line-height:1.4em;
	width:30rem;
	max-width:85%;
	text-align:center;
	margin:auto;
	letter-spacing:.02em;
	font-style:italic;
}


.left {
	text-align:left;
}

.center {
	text-align:center;
}
.right {
	text-align:right;
}

ul {
	list-style-type:none;
	list-style:none;
	}

ul.bullets {
	font-family: Georgia, "Lato","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: left;
	width: 100%;
	max-width: 81rem;
	margin: auto;
	margin-bottom:2.618rem;
	list-style-type: disc;
}
.callout-list {
	font-size: 1.6rem;
    line-height: 1.6;
    margin: 1rem;
    padding: 1.6rem;
    border: 1px solid #e8e8e8;
    background-color:#f7f7f7;
    width:30%;/*23rem;*/
}
.callout-list ul {
	padding-left: 1rem;
    font-size: 1.6rem;
    line-height: 1.6;
    margin-top: .6rem;
    margin-bottom: .6rem;
}

ul.leading li {
	margin-bottom:1rem;
}

ol li {
	font-family: Georgia, "Lato","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#646069;
	font-size: 1.8rem; /* 16 ÷ $rembase */
    line-height:1.45;/*1.618;*/
	margin:auto;
	max-width:81rem;
	width:100%;
	text-align:left;
	font-weight:normal;
	font-weight:300;
	letter-spacing:.02rem;
	margin-bottom:1.2rem;

}

.audioLabel {
	text-transform:uppercase;
	font-weight:normal;
	letter-spacing:.1rem;
	font-size:1.12rem;
	color:#fff;
	text-align:center;
}
ul.disc {
	list-style-type:disc;
}

p.TIP {
	color: #a2afd4;
font-size: 2.2rem;
font-weight: 700;
}


button, .btn, .audioLabel {
	font-family: "Lato","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	
}

a, a:active, a:focus {
   outline: none;
}

/* Image Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

img {
	max-width:100%!important;
	height:auto!important;
}
img.alignright{
	float:right;
}

p.TIP img {
	width: 70px;
	float:right;
    position: relative;
}
img.exercises {
		margin:2.618em auto;
		max-width:100%;
		width:800px;
		height:auto;
		padding:0 1em;
}
	
img.exercises.shrink {
	width:600px;
}

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

img.frame {
	margin:1.6rem;
}

.youtube {
	margin:2.6rem auto;
	max-width:100%;
}

/* Header styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header {
	background-color:#f9f9f9;
	height:4.6rem;
	border-bottom:1px solid #e6ebf0;
	top:0;
	width:100%;
	position:fixed;
	z-index:10;
}

#navbar {
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:center;
	align-items:center;
	height:4.6rem;
	text-align:center;
	background-color:#232323;
	
}
	
.logo {
    max-width: 150px!important;
    position: absolute;
    left: 4px;
    top: 4px;
}

#navbar-grid-studio{
	display:grid;
	height:4.6rem;
	background-color:#2f2f2f;
	grid-template-columns:110px 50px auto 100px;/*50px 200px auto 250px;*/
	grid-template-rows:50% 50%;
	position:fixed;
	width:100%;

}
div#navbar-grid-studio.no-tracks{
	grid-template-columns:30px 50px auto 200px;/*50px 200px auto 250px;*/
}
#navbar-grid-studio #tracks{
	position:relative;
	align-self:center;
	justify-content:start;
	grid-area: 1 / 1 / span 2 / span 1;
	height:4.6rem;
	
}
#navbar-grid-studio #logo{
	position:relative;
	align-self:center;
	justify-content:start;
	grid-area: 1 / 2 / span 2 / span 1;
	height:4.6rem;
	
}
#navbar-grid-studio #logo .logo{
	width:30px!important;
	top:7px;	
}

#navbar-grid-studio #logo img {
    width: 30px;
    top: 7px;
    position: relative;
}

#navbar-grid-studio #studio{
	position:relative;
	align-self:center;
	justify-self:start;
	grid-area: 1 / 3 / span 1 / span 1;
	height:2.3rem;
	font-size:12px;
	color: #fbf6ee;
	padding-top: 5px;
	text-align: center;
	letter-spacing: .08rem;
}
#navbar-grid-studio #site-name{
	position:relative;
	width:200px!important;
	align-self:center;
	justify-self:center;
	grid-area: 2 / 2 / span 1 / span 1;
	height:2.3rem;
	font-size:14px;
	margin-top:-8px;
	
}
#site-name a{
	color:white;
}


#navbar-grid-studio #dd{
	position:relative;
	align-self:center;
	justify-self:start;
	grid-area: 2 / 3 / span 1 / span 1;/*1 / 3 / span 2 / span 1;*/
	text-align:center;
	height: 2.3rem;
	font-size: 12px;
	margin-top: -4px;
	
}

#navbar-grid-studio #menu{
	position:relative;
	align-self:center;
	justify-self:end;
	grid-area: 1 / 4 / span 2 / span 1;
	width:100px;
	height:4.6rem;
	line-height:4.6rem;
	text-align:right;
	margin-top:-8px;
	
}

#tracks .player-button{
	top: 0;
	border-radius: 0 0 35px 0;
	padding: 2rem 2rem 2rem 1rem;
}

/* Module styles 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*
	.module.hvr-grow.BL {
		background-color:#cbd4ef;
	}
.module.hvr-grow.PF {
		background-color:#f2d5cf;
	}
.module.hvr-grow.PP {
		background-color:#c1b9ca;
	}
.module.hvr-grow.SB {
		background-color:#e7dbef;
	}
.module.hvr-grow.FS {
		background-color:#f6e5cb;
	}
.module.hvr-grow.GB {
		background-color:#D4EBFF;
	}
	
.module.hvr-grow.BL:hover {
		background-color:#5c6d9e;
	}
.module.hvr-grow.PF:hover {
		background-color:#e66666;
	}
.module.hvr-grow.PP:hover {
		background-color:#7d6999;
	}
.module.hvr-grow.SB:hover {
		background-color:#b78fd2;
	}
.module.hvr-grow.FS:hover {
		background-color:#f8b15a;
	}
.module.hvr-grow.GB:hover {
		background-color:#3A7DB7;
	}
*/

/* jquery mmenu styles 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#modules-menu, #weekly-menu {
      background-color: *#2f2f2f;
   }
.mm-menu_offcanvas.mm-menu_opened {
    font-size: 1.6rem;
    font-weight: 500;
}
.mm-menu_popup {
	height: 91%!important;
    width: 85%!important;
    max-height:100%;
}

a.mm-navbar__title {
    font-weight: 700!important;
    color: whitesmoke!important;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size:12px;
}


.mm-menu{width:85%;min-width:140px; }

 @media all and (min-width:550px){
	 .mm-menu{
		 width:80%;
		 min-width:140px;
		 max-width:340px;
	 }
	 nav#RM-menu{
		 max-width:100%;
		 }
}

html.mm-opening .mm-slideout{-webkit-transform:translate3d(80%,0,0);transform:translate3d(80%,0,0)}
@media all and (max-width:175px){html.mm-opening .mm-slideout{-webkit-transform:translate3d(140px,0,0);transform:translate3d(140px,0,0)}
}
@media all and (min-width:550px){html.mm-opening .mm-slideout{-webkit-transform:translate3d(340px,0,0);transform:translate3d(340px,0,0)}
}


#RM-menu .mm-menu_offcanvas.mm-menu_opened {
  min-width: 340px;
  max-width: 340px; }

#RM-menu .mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened~.mm-slideout {
	-webkit-transform: translate(340px,0);
    -ms-transform: translate(340px,0);
    transform: translate(340px,0);
    -webkit-transform: translate3d(360px,0,0);
    transform: translate3d(340px,0,0);
}    
li.mm-listitem.mm-listitem_vertical.mm-listitem_opened span.selected-menu {
    font-weight: 900;
    color:white!important;
}
    

.mm-menu_theme-dark li.mm-listitem.mm-listitem_vertical.mm-listitem_opened {
	background-color:#5a5465;
}
li.mm-listitem.mm-listitem_selected {
    background-color: rgba(0, 0, 0, 0.07);
}

.mm-listitem_vertical>.mm-panel {
    padding: 0 0 10px 0;
}

a.mm-btn_next.mm-btn_fullwidth:hover, .mm-menu_theme-dark .mm-listview a:not(.mm-btn_next):hover {
    background-color: rgba(34, 34, 34, 0.19);
}

button#my-icon:hover, button#my-icon:focus {
	background-color:transparent;
}
/*
.hamburger {
	padding:1rem;
	padding-right:0;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
	width:3rem;
}
*/
.mburger.mburger--collapse {
    width: 40px;
    height: 40px;
    --mb-bar-height: 2px;

}
.mburger b{
	background:whitesmoke;
}
.toc-icon {
	width:3rem;
	position: relative;
    top: .3rem;
}

.toc-icon g{
	fill:#fff;
}

h6.mm-listitem {
    font-size: 1rem;
}
.mm-menu_theme-white .mm-listview a:not(.mm-btn_next) {
    color: whitesmoke!important;
}

div#mm-22 {
    padding: 0;
}

#RM-menu .mm-panel {
	padding:0;
	background-color:#efefef;
}

.mh-head {
	position:fixed;
}

.mh-btns-left {
    width: 3.6rem;
    margin-left: .6rem;
    margin-top: .4rem;
}
.mh-text {
	text-align:center;
	font-size: 1.1rem;
	color:whitesmoke;
	font-family: "Lato","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: .1rem;
	text-transform:uppercase;
	line-height:4.6rem;
}

.mm-menu_theme-dark .mm-listitem_selected>a:not(.mm-btn_next), .mm-menu_theme-dark .mm-listitem_selected>span {
    background: rgba(0,0,0,.3);
}

#RM-menu:not( .mm-menu ) {
   display: none;
}
#player-menu:not( .mm-menu ) {
   display: none;
}
#modules-menu:not( .mm-menu ) {
   display: none;
}
#weekly-menu:not( .mm-menu ) {
	   display: none;
}

/* #RM-menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.allRhythms h6 {
	color: #615b6a;
    font-weight: 500;
    font-style: italic;
    text-transform: none;
    font-size: 1.3rem;
    margin-top:1.6rem;
    margin-bottom:.6rem;
}

#RM-menu .mm-menu_navbar_top-1 .mm-panels {
	top:1rem;
}

#RM-menu a.mm-navbar__title {
	font-size:1.4rem;
	text-transform:initial;
	letter-spacing:.01em;
	color:#5a5563!important;
}
#RM-menu a.mm-navbar__tab_selected {
	color:#262627;
	text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .05rem;
}
.mm-menu_theme-white .mm-navbar_tabs>:not(.mm-navbar__tab_selected), .mm-menu_theme-white .mm-navbars_bottom.mm-navbars_has-tabs .mm-navbar_tabs~.mm-navbar, .mm-menu_theme-white .mm-navbars_top.mm-navbars_has-tabs>.mm-navbar:not(.mm-navbar_tabs) {
    background: rgba(0,0,0,.06);
}
#RM-menu aside{
	background-color:#f1f1f1;/*#878092;/*#96969a;/*#f7f7f7;*/
}

#RM-menu .mm-panel:before {
    height: 0;
}
#RM-menu #instructions h6 {
	margin-top:1.6rem;
	margin-bottom:4.8rem;
}

#RM-menu .selectedRhythm, #menu-11 .selectedRhythm {
	border-bottom:none;
}
#RM-menu #instructions {
	margin-left:0;
}

#RM-menu aside {
	padding:1.6rem;
	padding-bottom:0;
}

#RM-menu h6 {
	color: #6a656f;
    margin-top: 0;
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    font-size: 1.4rem;
}
#RM-menu .allRhythms h6 {
	font-style:italic;
	margin-top: 2.4rem;
}

#RM-menu h3 {
	padding:1.4rem;
	background-color:#f1f1f1;
	color:#262627;
	font-size: 1.6rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .1em;
    margin-bottom:0;
    text-align:center;
    margin-top:0;
    background-color:white;
    padding-bottom:0;
    letter-spacing:0;
    max-width:100%;
}

#RM-menu .rhythms_AandB {
	margin-top:0;
	margin-bottom:.6rem;
}
#RM-menu .playRow{
	margin-top:0;
}

#tabA, #tabB, #tabC, #tabD {
    padding: 6px 8px;
}


/* Caret navigation/pagination styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.caret-next, .caret-previous {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 4px 9px;
    background: rgba(243, 243, 243, 0.2);
    box-shadow: 0px 6px 30px 0px rgba(105, 101, 105, 0.18);
    font-size: 18px;
    position: relative;
    font-size: 30px;
	padding: 0px 9px;
	bottom: 0;
}
a.caret-next, a.caret-previous {
    color: #cacaca;
}
a.caret-next:hover, a.caret-previous:hover {
    color: #cacaca;
}

#pagination{
	background:none;
	height: 50px;
	width:100%;
	position: relative;
	margin-top: -13.6rem;
	margin-bottom: 9rem;
	margin-top:0;
	margin-bottom:0;
}
#pagination .caret-next, #pagination .caret-previous {
	font-size: 1.2rem;
	box-shadow: none;
	position: absolute;
	border-radius:0px;
	height: 5rem;
	top: 0;
	padding-top: 2rem;
	width:25rem;
	color:#ababab;
}
#pagination .caret-previous{
	left:3rem;
	text-align:left;
	background:none;

}
#pagination .caret-next {
	right:3rem;
	text-align:right;
	margin-right: -1rem;
	background:none;

}
#pagination .caret-next:hover, #pagination .caret-previous:hover{
	box-shadow:none;
	text-decoration:underline;
	transform:none;
	color:#979797;
}

#intro #pagination {
    margin-top: -3rem;
    margin-bottom: 0;
}

div.GB.part #pagination{
	background: #526395;
}

/* Global layout styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.st-menu {
	position:fixed;
	overflow-y:scroll;
}

.st-content {
	overflow-y:auto;
}
#printHeader {
	display:none!important;
}

#main {
	width:100%;
	margin:auto;
	padding-top:4.6rem;
	background-color:white;

}

#sidebar {
	width:220px;
	background:#f5f5f5;
	padding:5px;
	border: 1px solid #e6e6e6;
}

#body {
	width:100%;
	padding-bottom:4.8rem;
}
.menu-visible {
	padding-right:210px;
}

.page-head {
	margin-bottom: 11.6em;
	margin-left:2em;
}
.page {
	text-align:center;
	margin:auto;
	padding:0 1.6rem 0 3rem;
	padding:0!important;
	max-width:95%;
	}

footer {
    border-top: 1px solid aliceblue;
    padding-top: 2rem;
    background-color:#bab6c3;
    padding-bottom:2.4rem;
    width:100%;
    position:fixed;
    bottom:0;
}
.st-content.intro footer {
	position:fixed;
	bottom:0;
    
	}
.tracks-icon {
	margin:0 3px;
}


.module-type {
	color:#fff;
	font-family: "Lato",'Libre Baskerville',"Baskerville","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:100;
	
}

.module-name, .page-head {
	color:#A699B6;/*#5c6d9e;*/
	text-transform:uppercase;
	font-size:1.6rem;
	font-weight:700;
	letter-spacing:.01em;
	
}

.task {
    border: 1px solid #c1c1c1;
    max-width: 81rem;
    margin: auto;
    border-radius: 3px;
    background-color: white;
}

p.callout {
	background-color:#edeff5;
}

.rote {
	    margin: 4.8rem auto;
    background-color: #f8faff;
    border:1px solid #a2afd4;
    padding: 2.4rem;
    width: 40rem;
    max-width: 90%;
    padding-bottom: 3.6rem;
}

.audioLabel {
	color:#6b7ca7;
	font-size:1.2rem!important;
	text-align:center!important;
}

.space-above {
	margin-top:2.6rem;
}

/* CSS Grid Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 1rem;
  width:100%;
  margin:0 auto;
}

.grid-item {
    text-align: center;
    font-size:1em;
    margin:0;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-flow:column;
    flex-flow:column;
}
.grid-container li {
	text-decoration: none;
	}
	
.wrapper {
		display:grid;
		grid-template-columns:220px auto;
		grid-template-areas:"p c";
		}
		
.wrapper main#main {
    padding-top: 0rem;
}

.player-button {
	background-color: #8268b3;
    padding: 9px 20px 9px 12px;
    position: fixed;
    left: 0;
    top: 46px;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 0 0 24px 0;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  
  background-color: #e7e1f3;
  color: #6d4ea7;
  box-shadow: 0 1px 3px rgb(172, 161, 192), 0 1px 2px rgba(0,0,0,0.14);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.player-button:hover{
	background-color:#e2d7f9;/*#dbd3ec;/*#7358a5;*/
	box-shadow: 0 2px 4px rgb(145, 144, 149), 0 2px 2px rgba(0,0,0,0.07);
	
}
a.player-button:hover{
	color:#2f2f2f;/*white;*/
}

	.grid-content .tabberlive .tabbertab{
		width:100%;
		}
		
.grid-content ul.tabbernav {
    margin-bottom: 2.6rem;
}
.grid-content ul.tabbernav li.tabberactive a
{
 background-color: transparent!important;
 height:42px;
 line-height:42px;
 padding:11px;
 margin:0;
 white-space: nowrap;
 color:#494158;
 border-bottom:2px solid #cbcbcb!important;
 }
 
 .grid-content ul.tabbernav li a
{
 background-color: transparent!important;
 height:42px;
 line-height:42px;
 padding:11px;
 margin:0;
 white-space:nowrap;
 }
 
.grid-content .page ul.tabbernav li a
{
 font-size:16px;
 padding:11px 20px;
 }

ul.tabbernav li {
    list-style: none;
    margin: 0;
    display: inline;
    border: 2px solid white;
}

ul.tabbernav li a {
    font-size: 13px;
    border-bottom: none;
    text-decoration: none;
    border-radius: 2px;
    background-color: #eaeaea;
    padding: 5px 10px;
}
section.chooser-A #tab1-1 ul.tabbernav li.tabberactive a {
    background: rgba(119, 187, 102, 0.9);
    padding: 5px 10px;
}

section.chooser-B #tab1-1 ul.tabbernav li.tabberactive a {
    background: rgba(253, 197, 34, 0.9);
    padding: 5px 10px;
}

#RM-menu .tabberlive .tabbertab {
	width:100%;
}
 
#rhythm-display {
	grid-area:rhythms;
	position:fixed;
	background-color:white;
	width:100%;
	border-bottom:1px solid #cbcbcb;
	z-index:201;
	padding-right:220px;
}
.page-title {
	grid-area:page-title;
	margin-top:17.9rem;
}
.page-text {
	grid-area:page-text;
}
.page-combos {
	grid-area:page-combos;
	padding-bottom:15rem;
}

	
	
/* Wheeldiv 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

 #wheelDiv {
            height: 400px;
            width: 400px;
            margin: auto;
        }

        #wheelDiv>svg {
            height: 100%;
            width: 100%;
        }
        
        text {
			font-weight: 700!important;
			font-size: 30px!important;
		}

        @media (max-width: 600px) {
            #wheelDiv {
                height: 350px;
                width: 350px;
            }
        }

        @media (max-width: 400px) {
            #wheelDiv {
                height: 300px;
                width: 300px;
            }
        }


/* Intro 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[canvas="container"],.st-content.intro,.st-content-inner.intro, #intro, body.body-intro #st-container {
	background-color:#fff;
	}
	
#intro{
	width: 100%;
	margin:3rem auto 0;
	padding: 4.6rem 1.6rem;
	height: 100vh;

	}
	
#intro p,#intro h1,#intro h2,#intro h5 {
	color:#3f3f3f;
	background-color:transparent;
	margin:0;
	padding:0;
	font-weight:normal;
	border:0;
	border-top:0;
	border-bottom:0;
	text-align:left;
}
#intro h1 {
	font-size:7rem;
	letter-spacing: -.1rem;
	}
	
	#intro h2 {
		font-size:4rem;
		line-height: 1.3;
		font-style:italic;
		margin-top:2rem;
		margin-bottom:3rem;
		font-weight:600;
		font-family: 'Merriweather', serif;
		}

#intro h5 {
	font-size: 2.1rem;
	font-weight: 600;
	letter-spacing: .3rem;
	text-transform: uppercase;
	margin-top:1.6rem;
	}
	#intro h5.module {
		border-bottom:1px solid whitesmoke;
		padding-bottom:5px;
		margin-bottom:5px;
		width:10.5rem;
		font-size:1.5rem;
		}
#intro h5.module.long {
	width:15.5rem;
}
#intro p {
	font-size:2.1rem;
	margin-bottom:2.2rem;
	line-height:1.6;
	}
 #intro .row {
	   -webkit-justify-content:flex-start;
	   justify-content:flex-start;
	   padding-left:5%;
	   -webkit-flex-flow:row nowrap;
	   flex-flow:row nowrap;
	    }
	    	
#intro .grid-item {
text-align:left;
	
}

	#intro .grid-item h5{
		margin-top:0;
		}
	.st-content-inner.intro ~ footer {
		border:none;
		}
	.module-intro-text {
		width:100%;
		max-width:80rem;
		margin:auto;
		}
	.module-intro-menu {
		margin:0 1rem;
		display:none;
	}
	#intro .rote{
		margin: 4.8rem 0;
    background-color: #aba5b7;/*#7c728e;*/
	}
	#intro p.audiolabel{
	font-family: "Lato","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	font-weight:normal;
	letter-spacing:.1rem;
	font-size:1.12rem;
	text-align:center;
	
}

	#intro .grid-container {
        display: grid;
		grid-gap: 1rem;
        grid-template-columns: auto 22rem;
        grid-template-areas:
               "content sidebar";
        text-align:left;
 
    }
	.grid-item.intro-text-menu {
		display:block;
	}
#intro .keys {
	-webkit-justify-content:flex-start;
	justify-content: flex-start;
}
#intro .key {
	padding:0;
	margin:.2rem;
}
#intro .key img {
	width:15rem;
	height:auto;
	padding-bottom:1rem;
	}

/* Keys to the Kingdom module Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.scalecharts {
	margin:auto;
}

p.scale {
	width:30rem;
	text-align:center;
	margin:auto;
}

.key {
	padding:16px;
	margin:auto;
}
.key img {
	width:220px;
}

.row.text img.tracks-icon {
	width:16px;
	position:relative;
	top:2px;
}
.keys {
	display:flex;
	display:-webkit-flex;
	-webkit-justify-content:center;
	justify-content: center;
	-webkit-flex-flow:column;
	flex-flow: column;
	-webkit-text-align:center;
	text-align:center;
	max-width:768px;
	margin:1.6rem auto 8rem;
}
.threeKeys {
	display:flex;
	display:-webkit-flex;
	-webkit-justify-content:center;
	justify-content: center;
	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-text-align:center;
	text-align:center;
}

.row {
	display:flex;
	display:-webkit-flex;
	-webkit-justify-content:center;
	justify-content: center;
	-webkit-flex-flow:row wrap;
	flex-flow: row wrap;
}

.row.text {
	margin-top:2.618em;
	margin-bottom:1.618em;
}
.row.text p {
	text-align:center;
	margin:auto;
}


/* Rhythmetrics styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#rhythmetrics-header{
	position:fixed;
	background-color:white;
	padding:3rem;
	top:5rem;
}

.select, .main {
	text-align:center;
	margin-top:1.618em;
	}

.combos {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:column;
	flex-flow:column;
	-webkit-align-items:center;
	align-items:center;
	margin-bottom:4.8rem;
	max-width:96%;
}

.top-buttons {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-align-items:center;
	align-items:center;
	-webkit-justify-content:center;
	justify-content: center;
	width:100%;
	padding:8px;
}
.random-buttons {
	display:inline-block;
}
.shuffle {
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	-webkit-flex-wrap:nowrap;
	flex-wrap:nowrap;
}
.select p, .combos header {
	margin:1em;
	font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #7f7f7f;
	height: 38px;
	padding: 0 30px;
	color: #555;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	max-width:96%;
}

.combos header {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:nowrap;
	flex-wrap:nowrap;
	-webkit-align-items:center;
	align-items:center;
	-webkit-justify-content:center;
	justify-content: center;
	padding-bottom:1em;
		
}

.comboLabel {
	display:-webkit-flex;
	display:flex;
	-webkit-align-content:center;
	align-content:center;
	line-height:30px;
	padding:0 10px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
}

.main, .rhythms_AandB, .playRow {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:center;
	justify-content: center;
	-webkit-align-items:center;
	align-items:center;
	text-align:center;
	margin:auto;
}
.main {
	-webkit-flex-flow:column;
	flex-flow:column;
	padding-bottom:1.618em;
}

.rhythms_AandB {
	margin-top:1.618em;
	margin-bottom:1.618em;
}
.playRow {
	margin-top:1em;
	max-width:100%;
}
.swingRow {
	margin-top:0;
}

.rhythms_AandB+.selectedLabelA, .selectedLabelB.rhythms_AandB+.selectedLabelB {
	margin: 42px 5px 43px;
}

.currentRhythm_A, .currentRhythm_B, .currentRhythm_C, .currentRhythm_D {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:column;
	flex-flow:column;
	-webkit-align-items:center;
	align-items: center;
	text-align:center;
	-webkit-justify-content:center;
	justify-content:center;
}

.currentSelection {
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	-webkit-justify-content:flex-start;
	justify-content: flex-start;
	}
	
.selectedLabel, .selectedLabelA, .selectedLabelB, .selectedLabelC, .selectedLabelD {
	width:40px;
	height:30px;
	margin:0;
	border:none;
	font-size:1em;
	line-height:26px;
	color:#000;
	font-family: "Lato","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	
}

.selectedLabelA, .currentRhythm_A .selectedLabel, RM_rhythm .selectedLabel, .currentRhythm_A.selectedLabel {
	background:#b6e1ab;
}

.selectedLabelB, .currentRhythm_B .selectedLabel, .currentRhythm_B.selectedLabel {
	background:#fbe8ae;
}

.selectedLabelC, .currentRhythm_C .selectedLabel, .currentRhythm_C.selectedLabel {
	background:#adb0e1;
}

.selectedLabelD, .currentRhythm_D .selectedLabel, .currentRhythm_D.selectedLabel {
	background:#f1adfa;
}
	
.currentSelection .selectedLabelA, .currentSelection .selectedLabelB, .currentSelection .selectedLabelC, .currentSelection .selectedLabelD {
	margin-left:10px;
	height:40px;
	line-height:36px;
	width:40px;
	align-self:flex-start;
	-webkit-align-self:flex-start;
	margin-top:-13px;
	margin-right: 7px;
    border-radius: 2px;
}
.playFeatured {
	align-self:flex-start;
	-webkit-align-self:flex-start;
	margin-top:-7px;
}



.buttonChoice {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-align-items:center;
	align-items:center;
	justify-content:center;
	-webkit-justify-content:center;
}


.fourLabels, .fourRhythms {
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:flex-start;
	align-items:flex-start;
	margin-top:20px;
}
.fourLabels {
	-webkit-flex-wrap:nowrap;
	flex-wrap:nowrap;
	-webkit-justify-content:flex-end;
	justify-content:flex-end;
	margin-top: -1.2rem;
	margin-right: 1.2rem;
	min-width:100px;
}

.fourRhythms {
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	margin-left:5rem;
	-webkit-justify-content:flex-start;
	justify-content:flex-start;
	
}
.fourLabels .firstTwo, .fourLabels .secondTwo {
	-webkit-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
}

.BL .selectedRhythm {
	width:172px;
	height:59px;
	margin-top:0;
}
.selectedRhythm img {
    width: 100%;
}
.fourRhythms {
	margin-left:0;
	-webkit-justify-content:center;
	justify-content:center;
}
.BreakingLooseRhythm {
	width:172px;
	height:59px;
}



.AAAA, .AAAB, .AABA, .AABB, .ABAA, .ABAB, .ABBA, .ABBB, .BAAA, .BAAB, .BABA, .BABB, .BBAA, .BBAB, .BBBA, .BBBB, .BL, .CCCC, .DDDD, .combo {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row;
	flex-flow:row;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:center;
	align-items:center;
	width:96%;
}
.BL.narrow {
	height:auto;
	margin:1rem auto;
	padding-top:0;
}

.BL.narrow .fourRhythms {
	margin-top:0;
}
.last {
	margin-bottom:4.8rem;
}
.arrow {
	width:172px;
	text-align:left;
	font-size:9px;
	font-weight:700;
	}
	
.currentRhythmA.selectedRhythm, .currentRhythm.selectedRhythm {
	width:172px;
}

.selectedRhythm {
	width:172px; 
	height:60px; 
	border:none;
	border-bottom:dashed 1px #aeaeae;
	margin-top:-10px;
	margin-right:-2px; /* to smush the measures together until we have better images with thinner bar lines*/
	margin-left:0; /* ditto */
}

/*
.selectedRhythm > img {
	width:172px;
	height:60px;
}
*/

.main .selectedRhythm {
	min-width:228px;
	width:auto;
	height:79px;
	border:none;
	border-bottom:dashed 1px #aeaeae;
	margin:-10px 15px 2px;
}


.main .selectedRhythm > img {
	width:228px;
	height:79px;
}

#rhythm-display .main {
	padding-bottom:0;
}
#rhythm-display section.main .selectedRhythm {
	min-width:150px;
	width:150px;
	height:auto;
	border:none;
	border-bottom:dashed 1px #aeaeae;
	margin:-10px 15px 2px;
}

#rhythm-display .main .selectedRhythm > img {
	width:150px;
	height:auto;
}

#rhythm-display .top-buttons {
	margin-bottom:0;
	padding-bottom:0;
	width:auto;
}
#rhythm-display .swingRow {
	padding-bottom:0;
}
#rhythm-display .playRow {
	margin-top:0;
	
}
.BL .selectedRhythm {
    border-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}


.selectedRhythm.currentRhythmA {
	border:solid 1px #7b6;
	}
.selectedRhythm.currentRhythmB {
	border:solid 1px #fdc522;
	}

.firstTwo, .secondTwo {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:nowrap;
	flex-wrap: nowrap;
	width:50%;
}

.labeled-measure {
	margin-top:-.8rem;
}


#instructions {
	margin-left:10px;
	font-size:1.4rem;
}
#instructions h6 {
	color:#232323;
	font-size:1.6rem;
	letter-spacing:.3rem;
	margin-bottom:.4rem;
    line-height: 1.3;
}

/* Tabbernav styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.tabberlive {
    margin: auto;
    background-color:white;
}

.tabber.page {
	padding:1.618em;
}

.tabberlive#tab1 {
	display:flex;
	display:-webkit-flex;
	-webkit-flex-flow:column;
	flex-flow:column;
	-webkit-align-items:center;
	align-items:center;
	
}

.tabbertab header, .st-menu header {
	height:4rem;
	line-height:4rem;
	text-align:center;
	height:auto;
	width:100%;
	background-color:transparent;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color:#494158;
    border-bottom:0;
    position:relative;
    
}
.tabberlive.page .tabbertab p.smaller {
	width:100%;
	max-width:70rem;
	text-align:center;
}
#tab1 {
	width: auto;
	margin-right: auto;
	margin-left: auto;
}
.tabberactive a#tab1nav1 {
	background-color: #7b6;
	color:#fff;
	font-weight:600;
	border-radius:.2rem;
	height:4rem;
	line-height:4rem;
}
.tabberactive a#tab1nav2 {
	background-color: #fdc522;
	color:#fff;
	font-weight:bold;
	border-radius:.2rem;
	height:4rem;
	line-height:4rem;
}

.tabberactive a#tab1nav3, .tabberactive a#tab1nav1[title="C"] {
	background-color: #878AD0;
	color:#fff;
	font-weight:bold;
	border-radius:.2rem;
	height:4rem;
	line-height:4rem;
}

.tabberactive a#tab1nav4,  .tabberactive a#tab1nav2[title="D"] {
	background-color: #E157EA;
	color:#fff;
	font-weight:bold;
	border-radius:.2rem;
	height:4rem;
	line-height:4rem;
}

 


#tab1nav1, #tab1nav2, #tab1nav3, #tab1nav4 {
	height:4rem;
	border-radius:.2rem;
}

a#tab1nav1, a#tab1nav2, a#tab1nav3, a#tab1nav4 {
	line-height:4rem;
	background-color: #E2E0E6;
	color:#555;
	padding: 1rem 4rem;
}

#tab1nav1:hover {
	background: #B6E1AB;
	-webkit-transition: background 0.2s;
	transition: background 0.2s
}
#tab1nav2:hover {
	background: #FBE8AE;
	-webkit-transition: background 0.2s;
	transition: background 0.2s
}
#tab1nav3:hover, #tab1nav1[title="C"]:hover {
	background: #b199ef;
	-webkit-transition: background 0.2s;
	transition: background 0.2s
}
#tab1nav4:hover, #tab1nav2[title="D"]:hover {
	background: #f1adfa;
	-webkit-transition: background 0.2s;
	transition: background 0.2s
}

#main ul.tabbernav {
    margin-bottom: 4rem;
}

ul.tabbernav {
	padding-left:0;
	text-align:center;
	display: flex;
    flex-flow: row wrap;
    margin: auto;
    justify-content: center;
}

ul.tabbernav li.tabberactive a, ul.tabbernav li.tabberactive a:link {
	color:#fff;
	font-weight:600;
}

ul.tabbernav li a:link {
	color:#555;
}
ul.tabbernav li a:hover, ul.tabbernav li a:focus, ul.tabbernav li a:active {
	color:#fff;
}
.rhythmNavbar, label.tab {
	font-size:.9rem;
}

.st-menu h3 {
	background: #313131;
	width:28rem;
	height:2rem;
	line-height:2rem;
	border:solid 1px #fff;
	border-top:none;
	font-size:1.12rem;
	margin:0;
}
section.allRhythms{
	position:relative;   
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:column;
	flex-flow:column;
	-webkit-justify-content:flex-start;
	justify-content:flex-start;
	-webkit-align-items:center;
	align-items:center;
	padding-left:.5rem;
	/*width:28rem;*/
}
	
div.RM_rhythm {
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items: center;
	text-align:center;
	-webkit-justify-content:flex-start;
	justify-content: flex-start;
	border-bottom:solid 1px #eee;
	padding:1rem 0;
}

.label {
	width:4.5rem;
	border:solid 1px #555;
	padding:.2rem .4rem;
	margin:.5rem .8rem .5rem .5rem;
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:center;
	justify-content: center;
	-webkit-align-items:center;
	align-items:center;
	font-size:.8em;
	color:#313131;
}

label:hover {
	background-color:#77bb66;
	color:#fff;
	}
	
.tabber#tab1-2 label:hover {
	background-color:#fdc522;
	}

.rhythm {
	width:200px;
	border:none;
}

.main.rhythmetricsTab {
	padding-bottom:0;
}
.rhythmetricsTab p {
	text-align:left;
}


/* Main page tabs
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tabberlive.page .tabbertab {
 	border:1px solid #fff;
 	border-top:0;
 	width:100%;
 	text-align:center;
 }
 .tabberlive.page .tabbertab p{
 	text-align:left;
 }
 .tabberlive.page .tabbernav {
	 margin:0 auto;
	 text-align:center;
	 height:42px;
	 padding:0;
 }
 
 
.tabberlive.page ul.tabbernav li.tabberactive a{
 height:42px;
 line-height:42px;
 padding:11px;
 margin:0 .3rem;
 white-space: nowrap;
 background-color: white;
 color: #494158;
 border-bottom: 2px solid #cbcbcb;
 }
 
 .tabberlive.page ul.tabbernav li a{
 height:42px;
 line-height:42px;
 padding:11px;
 margin:0;
 white-space:nowrap;
 }
 
 .tabberlive.page ul.tabbernav li a:hover {
	 border-bottom:2px solid #efefef;
	 }
  .tabberlive.page ul.tabbernav {
	 display:-webkit-flex;
	 display:flex;
	 -webkit-flex-flow:wrap;
	 flex-flow:wrap;
	 -webkit-justify-content:center;
	 justify-content: center;
	 -webkit-align-items:center;
	 align-items:center;
	 max-width: 60rem;
    margin-bottom: 2rem;
    height:8rem;
 }
 
.tabberlive.page ul.tabbernav li a:hover, .tabberlive.page ul.tabbernav li a:focus, .tabberlive.page ul.tabbernav li a:active {
	background-color:#eae9ec;
	color:#555;
}

.tabberlive.page h5{
	margin-top:3.6rem;
}

.tabberlive.page.TIPs h5{
	margin-top:0;
}

.tabberlive.page.keyofA h5 {
	color:#007236;
}
.tabberlive.page.keyofBb h5 {
	color:#8dc73f;
	}
.tabberlive.page.keyofB h5 {
	color:#f7ac1d;
}
.tabberlive.page.keyofC h5 {
	color:#ee5b50;
}
.tabberlive.page.keyofDb h5{
	color:#9e005d;
}
.tabberlive.page.keyofD h5 {
	color:#5c3274;
}
.tabberlive.page.keyofEb h5 {
	color:#605ca9;
}
.tabberlive.page.keyofE h5 {
	color:#8393ca;
}
.tabberlive.page.keyofF h5 {
	color:#0072bc;
}
.tabberlive.page.keyofF-sharp h5 {
	color:#ed6c15;
}
.tabberlive.page.keyofG h5 {
	color:#0076a3;
}
.tabberlive.page.keyofAb h5 {
	color:#1cbbb4;
}



/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #6B89DD;
  text-decoration: none;
  font-weight:500;
  }
a:hover {
  color: #6376AD;
  text-decoration: none; 
  }
  
a.button, a.buttonB, a.buttonC, a.buttonD {
	color:#232323!important;
	text-decoration:none;
	font-size:1.6rem;
}
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
       cursor: pointer;
}



/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
input[type="button"] {
  display: inline-block;
  height: 40px;
  background-color:#f2f2f2;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 40px;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  border: none; 
  cursor: pointer;
  box-sizing: border-box;
  margin:.618em; }
button:hover,
input[type="button"]:hover,
button:focus,
input[type="button"]:focus {
  background-color:#f2f2f2;
  color: #555;
  outline: 0; 
  -webkit-transition: all 0.2s;
  transition: all 0.2s}

.btn {
	margin:15px;
}

button.print {
	-webkit-align-self:flex-end;
	align-self:flex-end;
	background-color:#fff;
	box-shadow:0px 5px #fff;
	height:40px;
	margin:15px;
}
button.print:hover {
  background-color:#494158;
  box-shadow: 0 4px #fff;
	color: white;
  border-color: #888;
  outline: 0; 
  -webkit-transition: background 0.2s;
  transition: background 0.2s
 }
 button.print.btn-2c:hover {
	box-shadow: 0 4px #fff;
	top: 2px;
}

button.print.btn-2c:active {
	box-shadow: 0 0 #fff;
	top: 6px;
}

input#resetRhythms {
    padding: 0;
    background-color: white;
    box-shadow: none;
    color:#6c627f;
}

/* Play button
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.RM_rhythm a.play-button,
.RM_rhythm button,
.RM_rhythm input[type="button"],
.RM_rhythm_example,
.playFeatured button,
.playFeatured input[type="button"] {
  display: inline-block;
  height: 28px;
  width:28px;
  padding: 0px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: #C9C7CB;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  margin:3px;
  padding-left:2px;
  }
.RM_rhythm a.play-button, .RM_rhythm button, .buttonB, .RM_rhythm .button, .buttonC, .buttonD {
	  align-self:flex-start;
	  -webkit-align-self:flex-start;
  }
  
 .RM_rhythm_example {
	 margin:0;
 }

button > a, .RM_rhythm a.play-button > a {
	  color:#555;
  }
button > a:hover, .RM_rhythm a.play-button > a:hover {
	color:#555;
}

.button, .buttonB, .buttonC, .buttonD, .tabbertab .button {
	width:45px;
	border:none;
	padding:4px;
	margin: 5px 8px 0px 5px;
	border-radius: 4px;
	background: #f5f5f5;
	}
.button:hover, .button:focus, .button:active {
	background-color:#7b6;
	color:#fff!important;
}

#tab1-2 .button:hover, #tab1-2 .button:focus, #tab1-2 .button:active, .buttonB:hover, .buttonB:focus, .buttonB:active {
	background-color:#fdc522;
	color:#fff!important;
}

#tab1-3 .button:hover, #tab1-3 .button:focus, #tab1-3 .button:active, .buttonC:hover, .buttonC:focus, .buttonC:active {
	background-color:#878AD0;
	color:#fff!important;
}

#tab1-4 .button:hover, #tab1-4 .button:focus, #tab1-4 .button:active, .buttonD:hover, .buttonD:focus, .buttonD:active {
	background-color:#e021fd;
	color:#fff!important;
}

										

.btn-4, input.btn-4[type="button"]#trigger-overlay {
	font-size:24px;
}

.fa-play:after{
	content:'\25BA';
	}
.fa-pause:after{
	content:'\2161'
}

/* Amazing Audio Player
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.textwidget p.smaller {
    max-width: 26rem;
    margin: 1.2rem auto;
    margin-bottom: 1.6rem;
    font-size: 1.2rem;
    line-height:1.8rem;
}

.player-img {
	width:220px;
	padding: 5px;
	margin-bottom: -10px!important;
	position: fixed;
}

#player-menu .player-img, #player-menu #amazingaudioplayer-1, #player-menu #amazingaudioplayer-3{
	width:100%;
}

#amazingaudioplayer-1, #amazingaudioplayer-3 {
	display:block;
	position:relative;
	margin:0 auto;
	height:auto;
	}
	
#amazingaudioplayer-1.unfixed, .player-img.unfixed, .player-img {
	position:relative;
	margin:0 auto;
	}


#amazingaudioplayer-3 .amazingaudioplayer-track-item-active, #amazingaudioplayer-1 .amazingaudioplayer-track-item-active {
    background-color: #212121;
    color: #ffd05d!important;
    font-weight:bold;
    }
    
    #amazingaudioplayer-3 .amazingaudioplayer-track-item:hover, #amazingaudioplayer-1 .amazingaudioplayer-track-item:hover {
    color: #fff;
    }
.amazingaudioplayer-volume-bar {
	z-index:30;
	
}

#amazingaudioplayer-1 .amazingaudioplayer-bar, #amazingaudioplayer-3 .amazingaudioplayer-bar {
	background-color:#fffbf1;
	border:1px solid #f5f5f5;
	background-image:none;
    border: 5px #2b2b2b solid;
}

#amazingaudioplayer-1 .amazingaudioplayer-bar-title, #amazingaudioplayer-3 .amazingaudioplayer-bar-title { 
	color:#fdc522;
	}

#amazingaudioplayer-4 {
	margin-bottom:4rem!important;
}

#amazingaudioplayer-1 .amazingaudioplayer-tracklist-container, #amazingaudioplayer-3 .amazingaudioplayer-tracklist-container, #amazingaudioplayer-1 .amazingaudioplayer-bar, #amazingaudioplayer-3 .amazingaudioplayer-bar {
	margin:0;
}

#amazingaudioplayer-1 .amazingaudioplayer-tracklist-container, #amazingaudioplayer-3 .amazingaudioplayer-tracklist-container {
	padding:12px 0;
	background-color:#2f2f2f;
}
#amazingaudioplayer-1 .amazingaudioplayer-track-item, #amazingaudioplayer-3 .amazingaudioplayer-track-item {
	color:#a0a0a0;
	padding:0px 12px;
	font-size: 13px;
    line-height: 35px;
}

#amazingaudioplayer-1 .amazingaudioplayer-tracklist-container, #amazingaudioplayer-3 .amazingaudioplayer-tracklist-container {
	background-color: #fff;
	border: none;
	background-image:none;
	background-color:#333333;
}
#player-menu .mm-panel{
	padding:0;
}

#amazingaudioplayer-1 .amazingaudioplayer-tracks-wrapper, #amazingaudioplayer-3 .amazingaudioplayer-tracks-wrapper {
    height: 100%!important;
}

.tracks-example-button {
	text-transform:uppercase; 
	font-family:'Open Sans',sans-serif;
	padding:3px 5px;
	border-radius:2px;
	font-size:12px;
	background-color: #e7e1f3;
	color: #6d4ea7;
}



/* checkbox
–––––––––––––––––––––––––––––––––––––––––––––––––– */

input[type=checkbox].css-checkbox {
							position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
						}

						input[type=checkbox].css-checkbox + label.css-label {
							padding-left:29px;
							height:24px; 
							display:inline-block;
							line-height:24px;
							background-repeat:no-repeat;
							background-position: 0 0;
							vertical-align:middle;
							cursor:pointer;
							font-family: "Lato","Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	

						}

						input[type=checkbox].css-checkbox:checked + label.css-label {
							background-position: 0 -24px;
						}
						label.css-label {
				background-image:url(../images/csscheckbox_purple.png)!important;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				color: #555;
				text-align: center;
				font-size: 11px;
				font-weight: 600;
				line-height: 38px;
				letter-spacing: .1rem;
				text-transform: uppercase;
				text-decoration: none;
				white-space: nowrap;
 } 
 
 label.css-label:hover {
	background-color:#fff;
	color:#555;
	}

/* Accordion
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.accordion {
	width:100%;
	max-width:81rem;
	margin:auto;
	transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

.accordion p {
	width:100%;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox] ~ label {
  display: block;
  color: #555;
    background: white;
	-webkit-transition: none;
    -moz-transition: none;
    transition: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-radius:2px;
    margin:15px 0;
    border: 1px solid #e6e6e6;
	border-radius: 20px;
	padding: 10px;
	width: 208px;
    text-align: center;
    margin: -2rem auto 3rem;
    border: 0;
    border-bottom: 1px solid grey;
    border-radius: 0;
}
input[type=checkbox] ~ label.RR {
	margin:0;
}


input[type=checkbox]:checked ~ label ~ .content { 
  opacity: 0;
  height: 0;
  display: none;
}
.content {
  display: block;
  clear: both;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

input[type=checkbox] ~ label.css-label {
	border:none;
	border-radius:0;
	width:auto;
	padding:0;
  }
  
  
/* Login
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section.login {
	margin:1.618em auto;
	padding:1em;
	text-align:center;
}

  
/* media queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
	
@media print
{
.noprint {display:none;}
}

@media only screen and (min-width:768px) and (max-width:1000px) {
	.row.kk-module {
    padding-left: 1% !important;
	}
	.row.kk-module .module-intro-text {
		width:50%;
	}
	
}


@media only screen and (max-width:767px) {
	
	st-container {
		max-width:42rem;
		width:98%;
	}

	h1 {
		text-align:center;
	}
		.combos header {
		padding:0;
		margin:1em auto 2em auto;
	}
	
	.button-instructions {
		max-width:50%;
		display:-webkit-flex;
		display:flex;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		text-align:right;
		line-height:18px;
	}
	
	input[type="checkbox"] ~ label {
		width: 280px;
	
}

	/*
	.fourLabels, .fourRhythms {
		margin-top:0;
	}*/
	.fourLabels {
		-webkit-justify-content:flex-start;
		justify-content:flex-start;
	}
	/*
	.selectedRhythm, .selectedRhythm > img {
		width:160px;
		height:79px;
	}
*/
	.selectedLabel, .selectedLabelA, .selectedLabelB, .selectedLabelC, .selectedLabelD {
		height:40px;
		line-height:40px;
		width: auto;
	    padding-right: 4px;
	    padding-left: 4px;
	}
	.BreakingLoose {
		margin-top:60px;
	}

	.row.text p.smaller {
		font-size:1em;
		line-height:1.618;
	}

	.keys {
		-webkit-flex-flow:row wrap;
		flex-flow:row wrap;
	}

	.threeKeys {
		-webkit-flex-flow:row;
		flex-flow:row;
	}
	
	#intro .row {
	   -webkit-flex-flow:row wrap;
	   flex-flow:row wrap;
	    }

.module-intro-text {
		width:100%;
		margin-right:1rem;
		}

#amazingaudioplayer-1 .amazingaudioplayer-track-item, #amazingaudioplayer-3 .amazingaudioplayer-track-item {
		font-size:14px;
		line-height:2;
	}

#navbar-grid-studio{
		grid-template-columns:100px 50px auto 100px;
		grid-template-rows:50% 50%;
		position:fixed;
		width:100%;
	
	}

#navbar-grid-studio #studio{
		grid-area: 1 / 3 / span 1 / span 1;
	}
#navbar-grid-studio #dd{
		grid-area: 2 / 3 / span 1 / span 1;
	}

}

@media only screen and (min-width:550px) and (max-width:767px) {
	.tabberlive.page ul.tabbernav {
		margin-bottom:7rem;
		max-width:60%;
	}
	
}


@media only screen and (max-width:339px) {
.tabberlive.page h5{
		margin-top:15rem;
	}
}

@media only screen and (min-width:340px) and (max-width:440px) {
.tabberlive.page h5{
		margin-top:9rem;
	}
}

@media only screen and (min-width:441px) and (max-width:550px) {
.tabberlive.page h5{
		margin-top:6rem;
	}
}
@media only screen and (min-width:551px) and (max-width:574px) {
.tabberlive.page h5{
		margin-top:15rem;
	}
}
@media only screen and (min-width:575px) and (max-width:630px) {
.tabberlive.page h5{
		margin-top:9rem;
	}
}

@media only screen and (min-width:768px) and (max-width:834px){
.page-title {
	    margin-top: 21.4rem;
	}
.grid-content.rhythms.random .page-title{
		margin-top:28.4rem;
	}	

}
@media only screen and (max-width:707px) {
	.threeKeys {
		-webkit-justify-content:flex-start;
		justify-content: flex-start;
	}
	.callout-list {
		width:100%;
	}

}

@media only screen and (max-width:464px) {
	h5 {
		margin-top:6rem;
	}
	.logo {
    max-width: 150px !important;
	}

	#navbar-grid {
		display:grid;
		height:4.6rem;
		background-color:#232323;
		grid-template-columns:150px auto;
	} 
	
	#navbar-grid .logo {
	    grid-area: 1/1/span 1/span 1;
	}
	#navbar-grid #dd {
	    position: relative;
	    grid-area: 2/1/auto/span 3;
	    height: 4.6rem;
	    line-height: 4.6rem;
	    font-size:1.3rem;
	    letter-spacing:.07rem;
	}
	#navbar-grid #menu {
	    position: relative;
	    grid-area: 1/3/auto/span 1;
	    height: 4.6rem;
	    line-height: 4.6rem;
	}
	
	#navbar-grid-studio #studio{
		/*grid-area: 1 / 2 / span 2 / span 1;*/
		display:none;
	}
	
	#navbar-grid-studio #logo {
	    grid-area: 1/2/span 2/span 2;
	}
	
	#navbar-grid-studio #logo::after {
	    content: "Freescaling";
	    color: white;
	    font-size: 14px;
	    left: 6px;
	    position: relative;
	
	}
	#dd {
		display:none;
	}

	#pagination .caret-previous{
		width:50px;
		left:0;
	background:none;
	
	}
	#pagination .caret-next {
		width:50px;
		right:15px;
	background:none;
	}
	.pagination-name {
		display:none;
	}

#pagination .caret-previous, #pagination .caret-next {
	font-size: 2.5rem;
	margin-top: -8px;
	}

}

@media only screen and (max-width:495px) {
	.AAAA, .AAAB, .AABA, .AABB, .ABAA, .ABAB, .ABBA, .ABBB, .BAAA, .BAAB, .BABA, .BABB, .BBAA, .BBAB, .BBBA, .BBBB, .BL, .CCCC, .DDDD, .combo {
	-webkit-flex-flow:column;
	flex-flow:column;
	}
	.fourLabels{
		margin-top:20px;
	}
}

@media only screen and (max-width:600px) {

.firstTwo, .secondTwo {
	-webkit-flex-wrap:wrap;
	flex-wrap: wrap;
	width:100%;
	justify-content: center;
}

.tabberlive.page ul.tabbernav {
	margin-bottom:5.8rem;
}
}
@media only screen and (max-width:767px) {

	.page-head {
    	margin: 0 auto 11.6em;
	}
	.menu {	
		margin-top:0;
	}

	header ul {
		-webkit-flex-flow:column;
    		flex-flow:column;
	    -webkit-justify-content: center;
	    justify-content: center;
	    padding-left:0;
	    padding-right:0;
	    padding-top:20px;
	}
	
	header {
		height:4.6rem;
	}
	
	 header.intro {
		 height:0;
		 }
	
	ul.navbar li:first-of-type {
		-webkit-align-self:flex-start;
		align-self:flex-start;
	}
		
	.wrapper-demo {
		top:36px;
	}
	#main {
		padding-top:4.6rem;
	}

#sidebar {
	width:100%;
	margin-right:0;
	-webkit-flex:0 0 100%;
	flex:0 0 100%;
	}
	#amazingaudioplayer-1, #amazingaudioplayer-3 {
		display:block;
		position:relative;
		width:100%;
		height:auto;
		margin:0px auto 0px;
		}
	.tabberlive.page.TIPs h5{
		margin-top:6rem;
	}
	
	#intro .grid-container {
		grid-template-columns: 1fr;
		grid-column-gap:2rem;
		grid-row-gap:1rem;
		max-width: 92%;
		text-align: center;
		margin:auto;
		margin-top:6rem;
		
	} 
	#intro .grid-item p{
		margin-bottom:4rem;
		}
		
		#intro h1 {
		font-size:4.8rem;
		}
		#intro h2 {
		font-size: 3rem;
	}

	.grid-item.intro-text-menu {
		display:none;
		}
	.menuForIntroPage{
		display:block;
		}
		#intro .grid-container {
        display: grid;
		grid-gap: 1rem;
        grid-template-columns: 1fr;
        grid-template-areas:
               "content"
               "sidebar";
        text-align:left;
 
    }
   #intro .row {
	   width:100%;
	    }
	    .module-intro-text {
		    width:100%;
		    }
.wrapper {
		display:grid;
		grid-template-columns:1fr;
		grid-template-areas:"p" "c";
		}
	#rhythm-display{
		position:relative;
		padding-right:0;
	}
	.page-title {
		margin-top:0;
	}
	.grid-content.rhythms.random .page-title{
		margin-top:0;
	}	
	
		.grid-content {
		grid-area:c;
		display:grid;
		grid-template-areas:
							"page-title"
							"page-text"
							"rhythms"
							"page-combos";
		}

}