body {
  font-family:Roboto, "Arial", sans-serif;
}

/*TYPOGRAPHY*/

h1 {
  color: #fffaef;
  font-weight: bold;
  font-size:4em;
  font-family:Roboto, "Arial", sans-serif;
  line-height: 100%;

}

p.content {
  color: #fffaef;
  font-family:Roboto, "Arial", sans-serif;
  font-size: 1.25em;
  font-weight:normal;
  line-height: 2;
  padding-left: 50px;
  margin-bottom: 65px;
}

p.content-title {
  color: #fffaef;
  font-family:Roboto, "Arial", sans-serif;
  font-size: 1.5em;
  font-weight:bold;
  line-height: 2;
  padding-left: 50px;

}

p.connection-title {
  color: #fffaef;
  font-family:Roboto, "Arial", sans-serif;
  font-size: 1.5em;
  font-weight:bold;
  margin-top: 5px;
  margin-bottom: 0;
}

p.connection-text {
  color: #fffaef;
  font-family:Roboto, "Arial", sans-serif;
  font-size: 1em;
  font-weight:normal;
}

p.tagline {
  color: #FFE49F;
  font-weight: bold;
  font-size: 1.5em;
  font-family: Roboto, sans-serif;
  margin-top: 20px;
}

.inductee-year {
  color: #FFE49F;
  font-weight: bold;
  font-size: 1.25em;
  font-family: Roboto, sans-serif;
  margin-top: 20px;
  padding: 20px;
}

p.intro {
  color: #fffaef;
  font-weight: bold;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  margin-top: 20px;
  line-height: 1.75em;
}

.quote {
  color: #fffaef;
  font-weight: bold;
  font-size:1.5em;
  font-family:Roboto, "Arial", sans-serif;
  line-height: 1.6;
 }

p.caption {
  color: #fffaef;
  font-weight: bold;
  font-family: Roboto, sans-serif;
margin-top: 20px;
max-width: 700px;
}

p.title-tag{
  color:#FFFFFF
  font-weight: normal;
  font-family: Roboto, "Arial", sans-serif;
  font-size: 1.15em;
  text-align: center;

}

p.title-tag a:hover{
  color: #FFE49F;
  font-weight: normal;
  font-family: Roboto, "Arial", sans-serif;
  text-decoration: underline;
  transition: 0.5s;
}

p.title-tag a{
  color: #FFFFFF;  
}

a{
color: #fff;
}

/* unvisited link */
a:link {
  color: #fffaef;
}


/* mouse over link */
a:hover {
  color: #ffd56c;
}

/* selected link */
a:active {
  color: #ffd56c;
}

.menu-nav{
font-weight: bold;
font-family: Roboto, sans-serif;
font-size: 1rem;
align-self: center;
margin-right: 25px;
}

 
/*END TYPOGRAPHY*/

hr {
  border-top: 2px solid #ffd56c;
  width: 15%;
  text-align: left;
  margin: 2rem 0 0 0;
}

hr.side {
  border-top: 0;
  border-left: 2px solid #ffd56c;
  width: 15%;
  text-align: left;
  height: 300px;
  margin: 0rem 0 0 2rem;
}


.inductee-tag {
  margin: 0 0 0 0;
  border: 0 solid 
  }

.quote-circle {
  width: 15%;
}

.HOF-img {
  margin-top: 50px;
  padding-left: 0;
}

.footer{
  font-family: Roboto, sans-serif;
  padding: 1rem;
  text-align: left;
}

.menu-nav-footer{
font-family: Roboto, sans-serif;
font-size: small;
align-self: center;
list-style: none;
display: inline;
padding: 1rem;
}

.dots-bar{
float: left;
opacity: 0.8;
border-right: 3px solid #ffd56c;
}


/* On mouse-over, add a deeper shadow */
.card:hover {
  transform: scale(1.05);
  transition: 1s ease-in;
  transition: ease-out 0.5s;
}

.card {
  /* Add shadows to create the "card" effect */
  background-color: transparent;
  border: none;
  padding: 2px;
  margin:0 0 4 5px;
  transition: 0.2s;
}

/*MENU BAR*/

.top-bar{
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom:2px;
  border-color: #ffd56c;
  border-style: solid;
}

.top-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .top-bar,
  .top-bar ul {
    background-color: #000; }
  .top-bar input {
    max-width: 200px;
    margin-right: 1rem; }
  .top-bar .input-group-field {
    width: 100%;
    margin-right: 0; }
  .top-bar input.button {
    width: auto; }
  .top-bar .top-bar-left,
  .top-bar .top-bar-right {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%; }
  @media print, screen and (min-width: 40em) {
    .top-bar {
      -webkit-flex-wrap: nowrap;
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap; }
      .top-bar .top-bar-left {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        margin-right: auto; }
      .top-bar .top-bar-right {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
                flex: 0 1 auto;
        margin-left: auto; } }
  @media print, screen and (max-width: 63.99875em) {
    .top-bar.stacked-for-medium {
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap; }
      .top-bar.stacked-for-medium .top-bar-left,
      .top-bar.stacked-for-medium .top-bar-right {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        max-width: 100%; } }
  @media print, screen and (max-width: 74.99875em) {
    .top-bar.stacked-for-large {
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap; }
      .top-bar.stacked-for-large .top-bar-left,
      .top-bar.stacked-for-large .top-bar-right {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        max-width: 100%; } }

.top-bar-title {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0.5rem 0.5rem 0.5rem 0; }

.top-bar-left,
.top-bar-right {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }

.top-bar-left{
  padding-left: 0;
}

.top-bar-right{
  margin-right: 8rem;

}

.dropdown-pane {
  position: absolute;
  z-index: 10;
  display: none;
  width: 300px;
  padding: 1rem;
  visibility: hidden;
  border: 1px solid #cacaca;
  border-radius: 0;
  background-color: #fefefe;
  font-size: 1rem; }

  .dropdown-pane.is-opening {
    display: block; }
  .dropdown-pane.is-open {
    display: block;
    visibility: visible; }

.dropdown-pane.tiny {
  width: 100px; }

.dropdown-pane.small {
  width: 200px; }

.dropdown-pane.large {
  width: 400px; }

.dropdown.menu > li.opens-left > .is-dropdown-submenu {
  top: 100%;
  right: 0;
  left: auto; }

.dropdown.menu > li.opens-right > .is-dropdown-submenu {
  top: 100%;
  right: auto;
  left: 0; }

.dropdown.menu > li.is-dropdown-submenu-parent > a {
  position: relative;
  padding-right: 1.5rem; }

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
  content: '';
  border-bottom-width: 0;
  border-color: #1779ba transparent transparent;
  right: 5px;
  left: auto;
  margin-top: -3px; }

[data-whatinput='mouse'] .dropdown.menu a {
  outline: 0; }

.dropdown.menu > li > a {
  padding: 0.7rem 1rem; }

.dropdown.menu > li.is-active > a {
  background: transparent;
  color: #fff; }

.no-js .dropdown.menu ul {
  display: none; }

.dropdown.menu .nested.is-dropdown-submenu {
  margin-right: 0;
  margin-left: 0; }

.dropdown.menu.vertical > li .is-dropdown-submenu {
  top: 0; }

.dropdown.menu.vertical > li.opens-left > .is-dropdown-submenu {
  top: 0;
  right: 100%;
  left: auto; }

.dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu {
  right: auto;
  left: 100%; }

.dropdown.menu.vertical > li > a::after {
  right: 14px; }

.dropdown.menu.vertical > li.opens-left > a::after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
  content: '';
  border-left-width: 0;
  border-color: transparent #1779ba transparent transparent;
  right: auto;
  left: 5px; }

.dropdown.menu.vertical > li.opens-right > a::after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
  content: '';
  border-right-width: 0;
  border-color: transparent transparent transparent #1779ba; }

@media print, screen and (min-width: 40em) {
  .dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu {
    top: 100%;
    right: 0;
    left: auto; }
  .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu {
    top: 100%;
    right: auto;
    left: 0; }
  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a {
    position: relative;
    padding-right: 1.5rem; }
  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: '';
    border-bottom-width: 0;
    border-color: #1779ba transparent transparent;
    right: 5px;
    left: auto;
    margin-top: -3px; }
  .dropdown.menu.medium-vertical > li .is-dropdown-submenu {
    top: 0; }
  .dropdown.menu.medium-vertical > li.opens-left > .is-dropdown-submenu {
    top: 0;
    right: 100%;
    left: auto; }
  .dropdown.menu.medium-vertical > li.opens-right > .is-dropdown-submenu {
    right: auto;
    left: 100%; }
  .dropdown.menu.medium-vertical > li > a::after {
    right: 14px; }
  .dropdown.menu.medium-vertical > li.opens-left > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: '';
    border-left-width: 0;
    border-color: transparent #1779ba transparent transparent;
    right: auto;
    left: 5px; }
  .dropdown.menu.medium-vertical > li.opens-right > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: '';
    border-right-width: 0;
    border-color: transparent transparent transparent #1779ba; } }

@media print, screen and (min-width: 64em) {
  .dropdown.menu.large-horizontal > li.opens-left > .is-dropdown-submenu {
    top: 100%;
    right: 0;
    left: auto; }
  .dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu {
    top: 100%;
    right: auto;
    left: 0; }
  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a {
    position: relative;
    padding-right: 1.5rem; }
  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: '';
    border-bottom-width: 0;
    border-color: #1779ba transparent transparent;
    right: 5px;
    left: auto;
    margin-top: -3px; }
  .dropdown.menu.large-vertical > li .is-dropdown-submenu {
    top: 0; }
  .dropdown.menu.large-vertical > li.opens-left > .is-dropdown-submenu {
    top: 0;
    right: 100%;
    left: auto; }
  .dropdown.menu.large-vertical > li.opens-right > .is-dropdown-submenu {
    right: auto;
    left: 100%; }
  .dropdown.menu.large-vertical > li > a::after {
    right: 14px; }
  .dropdown.menu.large-vertical > li.opens-left > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: '';
    border-left-width: 0;
    border-color: transparent #1779ba transparent transparent;
    right: auto;
    left: 5px; }
  .dropdown.menu.large-vertical > li.opens-right > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: '';
    border-right-width: 0;
    border-color: transparent transparent transparent #1779ba; } }

.dropdown.menu.align-right .is-dropdown-submenu.first-sub {
  top: 100%;
  right: 0;
  left: auto; }

.is-dropdown-menu.vertical {
  width: 100px; }
  .is-dropdown-menu.vertical.align-right {
    float: right; }

.is-dropdown-submenu-parent {
  position: relative; }
  .is-dropdown-submenu-parent a::after {
    position: absolute;
    top: 50%;
    right: 5px;
    left: auto;
    margin-top: -6px; }
  .is-dropdown-submenu-parent.opens-inner > .is-dropdown-submenu {
    top: 100%;
    left: auto; }
  .is-dropdown-submenu-parent.opens-left > .is-dropdown-submenu {
    right: 100%;
    left: auto; }
  .is-dropdown-submenu-parent.opens-right > .is-dropdown-submenu {
    right: auto;
    left: 100%; }

.is-dropdown-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  display: none;
  min-width: 200px;
  border: 1px solid #cacaca;
  background: #fefefe; }
  .dropdown .is-dropdown-submenu a {
    padding: 0.7rem 1rem; }
  .is-dropdown-submenu .is-dropdown-submenu-parent > a::after {
    right: 14px; }
  .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: '';
    border-left-width: 0;
    border-color: transparent #1779ba transparent transparent;
    right: auto;
    left: 5px; }
  .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: '';
    border-right-width: 0;
    border-color: transparent transparent transparent #1779ba; }
  .is-dropdown-submenu .is-dropdown-submenu {
    margin-top: -1px; }
  .is-dropdown-submenu > li {
    width: 100%; }
  .is-dropdown-submenu.js-dropdown-active {
    display: block; }

    .title-bar {
  padding: 0.5rem;
  background: #000;
  color: #fefefe;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }
  .title-bar .menu-icon {
    margin-left: 0.25rem;
    margin-right: 0.25rem; }

.title-bar-left,
.title-bar-right {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0px;
      -ms-flex: 1 1 0px;
          flex: 1 1 0px; }


.title-bar-right {
  text-align: right; }

.title-bar-title {
  display: inline-block;
  vertical-align: left;
  font-weight: bold;
  font-family:Roboto, sans-serif;
  font-size: 1.2rem;
  padding-left: 10px; }

  .menu-text {
    padding: 0;
    size: auto;
    color: inherit; }

.hero-hof{
  position: relative;
  text-align: center;
}

.hero-text {
  display: inline-block;
  color: #FFFF;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* RETURN TO TOP BUTTON */
#rttBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #ffd56c;
  
 /* opacity:0.5;*/
  color: black;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
transition-delay: 2s;
}

#rttBtn:hover {
  background-color: #555;
}