/*
Theme Name:         Waite Arboretum
Theme URI:          
Description:        Waite Arboretum 
Version:            3.1
Author:             Shireen de Souza
Author URI:         http://friendsofwaitearboretum.org/

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/


/* Custom CSS Styles
---------------------------------------------------------------------------------------------------- */

/* Place your custom CSS Styles here */

/*------Text Styling------*/

h1 {
  font-size: 300%;
  font-family: 'Yeseva One', 'Arial', 'Helvetica', sans-serif;
  text-align: center;
  color: #4C9A2A;
  background-color: #f1d859;
}

h2 {
  font-size: 300%;
  font-family: 'Yeseva One', 'Arial', 'Helvetica', sans-serif;
  color: #4C9A2A;
  background-color: #000000;
}

h3 {
  font-size: 200%;
  font-family: 'Yeseva One', 'Arial', 'Helvetica', sans-serif;
  color: #4C9A2A;
  background-color: #ffffff;
  text-align: center;
  text-decoration: underline;
}

h4 {
  font-family: 'Yeseva One', 'Arial', 'Helvetica', sans-serif;
  padding-bottom: 0em;
  color: #30AD23;
}

p {
  font-size: 100%;
  font-family: 'Open Sans Light', 'Arial', 'Helvetica', sans-serif;
  padding-bottom: 2em;
  line-height: 1.5em;
}

/*------Image Styling------*/

.dragontreelayers {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

#dragontreelayers img {
  background-repeat: no-repeat;
  padding: 15px;
}

.labyrinth {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.labyrinthwithterry {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.labyrinthwithurrbreahouse{
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.btn1{
  background-color: #f1d859;
  border: #008CBA;
  margin: 20px;
  padding: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 1.0;
  filter: alpha(opacity=100);
  border-radius: 20px;
}

.btn1:hover{
  border-radius: 20px;
  border-color: black;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.btn2{
  background-color: #f1d859;
  border: #008CBA;
  margin: 20px;
  padding: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 1.0;
  filter: alpha(opacity=100);
  border-radius: 20px;
}

.btn2:hover{
  border-radius: 20px;
  border-color: black;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.btn3{
  background-color: #f1d859;
  border: #008CBA;
  margin: 20px;
  padding: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 1.0;
  filter: alpha(opacity=100);
  border-radius: 20px;
}

.btn3:hover{
  border-radius: 20px;
  border-color: black;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.btn4{
  background-color: #f1d859;
  border: #008CBA;
  margin: 20px;
  padding: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 1.0;
  filter: alpha(opacity=100);
  border-radius: 20px;
}

.btn4:hover{
  border-radius: 20px;
  border-color: black;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.btn5{
  background-color: #f1d859;
  border: #008CBA;
  margin: 20px;
  padding: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 1.0;
  filter: alpha(opacity=100);
  border-radius: 20px;
}

.btn5:hover{
  border-radius: 20px;
  border-color: black;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.btn6{
  margin: 20px;
  padding: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 1.0;
  filter: alpha(opacity=100);
  border-radius: 20px;
}

.btn6:hover{
  border-radius: 20px;
  border-color: black;
  opacity: 0.6;
  filter: alpha(opacity=60);
}

.btn7{
  margin: 20px;
  padding: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 1.0;
  filter: alpha(opacity=100);
  border-radius: 20px;
}

.btn7:hover{
  border-radius: 20px;
  border-color: black;
  opacity: 0.6;
  filter: alpha(opacity=60);
}


/*------Page Styling------*/

#column {
  padding: 15px;
  display: block;
  margin-left: auto;
}


/*------Nav Styling------*/

#nav {
  margin: 20px;
  font-family: 'Yeseva One', 'Arial', 'Helvetica', sans-serif;
  font-size: 100%;
  vertical-align: middle;
}

#nav ul {
  list-style: none;
  padding:0;
  margin: 0;
  text-align: center;
}

#nav li {
  display: inline-block;
  padding-left: 6px;
  padding-right: 6px;
}

#nav a {
  color: #3d63b8;
  background: #f1d859;
  padding: 6px;
}  

#nav a:link {
  color: #3d63b8;
}

#nav a:visited {
  color: #3d63b8;
}

#nav a:hover {
  color: green;
  background: #9ec59c; 
}

#nav a:active {
  color: grey;
}



@media (min-width: 20px) {
  .navbar {
  }
  #logo img{
    width: 70%;
    height: auto;
    display: block;
    margin: auto;
    vertical-align: center;
  }

  #navbar-nav ml-auto text-center {
    list-style: none;
    display: block;
  }

  #nav-item {
    list-style: none;
    display: block;
  }

  #nav-link {
    list-style: none;
    display: block;
  }
  /*------Home Page Styling------*/

  /*------On This Page Styling------*/

  #onthispage ul {
    font-family: 'Yeseva One', 'Arial', 'Helvetica', sans-serif;
    font-size: 150%;  
    list-style: none;
    text-align: left;
  }

  #onthispage li {
    display: inline-block;
  }

  #onthispage a {
    color: #3d63b8;
    font-family: 'Yeseva One', 'Arial', 'Helvetica', sans-serif;
    font-size: 100%;
    padding: 10px;
  }

  /*------Footer Styling------*/

  #footer ul {
    font-family: 'Yeseva One', 'Arial', 'Helvetica', sans-serif;
    font-size: 100%;
    color: #3d63b8;
    list-style: none;
  }

  #footer li {
    text-align: left;
    display: block;
  }

  #footer a {
    color: #3d63b8;
    Background: #ffffff;
    font-family: 'Yeseva One', 'Arial', 'Helvetica', sans-serif;
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  /* Responsive Styles
  ---------------------------------------------------------------------------------------------------- */

  /* Large Desktops - lg */
  @media (min-width: 1200px) { 

    /* Place any styles specific to large destop screens here */

  }

  /* Landscape Tablets / Small Desktops - md */
  @media (max-width: 1199px) { 

    /* Place any styles that are specific to tablets and small desktops here */


    /* Portrait Tablets - sm */
    @media (max-width: 991px) { 

      /* Place any styles that are specific to portrait tablets here */

      #onthispage ul {
        font-size: 80%;
      }

      /* Landscape Mobile Phones - xs */
      @media (max-width: 767px) {

        /* Place styles that are specific to landscape phones here */

        #nav {
          font-size: 80%;
        }

        #nav li{
          padding-left: 3px;
          padding-right: 3px;
        }

        #onthispage ul {
          font-size: 80%;
        }

        #footer {
          text-align: center;
        }

        /* Portrait Mobile Phones - xs */
        @media (max-width: 480px) { 

          /* Place any styles that are specific to mobile phones here */