@charset "UTF-8";
/* CSS Document */

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
   padding: 0;
   margin: 0;
   font-size: 100%;
   font-weight: normal;
    list-style: none;
}

html { box-sizing: border-box;}
*, *:before, *:after { box-sizing: inherit; }


body {
    font-family: 'Barlow Semi Condensed', sans-serif;
    padding: 50px 0px 100px 0px;
	background: #ff33da;
background: linear-gradient(0deg, rgba(255, 51, 218, 1) 31%, rgba(255, 174, 0, 1) 75%);
	
}
header {
    width: 90%;
    margin: 50px auto 50px auto;
    display: flex;
    justify-content: space-between;
    padding: 50px;
	padding-bottom:30px;
	font-size: 25px;
	margin-bottom:1px;
	color:aqua;
	background: #FF33DA;
background: linear-gradient(0deg, hsla(310,100%,48%,1.00) 8%, rgba(255, 153, 51, 0.76) 100%);
  border-radius: 10px 20px 30px 40px;
  padding: 20px;
	position: relative;
}
.colorbox {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50px;
	left: 50px;
	border-radius: 30px;
  padding: 20px;
	background: #FF9933;
background: linear-gradient(0deg, rgba(255, 153, 51, 0.7) 8%, rgba(255, 51, 218, 0.76) 100%);
	z-index: -1;
	
}
.container {
    width: 70%;
    margin: 60px auto 0px auto;
    background: ;
}
.flexbox {
    display: flex;
    flex-wrap: wrap;
    background-color: hsla(0,0%,0%,.0);
    padding: 0px;
}
.stages {
    width: calc(25% - 0px);
    margin-top: 50px;
	background: #FF9933;
background: linear-gradient(0deg, rgba(255, 153, 51, 1) 48%, rgba(255, 0, 208, 1) 100%);
   border-radius: 30px;
  padding: 20px;

}

.item {
    background-color: hsla(0,0%,0%,.00);
    margin: 0px 10px 20px 10px;
    padding: 19px 20px 0px 10px;
    border-left: 0px solid black;
    border-top: 0px solid black;
    display: flex;
    justify-content: ;
    align-content: flex-start;
    align-items:;
    flex-wrap: wrap;
	border-left: dotted;
	border-left-width: thick;
		border-left-color: aqua;
	
}
.stage {
    height: 75px;
	border-top: 5px solid #000000;
	border-top-left-radius: 10px;
	border-left-radius: 10px;
	border-left:5px solid #000000;
	border-bottom-left-radius: 5px;
	border-left-color:aqua;
	border-top-color:aqua;
	
	
}
.minutes-60 {
    height: 100px;
	padding-left: 21.7px;
    margin-bottom: 40px;
	color:aqua;

}

.minutes-90 {
    height: 110px;
	margin-bottom: 50px;
	padding-left:21.7px;
	color:aqua;
	 
}
.minutes-120 {
    height: 150px;
	margin-bottom: 40px;
	padding-left:21.7px;
		color:aqua;
}
.minutes-150 {
    height: 150px;
	margin-bottom: 40px;
	padding-left:21.7px;
	color:aqua;
}
.container h1 {
    margin-bottom:1px;
    margin-left: 10px;
	font-size: 3.5em;
	padding-top:1px;
	border-top: 5px solid ;
	border-top-left-radius: 10px;
	border-left-radius: 10px;
	border-left:5px solid ;
	border-bottom-left-radius: 5px;
	width: 380px;
	color: #F500C8;
	font-weight:600;
	padding-left: 20px;
	
}
.colorchange {
	color: #FFAE00 !important;
}
.title {
	width: 50%;
}
.location-time {
	margin-top: 20px;
	width: 50%;
	padding-left: 30px;
}
.container h2 {
    margin-bottom: 1.0em;
    margin-left: 10px;
	font-size: 1.3em;
	
	background: #FF9933;
background: linear-gradient(0deg, rgba(255, 153, 51, 1) 37%, rgba(255, 51, 218, 1) 100%);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
	
	
}

.container h3 {
    margin-bottom: .2em;
	margin-top: -.9em;
    margin-left:0px;
	font-size: 1.3em;
	line-height: 1.1em;
	color:aqua;

}
	
	

.title h1 {
	font-weight: 700;
	font-size: 4em;
	margin-right: 100px;
	color:aqua;
	width: 100%;
 }

.item {
  transition: background-color 0.3s ease;
}

.item:hover {
  color: yellow; /* or any highlight color */
  cursor: pointer;
}
.content h3:hover,
.content .time:hover {
  color: yellow;
  transition: color 0.3s ease;
  cursor: pointer;
}





/*This is the CSS that controls how the popup window looks like:*/

/*.fancybox-is-open .fancybox-bg { opacity: 0.40; }
.pop {
    width:50%;
    max-width:660px;
    min-height:200px;
  background: hsla(310,100%,48%,1.00) !important;
} 
.tl-pop-info {
    color: black;
    width: 100%;
}
.tl-pop-info p {
    font-size: 14px;
    margin-top: 14px;
}
.tl-pop-image {
    width: 100%;
    margin: 10px 0px;
}
.tl-pop-image img {
    width: 100%;
    height: auto;
}
a {
	text-decoration: none;*
}
a .item:hover {
     background: hsla(310,100%,48%,1.00);
     /*color: white;*/
	/* text-decoration: none;*/
}
@media (max-width: 600px) { 
.pop {
    width:90%;
    max-width:660px;
    min-height:200px;
} 
}




		

@media (max-width: 1200px) 
	{header, .container {
    width: 80%;
}
}

@media (max-width: 900px) { 
header, .container {
    width: 90%;
}
.stages {
    width: calc(50% - 0px);
    margin: ;
}
} 

@media (max-width: 600px) { 
.stages {
    width: calc