#hgbparty {width: 50vw;}
@media (max-width: 900px) {#hgbparty {width: 90vw;}}

#bandsintown {padding: 0 20vw 0 20vw;}
@media (max-width: 900px) {#bandsintown {padding: 0 5vw 0 5vw;}}


.pay-container { height: auto; display: grid; grid-template-columns: 20% 20% 20% 20%; justify-content: space-evenly; grid-gap: 2vw; text-align: center; }
.pay-container div {align-self: end;}
@media (max-width: 1200px) { .pay-container { grid-template-columns: auto auto auto; } }
@media (max-width: 900px) { .pay-container { grid-template-columns: auto auto; } }
@media (max-width: 600px) { .pay-container { grid-template-columns: auto; grid-gap: 55px; } } 


html, body {
height: 100%;
margin: 0px;
font-family: Open Sans;
font-weight: 900;
color: #fff;
}    
    
.header { 
grid-area: header;
background-color: #fff877;
height: 50vh;
width: 100vw;
    text-align: center;
}
    
.main { 
grid-area: main; 
background-color: #ff8fa4; 
text-align: center;
}

.desc {
grid-area: desc; 
    text-align: center;
}

.photos {
grid-area: photos;
}
    
.right { 
grid-area: right; 
background-color: #333; 
padding: 2vw;
min-height: 50vh;
}

.footer { 
grid-area: footer; 
background-color: #c66075;
min-height: 5vh;
padding: 5vh;
text-align: center;
}


a {	
font-family: Open Sans;
font-weight: 300;
color:#fff; 
text-decoration: none; 
display:inline; 
}
a:hover { opacity: 0.8; }
.dim:hover { opacity: 1; }
    
#video {
height: 50vh;
width: 100vw;
object-fit: cover;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
}
    
#gimme-some { margin-left: auto; margin-right: auto; left: 0; right: 0; position: absolute; top: 2.5vh; height: 45vh; z-index: 1;}

@media 
    (max-width: 900px)
 {   #gimme-some { display: none; }
    }

input[type=text], select, textarea {
width: 100%;
padding: 10px 15px;
margin: 5px 0;
background-color: #222;
display: inline-block;
border: 1px solid #111;
border-radius: 4px;
box-sizing: border-box;
font-family: roboto;
color: #fff;
font-weight: 300;
font-size:16pt;
}

input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: cooper;
font-weight: 300;
font-size:14pt;
}

input[type=submit]:hover {
background-color: #45a049;
}

input[type=submit]:disabled {
background-color: #ccc;  cursor: not-allowed;
}

small {
font-size: 8pt;
background-color: rgba(255,255,255, 0.2);
color: #fff;
display: block;
padding: 2px 7px 2px 7px;
}

h1 {	
font-family: cooper;
font-weight: 300;
font-size:30pt;
text-shadow: 0px 0px 8px rgba(0,0,0, 0.1); 
margin: 0px;
}

h2 {
text-shadow: 0px 0px 8px #000000;
font-weight: 400; 
}

yellow {color: #fff877;}
blue {color: #5ecffc;}
pink {color: #ff8fa4;}
green {color: #3fcb61;}
navy {color: #426da2;}
orange {color: #ff9a00;}
rasberry {color: #c66075;}
brown {color: #b57d50;}
lavender {color: #b38fd5;}

#submission { background-color: #333; width: 60vw; text-align: center; font-size: 16pt; padding: 40px; }