/* STRUCTURE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
  background-image: url("../images/bg-pattern.jpg"); }

.page-container {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box; }

p {
  text-align: center; }

.top60 { margin-top: 60px; }


/* BANNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#banner {
  height: 350px;
  width: auto;
  overflow: hidden; }

#banner img {
  width: 800px; }


@media (min-width: 800px) {

#banner { 
  height: 495px;
  width: auto; }

#banner img {
  width: auto; }

}




/* CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */





h1 {
  color: #0396C0;
  text-align: center;
  font-size: 2em;
  padding: 40px 10%; }

@media (min-width: 800px) {
  h1 {
    padding: 50px 20%;
    font-size: 2.3em; }
}

h2 {
  font-size: 1.2em;
  color: #1A3555;
  font-weight: 600;
  text-align: center; }



.page-title {
  background: -moz-linear-gradient(top,  rgba(155,213,229,1) 0%, rgba(155,213,229,0) 60%, rgba(155,213,229,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(155,213,229,1)), color-stop(60%,rgba(155,213,229,0)), color-stop(100%,rgba(155,213,229,0)));
  background: -webkit-linear-gradient(top,  rgba(155,213,229,1) 0%,rgba(155,213,229,0) 60%,rgba(155,213,229,0) 100%);
  background: -o-linear-gradient(top,  rgba(155,213,229,1) 0%,rgba(155,213,229,0) 60%,rgba(155,213,229,0) 100%);
  background: -ms-linear-gradient(top,  rgba(155,213,229,1) 0%,rgba(155,213,229,0) 60%,rgba(155,213,229,0) 100%);
  background: linear-gradient(to bottom,  rgba(155,213,229,1) 0%,rgba(155,213,229,0) 60%,rgba(155,213,229,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bd5e5', endColorstr='#009bd5e5',GradientType=0 ); }

#content {
  min-height: 400px;
  background-color: #E7F5F9; }

.contact-quote {
  font-style: italic;
  line-height: 2rem;
  text-align: left;
  padding-left: 200px; }

.fb {
  margin-top: 40px; }

.fb span {
  vertical-align: middle;}

.fb img {
  vertical-align: middle;
  width: 40px;
  padding: 10px; }


.quote {
  margin-top: 40px;
  font-style: italic;
  line-height: 2rem;
  text-align: left; }



/* GALLERY
–––––––––––––––––––––––––––––––––––––––––––––––––– */



.gallery-button {
    position:relative;
    text-align: center;
}

.gallery-button:after, .gallery-button:before {
    position:absolute;
    opacity:0;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.gallery-button:after {
    content:'\A';
    width:100%; height:100%;
    top:0; left:0;
    /*background:rgba(231, 245, 249, 0.4)*/;
}
.gallery-button:before {
    content: attr(data-content);
    background-color: rgba(231, 245, 249, 0.8);
    border-radius: 100px;
    border: 2px solid #0396C0;
    width:155px;
    height:155px;
    color:#0396C0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 7.3em;
    text-align:center;
    z-index:1;
    padding:4px 10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.gallery-button:hover:after, .gallery-button:hover:before {
    opacity:1;
}






/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */


nav {
  background: #1A3555;
  padding: 5px;
  width: 100%; }

.mobile-nav-button {
  display: none; }

/*.mobile-nav {
  height: 50px;
  overflow: hidden; }*/

.mobile-nav-open {
  height: 100%; }

nav ul {
  text-align: center;
  line-height: 0;
  margin: 0;
  padding: 0; }

nav ul li {
  line-height: 100%;
  margin: 20px 5px;
  display: block; }

nav a {
  color: #FFF;
  text-decoration:none;
  padding: 10px; }

nav a:hover {
  color: #85CEE0; }

nav .active {
  color: #85CEE0;
  border-bottom: none; }



@media (min-width: 800px) {

.mobile-nav-button {
  display: none; }

.mobile-nav {
  height: auto; }

nav {
  padding: 0; }

nav .active {
  color: #FFF;
  border-bottom: solid  3px #85CEE0; }

nav .active-on {
  color: #FFF;
  border-bottom: solid  3px #85CEE0; }

nav ul li {
  display: inline-block;
  margin: 20px 5px; }

}



@media (min-width: 1024px) {

nav {
  width: 1024px }

nav ul li {
  margin: 20px 15px; }

}




/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.footer-img {
  width: 100%;
  margin-bottom: -10px; }

footer {
  text-align: center;
  font-size: 0.8em;
  padding: 20px; }