/******************TABLE OF CONTENTS*******************
  1. Used colors
  2. Base
  3. Layout
  4. Modules
    4.1 Header
    4.2 Main Nav
    4.3 Sidebar
    4.4 Footer
  5. States
  6. Theme
*******************************************************/

/*********************1. USED COLORS***************/

/*********************2. BASE**********************/
html{
  font-family: verdana, helvetica, sans-serif !important;
}

nav a{
  color: black;
  list-style: none;
  text-align: center;
  text-transform: uppercase;
}

.nav .nav-link, .nav .dropdown-item {
  color: black;
}

.dropdown-toggle{
  color: black;
}

.nav a:hover{
  border-bottom: 3px solid black;
  margin-bottom: -3px;
}

.nav a:active{
  background-color: grey;
  color: white;
}

.navbar{
  padding: .1rem;
}

.navbar-toggler{
  margin-left:auto;
  margin-right: auto;
}

.gp-link{
  color: black;
  list-style: none;
}

.gp-link:hover{
  color:black;
  border-bottom: 3px solid black;
  margin-bottom: -3px;
  text-decoration: none;
}

.container{
  background-color: white;
}

/* this fixes width issue with the row in main content */
.width-fix{
  margin: auto;
}

/* end fix */

.card-group{
  margin-bottom: 1.5em;
}

/*********************3. LAYOUT********************/

/*********************4. MODULES*******************/

/********4.1 HEADER *********/
.logo{
  height: auto;
  max-width: 100%;
}

.contact-info{
  list-style: none;
  text-align: right;
}

.fnt-sm{
  font-size: .75rem;
}

.ph-local{
  font-size: 1.75rem;
}

/********4.2 MAIN NAV********/

.btn-collapse{
  font-size: 2.2rem;
  font-weight: bold;
}

/********SIDEBAR*******/

.card a{
  color: black;
  list-style-type: none;
  text-decoration: none;
}

.card a:hover{
  text-decoration: underline;
}

/********FOOTER********/

.border-bottom{
  border-bottom: 1px solid black;
}

/*********************5. STATES********************/

/*********************6. THEME*********************/

body{
  background-image: url("../img/escheresque_ste.png");
  background-repeat: repeat;
}

h1, h2, h3, h4, h5, h6{
  font-variant: small-caps;
  /*text-transform: capitalize;*/

}

header, footer, .navbar, .main{
  background-color: white;
}

@media (max-width: 767px) {
  header *{
    text-align:center;
  }

  nav .nav-item{
    text-align: center;
  }


  aside{
    display: none;
  }
}

@media (max-width: 575px) {
  footer *{
    text-align: center;
  }

  footer nav .nav-item{
    text-align: center;
  }

}

@media (min-width: 576px) {
  footer.contact-info *{
    text-align: right;
  }
}