/*
Theme Name: African Havens
Author: Samantha Webb
Author URI: http://underscores.me/
Description: Custom theme for African Havens
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ah
Tags:

This theme, like WordPress, is licensed under the GPL.

African Havens is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

html {
    box-sizing: border-box;
    font-family: sans-serif;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.container {
    max-width: 1100px;
    margin: auto;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.note {
  font-size: 90%;
  font-style: italic;
}

.indent {
  padding-left: 2em;
}

.link {
  color: green;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  background: url(../img/background.png);
  font-size: 100%;
}

body p, main ul {
  line-height: 155%;
  padding-bottom: 1em;
}

ul, p {
  padding: 0;
  margin: 0;
}

ul li {
  list-style-position: inside;
}

h1, h2, h3, h4, h5, h6 {
  color: green;
  margin-bottom: 0;
  margin-top: .75em;
}

h1 {
  font-size: 26px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 22px;
}

h4 {
  font-size: 19px;
}

h5 {
  font-size: 17px;
}

h6 {
  font-size: 16px;
}

img {
  width: 100%;
}

section {
  width: 100%;
  margin: 1em 0;
}

nav {
  color: white;
}

nav li {
  list-style-type: none;
  padding: 1em;
}

nav li a {
  padding: 1em 0;
}

/*****************Top Navigation Begins****************/

#top_nav {
  margin: 0;
  background: green;
}

#top_nav nav {
  position: relative;
}

#top_nav nav ul li {
  position: relative;
}

#top_nav ul li:hover {
  background: #006400;
}

#top_nav ul ul {
  background: #006400;
  display: none;
  position: relative;
  width: 180%;
  top: 100%;
  left: 0;
}

#top_nav ul li:hover > ul {
  display: block;
}

#top_nav ul ul li:hover {
  background: green;
}

/*****************Top Navigation Ends****************/

#logo img {
  display: block;
  max-width: 300px;
  margin: auto;
  padding: 2em;
}

main {
  padding: 1em;
}

.blocks article {
  width: 100%;
}

.blocks article + article {
  margin-top: 1.5em;
}

.blocks figure {
  border: 3px solid green;
  position: relative;
}

.blocks img {
  display: block;
}

.blocks figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  background: green;
  color: white;
}

.trustees {
  max-width: 238px;
}

#facebook_feed iframe {
  width: 100%;
  max-width: 300px;
}

#testimonials img {
  max-width: 250px;
  margin: .5em 1em .5em 0;
}
/*****************Forms Begins*********************/

#contact-form, #volunteer-form {
  background: white;
  border: solid 2px green;
  padding: 1em;
}

label, select, textarea {
  display: block;
  margin-bottom: .7em;
}

input[type=text], input[type=email], input[type=tel], input[type=country], select, textarea {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid gray;
}

input[type=submit] {
  padding: 5px;
  text-align: center;
  background: green;
  color: white;
  border: green solid 1px;
  font-weight: bold;
  border-radius: 5px;
}

select {
  max-width: 300px;
}

#contact-form form p, #volunteer-form form p {
  padding-bottom: 5px;
  font-size: 100%;
}

fieldset {
  border: 0;
  padding: 0;
}

legend {
  font-weight: bold;
  color: green;
  font-size: 20px;
  padding-bottom: 1em;

}

#contact-info p {
  font-size: 95%;
  line-height: 130%;
}

#contact-info h3 {
  margin-top: 0;
}

/*****************Form Ends*********************/

/*********************Footer Begins************************/

footer {
  padding: .5em 1em;
  background: green;
  color: white;
  text-align: center;
}

footer article + article {
  border-top: white 1px solid;
}

#subscribe, #legal_name, #copyright {
  padding: 1em 0;
}

#bottom_nav, #legal_name {
  font-size: 90%;
}

#copyright {
  font-size: 80%;
}

#bottom_nav {
  padding: .25em 0;
}

#bottom_nav ul li {
  width: 50%;
  float: left;
  padding: .75em 0;
}

#bottom_nav ul li a {
  padding: .75em 0;
}


#copyright {
  text-align: center;
}

#subscribe form {
  max-width: 250px;
  margin: auto;
}

#subscribe input[type=s_email] {
  width: 100%;
  padding: 5px 7px;
  font-size: 90%;
  border-radius: 6px;
}

#subscribe input[type=submit] {
  background-color: white;
  color: green;
  font-weight: normal;
  float: right;
  font-size: 90%;
}

/*********media queries for larger browsers*********/

@media all and (min-width: 600px) {

  .blocks {
    padding: 1em 0;
  }

  .blocks article {
    width: calc((100%/3) - 2em);
  }

  .blocks article + article {
    margin-top: 0;
    margin-left: 3em;
  }

  #office-team, #project-leaders {
    width: 50%;
  }
}

@media all and (min-width: 700px) {

  #detail {
    width: calc(70% - 1em);
  }

  #facebook_feed {
    width: calc(30% - 1em);
  }

  #contact-form {
    width: calc(60% - 1em);
    margin-right: 1em;
  }

  #contact-info {
    width: calc(30% - 1em);
  }

  #top_footer article {
    width: calc((100%/3) - 1.2em);
    float: left;
  }

  #top_footer {
    padding: 0 1em;
  }

  footer article + article {
    border-top: none;
    margin-left: 1.8em;
  }

  #subscribe, #bottom_nav {
    text-align: left;
  }

  #legal_name {
    text-align: right;
  }

  #subscribe form {
    margin: 0;
  }

  #top_nav {
    font-size: 120%;
  }

  #top_nav ul li {
    text-align: center;
    display: inline-block;
    width: calc(100%/5);
  }

  #top_nav ul li ul li {
    display: block;
    width: 100%;
  }

  #top_nav ul ul {
    position: absolute;
  }

  #volunteer-info {
    width: 59%;
  }

  #volunteer-form {
    width: 39%;
  }

  legend {
    font-size: 22px;
  }

  main p, main ul {
    font-size: 120%;
    line-height: 160%;
  }

  h1 {
    font-size: 33px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 26px;
  }

  h4 {
    font-size: 22px;
  }

  h5 {
    font-size: 21px;
  }

  h6 {
    font-size: 19px;
  }

  .note {
    font-size: 100%;
  }
}