@import "common.css";
@import "quoteshow.css";
@import "expando.css";

/**
 * TODO: responsive
 **/

/* 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%
}

.monetary {
    color: var(--monetaryGreen);
}

.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;
  }

/**
 * Container, responsive
 * Used for header and footer, which stretch across the page.
 */

.container-responsive {
    margin: 0;
/*     padding: 0 0.75rem; */
}

/*
 * Header styles.
 * You know, we don't need to over-generalize things here, as this is a
 * one page site!
 */
.header {
    max-width: var(--contentWidthDesktop);
    margin: 0 auto 0.5rem auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid silver;
    justify-content: stretch;
}

.header > .logo-col {
    flex: 0 0 auto;
    align-self: flex-start;
}

.header > .button-col {
    display: flex;
    flex-direction: column;
}

.header > .filler-col {
    flex: 1 1 0;
}

.header > .button-col > .button-row {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 0.5rem 0;
    align-items: center;
}

/*
 * Footer styles
 */

.footer {
    max-width: var(--contentWidthDesktop);
    background-color: #21449d;
    color: #FFF;
    padding: 1rem;
    text-align: center;
    margin: 0.5rem auto 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid silver;
    justify-content: stretch;
}

.footer > .country-row {
   margin: 0 0 1.5rem 0;
   text-align: center;
}

.footer > .copyright-row {
    margin: 0;
    text-align: center;
}

/**
 * Body style
 */

.body {
    max-width: var(--contentWidthDesktop);
    margin: 0 auto;
}

.body > .section {
    padding: 1rem;
/*     border-bottom: 1px solid silver; */
    margin: 0 0 0 0;
}

.body > .section + .section {
    border-top: 1px solid silver;
}

.body > .section:nth-last-child {
    border: none;
}

.body h2 {
    text-align: center;
}

  /* GRID */

.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;
    }

}