body {
	font-family: "Barriecito-Regular", cursive;
}

body .thesequence {
	line-height:1.4;
}

@font-face {
  font-family: "Barriecito-Regular";
	src: url("../fonts/Barriecito-Regular.eot"); /* IE9 Compat Modes */
	src: url("../fonts/Barriecito-Regular.eot#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Barriecito-Regular.otf") format("opentype"), /* Open Type Font */
    url("../images/Barriecito-Regular.svg") format("svg"), /* Legacy iOS */
    url("../fonts/Barriecito-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Barriecito-Regular.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Barriecito-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

.backgroundimage {
	background-image: url("../images/africa.svg");
	background-repeat: repeat;
	background-position: right top;
	background-attachment: fixed;
    opacity: 0.1;
    z-index: -1;
	position:fixed; 
	width: 100vw; 
	height: 100vh;
	
}


.selectTheCorrectNote select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
	color: white;
   z-index: 1000;
    overflow: hidden;
}

/* For IE10 */
.selectTheCorrectNote select::-ms-expand {
  display: none;
}

.transparent {
	color: transparent !important;
}
	
sequencer {
	display:block;
	vertical-align: top;
} 

sequencerNew {
	display:block;
	vertical-align: top;
} 

.flam {
	position: absolute;
	top: 0px;
	left: 0px;
    font-size: 60%;
}

.flam2 {
	position: absolute;
	top: 3px;
	left: 3px;
    font-size: 60%;
} 
.beat {
	margin: 2px 2px 4px 2px;
	height: 2.8rem;
	font-weight: 700;
	font-size: 1.4rem;
	position: relative;
}


.doublebeat {
    margin: 5px 2px;
    height: 1.1rem;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 70%;
}  
	
.beatMetro {
	border: 4px solid transparent;
	margin: 3px 2px;
	line-height: 80%;
}

.beatall {
	width: 2.3rem;
	padding: 0px;
	display: inline-block;

}

.instrument-icons {
    height: 3.2rem;
    padding: 0.5rem 0.5rem;
}
.instrument-icons2 {
    height: 25px;
    padding: 0px 9px;
}

.instrument-iconshelp {
    height: 3rem;
}

.instrument-iconsVolumes {
    height: 2rem;
}


	.changeVol {
        display:inline-block;
		padding: 0 0.5%;
		vertical-align: middle;
    }
.changeSwing {
        display:inline-block;
		padding: 0px;
		margin: 10px 0px 0px -6px;
		vertical-align: middle;
}	
	

	.muteVol {
        padding:0px 5px;
		display:inline-block;
		margin:0px 0 0 0.5%;
		font-size:100%;
		vertical-align: top;
    }
	
   .tableLine {
		line-height: 1.3;
   }
   .titleWidth {
		width:55px;  
		display:inline-block;
		vertical-align: top;
		margin: 0;
   }
  
  	@media only screen and (max-width: 900px) {
		.muteVol {
			padding:0px 3px;
		}
		
	   .titleWidth {
			width:50px;  
	   }
		.beatall {
			width: 1.5;
		}
		.beat {
			font-size: 1.2rem;
		}
		.instrument-icons {
			height: 2.6rem;
			padding: 0.2em 0.4rem 0.4rem 0.4rem;
		}
		.doublebeat {
			margin: 5px 2px;
			height: 1.1rem;
			font-size: 1rem;
		} 
	}
  
	@media only screen and (max-width: 800px) {
		.muteVol {
			padding:0px 3px;
		}
		
	   .titleWidth {
			width:40px;  
	   }
		.beatall {
			width: 1.8rem;
		}
		.beat {
			height: 1.2rem;
			font-size: 1.2rem;
			margin: 3px 2px 20px 2px;
		}
		.doublebeat {
			margin: 5px 2px;
			height: 1rem;
			font-size: 0.9rem;
		}		
  		.instrument-icons {
			height: 2.4rem;
			padding: 0.2rem 0.3rem 0.4rem 0.2rem;
		} 
	}
	
		@media only screen and (max-width: 568px) {
		.muteVol {
			padding:0px 3px;
		}
		
	   .titleWidth {
			width:35px;  
	   }
		.beatall {
			width: 1.1rem;
		}
		h1 {
			font-size: 2rem !important;
		}		
		.beat {
			height: 1rem;
			font-size: 0.9rem;
			margin: 3px 2px 12px 2px;
		}
		.doublebeat {
			margin: 0px 2px;
			font-size: 0.7rem;
			height: 0.8rem;
		}		
		.instrument-icons {
			height: 1.6rem;
			padding: 0.1rem 0.4rem 0.3rem 0.4rem;	
		} 
		body .thesequence {
			line-height: 1.2;
		}		
	}
	
	@media only screen and (max-width: 390px) {
		.beatall {
			width: 0.8rem;
		}
		.beat {
			height: 0.8rem;
			font-size: 0.7rem;
		}
		h1 {
			font-size: 1.5rem !important;
		}		
		.doublebeat {
			margin: 0px 2px;
			font-size: 0.55rem;
		}
		body .thesequence {
			line-height:0.9;
		}		
	}
	@media only screen and (max-width: 320px) {
		.beatall {
			width: 12px;
			font-size: 0.65rem;
		}
		.doublebeat {
			margin: 0px 2px;
			font-size: 0.5rem;
		}
	}	

	
	.beatRest {
        color: lightgrey;
    }

	.beatStart {
        color: #aba7a7;
		margin-left:0%;
    }
	
	
	
	.downmetrobeatRest {
        background-color: lightgrey;
    }

	.downmetrobeatStart {
        background-color: #aba7a7;
		margin-left:0%;
		border-left: 1px solid lightgrey;
    }

	
	.beat.on {
		color: #28a745;
    }

 .downmetrobeatStart.hit {
	 background-color: #E74C3C !important;
 }
 
  .downmetrobeatRest.hit {
	 background-color: #F7C2BC !important;
 }
 
 
    .beat.hit {
        color: #E74C3C !important;
    }
	
	.beat.nothit {
        background-color: #F5B7B1;
    }
	
	
	.metronome {
       vertical-align: super;
    }
	.metronomeOn {
        color: #dc3645 !important;
		/*transform:  scale(1.2);*/
		
    }
	.metronomeOff {
  		/*transform:  scale(1);*/
		
    }
    .navbar ul {
        float :left ;
    }
    .navbar ul li {
        padding: 15px;
        list-style: none;
		 float :left;
    }
	
	#dblistofobjects li {
        list-style: none;
		text-decoration: none;
    }

    .navbar ul li a {
        text-decoration: none;
    }
   
   .pointer {
	   cursor:pointer;
   }
   
   
/* loading ~~~~~~~~~~~~~~~~~~~~~ */
.loading {
	background-image: url(../images/africacloth.svg);
	background-repeat: repeat;
	background-position: right top;
	background-attachment: fixed;
	background-size: 27rem;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading p {
  font-size: 200%;
  text-align: center;
  animation: loading ease-in-out 2s infinite;
  position:absolute;
  color:white;
}

@keyframes loading {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.noDisplay {
	display:none !important;
}

.selectTheCorrectNote {
  position: absolute;
  z-index: 1000;
}

.doublebus {
	display:inline-block;
	border-bottom: 1px dashed #dbdbdb;;
}

.doublebuschild {
	border-right: 1px solid lightgrey;
}


.styleTheBig {
	line-height:1;
}

#searchrythm {
  box-sizing: border-box;
  background-image: url('../images/searchicon.svg');
  background-position: 2px .5rem;
  background-repeat: no-repeat;
  padding: .75rem 1.5rem .75rem 40px;
  border: none;
  border-bottom: 1px solid #ddd;
  background-color: white;
  color: grey;
}

.list-group-item {
	  background-color: #f80;
	  color: white;
	  display:inline;
}

.navbarstyle {
	background-color: #ff5200;
	padding: 0.1% 0% 0.1% 2%;
	position: relative;
	z-index: 100;
}

.navbarelements {
	color: white;
	font-size: 120%;
}

.navbartitle {
	color: white;
	font-size: 150%;
	margin-right: 4%;
}

.nav-item {
	position:relative;
}

.list-group-item {
    padding: .3rem 0.8rem;
	width: 3.5rem;
    height: 2rem;
    border-radius: 0px !important;
    border: none;
    display: inline-block;
}

.dropdown-menu {
	background-color: #f80;
	color: white;
}

.dropdown-item {
	color: white;
}

.dropdown-menu {
	background-color: #f80;
}

.navbar-dark .navbar-toggler-icon  {
  border-color: rgb(255,102,203);
}

.volumespeedinput {
	max-width: 300px;
	min-width: 200px;
}

.swinginput {
	width: 68px;
}

.swingIcon {
	width: 243px;
}

.modal-body {
	background-color: #f80;
}

.bottomMargin {
	margin: 0 0 30px 0;
}

@media only screen and (min-width: 800px) {
	.modal-dialog {
		max-width:70%;
	}
}

.djembeloopsicon {
	max-width:60px; 
	margin-right:10px;
	vertical-align: top;
}
.djembeloopsmask {
	position: absolute;
	top:50px;
	color:white;
	font-size: 350% !important;
	background: #00000066;
	padding: 2%;
}
.djembeloopscenter {
	max-width:300px; 
	width: 50%;
	position: absolute;
}
@media only screen and (max-width: 991px) {
	.djembeloopsicon {
		max-width:50px; 
		margin-right:6px;
		padding: 5px 0px;
	}
}

@media only screen and (max-width: 320px) {
	.djembeloopsicon {
		max-width:40px; 
		margin-right:4px;
		padding: 3px 0px;
	}
}

.showonMobile {
	display: none;
}


@media only screen and (max-width: 992px) {
	.showonMobile {
		display: block;
	}
}


@media only screen and (max-width: 992px) {
	.showonDesktop {
		display: none;
	}
}

.rythmbutton {
	margin-right:1%;
	margin-bottom:1%;
}

.backgroundspan {
    opacity: 1 !important;
}

.spanstyle {
	 border-left: 1px solid lightgrey;
	 display:inline-block;
}

.controlsvolumemaster {
	margin-top:10px;
}

.colorediv {
	position:absolute;
	width: 100%;
	height: inherit;
	background-color: #ff69748a;
	opacity: 0;
	will-change: transform;
	transform: translateZ(0);
}
 
 .tabcontainer {
	 position:relative;
	 height: 100%;
	 display: inline-block;
 }
 
 .controlicon {
    margin: 0px 5px;
    font-size: 107%;
    vertical-align: super;
    padding: 2% 0%;
}
 
 .controlicon3 {
    margin: 0px 5px;
    font-size: 107%;
    vertical-align: super;
    padding: 0 0 2% 0%;
}
 
 .navbar-collapse  {
	will-change: transform;
	transform: translateZ(0); 
 }
 
 .highlight {
	 background-color: #ff5200;
 }
 
 .magnify {
    position: fixed;
    z-index: 10000000;
	font-size: 2rem;
	background: white;
	border-radius: 10px;
    border: solid 5px;
	border-color: #ff5200;
	padding: 2% 4%;
	top: 15%;
    left: 50%;
    transform: translate(-50%, -50%)
}

 .magnify2 {
    position: fixed;
    z-index: 10000000;
	font-size: 1.5rem;
	background: white;
	border-radius: 10px;
    border: solid 10px;
	border-color: #28a745;
	padding: 2% 3%;
	top: 18%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.bottomMessage {
	font-size: 0.9rem;
}
.bottomMessagemargin {
	margin:2rem 0.5rem 0 0.5rem;
}
.rhythmClass {
	margin: 0 0 0.4rem 0;
	text-align: left;
}

.datetimeClass {
	text-align: left;
	margin: 0 0 0.3rem 0;
	font-size: 80%;
}
.new-note {
	margin-bottom:3rem;
} 

.deleteBtnClass {
	margin: 0 1rem 0 0;
}

.loadBtnClass {
	margin: 0 1rem 0 0;
}

.sixteenth {
	height: 2.5rem;
	margin-bottom: 0.8rem;
}
@media only screen and (max-width: 992px) {
	.sixteenth {
	height: 1.5rem;
	margin-bottom: 0.3rem;
	}
}
.bottomIcon {
	margin: 0 0.3rem 0 1rem;
}

.onBottom {
	font-size: 90%;
	color: #28a745!important;
}

.selectTheCorrectNote .list-group {
	z-index: 100000;
    position: relative;
	display:inline-block;
	background-color: #f80;
	color:white;
	text-align: center;
}

.tripletGroup {
    width: 100% !important;
    display: block !important;
}

#flamMask.modal-backdrop.fade.show {
    opacity: 0;
}
.infoSpan {
	font-size:80%; 
	font-weight: 300;
}

.fileListItem {
	margin: 0 0 0.8rem 0;
}

.subtitulo {
	margin-bottom:0px; 
	margin-top:-3px; 
	font-size:65%
}

.drum-machine {
	padding:0.5rem 0.6rem;
}

@media only screen and (max-width: 992px) {
	.drum-machine {
		padding:0.5rem 0.6rem;
		margin-top: 0px;
	}
}

@media only screen and (max-width: 800px) {
	.drum-machine {
		padding:0.55rem 0.5rem;
		margin-top: -5px;

	}
}
	
@media only screen and (max-width: 568px) {
	.drum-machine {
		padding:0.4rem 0.25rem;
		margin-top: -10px;
		margin-left: -1px;
	}	
	.list-group-item {
		padding: 5px 3px;
		font-size: 0.8rem;
		width: 1.5rem;
		height: 1rem;
	}
}
	
@media only screen and (max-width: 390px) {
	.drum-machine {
		padding: 0.4rem 0.2rem;
		margin-top: -5px;
	}	
	.list-group-item {
		padding: 5px 2px;
		font-size: 0.6rem;
	}	
}
@media only screen and (max-width: 320px) {
	.drum-machine {
		padding:0.5rem 0.2rem;
		margin-top: -5px;
	}
	h3 {
    font-size: 1.5rem;
	}
	.subtitulo { 
		font-size:55%
	}
}

.doublebeat .drum-machine {
	padding:0.3rem 0.6rem;
	margin-top: -7px;
}

@media only screen and (max-width: 992px) {
	.doublebeat .drum-machine {
    padding: 0.2rem 0.7rem;
    margin-top: -7px;
	}
}

@media only screen and (max-width: 800px) {
	.doublebeat .drum-machine {
		padding: 0.3rem 0.5000rem;
		margin-top: -4px;
	}
}
	
@media only screen and (max-width: 568px) {
	.doublebeat .drum-machine {
		padding: 0.2rem 0.3rem;
		margin-top: 0px;
		margin-left: 1px;
	}	
}
	
@media only screen and (max-width: 390px) {
	.doublebeat .drum-machine {
		padding: 0.2rem 0.2rem;
	}	
}
@media only screen and (max-width: 320px) {
	.doublebeat .drum-machine {
		padding: 0.2rem 0.2rem 0.3rem 0.2rem;
	}
}
.noPointer {
	pointer-events: none;
}

.roll {
    font-size: 75%;
    margin-left: -5px;
}

.secondRoll {
	margin-left: 4px;
    margin-right: -7px;
}

.secondRoll2 {
    margin-left: 2px !important;
    margin-right: 0px !important;
}

.drum-machine2 {
	padding: 0.5rem 0rem;
    margin-top: 0px;
}

.doublebuschild .roll {
    font-size: 85%;
    margin-left: 0px;
}
.doublebuschild .secondRoll {
	 margin-left: -1px;
}

.doublebuschild .drum-machine2 {
	padding: 0.4rem 0.1rem;
    margin-top: -7px;
}

.nodisplay {
	display: none !important;
}

.shekere-icons {
    height: 2.5rem
}


@media only screen and (max-width: 992px) {
	.drum-machine2 {
		padding: 0rem 0rem;
		margin-top: 0px;
	}
	.doublebuschild .drum-machine2 {
		padding: 0.4rem 0.1rem;
		margin-top: -7px;
	}	
	.roll {
		font-size: 85%;
		margin-left: 0px;
	}
	.volumespeedinput {
		max-width: 300px;
		min-width: 200px;
	}	
}

@media only screen and (max-width: 800px) {
	.drum-machine2 {
		padding: 0rem 0rem;
		margin-top: 0px;
	}
	.doublebuschild .drum-machine2 {
		padding: 0.4rem 0.1rem;
		margin-top: -7px;
	}
	.roll {
		font-size: 85%;
		margin-left: 0px;
	}	
}
	
@media only screen and (max-width: 568px) {
	.drum-machine2 {
		padding: 0rem 0rem;
		margin-top: 0px;
	}	
	.doublebuschild .drum-machine2 {
		padding: 0.4rem 0.1rem;
		margin-top: -3px;
	}
	.roll {
		font-size: 63%;
		margin-left: 0px;
		margin-right: -1px;
	}
	.secondRoll {
		margin-left: 2px;
		margin-right: -4px;
	}
	.doublebuschild .roll {
		font-size: 68%;
		margin-left: 0px;
	}
	.volumespeedinput {
		max-width: 300px;
		min-width: 150px;
	}
}
	
@media only screen and (max-width: 390px) {
	.drum-machine2 {
		padding: 0.3rem 0rem;
		margin-top: 0px;
	}
	.doublebuschild .drum-machine2 {
		padding: 0.3rem 0rem;
		margin-top: 0px;
	}
	.roll {
		font-size: 65%;
		margin-left: 0px;
		margin-right: 0px;
	}	
	.secondRoll {
		margin-left: 0px;
		margin-right: -2px;
	}
	.volumespeedinput {
		max-width: 300px;
		min-width: 150px;
	}	

}
@media only screen and (max-width: 320px) {
	.drum-machine2 {
		padding: 0.4rem 0rem;
		margin-top: 0px;
	}
	.roll {
		font-size: 70%;
		margin-left: 0px;
	}
	.secondRoll {
		margin-left: 0px;
		margin-right: -3px;
	}
	.doublebuschild .drum-machine2 {
		padding: 0.4rem 0rem;
		margin-top: 0px;
	}	
	.doublebuschild .secondRoll {
		margin-left: 0px;
	}

	.doublebuschild .roll {
    font-size: 80%;
    margin-left: 0px;
	}
	.volumespeedinput {
		max-width: 300px;
		min-width: 130px;
	}

}

.metronome3 {
	padding: 12px 0px;
    margin: 15px 0px 8px 0px;
    width: 280px;
    height: 70px;
    font-size: 46px;
}

.metronome2 {
    padding: 15px 0px;
    margin: 5px 5px 5px 5px;
    width: 132px;
    height: 60px;
    font-size: 30px;
}

.controlicon2 {
	padding: 11px 0px;
    margin: 5px 5px 5px 3px;
    width: 62px;
    height: 46px;
    font-size: 24px;
}

.controliconFirst {
    margin: 5px 0px 5px 5px !important;
}

.iconsView {
vertical-align: middle;
    padding: 2px 0px;
    margin: 12px 5px;
    width: 45px;
    height: 45px;
    font-size: 26px;
    display: inline-block;
}

.bg-magenta {
	background-color: #d80073;
}

.bg-violet {
	background-color: #aa00ff;
}

.bg-mauve {
	background-color: #76608a;
}

.bg-olive {
	background-color: #6d8764;
}

.bg-lime {
	background-color: #a4c400;
}
.titleWidth2 {
	display: inline-block;
    margin: 10px 0px;
}

.bg-redOne {
	background-color: #CE352C;
}

.bg-redTwo {
	background-color: #8f251f;
}

.bg-green {
	background-color:#60a917;
}

.phrasesBtn {
    margin: 2px 3px 2px 3px;
    padding: 0.1rem 0.5rem;
}
.swingBtn {
    margin: 2px 3px 2px 3px;
    padding: 0.1rem 0.5rem;
}
.userPhrasesBtn {
    margin: 2px 3px 2px 3px;
    padding: 0.1rem 0.5rem;
}
.userPhrasesBtn2 {
    margin: 2px 3px 2px 3px;
    padding: 0.1rem 0.5rem;
}

.containTriplet {
	position: relative;
	display: inline-block;
    margin-right: 5px;
}

.tripletA {
	font-size: 80%;
	vertical-align: bottom;
}

.tripletB {
	font-size: 90%;
	vertical-align: middle;
} 

.flam3 {
    position: absolute;
    top: 1px;
    left: -5px;
    font-size: 60%;
}

.tripletsTogether {
	padding: 0px 0px;
}

.secondTriplet {
    margin-left: 24px;
}

.firstTriplet {
    margin-left: -2px;
}

.thirdTriplet {
    margin-left: 10px;
}
.containTripletB {
	position: relative;
	display: inline-block;
	width: 0px;
}
.soloTitle {
	margin:-0.6rem 0 0 0;
	font-size:0.7rem;
}

@media only screen and (max-width: 800px) {
	.flam3 {
		position: absolute;
		top: -2px;
		left: -4px;
		font-size: 60%;
	}

	.tripletsTogether {
		padding: 0px 0px;
	}

	.secondTriplet {
		margin-left: 15px;
	}

	.firstTriplet {
		margin-left: -6px;
	}

	.thirdTriplet {
		margin-left: 4px;
	}
	.containTripletB {
		position: relative;
		display: inline-block;
		width: 0px;	
	}
	.tripletB {
		font-size: 80%;
		vertical-align: middle;
	} 
}
	
@media only screen and (max-width: 568px) {
	.flam3 {
		position: absolute;
		top: -1px;
		left: -2px;
		font-size: 60%;
	}
	.containTriplet {
		margin-right: 2px;
	}
	.tripletsTogether {
		padding: 0px 0px;
		width: 2.4rem;
		height: 1.5rem;	}

	.secondTriplet {
		margin-left: 10px;
	}

	.firstTriplet {
		margin-left: -4px;
	}

	.thirdTriplet {
		margin-left: 2px;
	}
	.containTripletB {
		position: relative;
		display: inline-block;
		width: 0px;	
	}
	.tripletB {
		font-size: 75%;
		vertical-align: middle;
	} 
	.soloTitle {
		margin: -0.3rem 0 0 0;
		font-size: 0.5rem	}
}

@media only screen and (max-width: 390px) {
	.flam3 {
		position: absolute;
		top: -1px;
		left: -2px;
		font-size: 60%;
	}

	.tripletsTogether {
		padding: 0px 0px;
		width: 2.4rem;
	}

	.secondTriplet {
		margin-left: 7px;
	}

	.firstTriplet {
		margin-left: -4px;
	}

	.thirdTriplet {
		margin-left: 1px;
	}
	.containTripletB {
		position: relative;
		display: inline-block;
		width: 0px;	
	}
	.tripletB {
		font-size: 75%;
		vertical-align: middle;
	} 
}

@media only screen and (max-width: 320px) {
	.flam3 {
		position: absolute;
		top: -1px;
		left: -2px;
		font-size: 60%;
	}

	.tripletsTogether {
		padding: 0px 0px;
		width: 2.4rem;
	}

	.secondTriplet {
		margin-left: 7px;
	}

	.firstTriplet {
		margin-left: -3px;
	}

	.thirdTriplet {
		margin-left: 2px;
	}
	.containTripletB {
		position: relative;
		display: inline-block;
		width: 0px;	
	}
	.tripletB {
		font-size: 72%;
		vertical-align: middle;
	} 
}

#loadCanvas {
	position: relative;
} 
.bottomButtonsContainer {
	margin-top:0px;
	display: inline-block;
}
.bottomButtons {
	margin: 0px 6px;
}

.post-thumbnail {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 115px;
    flex: 0 0 115px;
	width:100%;
}

.single-blog-post {
	background-color:white;
	color:grey;
}

.post-content {
	padding:2%;
	margin-bottom:2rem;
}

.post-headline {
	color:#e6c484;
	word-break: break-word;
}

.post-headline:hover {
    color: #f80;
	text-decoration: none !important;
}