body {
	  margin: 0; 
	  background-color: #250F4A;
	  /*background: linear-gradient(45deg, #250F4A, #EA9BC3);  
	  background-size: cover;
	  height: 100%; */
	}
		



	
	/* Cursor  */
	
	*{cursor: none;}
			
	.cursor{
		position: fixed;
		top: 0;
		left: 0;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: #86569E;
		z-index: 999;
		user-select: none;
		pointer-events: none;
	}
	
	.follower{
		position: fixed;
		top: 0;
		left: 0;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		opacity: 0.7;
		user-select: none;
		pointer-events: none;
		border:6px solid #86569E;		
		z-index: 999; /* I added as follow below header image */
	}
	
	
	
	
	
	
/* container, centered places the title over header image */	
	.container {
		  position: relative;
		  text-align: center;
		  color: white;
		}
		
		.centered {
			  position: absolute;
			  top: 50%; /* 50% */
			  left: 50%;
			  transform: translate(-50%, -50%);
			}
	
	
	
	
			
			
		/* Fading Navigation Bar */
				
	.jwpnavbar {
	  height: 80px;
	  text-align: center;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #000;
	  position: fixed;
	  width: 100%;
	  left: 0;
	  top: 0;
	  transition: ease 1s;
	}
	
	.jwpnavbar--up {
		  top: -50px;
		  transition: ease 0.4s;
		}
		
	.jwpnavbar--scrolled {
		height: 40px;
		background: #471C92;
		color: #fff;		
	  }
	  
	.scrollable-area {
	  height: 200vh;
	  padding:100px;
	}
	.text {
	  font-size:2em;
	  /* margin-bottom:120px; */
	}
			
			
			
			
			
			
			
			
/* Sticky Navigation Bar */
	
	#navbar {
	  overflow: hidden;
	 /* background-color: #333; */
	 z-index: 9;
	}
	
	#navbar a {
	  float: left;
	  display: block;
	  color: #f2f2f2;
	  text-align: center;
	  padding: 16px 6px;
	  text-decoration: none;
	  font-size: 12px;
	  font-family: "monument_extendedregular";
	  text-shadow: 3px 3px 4px #000000;  
	  /*  margin-top:385px;  */
	  cursor: none;
	}
	

	
	@media print, screen and (min-width: 35em) { /* 42 */
		#navbar a {
			  font-size: 18px;
			  padding: 14px 8px;
			}
	}
	
	@media print, screen and (min-width: 50em) { /* 42 */
		#navbar a {
			  font-size: 26px;
			  padding: 14px 10px;
			  text-shadow: none;
			}
	}
	
	@media print, screen and (min-width: 62em) { /* 42 */
		#navbar a {
			  font-size: 32px;
			  padding: 14px 16px;
			  text-shadow: none;
			}
	}
	
	#navbar a:hover {
	  background-color: #86569E;
	  color: white;
	}
	
	#navbar a.active {
	  background-color: #4CAF50;
	  color: white;
	}
		
	.sticky {
	  position: fixed;
	  top: 0;
	  width: 100%;
	}
	
	.sticky + .content {
	  padding-top: 60px;
	}
	
			
	
	.maintitle {
		font-family: "monument_extendedregular";
		font-size: 2.6rem;
		  -webkit-text-fill-color: transparent;
		  -webkit-text-stroke: 2px #fff;
		  margin-top: 60px;
	}
	
	@media print, screen and (min-width: 45em) {
		  .maintitle { font-size: 5rem; margin-top: 0px; }
	  }
	  
	  @media print, screen and (min-width: 80em) {
			.maintitle { font-size: 8rem; margin-top: 0px; }
		}
	
	.titles {
		font-family: "monument_extendedregular";
		font-size: 2.6rem;
		padding-top:60px;
     /* color:  #6F318E; */
	 
		 /*
		background: -webkit-linear-gradient(#A05FC1, #39104E);
		  -webkit-background-clip: text;
		  -webkit-text-fill-color: transparent;		  
		 */
		 
		  -webkit-text-fill-color: transparent;
			-webkit-text-stroke: 2px #86569E;
	}
	
	@media print, screen and (min-width: 60em) {
		.titles { font-size: 5rem; }
	}
	
	
.topPara {
	margin-top:50px;
	font-size: 1em;
	line-height: 40px;
	margin-bottom:-40px;
}

@media print, screen and (min-width: 60em) {
	.topPara {
		font-size: 1.6em;
		line-height: 70px;		
	}
}
		
		.myFont {
			font-size: 1.5rem;
			color:#86569E;
			font-family: "Graphik-Regular";			
		}
		
		
		@media print, screen and (min-width: 60em) {
		.myFont { font-size: 1.8rem; }	
		}
		
		.large-9 {
			text-align: center;
			margin:0 auto;
		}

	p {
		margin:40px auto;
	}	
		
		

		
/*  Fix cursor over	.grid-container	margin problem */	

@media print, screen and (min-width: 10em) {
	 
	 .grid-x > .large-9 {
		   width: 85%; }
 }

@media print, screen and (min-width: 40em) {
	 
	 .grid-x > .large-9 {
		   width: 75%; }
 }
 
@media print, screen and (min-width: 64em) {
	  .grid-x > .large-9 {
		width: 60%; }
 }
 




#successMessage  {
	margin: 30px auto;
	width:80%
	background-color: #250F4A;
	text-align: center;
	font-size: 30px;
	color:#fff;
}





/* Audio Player */



#myProgress {
  width: 90%; /* 420px */
   background-color: #2e2e2e;
  cursor: pointer;
  border-radius: 10px;
  
  margin: 0 auto;
  height:6px;
}

#myBar {
  width: 0%;
  height: 6px;
  background-color: #b151e2;
  border-radius: 10px;
}

.logo {
  fill: red;
}

.btn-action{
  cursor: pointer;
  padding-top: 10px;
  width: 30px;
}

.btn-ctn, .infos-ctn{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.infos-ctn{
padding-top: 20px;
}

.btn-ctn > div {
 padding: 5px;
 margin-top: 18px;
 margin-bottom: 18px;
}

.infos-ctn > div {
 margin-bottom: 8px;
 color: #fff;
}

.first-btn{
  margin-left: 3px;
}

.duration{
  margin-left: 10px;
}

.title{
  margin-left: 10px;
  width: 210px;
  text-align: center;
}

.player-ctn{
  border-radius: 0px; /* 15px */
  width: 85%;
  padding: 10px;
  background-color: #6F318E;
  margin:auto;
  margin-top: 100px;
}

@media print, screen and (min-width: 38em) {
.player-ctn{
	  width: 420px;
	  margin-top: 100px;
	}
}

.playlist-track-ctn{
  display: flex;
  background-color: #8a3fb0;
  margin-top: 3px;
  border-radius: 5px;
  cursor: pointer;
}
.playlist-track-ctn:last-child{
  /*border: 1px solid #ffc266; */
}

.playlist-track-ctn > div{
  margin:10px;
}
.playlist-info-track{
  width: 80%;
}
.playlist-info-track,.playlist-duration{
  padding-top: 7px;
  padding-bottom: 7px;
  color: #fff;
  font-size: 14px;
  pointer-events: none;
}
.playlist-ctn{
   padding-bottom: 20px;
}
.active-track{
  background: #b151e2;
  color: #502366 !important;
  font-weight: bold;
  
}

.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{
  color: #502366 !important;
}


.playlist-btn-play{
  pointer-events: none;
  padding-top: 5px;
  padding-bottom: 5px;
}
.fas{
  color: #fff;
  font-size: 20px;
}





/* Make videos responsive */

.videoSize {
	width: 300px; 
	height: 222px;
}

@media print, screen and (min-width: 38em) {
.videoSize {
	width: 370px; 
	height: 274px;
}
}

 
 
 
 ul {
	   list-style-type: none;
	   margin: 60px 0 0 0;
	   padding: 0;
	   cursor: pointer !important;
 }
 
 li {
	 margin: 0;
	 padding: 0;	
	 display: inline;
	 }
	 
	 ul#footerUL  li {
		 display: block;
		 margin:5px auto;
	 }
	 
	 
	 /* Rollover website images */
	 
	 .rolloverUL {
		 margin: 50px auto 0 auto;
		 padding: 0;
		 list-style-type: none;
		 
	 }
	 
	 .rolloverImageLI {
		 display: inline;
		 
	 }
	 
	 .rollover, .rollover2, .rollover3, .rollover4, .rollover5, .rollover6, .rollover7, .rollover8 {
		 display:inline-block;
		 margin-top: 50px;
		 width: 300px;
		 height: 205px;
		 -webkit-transition: all .1s ease-in-out;
		 -moz-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
		 transition: all .1s ease-in-out;
	 }
	 
	 @media print, screen and (min-width: 38em) {
		 .rollover, .rollover2, .rollover3, .rollover4, .rollover5, .rollover6, .rollover7, .rollover8 {
			  width: 370px;
			  height: 254px;
		  }
	 }
	 
	 .rollover {
		 background: url(https://streamclip.com/assets/images/website-thumbs/PsychoYogi.jpg) 0 -254px no-repeat;
	 }
	 .rollover:hover {
		 background-position: 0 0;
	 }
	 .rollover2 {
		 background: url(https://streamclip.com/assets/images/website-thumbs/GainIT.jpg) 0 -254px no-repeat;
	 }
	 .rollover2:hover {
		 background-position: 0 0;
	 }
	 .rollover3 {
		 background: url(https://streamclip.com/assets/images/website-thumbs/HVV.jpg) 0 -254px no-repeat;
	 }
	 .rollover3:hover {
		 background-position: 0 0;
	 }
	 .rollover4 {
		 background: url(https://streamclip.com/assets/images/website-thumbs/EDCC.jpg) 0 -254px no-repeat;
	 }
	 .rollover4:hover {
		 background-position: 0 0;
	 }
	 .rollover5 {
		 background: url(https://streamclip.com/assets/images/website-thumbs/ChrisBaker.jpg) 0 -254px no-repeat;
	 }
	 .rollover5:hover {
		 background-position: 0 0;
	 }
	 .rollover6 {
		 background: url(https://streamclip.com/assets/images/website-thumbs/MissVelour.jpg) 0 -254px no-repeat;
	 }
	 .rollover6:hover {
		 background-position: 0 0;
	 }
	 .rollover7 {
		 background: url(https://streamclip.com/assets/images/website-thumbs/Rosie.jpg) 0 -254px no-repeat;
	 }
	 .rollover7:hover {		 
		 background-position: 0 0;
	 }
	 .rollover8 {
		 background: url(https://streamclip.com/assets/images/website-thumbs/MilkwoodGreen.jpg) 0 -254px no-repeat;
	 }
	 .rollover8:hover {
		 background-position: 0 0;
	 }	
	 
	 
	 /* Footer */
	  
	  .footerSpacer {
		   height: 100px;
	   }	 
	  
	  #footer {
		  width: 100%;
		  height: 300px;	 
		  background-color: #6F318E;
	  }
	  
	 .footerInfo {
		  width:80%;
		  margin: 0 auto;
		  padding-top:3px;
	  }
	  
	  .footerLinks:link {
		 font-family: "monument_extendedregular";	
		  font-size: 18px;
		  color: #A97FAA; 
	  }
	  
	  .footerLinks:hover {
		   color: #fff; 
	   }
	  
	  .footerEmail:link {
		  font-family: "monument_extendedregular";	
		  font-size: 16px;
		  color: #A97FAA;
	  }
	  
	  .footerEmail:hover {
		   color: #fff;
	   }