@charset "UTF-8";

/*global styling*/

body {
  background-color: #f1f9fe;
  color: #1d1b1d
}

h1, h2 {
  font-family: 'Arbutus Slab', serif;
}

h2 {
  font-size: 24px;
}

p {
  font-family: 'Crimson Text', serif;
  font-size: 17px;
  line-height: 20px;
  margin-bottom: 12px;
}

.italic {
  font-style: italic;
}

/*navbar styling*/

.logo {
  color: #f1f9fe;
  margin-top: -3px;
  text-shadow: 2px 2px 0px black;
  font-size: 24px;
}

.logo:hover, .logo:active, .logo:focus {
  color:#afe1fa;
  text-decoration: none;
}

.navbar {
  margin-bottom: 0px;
  text-align: right;
  padding-top: 13px;
  background-color: #005485;
  color: #afe1fa;
  border: none;
  border-radius: 0px;
  box-shadow: 0px 0px 10px 0px #005485;
  z-index: 1;
}

#nav-entry {
  display: none;
}

.nav-entry {
  padding-right: 2em;
  padding-left: 2em;
  font-family: 'Arbutus Slab', serif;
  color: #afe1fa !important;
}

.nav-entry:hover, .nav-entry:active, .nav-entry:focus {
  color: #ffffff !important;
  text-decoration: none !important;
}

#current-page {
  color: #ffffff !important;
}

.nav-entry-end {
  padding-right: 0em;
}

@media screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }
  #nav-entry {
    display: inline;
  }
}

/*hamburger menu styling*/

.navbar-toggle {
  background-color: #afe1fa;
  border: none;
  margin: 0px 0px 0px 5px;
}

.navbar-toggle:hover, .navbar-toggle:active, .navbar-toggle:focus {
  background-color: #f1f9fe !important;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #005485;
}

.navbar-collapse {
  border-top-width: 2px;
  border-color: #f1f9fe; /*this part won't wooooooork*/
}

/*large photo and text styling*/

.jumbotron h1 {
  text-align: center
}

.jumbotext {
  text-shadow: 2px 2px 0px black;
}

@media only screen and (min-width: 768px) {
  .jumbotext {
    text-shadow: 3px 3px 0px black;
  }
}

.jumbotron {
  background-image: url("../imgs/church1.jpg");
  background-size: 100%;
  background-position: center center;
  background-color: #1d1b1d;
  color: #f1f9fe;
  box-shadow: 0px 0px 15px 0px gray;
}

.container-fluid .jumbotron {
  border-radius: 0px;
}

/*page content styling*/

.page-content {
  box-shadow: 0px 0px 15px 0px gray;
  background-color: #005485;
  border-radius: 15px;
  height: 100%;
}

.grid-item {
  padding: 15px;
  background-color: #afe1fa;
  border-radius: 15px;
  box-shadow: 0px 0px 8px -2px black;
  margin: 15px;
}

.col-sm-offset-2 {
  margin-left: 16.66666667%;
  /*This is copied from the bootstrap.css file.
  It keeps the offset working for the Ministries page,
  because otherwise it'd be overriden by the .grid-item style.
  I feel like this is a better solution than adding !important to the Boostrap code.*/
}

.first-item {
  margin-right: 0px;
}

.grid-item--dark {
  background-color: #1d1b1d;
  color: #f1f9fe;
    box-shadow: 0px 0px 5px 0px black;
}

.grid-item a {
  color: #1d1b1d;
  background-color:rgba(29, 27, 29, .2);
  padding-left: 3px;
  margin-left: -3px;
  padding-right: 3px;
  margin-right: -3px;
  padding-bottom: 2px;
  margin-bottom: -2px;
  border-radius: 15px;
  white-space: nowrap;
}

.grid-item a:hover, .grid-item a:active, .grid-item a:focus {
  text-decoration: none;
  background-color:rgba(241, 249, 254, 1);
}

.grid-item .italic a {
  padding-right: 5px;
  margin-right: -5px;
  padding-left: 4px;
  margin-left: -1px;
}

.grid-item--dark a {
  background-color:rgba(241, 249, 254, .5);
}

.grid-item--dark a:hover, .grid-item a:active, .grid-item a:focus {
  background-color:rgba(241, 249, 254, 1);
}

hr {
  background-color:rgba(29, 27, 29, .2);
  height: 2px;
  border: none;
}

/*contact form styling stuff*/

#contact-form {
  display: none;
  opacity: 0;
}

.visible {
  display: block !important;
}

input, textarea {
  border-radius: 10px !important;
}

textarea {
  resize: none;
}

.btn {
  background-color: #1d1b1d;
  color: #f1f9fe;
  font-family: 'Arbutus Slab', serif;
  border-radius: 15px !important;
}

.btn:hover, .btn:active, .btn:focus {
  background-color: #005485;
  color: #f1f9fe;
}

label {
  font-family: 'Arbutus Slab', serif;
  color: #1d1b1d;
}

/*footer styling*/

.footer {
  background-color: #1d1b1d;
  margin-top: 30px;
  box-shadow: 0px 0px 15px 0px gray;
}

.footer p, .footer a{
  font-family: 'Crimson Text', serif;
  color: #f1f9fe;
  opacity: .5;
}

.footer a:hover, .footer a:active, .footer a:focus {
  text-decoration: none;
  opacity: 1;
}

.footer ul {
  list-style-type: none;
  padding-left: 0px;
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 15px;
}

.footer li {
  float: none;
  margin-right: 1em;
}

.copyright p {
  opacity: .5;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 15px;
}

@media screen and (min-width: 768px) {
  .copyright p {
    text-align: right;
    margin-bottom: 60px;
    margin-top: 70px;
    margin-left: 0px;
  }
  .footer li {
    float: left;
  }
  .footer ul {
    margin-bottom: 60px;
    margin-top: 70px;
    margin-left: 0px;
  }
}