body {
    margin: 0px;
    padding: 0px;
    font-family: DIN-Reg, sans-serif;
    font: DIN-Reg;
}

@font-face { 
    font-family: "DIN-Reg"; 
    src: url("../fonts/DIN-Alternate.otf"); 
}

@font-face { 
    font-family: "DIN-Bold"; 
    src: url("../fonts/DIN-Alternate-Bold.otf"); 
}

a, button {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

h1 {
    font: normal 1.5em DIN-Reg;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 3%;
}

h2 {
    font: normal 1.3em DIN-Reg;
    letter-spacing: 2px;
}

h3 {
    font: normal 1em DIN-Reg;
    letter-spacing: 2px; 
}

h4 {
    font: normal 1em DIN-Reg;
    text-transform: uppercase;
    letter-spacing: 1px;
    filter: opacity(.7);
}

.red {
    color: #CE0F0F;
}

.hide {
    display: none;
}

.show {
    display: auto;
}

.grayBackground {
    background: #F4F4F4;
}

.regularLinks {
    color: #CE0F0F;
    cursor: pointer;
    border-bottom: solid 3px transparent;
}

.regularLinks:hover {
    border-bottom: solid 3px #CE0F0F;
}

.shortBody {
    height: 80vh;
}

.slideIn {
    -webkit-animation-name: slidein;
    -webkit-animation-duration: 0.6s;
    animation-name: slidein;
    animation-duration: 0.6s;
}

.slideOut {
    -webkit-animation-name: slideout;
    -webkit-animation-duration: 0.6s;
    animation-name: slideout;
    animation-duration: 0.6s;
}

.slideDown{
    -webkit-animation-name: slidedown;
    -webkit-animation-duration: 0.6s;
    animation-name: slidedown;
    animation-duration: 0.6s;
}

.slideUp{
    -webkit-animation-name: slideup;
    -webkit-animation-duration: 0.6s;
    animation-name: slideup;
    animation-duration: 0.6s;
}

/************ NAV **************/

nav {
    width: 100%;
    background: white;
    position: fixed;
    height: 80px;
    top: 0px;
    box-shadow: 0 2px 16px -3px rgba(0,0,0,0.5);
    z-index: 1;
}

#indexNav {
    background: none;
    box-shadow: none;
    color: white;
}

.logoDiv {
    position: relative;
    float: left;
    height: 100%;
    max-width: 25%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.a4nLogo{
    max-height: 70px;
    position: relative;
    float: left;
    display: block;
    max-width: 100%;
    margin-left: 5%;
}

.navList {
    float: right;
    position: relative;
    list-style: none;
    display: block;
    top: 10px;
    padding: 0px;
    right: 1%;
}

.navList li {
    float: left;
    text-transform: uppercase;
    font: bold 1em DIN-Reg;
    letter-spacing: 1px;
    padding: 5px 15px 5px 15px;
    margin: 0px;
}

.selectedNav {
    color: #CE0F0F;
}

.aboutNav:hover ~ .underbar{
    left: 15px;
    width: 145px;
}

.eventNav:hover ~ .underbar{
    left: 190px;
    width: 172px;
}

.scheduleNav:hover ~ .underbar{
    left: 390px;
    width: 93px;
}

.mediaNav:hover ~ .underbar{
    left: 510px;
    width: 54px;
}

.contactNav:hover ~ .underbar {
    left: 593px;
    width: 73px;
}

.underbar {
    width: 0;
    height: 4px;
    background: #CE0F0F;
    left: 10px;
    top: 25px;
    position: absolute;
    -webkit-transition: 0.3s ease;
}

.contactButton {
    height: 30px;	
    width: 80px;	
    border-radius: 40px;
    text-align: center;
    vertical-align: center;
    background: #CE0F0F;
    color: white;
    border: solid 3px transparent;
    float: right;
    display: inline-block;
    position: relative;
    right: 1%;
}

.contactButton:hover{
    border: solid 3px #CE0F0F;
    background: none;
    color: #CE0F0F;
    transition: background .15s;
}

.hamburger, .closeHamburger {
    display: none;
}

/************* FOOTER *************/
footer {
    position: relative;
    width: 100%;
    height: 400px;
    background: black;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

footer p {
    margin: 1% auto;
}

footer h4 {
    margin-bottom: 5%;
}

.socialMediaButtons {
    display: grid;
    grid-template-columns: 3vw 3vw 3vw 3vw;
    grid-auto-rows: 3vw;
    grid-column-gap: 3vw;
}

.socialMediaButtons img {
    max-height: 100%;
    max-width: 100%;
    
    filter: brightness(1);
    
    -webkit-transition: filter .1s ;
    -moz-transition: filter .1s ease-in;
    -ms-transition: filter .1s ease-in;
    -o-transition: filter .1s ease-in;
    transition: filter .1s ease-in;
}

.socialMediaButtons img:hover {
    filter: brightness(.8);
    
    -webkit-transition: filter .1s ;
    -moz-transition: filter .1s ease-in;
    -ms-transition: filter .1s ease-in;
    -o-transition: filter .1s ease-in;
    transition: filter .1s ease-in;
}

.footerContact {
    margin-top: 2%;
}

.footerCopyright {
    width: 80%;
    border-top: solid .5px white;
    margin-top: 5%;
    padding-top: 1%;
}

.footerCopyright p {
    text-transform: uppercase;
    font: normal .8em DIN-Reg;
}

/************** Side Box **************/
#nextShowBoxDiv{
    
}

#nextShowBox {   
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; 
    text-align: center;
    position: absolute;
    right: 2vw;
    
    width: 22.6vw;
    background: white;
    -webkit-box-shadow: 1px 1px 10px 0 #000000;
    box-shadow: 1px 1px 10px 0 #000000;
}

#nextShowTile {
    text-align: center;
    margin: 0px;
    width: 22.6vw;
}

#nextShowTile h2 {
    color: white;
    font: bold 1em DIN-Reg;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0px;
    padding-top: 3%;
    padding-bottom: 3%;
    width: 100%;
    height: 10%;
    text-align: center;
    vertical-align: middle;
    background: #CE0F0F;
}

#nextShowTile p{
    color: black;
}

#nextShowTile img {
    width: 8%;
    margin: auto;
    display: block;
}

#nextShowTitle {
    font-size: 1.4em !important;
}

#viewScheduleLink {
    display: inline-block;
    margin-top: 5%;
    color: #ECECEC;
}


/************ SECTIONS *************/

header {
    height: 100vh;
    width: 100vw;
    top: 0px;
    overflow: hidden;
}

header video {
    min-height: 100%;
    min-width: 100%;
    margin-top: -20vh;
}

header video source {
    width: 100%;
}

header img {
    height: 100vh;
    min-width: 100vw;
    object-fit: cover;
}

.bodySections {
    width: 100%;
}

.bodySection{
    display: inline-block;
    padding: 2.5% 20% 2.5% 20%;
}

.indexSection{
    padding: 2.5% 29.6% 2.5% 20%;
}

.bodySection p, .indexSection p {
    margin-left: 0px;
    margin-bottom: 2%;
    font-size: 1em;
    line-height: 150%;
}

audio {
    width: 100%;
}

.audioSection {
    background: black;
    margin: 0%;
    color: white;
    padding-bottom: 3vh;
}


/**** REVIEWS ***/
.reviews {
    display: grid;
    grid-template-columns: 44% 44%;
    grid-auto-rows: repeat;
    grid-row-gap: 2vw;
    grid-column-gap: 2vw;
}

.quoteDiv {
    width: 100%;
}

.quoteDiv .quote {
    font-style: italic;
    width: 100%;
}

.quoteDiv .quoteAttribute {
    font: bold 1em Calibri;
    width: 100%;
}

.socialMed {
    margin-top: 10%;

}

.socialMed img:first-child{
    margin-right: 2.5%;
}

.socialMed img {
    width: 15%;

    filter: brightness(1);

    -webkit-transition: filter .1s ;
    -moz-transition: filter .1s ease-in;
    -ms-transition: filter .1s ease-in;
    -o-transition: filter .1s ease-in;
    transition: filter .1s ease-in;
}

.socialMed img:hover {
    filter: brightness(.9);

    -webkit-transition: filter .1s ;
    -moz-transition: filter .1s ease-in;
    -ms-transition: filter .1s ease-in;
    -o-transition: filter .1s ease-in;
    transition: filter .1s ease-in;
}

/********** ABOUT *********/
#historySection {
    background: white;
    max-width: 50%;
    position: absolute;
    top: 20%;
    right: 0px;
    padding: 2.5%;
    text-align: center;
}

#membersSection h1 {
    margin-bottom: 5%;
}

.member {
    display: block;
    min-height: 35vh;
    margin: 0px 0px 5vh 0px;
}

.member img {
    width: 30%;
    position: relative;
    display: block;
    float: left;
}

.memberDescription {
    width: 68%;
    margin: 0px auto auto 32%;
}

.member h2 {
    margin: 25px 0px 0px 0px;
}

.member h3 {
    margin: 0px 0px 30px 0px;
    font: italic 1.3em Calibri;
}

/********** EVENT INFO *********/

.gigsContainer {
    text-align: center;
    display: grid;
    grid-template-columns: 18% 18% 18% 18% 18%;
    grid-column-gap: 2.5%;
}

.gigsContainer img {
    width: 80%;
}

#songData {
    height: 60vh;
    overflow-y: scroll;
    display: block;
    margin-bottom: 5%;
}

#songListTable {
    width: 60vw;
    border-collapse: collapse;
}

table tr:nth-child(even){background-color: #f2f2f2;}

#headersTable {
    width: 99%;
    border-bottom: solid 2px black;
}

#headersTable th{
    margin: 0px;
    width: 30%;
}

table tr {
    border: solid 1px black;
    width: 100%;
}

table td {
    border: solid .5px white;
    padding: 1%;
    margin: 0px;
    width: 33.333333%;
    font-size: .9em !important;
}

/************ SCHEDULE **************/

#schedulePage {
    margin-top: 80px;
    padding: 5% 10%;
    
    background-image: url(../img/gallery-photos/IMG_1231.jpg);
    background-position: center;
    background-size: cover;
}

#scheduleHeading {
    display: inline-block;
    margin-bottom: 2%;
    width: 80%;
}

#scheduleHeading h1 {
    color: white;
    float: left;
    display: inline-block;
    background: none;
    margin: 0px;
}

#scheduleHeading h1 div {
    height: 3%;
    width: 100%;
    margin-top: -20px;
    background: #CE0F0F;
}

#scheduleHeading a {
    display: inline-block;
    float: right;
    margin-top: 2%;
}

#scheduleHeading a div:first-child{
    width: 100%;
    background: white;
    height: 2vh;
    margin-top: -2vh;
}

#scheduleHeading a div:nth-child(2) {
    width: 0%;
    background: #CE0F0F;
    height: 2vh;
    margin-top: -2vh;
    
    -webkit-transition: width .25s ;
    -moz-transition: width .25s ease-in;
    -ms-transition: width .25s ease-in;
    -o-transition: width .25s ease-in;
    transition: width .25s ease-in;
}

#scheduleHeading a:hover div:nth-child(2) {
    width: 100%;
    
    -webkit-transition: width .25s ;
    -moz-transition: width .25s ease-in;
    -ms-transition: width .25s ease-in;
    -o-transition: width .25s ease-in;
    transition: width .25s ease-in;
}

#calendarTileContainer {
    display: grid;
    grid-template-columns: 25vw 25vw 25vw;
    grid-auto-rows: repeat;
    grid-row-gap: 2vw;
    grid-column-gap: 2vw;
}

.calendarTile {
    grid-column: auto;
    min-height: 25vw;
    background: white;
    text-align: center;
    border: solid 2px black;
    border-top: solid 40px black;
}

.showDate {
    font: normal 1em DIN-Reg;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 10px 10% 10% 10%;
}

.calendarTile img {
    width: 8%;
    margin: auto;
    display: block;
}

.showTitle {
    font-size: 1.4em;
    font-family: Arial;
    margin: 5px auto;
}

.showLocation {
    font: italic 1.1em Arial !important;
}

.showTime, .showLocation {
    margin: 5px 10% 0% 10%;
    font-size: 1.1em;
}

.showDetails {
    font-size: 1em;
    padding-top: 5%;
    width: 80%;
    border-top: solid 2px #F4F4F4;
    margin: 5% auto 0px auto;
}

/************ GALLERY ***************/

#mediaPage h1 {
    text-align: center;
}

#videoBlock {
    width: 60vw;
    margin: 10% 20% 2% 20%;
    height: 70vh;
}

.blockIcon {
    width: 40px;
    margin: auto 48%;
}

.one-time {
    height: 60vh;
}

.slider iframe {
    border: none;
    width: 60vw;
    height: 55vh;
    margin: 2% 0px;
}

#photoBlock {
    margin-top: 5%;
}

.photosContainer {
    display: grid;
    grid-template-columns: 18vw 18vw 18vw;
    grid-auto-rows: 18vw;
    grid-row-gap: 3vw;
    grid-column-gap: 3vw;
}

.photosContainer img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.photosContainer img:hover {
    filter: brightness(70%);
}

/********** MODAL ***************/
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100vw; 
    height: 100vh;
    padding: 0px;
    margin: 0px;
    
    background-color: rgba(0, 0, 0, .90);
    color: rgba(255, 255, 255, .95);
}

.modal-container {
    margin: 5% 20vw;
    position: absolute;
    height: 90%;
    width: 60vw;
}

.modal-content {
    margin: 5% 0%;
    position: relative;
    
    height: 80%;
    width: 100%;
    
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}

.modal-content img {
    max-height: 100%;
    max-width: 100%;
}

.modal-content {    
    -webkit-animation-name: fade;
    -webkit-animation-duration: 2s;
    animation-name: fade;
    animation-duration: 1s;
}

.caption {
    transform: rotate(-0deg);
    width: 100%;

    position: relative;
    z-index: 3;   
    text-align: right;
    color: white;
    font: normal 1em Arial; 
    
    transition: transform .2s;
}

button, select {
    text-transform: none;
}

button, input {
    overflow: visible;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

.next, .previous{
    position: absolute;
    color: white;
    font: normal 2em Courier;
    cursor: pointer;
}
.next{
    right: 6vw;
    top: 50%;
}
.previous{
    left: 6vw;
    top: 52%;
}

.next:hover, .previous:hover{
    color: lightgray;
    transition: color .1s;
}

.caret {
    width: 25px;
    height: 25px;
}

.caret div {
    width: 15px;
    height: 2px;
    background: white;
    position: absolute;
    
    -webkit-transition: background.15s;
    -moz-transition: background .15s;
    -ms-transition: background .15s;
    -o-transition: background .15s;
    transition: background .15s;
}

.caret:hover div{
    background: darkgrey;
    
    -webkit-transition: background.15s;
    -moz-transition: background .15s;
    -ms-transition: background .15s;
    -o-transition: background .15s;
    transition: background .15s;
}

.caret .lineAngled1 {
    -moz-transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
}

.previous .lineAngled1{
    margin-top: 9px;
}

.next .lineAngled2{
    margin-top: 9px;
}

.caret .lineAngled2 {
    -moz-transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
}

.close {
    position: fixed;
    top: 3vh;
    right: 3vw;
    width: 2.7vw;
    height: 2.7vw;
    z-index: 2;
    cursor: pointer;
}

.closeLines {
    position: absolute;
    width: 100%;
    height: 2px;
    
    margin-top: 11px;
}

.closeLines .line {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
}

.line1 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: transform .1s;
}

.line2 {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition: transform .1s;
}

.close:hover .line1, .close:hover .line2 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: transform .1s;
}

/******** CONTACT ***************/
#contactFormBody {
    display: inline-block;
    width: 60vw;
    padding: 0px;
    margin: 10vh 20vw;
}

form{
    width: 100%;
    float: left;
}

.formLabel {
    margin-bottom: .5%;
    text-transform: uppercase;
    letter-spacing: 2px;
}

form input[type=text]{
    height: 5%;
    border: none;
    border-bottom: solid 3px lightgray;
    padding: 1%;
    background: none;
    letter-spacing: 1px;

    -webkit-transition: background .1s ;
    -moz-transition: background .1s ease-in;
    -ms-transition: background .1s ease-in;
    -o-transition: background .1s ease-in;
    transition: background .1s ease-in;
}

form input[type=text]:focus, textarea:focus{
    background: white;
    border-bottom: solid 3px #CE0F0F;
    outline: none;

    -webkit-transition: background .1s ;
    -moz-transition: background .1s ease-in;
    -ms-transition: background .1s ease-in;
    -o-transition: background .1s ease-in;
    transition: background, border .1s ease-in;
}

::placeholder {
    color: darkgray;
}

form input[name=fname], input[name=lname] {
    float: left;
    width: 49%;
    margin-bottom: 2%;
}

form input[name=fname] {
    margin-right: 2%;
}

form textarea[name=message], form input[name=email] {
    float: left;
    width: 100%;
    margin: 0% auto 2% auto;
}

form textarea {
    resize: none;
    border: solid 1px lightgray;
    height: 30%;
    background: #ECECEC;
    padding: 1%;
    width: 98%;
    overflow-x: hidden;
}

#formname{
    width: 100%;
}

.g-recaptcha {
    display: inline-block;
}

form input[type=submit]{
    background: none;
    border: solid 2px #CE0F0F;
    color: #CE0F0F;
    display: block;
    height: 40px;
    width: 30%;
    border-radius: 25px;
    margin: 10px auto auto auto;
    letter-spacing: 3px;
    font: normal 1.2em Calibri;
    -webkit-transition: background .1s ;
    -moz-transition: background .1s ease-in;
    -ms-transition: background .1s ease-in;
    -o-transition: background .1s ease-in;
    transition: background .1s ease-in;
    cursor: pointer;
}

form input[type=submit]:hover{
    background: #CE0F0F;
    color: white;
    -webkit-transition: background, color .15s ;
    -moz-transition: background, color .15s ease-in;
    -ms-transition: background, color .15s ease-in;
    -o-transition: background, color .15s ease-in;
    transition: background, color .15s ease-in;
}

#error{
    color: red;
    font: italic .7em inherit;
    width: 95%;
    margin: 2% 2.5% auto 2.5%;
    text-align: right;
}

/******* SENT FORM *******/

#thanksEmailContainer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; 
    text-align: center;
}

#goback {
    font: bold 1em Calibri;
}

#goback:hover ~ .underbar{
    width: 200px;
}

.underbar2 {
    width: 0;
    height: 4px;
    background: #CE0F0F;
    -webkit-transition: 0.3s ease;
}

/**** KEYFRAMES ***/


@-webkit-keyframes fade {
    from {-webkit-filter:opacity(.1)} 
    to {-webkit-filter:opacity(1)}
}

@keyframes fade {
    0% { filter:opacity(.1);
        transform: translateX(-200px);}
    50% { transform: translateX(0px); }
    100% { filter:opacity(1) }
}

@keyframes slide {
    from {        transform:translateX(-100px)
    } 
    to {transform:translateX(0px)}
}

@-webkit-keyframes slidein {
    0% {
        -webkit-opacity:0;
        -webkit-transform:  translate(0px,400px)  ;
    }
    100% {
        -webkit-opacity:1;
        -webkit-transform:  translate(0px,0px)  ;
    }
}

@keyframes slidein {
    0% {
        opacity:0;
        transform:  translate(0px,400px)  ;
    }
    100% {
        opacity:1;
        transform:  translate(0px,0px)  ;
    }
} 

@-webkit-keyframes slideout {
    0% {
        opacity:1;
        transform:  translate(0px,0px)  ;
    }
    100% {
        opacity:0;
        transform:  translate(0px,400px)  ;
    }
}

@keyframes slideout {
    0% {
        opacity:1;
        transform:  translate(0px,0px)  ;
    }
    100% {
        opacity:0;
        transform:  translate(0px,400px)  ;
    }
}

@-webkit-keyframes slidedown {
    0% {
        opacity:0;
        transform:  translate(0px,-800px); }
    100% {
        opacity:1;
        transform:  translate(0px,0px); }
}

@keyframes slidedown {
    0% {
        opacity:0;
        transform:  translate(0px,-800px); }
    100% {
        opacity:1;
        transform:  translate(0px,0px);}
}

@-webkit-keyframes slideup {
    0% {
        opacity:1;
        transform:  translate(0px,0px); }
    100% {
        opacity:0;
        transform:  translate(0px,-800px); }
}

@keyframes slideup {
    0% {
        opacity:1;
        transform:  translate(0px, 0px); }
    100% {
        opacity:0;
        transform:  translate(0px,-800px);}
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}