@import "common.css";

/* Responsive video 
   Override the padding-bottom to set the aspect ratio.
*/
.youtube-video-frame {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 1em
}

.youtube-video-frame iframe {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%
}

.footer {
    background-color: #21449d;
    color: #FFF;
    padding: 1em;
    text-align: center;
    /*font-size: 120%;*/
}

/* .expando .expander:hover {


    color: var(--usaRed);
}
 */

.monetary {
    color: var(--monetaryGreen);
}
/* 
.interviews {
    display: flex; 
    flex-direction: row;
}

.interviews .artist {
    flex: 
    margin: 1em 1em 0.5em 1em;
    font-size: 80%;
}  */


.artist img {
    width: 100%;
}

.audio-frame {
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.audio-frame img {
    margin: 0.25rem;
}

a.AudioLink {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem;
    padding-left: 1rem;
    background-color: #7d7d7d;
    color: white;
    border-radius: 1rem;
    font-size: 90%;
    text-decoration: none;
  }
  a.AudioLink:hover {
    background-color: #969696;
  }
  a.AudioLink span.fa {
    font-size: 150%;
    margin-right: 0.75rem;
  }

  /* GRID */

  @import "common.less";

.grid2 {
    display: block;
}

.grid2 .row2 {
    display: block;
}

.grid2 .row2 > .col2 {
    display: block;
}


@media only screen and (min-width: 375px) {
    .grid2 {
        display: flex;
        flex-direction: column;
    }
    
    .grid2 .row2 {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
    }
    
    .grid2 .row2 > .col2 {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
    }
    
    .grid2 .col2 {
        margin-right: 0.25rem;
        margin-left: 0.25rem;
    }
    .grid2 .col2:nth-child(1) {
        margin-left: 0;
    }
    .grid2 .col2:last-child {
        margin-right: 0;
    }
    .grid2 .col2.-flex-1 {
        flex: 1 1 0;
    }
    .grid2 .col2.-flex-2 {
        flex: 2 1 0;
    }
    .grid2 .col2.-flex-3 {
        flex: 3 1 0;
    }
    .grid2 .col2.-flex-4 {
        flex: 4 1 0;
    }
    .grid2 .col2.-flex-5 {
        flex: 5 1 0;
    }
    .grid2 .col2.-flex-6 {
        flex: 6 1 0;
    }
    .grid2 .col2.-flex-7 {
        flex: 7 1 0;
    }

}