h1 {
	font-size:4em;
	margin-bottom:0.5em;
	font-weight:300;
	color:#ffe6c1; /* cream */
}

.gallery{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	grid-gap:2em;
}

	.gallery a {
		position:relative;
		background-color:#2b1e10; /* brown */
		padding:1.5em;
		border-radius:0.75em;
		box-shadow: inset 0px 0px 10px 5px #744610;
	}

	.gallery a img {
		border-radius:0.5em;
	}
	
	.gallery a:hover {
		box-shadow: inset 0px 0px 15px 10px #744610;
	}
	
	.gallery a:hover .dots {
		border:6px dotted #fff;
	}


/* tour dates */

.venue {
    float:left;
    clear:left;
    width:100%;
    margin-bottom:0.5em;
    background-color:#045f77; /* blue */
    border-radius: 0.25em;
}

    .venue-date {
        float:left;
        width:10%;
        background-color:#1286a5; /* light blue */
        padding:1em;
        margin-right:2%;
        border-radius: 0.25em;
    }
    
        .main .day,
        .main .month,
        .main .year {
            text-align: center;
            width:100%;
            margin-bottom:0;
        }
        
        .venue-date div {
            float:left;
            width:50%;
        }
    
        .main .day {
            color:#fff;
            font-size:3em;
            line-height: 1;
        }
        
        .main .month {
            font-size:1em;
            color:#fffaa8; /* yellow */
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.2em;
        }
        
        .main .year {
            font-size:1em;
            color:#fff;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.15em;
        }
    
    .venue-main {
        float:left;
        width:100%;
        padding:1em;
        text-align: left;
    }
    
        .venue-main .text {
            float:left;
            width:66%;
        }
    
        .venue-main h2 {
            float:left;
            font-size:2em;
            font-weight:300;
            margin-bottom: 0;
            color:#fffaa8; /* yellow */
        }
        
        .main p.time {
            float:left;
            clear:left;
            font-size:1.4em;
            margin-bottom:0;
            color:#fff;
        }
    
    .venue-buy {
        float:right;
        width:20%;
    }
    
        .venue-buy a {
            float:left;
            background-color:#1286a5; /* light blue */
            width:100%;
            padding:1em;
            color:#fff;
            font-size:1.6em;
            text-align: center;
            text-decoration: none;
            border-radius: 0.25em;
        }
        
            .venue-buy .soon,
            .venue-buy .sold-out,
            .venue-buy .soon:hover,
            .venue-buy .sold-out:hover{
                background-color:#999;
				color:#fff;
            }
            
            .venue-buy a p.lastfew {
                font-size:0.5em;
                color:red;
                margin-bottom:0;
            }
            
            .venue-buy a:hover {
                background-color:#fff;
				color:#1286a5; /* light blue */
            }

/* media */

.music {
    float:left;
    clear:left;
    width:100%;
    margin-top:2em;
}

.song {
    float:left;
    clear:left;
    width:100%;
    padding:2em;
    margin-bottom:2em;
    background-color:#779f05; /* green */
    border-radius: 0.25em;
}

    .song h3 {
        color:#0d4232; /* dark green */
    }

audio {
    width:100%;
    background-color:#0d4232; /* dark green */
    padding:1em;
    float:left;
    clear:left;
    position:relative;
    z-index:0;
    border-radius: 0.25em;
}

/* cast crew */

.cast {
    display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-gap:2em;
	margin-bottom:5%;
}

.person {
    position:relative;
	background-color:#2b1e10; /* brown */
	padding:1.5em;
	border-radius:0.75em;
	box-shadow: inset 0px 0px 10px 5px #744610;
	text-decoration: none;
}
	
	.person:hover {
		box-shadow: inset 0px 0px 15px 10px #744610;
	}
	
	.cast-photo {
		float:left;
		width:45%;
		padding:0;
	}
	
	.cast-text {
		float:right;
		width:50%;
		text-align:left;
	}
	
		.cast-text p {
			text-align: left;
		}
    
    .person h2,
    .person p{
        margin-bottom:0;
    }

@media screen and (max-width:1250px){
    .venue-date div {
        width:100%;
    }
}

@media screen and (max-width:949px) {
    
    .main .venue-buy a {
        font-size:1.4em;
    }
    
    .main .day {
        font-size:3em;
    }
    
    .person {
        padding:2%;
    }
    
        .person h2 {
            font-size:1.6em;
        }
        
        .person p {
            font-size:1.2em;
        }
	
	.gallery,
	.cast{
		grid-template-columns:repeat(3,1fr);
		grid-gap:1em;
	}
}

@media screen and (max-width:649px) {
    
    .venue-date {
        width:25%;
    }
    
    .venue-main .text {
        width:73%;
    }
    
    .venue-main h2 {
        font-size:2em;
    }
    
    .venue-buy {
        float:left;
        clear:left;
        width:25%;
        padding:0;
        margin-top:2%;
    }
	
	.gallery,
	.cast{
		grid-template-columns:repeat(2,1fr);
	}
    
}

@media screen and (max-width:419px) {
    .venue-buy {
        width:100%;
    }
}

@media screen and (max-width:299px) {
    .main .day {
        font-size:3em;
    }
    
    .person {
        width:100%;
        margin-right:0;
        padding:5%;
    }
	
	.gallery,
	.cast{
		grid-template-columns:repeat(1,1fr);
	}
}