@charset "UTF-8";
  /* Cascading Style Sheet for the dark grey visual art-centric pages of the site */

  /* -- LINK STATE COLOR PALETTE --*/
  a {
    text-decoration: none;
    color: #ffffff;
  }
  a:link {
    color: #ffffff;
    /* color: #FF9900; */
  }
  a:visited {
    color: #ffffff;
    /* color: #FF6633; */
  }
  a:hover {
    /* color: #f9d298; */
    background-color: #444444;
  }
  a:active {
    color: #ffffff;
  }
  /*-----------------------*/


  body {
    font-family: Arial, Helvetica, "sans-serif";
    color: #707070;
    background-color: #333333;
    font-weight: 200;

  }
  .page {
    width: 90%;
    margin-bottom: 0px;
    margin: auto;
    margin-top: 0px;
    height: 800px;
    background-color: #333333;
  }


  /* START GRID CONTAINER */
  .grid-container {
    border: none;
    display: grid;
    grid-template-columns: auto 90% auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 0px;
    padding: 0px;
    text-align: center;

  }
  .nav {
    font-size: 1.8em;
    grid-column: 1 / 3;
    grid-row: 1 / 8;
    text-align: left;
    background-color: #EEEEEEE;

  }

  /*-- MENU IN NAV --*/
  .dropdown {
    font-weight: normal;
    padding: 2px;
    position: relative;
    display: inline-block;


  }


  .dropbtn {
    font-weight: inherit;
    font-size: inherit;
    padding: 15px;


    text-align: left;
    width: 200px;
    border: none;
    background-color: #333;
    cursor: pointer;
  }


  .dropdown-content {
    display: none;
    position: relative;
    margin-top: -3px;
    background-color: #333;
    font-weight: normal;
    font-size: inherit;
    width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
    z-index: 1;
  }

  .dropdown-content a {
    /* margin-top: 16px; */
    padding-top: 12px;
    padding-right: 16px;
    padding-bottom: 12px;
    padding-left: 16px;
    display: block;
    color: #707070;
  }

  .dropdown-content a:hover {
    color: white;
  }


  .dropdown:hover .dropdown-content {
    display: block;
  }

  .dropdown:hover .dropbtn {
    background-color: #444;
  }


/* GRID FOR MAIN CONTENT */

  .main {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    padding-left: 0;
    padding-top: 80px;
    text-align: left;
  }


  .gifFrame {
    border: none;
    width: 100%;
    margin: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }

/* FAKE IMAGE MAP SETTINGS */

  .gifFrame a {
    color: #707070;
    text-decoration: none;
    border: none;
    background-color: #333333;
  }

  .gifFrame a:link {
      color: #707070;
      border: none;
      background-color: #333333;
  }

  .gifFrame a:visited {
      color: #707070;
      border: none;
      background-color: #333333;

  }
  .gifFrame a:hover {
      color: white;
      border: none;
      background-color: #333333;
  }
  .gifFrame a:active {
      color: #707070;
      border: none;
      background-color: #333333;
  }

  .gif  {
          display: block;
          margin-left: auto;
          margin-right: auto;
  }



/* COPYRIGHT LINK AND INFO */

  .figcaption  {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    padding-top: 20px;
    padding-left: 0;
    text-align: left;
    font-weight: normal;
    font-size: 65%;
    letter-spacing: 3px;
  }

  .figcaption a {
    color: #707070;
    text-decoration: none;
    border: none;
  }

  .figcaption a:link {
      color: #707070;
      border: none;
  }

  .figcaption a:visited {
      color: #707070;
      border: none;

  }
  .figcaption a:hover {
      color: white;
      border: none;
      background-color: #333333;
  }
  .figcaption a:active {
      color: #707070;
      border: none;
  }

  /* ------RESPONSIVE STUFF------ */

  /* ------iPhone 6/7 ------ */

  @media (max-width: 375px) {

          .page .nav {
            font-size: 1.3em;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
            width: 100%;
          }

          .dropdown {
            font-weight: normal;
            padding: 15px;
            position: relative;
            right: 20px;
            display: inline-block;
          }


          .dropbtn {
            width: 100%;
          }


          .dropdown-content {
            width: 100%;
          }

            .gif {
                width: 90%;
            }
        }

  /* ------iPhone 6/7/8 + ------ */

     @media (min-width:414px) and (max-width:768px) {

               .page .nav {
                 font-size: 1.3em;
                 margin-top: 0px;
                 margin-right: 0px;
                 margin-bottom: 0px;
                 margin-left: 0px;
                 width: 100%;
               }

               .dropdown {
                 font-weight: normal;
                 padding: 15px;
                 position: relative;
                 right: 20px;
                 display: inline-block;
               }


               .dropbtn {
                 width: 100%;
               }


               .dropdown-content {
                 width: 100%;
               }

                 .gif {
                     width: 100%;
                 }
             }

/* ------iPhone X/XS ------ */

 @media (min-width:375px) and (max-width:768px) {

        .page .nav {
          font-size: 1.2em;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
          width: 100%;
        }

        .dropdown {
          font-weight: normal;
          padding: 15px;
          position: relative;
          right: 20px;
          display: inline-block;
        }


        .dropbtn {
          width: 100%;
        }


        .dropdown-content {
          width: 100%;
        }

          .gif {
              width: 100%;
          }
      }

/* ------- iPad ----- */

  @media (min-width:768px) and (max-width:1024px) {

          .page .nav {
            font-size: 1.7em;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
            width: 100%;
          }

          .dropdown {
            font-weight: normal;
            padding: 15px;
            position: relative;
            right: 20px;
            display: inline-block;
          }


          .dropbtn {
            width: 100%;
          }


          .dropdown-content {
            width: 100%;
          }

            .gif {
                padding-top: 8%;
                width: 100%;
            }
        }