@media screen{

.banner-back-uct-lib{
      background-image:url("../img/sweaver_image_135852.png");
      background-repeat: no-repeat;
      background-size: cover;
      max-width: 100%;
      background-color:  #0098DB;
    }
	.banner-back-uct-main{
	      background-image:url("../img/sweaver_image_135852.png");
	      background-repeat: no-repeat;
	      background-size: cover;
	      max-width: 100%;
	      background-color:  #00243A;
	    }
		.banner-back-uct-cc{
		      background-image:url("../img/sweaver_image_135852.png");
		      background-repeat: no-repeat;
		      background-size: cover;
		      max-width: 100%;
		      background-color:  #72808A;
		    }
        .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: #1E1E1E;
        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-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-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;
          
          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;
        }
		ul.resource-list {
		    text-align: center!important;
		    display: flex!important;
		    flex-wrap: wrap;
		    align-items: flex-start;
		    margin: 1rem 0;
		    border-top: 1px solid #dfdfdf;
		    border-bottom: 1px solid #dfdfdf;
		    padding: calc(1rem - 1px) 0 0;
		    overflow: hidden;
		    text-align: center;
		    clear: both;
		    justify-content: flex-start;
		    align-items: baseline;
		}
		.faceted-browse-page. ul.resource-list {
		    text-align: center!important;
		    display: flex!important;
		    flex-wrap: wrap;
		    align-items: flex-start;
		    margin: 1rem 0;
		    border-top: 1px solid #dfdfdf;
		    border-bottom: 1px solid #dfdfdf;
		    padding: calc(1rem - 1px) 0 0;
		    overflow: hidden;
		    text-align: center;
		    clear: both;
		    justify-content: flex-start;
		    align-items: baseline;
		}
		.faceted-browse-page ul.resource-list .resource {
		    border-bottom: 0px;
		    padding-bottom: 30px;
		    width: 300px;
		    padding-right: 100px;
		    margin: 5px 0;
		    overflow: hidden;
		    position: relative;
		    display: inline-block;
		    text-align: center !important;
		    justify-content: flex-start;
		    vertical-align: baseline;
		    align-items: baseline;
		}
		.faceted-browse-page .resource-list .resource-link img {
		    height: 200px;
		    width: 200px;
		    object-fit: cover;
		    float: none;
		    margin-right: 0;
		    align-self: center;
		    vertical-align: baseline;
		}
		ul.resource-list .resource:first-child {
		    border-top: none!important;
		    padding-top: 0px!important;
		}
		
}
@media screen and (min-width: 768px){
  /*UCT CODE */
  /*UCT Banner formatting */
    .banner-uct {
      display: grid;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      grid-template-columns: 1.5fr 5fr 2fr;
      height: 110px;
      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-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-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;
      
      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;
      		
      	}
        .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;
        }


      /*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-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;
      }
        
        
         /*browse preview resource list code to spread across page */
    li.item resource{
      text-align: center!important;
      justify-content:center;
      vertical-align: baseline;
      align-items: baseline;
      height: 250px;
    }

    ul.resource-list .resource {
      border-bottom: 0px;
      padding-bottom: 30px;
      width: 300px;
      padding-right: 70px;
      margin: 5px 0;
      overflow: hidden;
      position: relative;
      display: inline-block;
      text-align: center!important;
      justify-content:flex-start;
      vertical-align: baseline;
      align-items: baseline;
    }
    ul.resource-list .resource .description {
        display:none!important;
        max-height: 0!important;
        height:0px!important;
    }
    ul.preview.resource-list li:first-of-type {
        border-top: none!important;
        padding-top: 0;
        text-align: center;
    }
    ul.preview.resource-list li {
      text-align: center;
border-bottom: none!important;
      justify-content: flex-end;
      align-self: baseline;
      align-items: baseline;
    }

    ul.preview.resource-list li h4{
      text-align: center!important;
      font-size:16px!important;
      display:block;
      vertical-align: bottom;
    }

    ul.preview.resource-list li h4 a{
      text-align: center!important;
      font-size:16px!important;
      display:block;
    }


    ul.resource-list li h4{
      text-align: center!important;
      font-size:large!important;
      display:block;
      vertical-align: baseline;
      line-height: 1.2em;
      justify-content: flex-end;
    }

    ul.resource-list li h4 a{
      text-align: center!important;
      font-size:large!important;
      display:block;
      vertical-align: baseline!important;
      line-height: 1.2em;
    }

    ul.resource-list .resource img {
      height:200px;
      width:200px;
      object-fit:cover;
      float:none;
      margin-right:0;
      align-self: center;
      vertical-align:baseline;
    }
	

        
        /*early code for buttons in flex to spread across page*/
        .fourth {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
}
        
        
        .row {
    flex-flow: row;
}
.row {
    max-width: 1700px;
    margin: 0 auto;
    display: flex;
}


    }