@media all {

    header   { color: white; width: 99%; background-color: #EFEFEF; padding: 10px; margin: 0 auto; margin-bottom: 25px; border-radius: 0px 0px 0px 0px; }
    header a { color: white; text-decoration: none; }
    footer   { color: white; font-size: 75%; padding: 10px; margin-top: 50px; }
    footer a { color: white; text-decoration: none; opacity: 1.0; }
    footer a:hover { color: white; text-decoration: underline; }
 
    .breadcrumb { margin: 1.5rem 0 1.5rem 0; font-size: 75%; color:gray; }
    .breadcrumb a { color: gray; text-decoration: none; }
    .breadcrumb-item a { color: gray; }

    .form-label { margin: 0.5rem 0 0.2rem 0; font-size: 95%; color:gray; }
    
    .table-header { background-color: white; border-bottom: 1px solid gray; color:gray; font-size:75%; }
  
    body, p { font-family: Roboto, "IBM Plex Sans", Arial, Verdana, Sans-Serif; }
    
    h1 { color: #CD3A43; margin: 60px 0 60px 0; font-weight: bold; }
    h2 { color: #363781; margin: 50px 0 40px 0; opacity: 0.9; font-weight: 700; } 
    h3 { color: gray;    margin: 40px 0 30px 0; opacity: 0.6; font-weight: 700; } 
    
    a         { color: #363781; }
    a:hover   { color: #CD3A43; }
    a:active  { opacity: 0.8; }
    a:visited { opacity: 0.8; }
    
    .dropdown-menu { max-height: calc(100vh - 250px); overflow-y: auto; overflow-x: hidden; }
    
    .tag           { display: inline; font-size: 80%; padding: 0 .3rem; text-decoration: none; border-radius: 5px; white-space: nowrap; }
    .tag a         { text-decoration: none; }
    .tag:hover     {  }
    .tag-b         { background-color: #363781;   border: 1px solid #363781;   color: white; }
    .tag-r         { background-color: #CD3A43;   border: 1px solid #CD3A43;   color: white; }
    .tag-g         { background-color: gray;      border: 1px solid gray;      color: white; }
    .tag-l         { background-color: lightgray; border: 1px solid lightgray; color: white; }
    .tag-outline   { background-color: transparent; color: black; }

    .frame           { display: inline; padding: .1rem .3rem .2rem .3rem; text-decoration: none; border-radius: 8px; white-space: nowrap; }
    .frame a         { text-decoration: none; }
    .frame:hover     {  }
    .frame-b         { background-color: #363781;     border: 1px solid #363781;   color: white; }
    .frame-b-outline { background-color: transparent; border: 1px solid #363781;   }
    .frame-r         { background-color: #CD3A43;     border: 1px solid #CD3A43;   color: white; }
    .frame-r-outline { background-color: transparent; border: 1px solid #CD3A43;   }
    .frame-g         { background-color: gray;        border: 1px solid gray;      color: white; }
    .frame-g-outline { background-color: transparent; border: 1px solid gray;      }
    .frame-l         { background-color: lightgray;   border: 1px solid lightgray; color: white; }
    .frame-l-outline { background-color: transparent; border: 1px solid lightgray; }

    .lang-code      { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: navy; padding: 2px 2px; color: white; border-radius: 2px; font-size: 90%; }
    .lang-code-gray { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: gray; padding: 2px 2px; color: white; border-radius: 2px; font-size: 90%; }

    .flag   { border: 1px solid lightgray; margin-right: 1px; }
    .flag-w { border: 1px solid lightgray; margin-right: 1px; width: 1rem; }
    .flag-h { border: 1px solid lightgray; margin-right: 1px; height: 1rem; }

    .lang      { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: #363781; padding: 2px 3px; color: white; border-radius: 1px; font-size: 90%; margin-right: 1px; }
    .lang-gray { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: gray;    padding: 2px 3px; color: white; border-radius: 1px; font-size: 90%; margin-right: 1px; }
    .lang-red  { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: #CD3A43; padding: 2px 3px; color: white; border-radius: 1px; font-size: 90%; margin-right: 1px; }

    .inline { width: auto; height: 1em; margin: 0 auto; }
    
    .form-label { opacity: .75; }
    
    @keyframes flash {
        0% { background-color: white; }
        50% { background-color: #CFE2FF; }
        100% { background-color: white; }
      }
    tr.flash td { animation: flash 1s 2; background-color: #CFE2FF; }

    th { opacity: .25; font-size: .75rem; }
    
}

@media (orientation: landscape)  {

    .carousel-item { padding-top: 500px; }
    .carousel-h { white-space: nowrap; position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 2.5vw; background-color: rgba(205,58,67,.8); border-radius: 5px; padding: 0 5px; }
    .carousel-p { white-space: nowrap; position: absolute; top: 85%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 1.0vw; background-color: rgba(55,55,130,.8); border-radius: 5px; padding: 0 5px; }

    .footer { font-size: 75%; background-color: #ddd; opacity: 1; margin: 0; padding: 5px 0; border-top: 2px solid #CD3A43; }

}    

@media (orientation: portrait) {

    .carousel-item { padding-top: 200px; }
    .carousel-h { white-space: nowrap; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 5.0vw; background-color: rgba(205,58,67,.8); border-radius: 5px; padding: 0 5px; }
    .carousel-p { white-space: nowrap; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 3.0vw; background-color: rgba(55,55,130,.8); border-radius: 5px; padding: 0 5px; }

    .footer { font-size: 40%; background-color: #ddd; opacity: 1; margin: 0; padding: 5px 0; border-top: 2px solid #CD3A43; }

}