/*

Notes:

- #4eb27a

*/

/*
|--------------------------------------------------------
|  Global
|--------------------------------------------------------
*/

body {
  font-family: brother-1816, sans-serif !important;
  background-color: #fff;
  background-color: #362F28;
  /*background-color: #f5f3ea;*/
  font-weight: 400
}

body, div, li, p, h1, h2, h3, h4, h5 {
  font-family: brother-1816, sans-serif !important;
}


.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.08);
  margin-bottom: 20px;
  background: white;
  border-radius: 5px;
}

.card-body {
  padding: 30px;
}

a {
  color: #4eb27a;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #2c754c;
}

.button-theme {
  font-size: 1.5rem !important;
  background-color: #4eb27a !important;
  border-radius: 6px;
}

.button-theme:hover {
  background-color: #089660 !important;
}

.nowrap {
  white-space: nowrap; 
}

/*
|--------------------------------------------------------
|  Header
|--------------------------------------------------------
*/

.header-section {
  height: 90px;
  position: fixed;
  /*background-color: #ffffff;*/
  width: 100%;
  /*box-shadow: 0 6px 6px rgba(0,0,0,.15);*/
  z-index: 1000;
  transition: 0.3s all;
  top: 0;
}

.header-fade {
  height: 100px;
  position: fixed;
  /*background-color: #ffffff;*/
  width: 100%;
  /*box-shadow: 0 6px 6px rgba(0,0,0,.15);*/
  z-index: 999;
  background: linear-gradient(#362f27, #362f27, #362f27, #362f27, #362f27, rgba(54, 47, 39, 0));
  transition: 0.3s all;
}

.header-fade.isBackgroundVisible {
  transition: 0.3s all;
  opacity: 0;
}

.header-spacer {
  height: 80px;
}

.header-section .container  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  flex-wrap: wrap;
}

.header-section .logo img {
  max-width: 100%;
  height: auto;
  width: 130px;
  margin-bottom: 6px;
  margin-right: 20px
}

.header-section .menu-bar {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-section.show-menu .menu-bar {
  display: block;
}

.header-section.show-menu {
  padding-top: 10px;
  height: auto !important;
  background: #fff !important;
}

.header-section .menu-bar .menu {
  flex: 1;
}

.header-section .mobile-menu-button {
  display: none;
  font-size: 2rem;
  border: 2px solid rgba(255,255,255,0.6);
  color: rgba(255,255,255,0.6);
  border-radius: 4px;
  /*background: #fff;*/
  background: transparent;
  padding: 4px 8px;
  margin-top: -8px;
}

.header-section .menu-bar .menu {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.header-section .menu-bar .menu li {
  margin: 0 10px;
  padding: 0 !important;
}

.header-section .menu-bar .menu li a {
  padding: 10px;
  font-size: 1.5rem;
  font-weight: 500;
  /*color: #555;*/
  /*color: #4eb27a;*/
  color: #00b575 !important;
  /*background: #362f27;*/
}

.header-section .signin a {
  padding: 10px;
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(150,150,150,1);
}

body.header-transparent .header-spacer {
  height: 0;
}

body.header-transparent .header-spacer {
  height: 0;
}

body.header-transparent .header-fade {
  /*opacity: 1*/
  /*yep*/
  opacity: 0.0
  /*opacity: 0.9*/
}

body.isHeaderCollapsed .header-section {
  background: #ffffff;
  box-shadow: 0 6px 6px rgba(0,0,0,.15);
  transition: 0.5s all;
  height: 70px;
}

body.isHeaderCollapsed .header-section .menu-bar .menu li a {
  background: transparent;
  transition: 0.5s all;
}

body.isHeaderCollapsed .header-fade {
  opacity: 0
}

body.isHeaderCollapsed .header-section .mobile-menu-button {
  border: 2px solid rgba(128,128,128,0.6);
  color: rgba(128,128,128,0.6);
}

/*
|--------------------------------------------------------
|  Info pages
|--------------------------------------------------------
*/

nav.info-links {
  background: #362f27;
  /*background: #4eb27a;*/
  padding-bottom: 20px;
  /*box-shadow: 0 0 4px rgba(0,0,0,.3) inset;*/
}

nav.info-links ul {
  list-style-type: none;
  padding: 20px 0;
  margin: 0;
  /*border-left: 2px solid rgba(255,255,255,0.1);*/
}

nav.info-links ul li {
  display: inline-block;
}

nav.info-links ul li a {
  display: inline-block;
  padding: 14px 24px;
  font-size: 22px;
  color: #fff;
  font-weight: 500;
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,.0)
  /*border-right: 2px solid rgba(255,255,255,0.1)*/
}

.page-info {
  padding-bottom: 50px; 
  background: #f5f3ea;
  min-height: 300px;
}

.page-info-basic-container {
  padding: 30px 50px;
  font-size: 16px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  min-height: 100px;
  background: #fff;
}

.page-info-basic-container h2.email {
  margin: 0 0 20px 0 !important;
}

.page-info-basic-container h2.email a {
  padding: 10px 20px;
  border-radius: 8px;
  border: 2px solid #ddd;
  display: inline-block;
  /*background: #ffe;*/
  font-size: 24px;
}
.page-info-basic-container h2.email a:hover {
  background: #ffe;
}



ul.timeline {
  padding: 0;
  font-size: 16px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

ul.timeline li {
  background: #fff;
  list-style-type: none;
  padding: 24px 30px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  overflow: auto;
}

ul.timeline li.major {
  background: #ffe;
  font-size: 18px;
}

ul.timeline li.major div.date {
  /*background: #ffc;*/
  /*padding: 10px 10px 12px 10px;
  margin: -5px 30px -10px -10px;*/
  /*border-radius: 4px;*/
  /*box-shadow: inset 0 -1px 0 2px rgba(0,0,0,.2);*/
  /*text-align: center;*/
  /*min-width: 150px; */
}

ul.timeline li div.date {
  font-weight: 600;
  margin-right: 20px;
  min-width: 120px; 
  display: block;
  float: left
}

ul.timeline li div.info {
  /*display: inline-block;*/
  display: block;
  /*overflow: visible;*/
  overflow: hidden;
  line-height: 150%;
}

ul.timeline li div.info .more {
  color: #777;
  display: block;
  margin-top: 8px;
  font-size: 14px;
}

.info-container {
  margin-top: -70px;
}

.page-info .items {
  font-size: 0;
  margin-top: -70px;
  margin: 0px -2% 0 -2%; 
}

.page-info .items blockquote {
  font-size: 14px !important;
  color: #777;
}

.page-info section {
  overflow:hidden;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.2);
  width: 47%;
  display: inline-block;
  border-radius: 8px;
  margin: 0 1.5% 30px 1.5%;
  vertical-align: top;
}

.page-info section .main-image {
  max-width: 180px;
  float:left;
  margin: 0 20px 10px 0;
}

.page-info section .main-image.wide {
  max-width: 40%;
}

.page-info section .main-image img {
  max-width: 100%;
  height: auto;
  /*max-height: 180px;*/
  /*width: auto;*/
}

.page-info section .main-image .caption {
  padding: 10px 20px 0 30px;
}

.page-info section .main-image .caption p {
  color: #777;
  margin: 0 0 6px 0;
  padding: 0;
  line-height: 140%;
  font-size: 14px;
}

.page-info section .main-image .caption p.small {
  font-size: 13px;
}

.page-info section p, li {
  line-height: 180%;
}

.page-info section .inner {
  padding: 20px 30px 10px 30px;
}

.page-info section .highlight {
  background: #ffb;
  padding: 1px 7px 4px 7px; 
  /*box-shadow: inset 0 -1px 0 2px rgba(0,0,0,.1);*/
  border-radius: 4px;
  /*display:inline-block;*/
  white-space: nowrap;
}

.page-info section h2 .grey {
  color: #777;
  font-weight: 500;
}

.page-info section .grey {
  color: #777;
}

.page-info section h2 {
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 24px;
  font-weight: 600;
  overflow: hidden;
  line-height: 180%;
}

.page-info section h3 {
  margin: 0 0 20px 0;
  overflow: hidden;
  line-height: 200%;
}

.page-info section p {
  /*overflow: hidden;*/
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 400;
  color: #444
}

@media(max-width: 1000px) {

  .page-info .info-container .items section div.main-image.wide {
    max-width: 40% !important;
  }
}

@media(max-width: 900px) {

  .page-info .info-container .items section {
    width: 97% !important;
    box-sizing: border-box !important;
  }

  .page-info .info-container .items section .main-image {
    max-width: 40% !important;
  }
  .page-info .info-container .items section h2 {
    font-size: 22px !important;
  }

  .page-info .headline {
    margin: 0 !important;
    padding: 0 0 100px 0 !important;
  }

  .page-info .headline h1 {
    font-size: 24px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    background: rgba(0,0,0,.2);
    display: inline-block
  }

  .page-info .info-links ul {
    margin: 20px 0 0 0 !important;
    padding: 0 !important; 
  }
  
  .page-info .info-links ul li a {
    font-size: 18px;
    padding: 6px 12px;
  }


}

@media(max-width: 400px) {

  .page-info .info-container .items section h2 {
    font-size: 20px !important;
  }

}



.page-info .main-link {
  display: block;
  border-top: 1px solid #ddd;
  padding: 16px 20px;
  font-size: 14px;
}

.page-info .main-link .read-more {
  float: left;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #555;
  display: block;
  margin-right: 10px;
  padding: 8px 10px;
}
.page-info .main-link .why {
  overflow: hidden;
  padding: 9px 0px;
  color: #999;
  display: block;
  font-size: 13px;
}

.page-info .headline {
  background: #362f27;
  padding: 0px 0 120px 0;
}


.page-info .info-spacer {
  background: #362f27;
  height: 70px;
}

.page-info .headline h1 {
  color: #fff;
  font-size: 40px;
  font-weight: 500;
  font-style: italic;
  margin: 0 0 0 0;
  padding: 10px 20px;
  background: rgba(0,0,0,.2);
  display: inline-block;
}


/*
|--------------------------------------------------------
|  Content Pages with items
|--------------------------------------------------------
*/

.content-page .page-header-title {
  padding: 80px 0 220px 0;
  background-position: bottom;
  background-image: url(/img/backgrounds/optimized/waves-brown-3.png);
  background-repeat: no-repeat;
  background-size: 1455px 523px;
  background-color: #362f27;
  position: relative;
  text-align: left;
  margin-top:-40px;
}

@media (min-width: 1455px) {

  .content-page .page-header-title {
    background-size: cover;
  }

}

.content-page .page-header-title .container{
  text-align:left;
}

.content-page .page-header-title h1 {
  background: #fff;
  /*box-shadow: 0 10px 16px 0 rgba(0,0,0,.3);*/
  box-shadow: 0 15px 30px 0 rgba(0,0,0,.5), 0 5px 15px 0 rgba(0,0,0,.08);
  display: inline-block;
  border-radius: 8px;
  padding: 20px 40px;
  font-size: 40px;
  color: #999;
  font-weight: 400;
}

.content-page .page-header-title b {
  font-weight: 700;
  color: #000;
}

.content-page {
  padding-bottom: 50px; 
  background: #f5f3ea;
  min-height: 300px;
}

.content-page #items {
  margin-top: -150px;
  position: relative;
  z-index: 2;
}

.content-page .item-card {
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.2);
  width: 30%;
  display: inline-block;
  border-radius: 8px;
  margin: 0 3% 30px 0;
  vertical-align: top;
}

.content-page .item-card i.fa, 
.content-page .item-card i.fas,
.content-page .item-card i.fa-fw {
  margin-right: 8px;
}


@media (max-width: 768px) {

.content-page .item-card {
  width: 48%;
  margin: 0 2% 30px 0;
}

}

@media (max-width: 512px) {

.content-page .item-card {
  width: 100%;
  margin: 0 0 30px 0;
}

}

.content-page .item-card .title {
  font-weight: 600;
  font-size: 20px;
  padding: 20px 20px 20px 20px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  line-height: 150%
}

.content-page .item-card p {
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  padding: 15px 20px;
  margin: 0;
}

.content-page .item-card .extra {
  font-weight: 500;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  padding: 0px 20px 15px 20px;
  color: #555;
}

.content-page .item-card .price {
  font-weight: 500;
  font-size: 16px;
  padding: 5px 20px 15px 20px;
  color: #999;
  line-height: 150%;
}

.content-page .item-card .small {
  font-weight: 500;
  font-size: 16px;
  padding: 5px 20px 15px 20px;
  color: #999;
  line-height: 150%;
}

.content-page .item-card a {
  border-top: 1px solid rgba(0,0,0,.1);
  font-weight: 500;
  font-size: 18px;
  padding: 15px 20px 20px 20px;
  display: block;
}

/*
|--------------------------------------------------------
|  page section
|--------------------------------------------------------
*/

/*  page header  */
/* yep */
.page-section .page-header {
  /*background-image: url(/img/backgrounds/optimized/waves-brown-1.png);*/
  /*background-image: url(/img/backgrounds/waves-photo-1c.jpg);*/
  /*background-image: url(/img/backgrounds/waves-photo-1b.jpg);*/
  background-image: url(/img/backgrounds/waves-photo-1.jpg);
  /*background-color: rgba(54, 47, 39, 1.000);*/
  background-repeat: no-repeat;
  background-size: cover;
  /*background-position: 0 -90px;*/
  background-position: center -80px;
  /*background-position: center -110px;*/
  position: relative;
  margin-bottom: 20px;
  /*padding: 0 10px;*/
  padding: 90px 10px 0 10px;
}

.page-header .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.page-header .card.page-title {
  box-shadow: 0 15px 30px 0 rgba(0,0,0,.6), 0 5px 15px 0 rgba(0,0,0,.08);
  margin: 110px 0 160px 0;
  /*yep*/
}

.page-header .card.page-title .card-body {
  /*padding: 25px 35px;*/
  /*padding: 2.2vw 3.2vw;*/
  padding: 2.0vw 3.0vw;
}

.page-header .page-title h1 {
  /*font-size: 2.4vw;*/
  /*font-size: 26px;*/
  font-size: 2.0vw;
  font-weight: 500;
  color: #555;
}

.page-header .page-title strong {
  font-weight: 600;
  color: #000;
}

.page-header .page-title b {
  color: #00b575;
  /*color: #4eb27a;*/
}

.page-header .about-creek {
  /*font-size: 1.9rem;*/
  /*font-weight: bold;*/
  /*font-weight: 500;*/
  /*width: 100%;*/
  /*width: 85%;*/
  max-width: 950px;
  text-align: center;
  /*position: absolute;*/
  /*bottom: -20%;*/
  /*font-size: 1.9vw;*/
  padding: 0;
  /*padding: 0.3vw 0.9vw;*/
  /*padding: 0.7vw 1.1vw;*/
}

.page-header .about-creek p {
  font-size: 1.7rem;
  /*font-size: 1.9rem;*/
  /*font-size: 1.9vw;*/
  /*font-weight: bold;*/
  font-weight: 500;
  color: #7f6b3f;
  line-height: 3.5rem;
  /*line-height: 3.5vw;*/
}

.page-header .about-creek p strong {
  font-weight: 600;
  color: black;
  /*white-space: nowrap;*/
}

.page-header .about-creek span {
  white-space: nowrap;
}

.page-header .card.about-creek .card-body {
  /*padding: 1.8vw 2.5vw;*/
  /*width: 100%;*/
}

.page-header .about-creek p a {
  font-weight: 600;
  color: #4eb27a;
  display: inline-block;
  /*background: #ffc;*/
  /*border-bottom: 2px solid #eed;*/
  /*margin-bottom: -10px;*/
  /*text-decoration: underline;*/
  /*box-shadow: inset 0 -6px 0 #fff, inset 0 -10px 0 #eed;*/
  /*box-shadow: inset 0 0 0 100px #f5f3ea, -6px 0 0 0 #f5f3ea, 6px 0 0 0 #f5f3ea;*/
  
}

.page-header .about-creek p a:hover {
  text-decoration: none;
  box-shadow: inset 0 -6px 0 #fff, inset 0 -10px 0 #eed;
  /*color: #2c754c;*/
}

/* page content */
.page-section {
  min-height: 80%;
  background: #f5f3ea;
}

.page-section .page-content {
  /*margin-top: 100px;*/
  padding: 30px 10px;
  /*padding: 30px 0;*/
}

/* 1. action */
.page-content .action {
  max-width: 1100px;
  margin: 0 auto;
}

.page-content .action .card-body {
  display: flex;
  justify-content: space-around;
}

.page-content .action i {
  font-size: 4rem;
}

.page-content .action .button-label {
  background-color: #fcfeb3;
  padding: 1.5rem 2.5rem;
  color: black;
  font-size: 1.8rem;
  font-weight: bold;
  box-shadow: 0 -1px 0 2px rgba(0,0,0,.1) inset;
  border-radius: 4px;
}

.page-content .action .button-main {
  font-size: 1.8rem !important;
}

.supporters-container {

}

.supporters-container .supporters {
  text-align: center;
  /*
  
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
   */
  
  border: 2px solid rgba(0,0,0,0.1);

  border: 2px solid rgba(0,0,0,0);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);

  border-radius: 10px;
  text-decoration: none;
  display: block;
  margin: 0 auto 100px auto;
  max-width: 900px;
  position: relative;
  overflow: auto;
  transition: all 0.5s;
  padding: 30px 20px 20px 20px;
}

.supporters-container .supporters h2 {
  opacity: 0.8;
  margin: 20px 0 50px 0;
}
.supporters-container .supporters p {
  margin: 20px 0 0 0;
  padding: 0;
}
.supporters-container .supporters p a.read-more-link {
  font-size: 18px;
  color: #777;
  border-bottom: 2px solid rgba(0,0,0,0.2);
  padding: 0;
  margin: 0;
}
.supporters-container .supporters p a.read-more-link:hover {
  color: #000;
  border-bottom: 2px solid rgba(0,0,0,0.8);
}

.supporters-container .supporters a {
  display: inline-block;
  margin: 0 20px 30px 20px;
  /*opacity: 0.8;*/
  transition: all 0.5s;
}
.supporters-container:hover .supporters a {
  opacity: 1;
  transition: all 0.5s;
}

.supporters-container .supporters a img {
  display: inline-block;
  padding: 10px;
  max-height: 100px;
  vertical-align: middle;
  /*-webkit-filter: grayscale(100%);*/
  /*filter: grayscale(100%);*/
  transition: all 0.5s;
}

.supporters-container .supporters:hover {
  border: 2px solid rgba(0,0,0,0);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.supporters-container .supporters:hover a img {
  display: inline-block;
  vertical-align: middle;
  /* Safari 6.0 - 9.0 */
  -webkit-filter: grayscale(0%); 
  filter: grayscale(0%);
  transition: all 0.3s;
}

.supporters-container .supporters a.tall img{
  display: inline-block;
  max-height: 110px;
  vertical-align: middle;
}

.supporters-container .supporters a.extra-tall img{
  display: inline-block;
  max-height: 130px;
  vertical-align: middle;
  /*-webkit-filter: grayscale(100%); */
}

.supporters-container .supporters a:hover img {
  transition: all 0.3s;
  margin-top: -5px;
  margin-bottom: 5px;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
  padding: 10px;
  border-radius: 10px;
}

.announcement-container {

}

.announcement-container .announcement {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  text-decoration: none;
  display: block;
  margin: 0 auto 100px auto;
  max-width: 900px;
  border-radius: 10px;
  position: relative;
  overflow: auto;
  transition: all 0.5s;
}

.announcement-container .announcement:hover {
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transition: all 0.5s;
}
.announcement-container .announcement:hover .fake-link {
  color: #000;
  border-bottom: 2px solid #ccc;
}

.announcement-container .announcement-text {
  padding: 30px 30px;
  font-size: 20px;
  color: #000;
}
.announcement-container .announcement-text time {
  font-size: 14px;
  color: #999;
  margin: 0 0 12px 0;
  display: block;
}
.announcement-container .announcement-text h1 {
  font-size: 28px;
  color: #000;
  margin: 0 0 10px 0;
}
.announcement-container .announcement-text p {
  font-size: 21px;
  color: #777;
}
.announcement-container .fake-link {
  font-size: 16px;
  color: #777;
  border-bottom: 2px solid #ddd;
}

.announcement-container .announcement-image {
  float: right;
  width: 410px;
  height: 100%;
  margin-left: 20px;
}


@media (max-width: 800px) {
  .announcement-container .announcement-image {
    display: none;
  }
}



/* 2. tool & services */
.page-content .tools-and-services {
  margin: 80px 0 100px 0;
}

.page-content .tools-and-services .title{
  color: #5a5856;
  font-size: 2.5rem;
  text-align: center;
}

.tools-and-services .tools {
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.tools-and-services .tools li {
  padding: 20px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.08);
  margin: 20px;
  background: white;
  border-radius: 4px;
}

.tools-and-services .tools li i {
  font-size: 1.9rem;
  margin-right: 1rem;
}

.tools-and-services .tools li span, .tools-and-services .tools li a {
  font-size: 1.7rem;
  font-weight: 500;
  color:  #4eb27a;
}

/* 3. See all tools & services  */
.page-content .all-tools-and-services {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
}

.all-tools-and-services .button-theme {
  padding: 20px 60px;
  font-size: 1.8rem !important;
}

/* 4. history */
.page-content .history {
  margin-top: 50px;
}

.page-content .history .title {
  color: #4eb27a;
  font-size: 2.2rem;
  font-weight: 600;
}

.page-content .history ul {
  list-style-type: none;
  padding: 0;
}

.page-content .history ul li {
  font-size: 1.5rem;
  color: #5a5856;
  line-height: 3rem;
  font-weight: bold;
}

/*
|--------------------------------------------------------
|  footer section
|--------------------------------------------------------
*/

.footer-section {
  position: relative;
  background: #ffffff;
  padding-top: 30px;
  padding-bottom: 20px;
  box-shadow: 0 0 8px rgba(0,0,0,.1);
}

.footer-section .container {
  display: flex;
  justify-content: space-between;
}

.footer-section .container .footer-logo img {
  width: 130px;
  filter: grayscale(100%);
  opacity: 0.7;
}

.footer-section .container .footer-menu {
  flex: 1;
  margin-left: 20px;
}

.footer-section .footer-menu ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  list-style-type: none;
}

.footer-section .footer-menu ul li {
  margin: 0 40px 20px 0;
}
.footer-section .footer-menu ul li a {
  padding: 0 15px 15px 0;
  color: #5a5856;
  font-size: 1.1rem;
  display: block;
}

.footer-section .footer-menu ul li a:hover {
  color: 000;
}

.footer-section small.trademark {
  font-size: 1rem;
  color: #777;
  margin: 0;
  padding: 0 0 30px 0;
  display: block;
}

.footer-section small.trademark a {
  color: #777;
  text-decoration: underline;
}

/*
|--------------------------------------------------------
|  Product Pages
|--------------------------------------------------------
*/

.product-page .info-links { 
  display: none;
}

.product-page .info-container { 
  padding-top: 50px;
}

.product-page div.hero {
  /*padding: 50px 0 20px 0;*/
  padding: 80px 0 100px 0;
  /*padding: 70px 0 70px 0;*/
  background: #eee;
  /*margin-bottom: 70px;*/
  margin-top: 16px;
  background: #26302c url('https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=3300&q=80') left bottom / cover no-repeat;
  /*background: url('https://images.unsplash.com/photo-1488330890490-c291ecf62571?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80') left bottom / cover no-repeat;*/
  /*background: url('https://images.unsplash.com/photo-1488330890490-c291ecf62571?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80') left top / cover no-repeat;*/
  /*border-radius: 10px;*/
  box-shadow: 0 4px 20px rgba(0,0,0,0.9) inset;
  overflow: visible;
}

.product-page div.hero h1 {
  font-size: 60px;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,1);
  /*text-shadow: 0 4px 20px 6px rgba(0,0,0,0.5);*/
}

.product-page div.hero p {
  font-size: 30px;
  color: rgba(255,255,255, 0.8);
  text-shadow: 0 4px 20px rgba(0,0,0,1), 0 4px 20px rgba(0,0,0,1);
  font-weight: 400;
}

.product-page div.hero p b {
  color: #fff !important;
}

.product-page div.hero .box {
  padding: 20px 30px 20px 30px;
  background: #fff;
  /*box-shadow: 0 15px 30px 0 rgba(0,0,0,.5), 0 5px 15px 0 rgba(0,0,0,.08);*/
  border-radius: 10px 10px 0 0;
  /*margin-bottom: -30px;*/
  /*float:left;*/
  display:inline-block;
  position: relative;
  z-index: 3;
}


.product-page div.hero .gap {
  font-size: 0;
}

.product-page div.hero .under-box {
  position: relative;
  z-index: 2;
  padding: 20px 30px 20px 30px;
  background: rgba(255,255,255,0.9);
  /*background: #eed;*/
  box-shadow: 0 15px 30px 0 rgba(0,0,0,.5), 0 5px 15px 0 rgba(0,0,0,.08);
  border-radius: 0 10px 10px 10px;
  /*margin-bottom: -30px;*/
  /*float:left;*/
  display:inline-block;

}

.product-page div.hero .box h1 {
  font-size: 40px;
  color: #000;
  text-shadow: none;
}

.product-page div.hero .box p, .product-page div.hero .under-box p {
  font-size: 28px;
  color: rgba(0,0,0,0.8);
  text-shadow: none;
  font-weight: 400;
}

.product-page div.hero .box p b, .product-page div.hero .under-box p b {
  color: #000 !important;
}

.product-page main {
  margin: -30px -1.5% 0 -1.5%;
}

.product-page main section {
  display: inline-block;
  max-width: 30%;
  /*margin: 0 10px 20px 0 !important; */
  padding: 20px;
  text-align: left;
}

.product-page main section p a {
  font-weight: 600;
}

.product-page main section h4 {
  font-size: 20px;
}

.product-page main section h4 i {
  font-weight: 400;
}

.product-page main section.cta {
  display: inline-block;
  box-sizing: border-box;
  padding: 30px 50px;
  max-width: none;
  /*min-width: 80%;*/
  width: auto;
  text-align: center;
  white-space: nowrap;
  margin-top: 30px;
}

.product-page main section.cta .main-icon {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 14px 0;
  line-height: 100%;
  font-size: 30px;
  font-weight: 600;
  vertical-align: top;
}

.product-page main section.cta h2 {
  display: inline-block;
  margin: 0 40px 0 0;
  padding: 14px 0;
  line-height: 100%;
  font-size: 30px;
  font-weight: 600;
}

.product-page main section.cta a.button {
  display: inline-block;
  outline: 0;
  border: none;
  padding: 17px 24px;
  margin: 0;
  text-transform: none;
  text-shadow: none;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  background-color: #4eb27a;
  color: #fff;
  display: inline-block;
  line-height: 100%;
  font-size: 24px;
  vertical-align: top;
}


/*
|--------------------------------------------------------
|  Media Query
|--------------------------------------------------------
*/

@media (max-width: 1200px) {
  /* page section */
  .page-header .page-title h1 {
    font-size: 2rem;
  }

  .page-header .about-creek p {
    font-size: 1.7rem;
    line-height: 2.8rem;
  }

  .tools-and-services .tools li i {
    font-size: 2.5rem;
  }

  .tools-and-services .tools li span {
    font-size: 1.8rem;
  }
}

@media (max-width: 992px) {
  /*  global  */
  .card-body {
    padding: 10px 16px;
  }

  .container {
    width: 90%;
  }

  /* page section */

  .page-header .page-title h1{
    /*font-size: 1.8rem;*/
  }

  .page-header .about-creek p {
    /*font-size: 1.5rem;*/
    /*line-height: 2.5rem;*/
  }

  .page-header .about-creek {
    padding: 20px 30px;
  }

  .tools-and-services .tools li i {
    font-size: 2.2rem;
  }

  .tools-and-services .tools li span {
    font-size: 1.6rem;
  }
}

@media (max-width: 768px) {
  /* global  */
  .container {
    width: 95%;
  }

  /* header */
  .header-section {
    /*height: auto;*/
    padding-top: 10px;
  }

  .header-section .logo img {
     width: 120px;
  }

  .header-section .menu-bar {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    display: none;
  }

  .header-section .mobile-menu-button {
    display: block;
  }

  .header-section .menu-bar .menu li a {
    font-size: 1.2rem;
    font-weight: normal;
    display: block;
    padding-left: 0;
  }

  .header-section .menu-bar .menu li {
     margin: 0;
  }

  .header-section .menu-bar,
  .header-section .menu-bar .menu {
    flex-direction: column;
    width: 100%;
  }

  .header-section .signin {
    width: 100%;
  }

  .header-section .signin a {
    display: block;
    padding-left: 0;
    padding-bottom: 20px;
  }

  /* page section */
  .page-section .page-header {
    /*height: 250px;*/
  }
  .page-header .card.page-title {
    margin: 90px 0px;
  }

  .page-header .page-title h1 {
    font-size: 1.5rem;
  }

  .page-header .about-creek {
    /*width: 95%;*/
    /*bottom: -30%;*/
  }

  .page-header .card.about-creek .card-body {
    /*width: 95%;*/
    /*bottom: -30%;*/
    padding: 0;
    /*padding: 10px 15px;*/
  }

  .page-header .about-creek p {
    font-size: 1.5rem;
    line-height: 2.5rem;
  }

  .page-content .action .card-body
  {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .page-content .action .button-label {
    font-size: 1.3rem;
  }

  .page-content .action i ,
  .page-content .action .button-label {
    margin: 20px 0;
  }

  .tools-and-services .tools li {
    width: 100%;
    display: flex;
    margin: 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    border-radius: 0;
  }

  .tools-and-services .tools li i {
    font-size: 1.8rem;
  }

  .tools-and-services .tools li span {
    font-size: 1.4rem;
  }

  .all-tools-and-services .button-theme {
    padding: 20px 40px;
    font-size: 1.5rem !important;
  }

  .page-content .history .title {
    font-size: 2rem;
  }

  .page-content .history ul li {
    font-size: 1.2rem;
  }

  /* footer  */
  .footer-section .container {
    flex-direction: column;
  }

  .footer-section .container .footer-menu {
    margin-left: 0;
  }

  .footer-section .footer-logo {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer-section .footer-menu ul {
    flex-direction: column;
    align-items: center;
  }

  .footer-section .footer-menu ul li {
    margin: 0;
    margin-bottom: 20px;
  }

  .footer-section .footer-menu ul li a {
    padding: 0;
    padding-bottom: 15px;
  }

}

@media(max-width: 512px) {
  /* page header */
  .page-header .about-creek p {
    font-size: 1.3rem;
    line-height: 2.2rem;
  }

  .page-header .page-title h1 {
    font-size: 2.0rem;
    padding: 10px 15px
  }
}