@media screen{

.banner-back{
      background-image:url("../img/sweaver_image_135852.png");
      background-repeat: no-repeat;
      background-size: cover;
      max-width: 100%;
      background-color:  #002E52;
    }
        .b1{
        justify-self: left;
        align-self: center;
      }
      #title-site {
        font-family: "Roboto";
      }
      .b2{
        justify-self: left;
        align-self: center;
        margin-left: 30px;
      }
      .b3{
        justify-self: center;
        align-self: center;
      }
      #banner-image {
        max-width: 100%;
        max-height: 90px;
        display: block;
        object-fit: fill;
      }
      .site-footer-back {
        background-image:url("../img/sweaver_image_135852.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #00243A;
        max-width: 100%;
      }
      .footer-back {
        background-color:#fff;
        max-width: 100%
      }
      .footer-text {
        max-width: 1700px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 3.38983%;
        font-size: medium;
        line-height: 1.5em;
      }
    .featured-sites-container {
            grid-template-columns: 1fr;
        }
        .site-footer-back {
            background-image:url("../img/sweaver_image_135852.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #00243A;
            max-width: 100%;
          }
        .site-footer-links {
          grid-template-columns: 1fr;
          flex-wrap: wrap;
          display: grid;
          max-width: 1700px;
          margin-left: auto;
          margin-right: auto;
          min-height: 4vh;
          grid-column-gap: 30px;
        }
        .sfl-links{
            max-width: 1700px;
            align-self: center;
          }
        .site-footer-links ul {
          display:flex;
          flex-wrap: wrap;
          justify-content:space-evenly;
          list-style-type: none;
          padding: 10px 0; /* Remove padding */
          margin: 0; /* Remove margins */
        }
        .site-footer-links ul li:first-child {
            padding: 0 1% 0 0%;
          }

          .site-footer-links ul li {
            font-family: "Roboto", monospace;
            font-size: small;
            padding: 0 1% 0 1%;
            color: #FFF!important;
          }

          .site-footer-links ul li a:hover {
            text-decoration: underline;
          }

          .site-footer-links ul li a {
            color: #FFF!important;
          }
          .sfl-logos{
            display: grid;
            margin-left: auto;
            margin-right: auto;
            grid-template-columns: 1fr 1fr;
            min-height: 4vh;
            grid-column-gap: 30px;
          }

        .sfl-logo-ibali{
          justify-self: center;
          align-self: center;
          padding: 10px 0 10px 0;
        }

        .sfl-logo-uctlib{
          justify-self: center;
          align-self: center;
        }
        #footer-logo {
          max-width: 100%;
          max-height: 100%;
          display: block;
          align-self: center;
        }
        .banner-uct {
          display: grid;
          max-width: 100%;
          margin-left: auto;
          margin-right: auto;
          grid-template-columns: 2fr 1fr 2fr;
          height: 100px;
          padding: 10px 0 30px 0;
        }
        body {
          font-size: medium;
        }
        .site-banner-back{
          background-repeat: no-repeat;
          background-size: cover;
          max-width: 100%;
          background-color: #fff;
        }

        .site-banner {
          display: grid;
          background-color: #fff;
          background-repeat: no-repeat;
          max-width: 1700px;
          margin-left: auto;
          margin-right: auto;
          grid-template-columns: 5fr 2fr;
          height: 80px;
          padding: 5px 3% 5px 3%;
          z-index: 1;
          }
            .site-title {
              justify-self: left;
              align-self: center;
            }

            .site-logo {
              justify-self: right;
              align-self: center;
            }
        .site-title h1 {
      		font-size: large;
      		line-height: 30px;
      		padding-right: 30px
      	}

        .site-img-logo {
          display: block;
          width: auto; /*actual image width*/
          max-height: 75px; /* maintain aspect ratio*/
          object-fit: fill;
        }
}
@media screen and (min-width: 768px){
  /*UCT CODE */
  /*UCT Banner formatting */
    .banner-back{
      background-image:url("../img/sweaver_image_135852.png");
      background-repeat: no-repeat;
      background-size: cover;
      max-width: 100%;
      background-color: #002E52;
    }

    .banner-uct {
      display: grid;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      grid-template-columns: 1.5fr 5fr 2fr;
      height: 100px;
      padding: 10px 0 30px 0;
    }

    .b1{
      justify-self: left;
      align-self: center;
    }
    #title-site {
      font-family: "Roboto";
    }
    .b2{
      justify-self: left;
      align-self: center;
      margin-left: 30px;
    }
    .b3{
      justify-self: center;
      align-self: center;
    }
    #banner-image {
      max-width: 100%;
      max-height: 90px;
      display: block;
      object-fit: fill;
    }
    .footer-back {
      max-width: 100%
    }
    .footer-text {
      max-width: 1700px;
      padding: 0 3.38983%;
      margin-left: auto;
      margin-right: auto;
      font-size: medium;
    }
    /*UCT Footer formatting */
    .site-footer-back {
      background-image:url("../img/sweaver_image_135852.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #00243A;
      max-width: 100%;
    }
    .site-footer-links {
      display: grid;
      max-width: 1700px;
      margin-left: auto;
      margin-right: auto;
      grid-template-columns: 10fr 2fr;
      min-height: 4vh;
      grid-column-gap: 30px;
    }
    .sfl-links{
      max-width: 1700px;
      align-self: center;
    }

    .site-footer-links ul {
      display:flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      list-style-type: none;
      padding: 10px 0; /* Remove padding */
      margin: 0; /* Remove margins */
    }
    .site-footer-links ul li:first-child {
      padding: 0 1% 0 0%;
    }

    .site-footer-links ul li {
      font-family: "Roboto", monospace;
      font-size: small;
      padding: 0 1% 0 1%;
      color: #FFF!important;
    }

    .site-footer-links ul li a:hover {
      text-decoration: underline;
    }

    .site-footer-links ul li a {
      color: #FFF!important;
    }
    .sfl-logos{
      display: grid;
      margin-left: auto;
      margin-right: auto;
      grid-template-columns: 1fr 1fr;
      min-height: 4vh;
      grid-column-gap: 30px;
    }

    .sfl-logo-ibali{
      justify-self: center;
      align-self: center;
      padding: 10px 0 10px 0;
    }

    .sfl-logo-uctlib{
      justify-self: center;
      align-self: center;
    }

    #footer-logo {
      max-width: auto;
      max-height: 100%;
      display: block;
    }

    /*featured sites pages */
    .featured-sites-container {
      display: grid;
      background-color: #fff;
      max-width: 1700px;
      margin-left: auto;
      margin-right: auto;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 1fr);
      justify-items: center;
      align-items: center;
      grid-gap: .7rem;
      text-align: center;
    }

    .f-site{
      position: relative;
    }

    .fs-image {
      display: block;
      object-fit: fill;
      width: 100%;
      height: 100%;
    }

    .fs-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #0076D1;
    }

    .f-site:hover .fs-overlay {
      opacity: .9;
    }

    .fs-text-land {
      background-color: #003C69;
      background-blend-mode:luminosity;
      color: white;
      font-size: x-large;

      padding: 5px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
      width: 100%;
    }

    .fs-text {
      color: #E9E9E9;
      font-size: large;
      margin:0 -50px 0 0px;
      line-height: normal;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
      opacity: 1;
    }

    .fs-text a {
      color: #FFF!important;
      font-weight: bolder;
      font-size: x-large;
    }

    header h1 {
      margin: 0;
    }
    .site-banner {
      display: grid;
      background-color: #fff;
      background-repeat: no-repeat;
      max-width: 1700px;
      margin-left: auto;
      margin-right: auto;
      grid-template-columns: 5fr 2fr;
      height: 80px;
      padding: 5px 3% 5px 3%;
      z-index: 1;
      }
        .site-title {
          justify-self: left;
          align-self: center;
        }

        .site-logo {
          justify-self: right;
          align-self: center;
        }



        .site-img-logo {
          display: block;
          width: auto; /*actual image width*/
          max-height: 75px; /* maintain aspect ratio*/
          object-fit: fill;
      }
    }

    @media screen and (min-width: 1024px){
    	*{
    		box-sizing:border-box;
    		transition-duration:100ms
    }
    .banner-uct {
          margin: 0 auto !important;
      		position: static;
      		padding: 10px 3.38983%

        }

        .site-footer-links {
          padding: 0 3.38983%;
        }

        .sfl-links {

        }

        .site-banner {
      		margin: 0 auto !important;
      		position: static;
      		padding: 0 3.38983%
      	}
        .site-title h1 {
          font-size: x-large;
          line-height: 30px;
          padding-right: 30px
        }


      .b1{
        justify-self: left;
        align-self: center;
      }
      #title-site {
        font-family: "Roboto";
      }
      .b2{
        justify-self: left;
        align-self: center;
        margin-left: 30px;
      }
      .b3{
        justify-self: center;
        align-self: center;
      }
      #banner-image {
        max-width: 100%;
        max-height: 90px;
        display: block;
        object-fit: fill;
      }
      /* collection level banner */


          .site-title {
            justify-self: left;
            align-self: center;
          }

          .site-logo {
            justify-self: right;
            align-self: center;
          }



          .site-img-logo {
            display: block;
            width: auto; /*actual image width*/
            max-height: 50px; /* maintain aspect ratio*/
            object-fit: fill;
        }

        .site-footer-back {
          background-image:url("../img/sweaver_image_135852.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-color: #00243A;
          max-width: 100%;
        }


      /*UCT Footer formatting */
      .site-footer-links {
        display: grid;
        max-width: 1700px;
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 10fr 2fr;
        min-height: 4vh;
        grid-column-gap: 30px;
      }

      .sfl-links{
        max-width: 1700px;
        align-self: center;
      }

      .site-footer-links ul {
        display:flex;
        justify-content: flex-start;
        list-style-type: none;
        padding: 10px 0; /* Remove padding */
        margin: 0; /* Remove margins */
      }
      .site-footer-links ul li:first-child {
        padding: 0 1% 0 0%;
      }

      .site-footer-links ul li {
        font-family: "Roboto", monospace;
        font-size: .8em;
        padding: 0 1% 0 1%;
        color: #FFF!important;
      }

      .site-footer-links ul li a:hover {
        text-decoration: underline;
      }

      .site-footer-links ul li a {
        color: #FFF!important;
      }

      .sfl-logos{
        display: grid;
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 1fr 1fr;
        min-height: 4vh;
        grid-column-gap: 30px;
      }
      .sfl-logo-ibali{
        justify-self: center;
        align-self: center;
        padding: 10px 0 10px 0;
      }

      .sfl-logo-uctlib{
        justify-self: center;
        align-self: center;
      }

      #footer-logo {
        max-width: auto;
        max-height: 100%;
        display: block;
      }

      /*featured sites pages */
      .featured-sites-container {
        display: grid;
        background-color: #fff;
        max-width: 1700px;
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        justify-items: center;
        align-items: center;
        grid-gap: .7rem;
        text-align: center;
      }

      .f-site{
        position: relative;
      }

      .fs-image {
        display: block;
        object-fit: fill;
        width: 100%;
        height: 100%;
      }

      .fs-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: #72808A;
      }

      .f-site:hover .fs-overlay {
        opacity: .9;
      }

      .fs-text-land {
        background-color: #C7C7C7;
        background-blend-mode:luminosity;
        color: white;
        font-size: 1.2em;
        line-height: 1.2em;
        padding: 10px;
        position: absolute;
        top: 95%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        width: 100%;
      }

      .fs-text {
        color: white;
        font-size: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
      }

      .fs-text a {
        color: #00243A!important;
        font-weight: bolder;
      }
    }