:root {
  --primary: #F3570C;
  --secondary: #0B2141;
  --text-color: #0c2340
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--primary);
}

::selection {
  color: white;
  background: var(--primary);
}

.primary-background {background-color:var(--primary: #F3570C);}
.secondary-background {background-color:var(--secondary: #0B2141);}


*, *:before, *:after {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
  font-size:18px;
  box-sizing: border-box;
}

body {
  overflow-y: scroll;
  min-height: 1vh;
  color: var(--text-color);
}

a {
  color: var(--primary);
}

hr {
  margin: 3em 0;
  border: 0;
  border-bottom: 1px solid #acacac;
}

/* typography */
h1, h2, h3, h4, h5, h6 {
  font-family: ff-meta-correspondence-web-p,sans-serif;
  font-weight: bold;
  line-height: 1.1;
  margin-bottom: 0.27em;
  letter-spacing: -1px;
}
h1 {
  font-size: clamp(50px, 6.250vw, 65px);
}

h2 {
  font-size: clamp(42px, 6vw, 48px);
}

h3 {
  font-size: clamp(18px, 3.750vw, 22px);
  text-transform: uppercase;
}

.main-footer h3 {
  font-size: clamp(26px, 3.750vw, 30px);
  color: var(--primary);
  text-transform: none;
}

h4 {
  font-size: clamp(20px, 3vw, 24px);
}

p {
  margin-bottom: 12px;
  line-height: 1.5;
}

strong {
  font-weight: 700;
}

.intro {
  font-size: clamp(22px, 3.250vw, 26px);
  margin-bottom: 25px;
}

ol, ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

ol li, 
ul li {
  margin-bottom: 12px;
}

.list-unstyled {
  list-style: none outside;
  padding-left: 0;
}

.reminder-box {
  padding: 20px;
  border: 1px solid var(--secondary);
  background: #f2f2f2;
  margin: 2em 0;
}

/* images in general */
.guideline-icon-sample {
  display: block;
  margin: 2em 0 4em;
}

.guideline-icon-sample figcaption {
  border-top: 1px solid var(--text-color);
  font-size: 16px;
  margin: 20px auto;
  padding-top: 10px;
  text-align: center;
  opacity: .5;
  display: block;
}

img {
  display: block;
  margin-bottom: 0;
  max-width: 100%;
}

/* header styles */
.utsa-header {
  position: sticky;
  /* max-width: 1200px; */
  width: 100%;
  padding: 30px 5%;
  display: flex;
  flex-flow: row;
  align-items: flex-end;
  justify-content: space-between;
  top: 0;
  z-index: 10;
  background: white;
  margin: 30px 0;
  border-bottom: 1px solid #eeeeee;
  z-index: 100;
}

.utsa-header .main-btn {
  margin-top: 0;
}

.utsa-header:not(.library-page) .main-btn {
  display: none;
}

.utsa-logo img {
  width: 230px;
}

.utsa-header .nav-link {
  display: block;
  color: var(--text-color);
  font-weight: 700;
  text-decoration: none;
}

/* layout */
.guidelines-wrapper {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  padding: 0 10% 50px;
}

.glossary ul{
  position: sticky;
  top: 150px;
}


.glossary ul a:not(.main-btn) {
  text-decoration: none;
  color: var(--text-color);
  font-family: ff-meta-correspondence-web-p,sans-serif;
}

.glossary ul .glossary-header a {
  font-size: 22px;
  font-weight: bold;
}

.glossary ul li:not(.glossary-header) a:not(.main-btn) {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  color: rgb(159, 159, 159);
}

.glossary ul li a:not(.main-btn):hover,
.glossary ul li a.active:not(.main-btn)  {
  color: var(--primary);
}

.wrapper {
  position: relative;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 0 50px;
}

.content-section {
  margin-bottom: 3em;
}

.grid-col {
  display: flex;
  flex-flow: row nowrap;
  grid-gap: 40px;
}

.center-vertically {
  align-items: center;
}

img.center-image {
  margin: 0 auto;
}

.glossary,
.col-1-3 {
  flex: 1 0 10%;
}

.guidelines-container,
.col-2-3 {
  flex: 2 0 20%;
}

.col-3-3{
  flex: 3 0 33.33%;
}

.col-50 {
  flex: 1 0 50%;
}

.color-sample {
  display: inline-block;
  padding: 7px;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.spacing-top {
  padding-top: 2em;
}

.spacing-bottom {
  padding-bottom: 2em;
}

/* autocomplete container */
.auto-complete-container {
  position: relative;
  margin-bottom: 40px;
  z-index: 10;
}

#search-bar {
  display: block;
  background: rgb(235, 235, 235);
  border: 0;
  height: 60px;
  font-size: 26px;
  color: black;
  width: 100%;
  padding-left: 20px;
  font-family: ff-meta-correspondence-web-p,sans-serif;
  font-weight: 700;
}

#search-bar:focus{
  border:1px solid rgb(103, 103, 103);
  outline: none;
}

.search-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: normal;
  justify-content: space-between;  
}

.clear-search {
  color: black;
  font-size: 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 0;

}

.search-controls img {
  max-width: 18px;
  width: 100%;
}

.question-wrapper {
  border-left: 1px solid #000000;
  padding-left: 13px;
  height: 24px;
}

img.question-icon {
  max-width: 24px;
  opacity: .3;
}

.question-tooltip {
  position: absolute;
  bottom: -43px;
  right: -25%;
  width: 490px;
  background: white;
  padding: 10px;
  border: 1px solid #dadada;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out;
}

.question-wrapper:hover .question-tooltip {
  opacity: 1;
  visibility: visible;
}

.ui-autocomplete {
  list-style: none;
  position: absolute;
  padding: 0;
  background-color: white;
  font-size: 26px;
  text-transform: capitalize;
  border: 1px solid #acacac;
}

.ui-autocomplete li > div{
  padding: 10px 30px;
  cursor: pointer;
}

.ui-autocomplete li:not(:last-child){
  border-bottom: 1px solid #dadada
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background: rgb(243, 243, 243);
}

.ui-helper-hidden-accessible {
  display: none;
}


/* filter section */
.filter-category {
  margin: 0 auto 80px;
  padding: 0;
  display: flex;
  list-style: none;
  justify-content: center;
  flex-flow: row wrap;
}

.filter-category li {
  margin: 0;
}


/* buttons */
.filter-category button,
.main-btn {
  background-color: transparent;
  border: 0;
  color: var(--secondary);
  text-transform: capitalize;
  font-size: 18px;
  padding: 8px 20px; 
  font-weight: bold;
  cursor: pointer;
  font-family: ff-meta-correspondence-web-p,sans-serif;
  font-weight: 700;
  transition: all .3s ease-in-out;
}

.main-btn,
.filter-category button.active {
  background-color: var(--primary);
  color: white;
}


.main-btn {
  margin-top: 15px;
  display: inline-block;
  text-decoration: none;
}

.main-btn:hover {
  background-color: var(--secondary);
}

/* Grid layout */

.icon-grid {
  display: grid;
  list-style: none;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  grid-gap: 70px;
  padding: 0;
  margin: 0 auto 120px;
}

.icon-grid li {
  text-align: center;
  margin-bottom: 0;
  width: 103px;
}

.icon-grid .icon-link {
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--primary);
  text-transform: capitalize;
  font-weight: bold;
  line-height: 1.2;
  font-size: 16px;
}

.icon-link img {
  width: 100%;
  max-width: 90px;
  aspect-ratio: 1 / 1;
  transition: all .3s ease-in-out;
  display: block;
  margin: 0 auto 10px;
}

.icon-link:after {
  content: '';
  background: url(../assets/download-icon.svg) no-repeat scroll 0 0;
  background-size:cover;
  width: 26px;
  height: 29px;
  display: block;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all .3s ease-in-out;
}

.icon-link:hover img {
  opacity: .1;
}

.icon-link:hover:after {
  opacity: 1;
}

.hide-icon {
  display: none;
}

.mobile-msg img {
  width: 20px;
  vertical-align: middle;
  display: inline-block;
}

.mobile-msg {
  font-weight: normal;  
  line-height: 1;
  margin: 0 0 33px;
  font-size: 12px;
    text-align: center;
    color: gray;
  display: none;
  margin-bottom: 40px;
  text-align: center;
}


/* footer */
.main-footer {
  border-top: 1px solid #acacac;;
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding: 80px 25%;
}


/* Small Devices, tablets portrait */
@media only screen and (max-width : 768px) {
  .guidelines-wrapper {
    padding:0 4% 50px; 
  }

  .grid-col {
    flex-flow: column;

  }

  .grid-mobile-reverse {
    flex-flow: column-reverse;
  }

  .filter-category button {
    font-size: 14px;
  }
  
  .icon-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .icon-grid li{    
    width: 183px;
  }
  
    
}

/* Mobile portrait */
@media only screen and (max-width : 600px) {

  .utsa-header:not(.library-page) .main-btn {
    display: block;
    font-size: 13px;
    padding: 10px;
  }

  .utsa-header .main-btn {    
    font-size: 13px;
    padding: 10px;
  }

  .guidelines-wrapper {
    padding:0 8% 50px; 
  }

  .glossary {
    display: none;
  }

  .utsa-header {
    margin: 0 auto 0;
    padding: 10px 5% 15px;
  }  

  .utsa-logo img {
    width: 180px;
  }
  
  .filter-category {
    margin-bottom: 25px;
  }

  .wrapper {
    padding: 0 0 40px;
  }

  .icon-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
  }

  .icon-grid li {
    width: 155px;
  }

  .main-footer {
    padding: 80px 10%;
  }

  .mobile-msg {
    display: block;
  }
}