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

     .details {						/* LOWER CONTAINER THAT OPENS */
            display: flex;
			justify-content:flex-start;
			width: 100%;
            background-color: #000;
          	flex-direction: row;
			flex-flow: row wrap;
			padding: 10px 0px 10px 30px;
			flex-wrap: wrap;
			overflow: visible;
        }

     .details div {					/* DIVS THAT DISPLAY DAY, DATE, VENUE, TICKETS * BUTTONS */
            padding: 0px;
            color:#D7D7D7;	
			width: 20%;
			margin: 0px;
		 	text-align: left;
        }
	
	.details div .dateText{
		color:aliceblue;
		font-size: .8em;
		font-weight: bolder;
		padding: 0px;
		margin: 0;
		text-align: left;
	}
	.details div .timeText{
		color:aliceblue;
		font-size: 1.4em;
		padding: 0;
		margin: 0;
		font-weight: bolder;
		text-align: left;
	}
	.details div .ticketsText{
		color:lightblue;
		font-size: 1em;
		padding: 0;
		margin: 0;
		text-align: left;
	}
	.details div .venueText{
		color:#09a7f9;
		font-size: 1.2em;
		padding: 0;
		margin: 0;
		text-align: left;
		font-weight:400;
		font-style: oblique;
	}

  	.smallGigs {
            font-size: 0.6em;
            color:#D8D8D8;
			padding-top: 10px;
        }

	.details div a:link, .details div a:visited {
			color:lightblue;
			
		}


  	 .schedule-btn {
            background:black;
            color:limegreen;
            cursor: pointer;
            font-size: 0.7em;
			height:  20px;
			width:  60px;
			border: 1px solid limegreen;
}

    .schedule-btn.added {
           border: 1px solid red;
			padding: 3px 10px;color: #000;
		color:#E8E8E8;
        }

        #mySchedule .schedule-btn {
            display: none;
        }

        #mySchedule .details {
            margin-bottom: 10px;
            border-left: 5px solid limegreen;
        }

	.active{
            background-color:#474747;
        }

  	.active, .collapsible:hover {
            background-color:#0F13C9;
        }


	.btnTickets{
		background:#D99809;
		color:#000;
        font-size: .7em;
		padding: 3px 5px;
		border: 1px solid #785E02;
		}

	.btnTickets a:link, .details div a:visited {
			cursor: pointer;
			color:#000;
			text-decoration: none;

		}
	.btnTickets a:hover {
			color:#fff;
		
		}


/*============================================================================ */
/* ==============               MID MENU ITEMS            ==================== */
/*============================================================================ */
	
	.midMenu{
		background-color:#222;
		display:flex;
		padding-left: 10px;
		width: 100%;
		position: sticky;
  		top: 55px;
		border-top:  thin solid #666;
		border-bottom: 2px solid #000;
		overflow:auto;
		}
	
	.midMenu div{
		padding: 5px 8px;
		margin: 0 0px;
		font-weight:400;
		font-size: 1.em;
	}
	
	
	.midMenu div a:link, .midMenu div a:visited{
		color:#A9A9A9;
		text-decoration: none;
	}
	.midMenu div a:hover{
		color:white;
		text-decoration: none;
	}

	.midMenu div1 a:link, .midMenu div1 a:visited{
		color:limegreen;
		text-decoration: none;

	}

	hr{
		border: 1px solid #000; 
		padding: 0; margin: 0;
	}
	
/* SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS */
/* SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS */
/* SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS */
/* SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS SMALL SCREENS */
	
@media screen and (max-width: 600px) {
	
	    .collapsible {					/* MAIN CONTAINER FOR ACT NAME */
            background-color: #262626;
            color: white;
            cursor: pointer;
            padding: 18px;
            border: thin solid #000;
            text-align: left;
            font-weight: 700;
            font-size: 1.2em;
			margin: 0;
        }

}

	/* LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS */
	/* LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS */
	/* LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS */
	/* LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS LARGE SCREENS */

@media screen and (min-width: 600px) {
        body {
            font-family: "Montserrat", sans-serif;
        }

        .collapsible {
            background-color:#131313;
            color:#E0E0E0;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border-top:1px solid #474747;
			border-bottom: 3px solid #000;
            text-align: left;
            font-weight: 600;
            font-size: 1.4em;
        }

        .content {
            padding: 0 18px;
            display: none;
            background-color: #000;
        }


  		
	
}