/***/
@font-face{
	font-family:comic;
	src:url(comic/Web/ComicNeue-Bold.ttf);
}

html,body{
	height:100%;
	width:100%;
	font-family:comic;
	overflow-y: auto;
}
.substrand-links-active{background-color:#ec3d38;}
.substrand-pagination{cursor:pointer;}


body{
	background-image:url(../img/strands.png);
	background-size:100% 100%;
}
/*mikesorus css */
 .substrands{
     display:none;
	 transition:2s;
 }
.panel-footer-substrands{
	padding:0px;
}
.stats > .btn-strands{
	padding:20px;
	border-bottom:5px solid #b42d2d;
}
.panel-default{padding:5px;}
.wrapper{
	margin-top:1%;
	z-index:-1;
}

/*css for transitions*/

.main-panel{
	 height:100%;
	 width:100%;
	-webkit-perspective: 1200px;
	  -moz-perspective: 1200px;
	  perspective: 1200px;
	position:relative;
  }

  .numbers-strands{
	/*position:absolute;
	overflow:hidden;*/
	-webkit-transform-style: preserve-3d;
	  -moz-transform-style: preserve-3d;
	  transform-style: preserve-3d;
  }
  .strands{
	position:absolute;
	overflow:hidden;
	-webkit-transform-style: preserve-3d;
	  -moz-transform-style: preserve-3d;
	  transform-style: preserve-3d;
  }
  .threestrands{
	  margin-left: 20%;
  }
  .pt-inactive{
	  display: none;
  }
  .pt-active{
	display: block;
   }
  /**/

  .pt-page-rotateSlideOut {
	-webkit-animation: rotateSlideOut 1s both ease;
	animation: rotateSlideOut 1s both ease;
}
.pt-page-rotateSlideIn {
	-webkit-animation: rotateSlideIn 1s both ease;
	animation: rotateSlideIn 1s both ease;
}
@-webkit-keyframes rotateSlideOut {
	0% { }
	25% { opacity: .5; -webkit-transform: translateZ(-500px); }
	75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
	100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes rotateSlideOut {
	0% { }
	25% { opacity: .5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); }
	75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); }
	100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); }
}

@-webkit-keyframes rotateSlideIn {
	0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
	75% { opacity: .5; -webkit-transform: translateZ(-500px); }
	100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@keyframes rotateSlideIn {
	0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); }
	75% { opacity: .5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); }
	100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); }
}

/*-----------------------------------------------------------*/
.strands{
   	 transition:display 2s;
 }
 

.pagination>li>a, .pagination>li>span {
	border-radius: 50% !important;
	margin: 0 5px;
	background-color: #008CBA;
	color: #fff;	
}

.strands{
	margin-top:0%;
}
.strands-three{
  left:25%;
}

.btn-start-custom{
   border:none;	
   color:#fff;
   background-color:#fb404b;
   box-shadow:inset 0 -4px 0 rgba(0,0,0,.135);
 }
 /*.btn-start-custom:hover{
	 color:#fff;
     background-color:#fb404b !important;
     box-shadow:inset 0 0px 0 rgba(0,0,0,.135)
 
}*/
 
 /*----------------*/
 
 .list-group > .active{
	 background-color:#1dc7ea !important;
 }
 .pagination > .active > a{
	 background-color:#1dc7ea !important;
	 border-color:#fb404b !important;	 
 }
 .pagination > li > .game{
	 background-color:#fb404b !important;
	 border-color:#fb404b !important;
     color:white;	 
 }
 
 iframe{
	 border:none;
	 height:70vh !important;
 }
.sidebar{
  width:200px;
  border-right:4px solid #5399AD;
  transition:1s ease-in-out;
 }
 .sidebar .sidebar-wrapper{
    width:195px !important;
 }
 
 .main-panel{
  
	transition:1s ease-in-out;
 }
 .content-iframe{
   padding:0 !important;
 }

 
 .strands-substrand-page > a{
    background-color:rgb(239, 239, 31);
	border-top:none;
	padding:10px 30px 10px 30px;
	border-radius:12px 0px;
	color:#957777;
   box-shadow:inset 0 -4px 0 rgba(0,0,0,.135);
   display:none !important;
	
 }
 .strands-substrand-page > a:hover{
    background-color:rgb(239, 239, 31);
	border-top:none;
	padding:10px 30px 10px 30px;
	border-radius:12px 0px; 
	color:black;
    box-shadow:inset 0 4px 0 rgba(0,0,0,.135);
	transition:0.5s;
 }
 
 .strands-substrand-page{
	 position:relative;
	 top:-30px;	 
	 margin-left:10%;
 }
 

 /*icon fonts*/
 
 .icon-fonts{
    font-size:20px;
 }
 
 /*media queries**/
 
 @media (max-width:1000px){
     .main-panel{
	   width:100%;
	}
 }

 .sidenav > small{
	position:relative;
	left:-10%;
	background-color:#2a2d3f;
	border-radius:0 15px 5px 0;
	padding:12px;
	color:#2bc4ff;
}
  .triangle-5 {
  width: 0px;
  border-top: solid 7px rgb(93, 84, 86);
  border-left: solid 10px transparent;

  position:relative;
  left:-24px;
  top:7px;
  z-index:-1;
  }

 /**change iframes*/
 .iframe-content{
     position:absolute; 
	 width:100%;
 }
 /*for windows only*/
 
 .sidebar{
	 
	 display:none;
 }
 .main-panel{
	 width:100%;
 }
 
 .navbar{
	 
	 display:none;
 }
 
/*panel defaults*/
.panel{
	-webkit-box-shadow:  4px 9px 7px -5px rgba(0,0,0,0.45);
     -moz-box-shadow:  4px 9px 7px -5px rgba(0,0,0,0.45);
     box-shadow: 4px  9px 7px -5px rgba(0,0,0,0.45);
}
.panel-img{
	margin:auto;
	height:18em;
	/*height:20vh;*/
	width:100%;
}
.img-adjust-panel{
	height:17vh !important;
}
	
.panel-heading{
	font-size:large;
	font-weight:bolder;
	background-color:#e7eceb;
}

.sidenav > small{
	position:relative;
	left:-10%;
	background-color:#2a2d3f;
	border-radius:0 15px 5px 0;
	padding:12px;
	color:#2bc4ff;
}
.overlay{
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}
.panel-body-math:hover .overlay {
  width: 100%;
  left: 0;
}

.row-one{
	padding-bottom:3%;
}
.panel-footer > a{
	color:#fff !important;
}
.grade-tags{
	color:#c3c3c3 !important;
}
/*math panel*/
.panel-math{
	border:0.5px solid #969ab6;
}
.panel-math > .panel-footer{
	background-color:#2a2d3f;
}
/*english panel*/
.panel-english{
	border:0.5px solid #ff7e00;
}
.panel-english > .panel-footer{
	background-color:#ff7e00;
}
/*music panel*/
.panel-music{
	border:0.5px solid #969ab6;
}
.panel-music > .panel-footer{
	background-color:#ff08f3;
}
/*env panel*/
.panel-env{
	border:0.5px solid #2fcc30;
}
.panel-env > .panel-footer{
	background-color:#2fcc30;
}
/*cre panel*/
.panel-cre{
	border:0.5px solid #1feae0;
}
.panel-cre > .panel-footer{
	background-color:#1feae0;
}
/*arts panel*/
.panel-arts{
	border:0.5px solid #164aff;
}
.panel-arts > .panel-footer{
	background-color:#164aff;
}
/*literacy panel*/
.panel-literacy{
	border:0.5px solid #f7ce06;
}
.panel-literacy > .panel-footer{
	background-color:#f7ce06;
}
/*hygiene panel*/
.panel-hygiene{
	border:0.5px solid #fc5959;
}
.panel-hygiene > .panel-footer{
	background-color:#fc5959;
}
/*kiswahili panel*/
.panel-kiswahili{
	border:0.5px solid #4dc0b8;
}
.panel-kiswahili > .panel-footer{
	background-color:#4dc0b8;
}

 /**/
 .panel-body{
	 padding-left: 0;
	 padding-right:0;
 }

.many-strands{
	margin-left: 20%;
}
.size-img{
    height:20vh;
}
 /**Media queries**/


@media screen and (max-width:1600px) and (min-width: 1366px) {


.threestrands{
margin-left: 15%;
}
.strands-three{
left: 15%;
}
.many-strands{
margin-left: 15%;
}
}
@media screen and (max-width:1365px) and (min-width: 800px) {

.threestrands{
margin-left: 5%;
}
.strands-three{
left: 5%;
}
.many-strands{
margin-left: 5%;
}

}

 
 /*breadcrumbs*/
 .home{
	 background-color:#379ec5 !important;
 }
 .home:after{
	 border-left:#379ec5 !important;
 }
 .home:before{
	 border-left:18px solid #379ec5 !important;
 }
.learning-btn-strands{
	 background-color:#40b9e7 !important;
 }
.learning-btn-strands:after{
	 border-left:#40b9e7 !important;
 }
.learning-btn-strands:before{
	 border-left:18px solid #40b9e7 !important;
 }
 
 .breadcrumb-arrow {
    height: 36px;
    padding: 0;
    line-height: 36px;
    list-style: none;
    background-color: #e6e9ed
}
.breadcrumb-arrow li:first-child a {
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px
}
.breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li span {
    display: inline-block;
    vertical-align: top
}
.breadcrumb-arrow li:not(:first-child) {
    margin-left: -5px
}
.breadcrumb-arrow li+li:before {
    padding: 0;
    content: ""
}
.breadcrumb-arrow li span {
    padding: 0 10px
}
.breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span {
    height: 36px;
    padding: 0 10px 0 25px;
    line-height: 36px
}
.breadcrumb-arrow li:first-child a {
    padding: 0 10px
}
.breadcrumb-arrow li a {
    position: relative;
    color: #fff;
    text-decoration: none;
    background-color: #3bafda;
    border: 1px solid #3bafda
}
.breadcrumb-arrow li:first-child a {
    padding-left: 10px
}
.breadcrumb-arrow li a:after, .breadcrumb-arrow li a:before {
    position: absolute;
    top: -1px;
    width: 0;
    height: 0;
    content: '';
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent
}
.breadcrumb-arrow li a:before {
    right: -10px;
    z-index: 3;
    border-left-color: #3bafda;
    border-left-style: solid;
    border-left-width: 11px
}
.breadcrumb-arrow li a:after {
    right: -11px;
    z-index: 2;
    border-left: 11px solid #2494be
}
.breadcrumb-arrow li a:focus, .breadcrumb-arrow li a:hover {
    background-color: #4fc1e9;
    border: 1px solid #4fc1e9
}
.breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before {
    border-left-color: #4fc1e9
}
.breadcrumb-arrow li a:active {
    background-color: #2494be;
    border: 1px solid #2494be
}
.breadcrumb-arrow li a:active:after, .breadcrumb-arrow li a:active:before {
    border-left-color: #2494be
}
.breadcrumb-arrow li span {
    color: #434a54
}
/*----help--*/
#player{
	width: 100%;
}
.guide{
	background-color:#fb3838 !important;
}
.help > button{
	background-color:#9afff6;
}
.help{
	/* border: 1px solid black; */
	padding: 0px;
	text-decoration: none;
	font-size: large;
	background: repeating-linear-gradient( 45deg, #2bbee0, #2bbee0 10px, #29d7ff 10px, #29d7ff 20px );
	margin-left:90%;
	cursor: pointer;
}

.help-buttons{
		display: grid;
		padding: 30px;
		color: wheat;
		border: 3px solid #292222;
}

.help-buttons > i  a {color: wheat;}

/*----help--*/



.lessons-btn{
	display: none;
}
.fa-chevron-square-right{float:right;}


.navbar-custom{
		margin-bottom:0px !important;
	}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  
	.breadcrumb {display: none;}
	.help{
		display: none;
	}
	.wrapper, .numbers-substrands{
		height: 100%;
	}
	.drawer {
		position: fixed;
		height: 100%;
		width: 70%;
		background-color:#52cce6;
		overflow: hidden;
		transition: 0.5s;
		z-index: 10;
		left:-100%;
		box-shadow: 4px 9px 7px -5px rgba(0,0,0,0.45);
		padding-top:20%;
	}

    .navbar{
		display: flex;
	}

	.lessons-btn{
		display: block;
		margin-bottom: 1em;
	}
	.menu-icons{
		text-align: center;
		margin: auto;
		display: grid;
	}
	.navbar-custom{
			border-bottom: 5px solid #dde1e0;
			background: #fff;
			border-left: 5px solid #ff331b;
			border-right: 5px solid #ff331b;
	}
	.iframe-content{
		margin-top:10px;
	}
}


@media only screen and (min-device-width : 481px) and (max-device-width : 600px) {
	.navbar{
		display: flex;
	}
	.breadcrumb {display: none;}
	.help{
		display: none;
	}
	.wrapper, .numbers-substrands{
		height: 100%;
	}
	
	.menu-icons{
		text-align: center;
		margin: auto;
		display: grid;
	}
	.navbar-custom{
			border-bottom: 5px solid #dde1e0;
			background: #fff;
			border-left: 5px solid #ff331b;
			border-right: 5px solid #ff331b;
	}
	
	.iframe-content{
		margin-top:10px;
	}
	
	.help{
		display: none;
	}
	.wrapper, .numbers-substrands{
		height: 100%;
	}
	.drawer {
		position: fixed;
		height: 100%;
		width: 70%;
		background-color:#52cce6;
		overflow: hidden;
		transition: 0.5s;
		z-index: 10;
		left:-100%;
		box-shadow: 4px 9px 7px -5px rgba(0,0,0,0.45);
		padding-top:20%;
	}

}

@media only screen and (min-device-width : 601px) and (max-device-width : 767px) {
  
   .navbar{
		display: flex;
	}
	.breadcrumb {display: none;}
	.help{
		display: none;
	}
	.wrapper, .numbers-substrands{
		height: 100%;
	}
	
	.menu-icons{
		text-align: center;
		margin: auto;
		display: grid;
	}
	.navbar-custom{
			border-bottom: 5px solid #dde1e0;
			background: #fff;
			border-left: 5px solid #ff331b;
			border-right: 5px solid #ff331b;
	}
	
	.iframe-content{
		margin-top:10px;
	}
	
	.help{
		display: none;
	}
	.wrapper, .numbers-substrands{
		height: 100%;
	}
	.drawer {
		position: fixed;
		height: 100%;
		width: 70%;
		background-color:#52cce6;
		overflow: hidden;
		transition: 0.5s;
		z-index: 10;
		left:-100%;
		box-shadow: 4px 9px 7px -5px rgba(0,0,0,0.45);
		padding-top:20%;
	}

}

@media only screen and (min-device-width : 816px) and (max-device-width : 991px) {
   .threestrands{
	   margin-left:10%;  
    }
}


@media only screen and (min-device-width : 768px) and (max-device-width : 815px) {

  .threestrands{
	   margin-left:4%;  
    }
    
    .help{
		margin-left:80%;
	}
}



/*strands page help pop over**/

.strandsHelp {
		background-image: url(../img/strandsClick.svg);
		background-size: 100% 100%;
		transition: 1s all;
		Height: 10em;
		width: 20em;
		position: absolute;
		top: 60%;
		left: 20%;
		transform: translateY(0);
		animation: guide 2s infinite ease-in-out;
}

@keyframes guide{
    0%{
      transform: translateY(0px)
		}
		60%{
			transform: translateY(20px)
		}
		100%{
			transform: translateY(5px)
		}
}




/*strands page help pop over**/

.backHelp {
	background-image: url(../img/goback.svg);
	background-size: 100% 100%;
	Height: 10em;
	width: 20em;
	position: absolute;
	top: 100%;
	left: 0%;
	z-index: 100;

}


/*strands substrands pop over**/

.substrandsHelp {
	background-image: url(../img/substrand.svg);
	background-size: 100% 100%;
	Height: 10em;
	width: 20em;
	position: absolute;
	top: 10%;
	left: 10%;
	z-index: 100;
	
}


.slides {
	background-image: url(../img/slides.svg);
	background-size: 100% 100%;
	Height: 10em;
	width: 20em;
	position: absolute;
	top: 185%;
	left: 5%;
	z-index: 100;
}

.help-pointer{
	display: none;
}