/* Navbar */
#intro {
  background: url("/assets/sustainable-development.jpeg") no-repeat center center;
  background-size: cover;
}
.fa-seedling {
  font-size: 150px;
}

.navbar:not(.top-nav-collapse) {
  background: transparent !important;
}
.navbar .dropdown-toggle {
  cursor: pointer;
}

.top-nav-collapse .nav-link {
  color: #4f4f4f!important;
}

.navbar-brand img {
  max-width: 125px;
  width: auto;
  max-height: 125px;
  height: auto;
}

.top-nav-collapse .nav-link:hover {
  color: #333 !important;
  font-weight: 400 !important;
  transition: .0s !important;
  -webkit-transition: .0s !important;
}

.dropdown-item:hover {
  background-color: #aaa !important;
}

.slogan img {
  max-width: 200px;
  width: auto;
  max-height: 200px;
  height: auto;
  margin: 0 auto;
  margin-bottom: 25px;
}

.nav-item {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .navbar:not(.top-nav-collapse) {
    background: rgb(44, 103, 95) !important;
  }
}

@media (min-width: 1300px) {
  .navbar-brand img {
    max-width: 150px;
  }
  .nav-link {
    font-size: 1.25rem;
  }
}
@media (min-width: 1600px) {
  .navbar-brand img {
    max-width: 175px;
  }
  .nav-link {
    font-size: 1.5rem;
  }
}

#intro .h6 {
  font-weight: 400;
  line-height: 1.7;
}

.hm-gradient .full-bg-img {
  background: rgba(42, 27, 161, 0.7);
  background: linear-gradient(45deg, rgba(29, 210, 177, 0.7), rgba(42, 27, 161, 0.7) 100%);
}

@media (max-width: 450px) {
  .margins {
    margin-right: 1rem;
    margin-left: 1rem;
  }
}

#pricing .lead {
  opacity: 0.7;
}

#pricing .card-image {
  background: url("/assets/architecture.jpg") no-repeat center center;
}

#pricing ul li {
  font-size: 1.1em;
}

/* Overview */
#relationships-read {
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
}
#solutions-read {
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
}
#experience-read {
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
}

/* Popular Products */
.col-1 .fa {
  float: right;
}
.popular-div {
  width: 25%;
  margin-left: 0px;
  border-top: 5px solid rgba(0,0,0,.2);
}
.popular-row {
  align-items: center;
}

/* Products Slider */
.slick-slide {
  margin-left: 1rem;
  margin-right: 1rem;
  border-radius: .25rem!important;
}
.slick-dots li button:before {
  font-size: 20px;
  line-height: 20px;
}
.featured-products .card {
  height: 600px;
}
.featured-card {
  height: 600px;
}
.featured-card .card-body {
  flex-flow: column;
  height: 560px;
}
.product-title {
  flex: 0 1 auto;
}
.featured-img {
  height: 175px;
  align-items: center;
  display: flex;
  flex: 1 1 auto;
}
.featured-img img {
  max-width: 100%;
  width: auto;
  margin: 0 auto;
  max-height: 100%;
  height: auto;
}
.product-description {
  flex: 1 1 auto;
  height: 175px;
  max-height: 175px;
  overflow: hidden;
  overflow-y: scroll;
}
.product-subtitle {
  height: 50px;
  max-height: 50px;
  overflow: hidden;
  overflow-y: scroll;
}
.download-btn {
  flex: 0 1 auto;
}


/* Meet the Team */
.avatar-sm {
  width: 150px !important;
}
.team-email {
  font-size: .75rem;
}
.team-email a {
  display: flex;
  align-items: center;
  color: #607d8b!important;
}
.team-email a:hover {
  color: #4d646f!important;
}


/* Footer */
#contact {
  background-image: url('/assets/cornfield.jpg');
}
.team-pic img {
  max-width: 100%;
  width: auto;
  max-height: 400px;
  height: auto;
  border-radius: .25rem;
}
.contact-list a {
  color: #4f4f4f!important;
}
.contact-list a:hover {
  text-decoration: underline;
}
.disclaimer:hover {
  color: #fff !important;
  text-decoration: underline;
}
.hemp-black-logo {
  max-height: 50px;
}
.ps2-logo {
  max-height: 50px;
}
.ps2-text {
  font-size: 0.75rem;
}
.copyright-div {
  border-top: 3px solid #fff;
  width: 20px;
}
.footer-copyright {
  color: #fff;
}
.footer-copyright a {
  z-index: 2;
  position: relative;
  color: #fff;
}
.footer-copyright a:hover {
  color: #fff !important;
  text-decoration: underline;
}
.turtleneck-copyright-logo {
  max-height: 30px;
  margin-left: 10px;
  margin-right: 10px;
}

/* Scroll to top */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  font-size: 20px;
  background: #333;
  color: white;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #555;
}

/* 
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1200px
*/

@media (min-width: 996px) and (max-width: 1200px) {
  .col-lg-1 {
    margin-right: 1px;
  }

  .features-text {
    margin-top: 1.5rem !important;
  }

  .employee-name {
    font-size: 1.25;
  }
  .employee-desc {
    font-size: .85rem;
  }
  .team-email a {
    font-size: 0.6rem;
  }
}

/* 
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1023px
*/

@media (min-width: 768px) and (max-width: 995px) {
  .px-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .p-5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .mx-5 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  .top-nav-collapse.navbar-dark .navbar-toggler-icon {
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }

  .features-text {
    margin-top: 1rem !important;
  }

  .feature-products-title {
    margin-bottom: 5rem;
  }
  .slick-prev {
    left: 35%;
    top: -5%;
    height: auto;
    width: auto;
  }
  .slick-next {
    right: 35%;
    top: -5%;
    height: auto;
    width: auto;
  }
  .slick-prev:before, .slick-next:before {
    font-size: 2.5rem;
  }

  .popular-row {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .popular-row img {
    display: block;
    max-width: 50%;
  }
  .col-reverse-top {
    order: 2
  }
  .col-reverse-bottom {
    order: 1
  }
  .img-tall {
    display: block;
    max-height: 200px;
  }

  .team-email a {
    justify-content: center;
    font-size: .75rem;
  }
  .team-member-col {
    display: flex;
    align-items: center;
  }

  .contact-list {
    font-size: .75rem;
  }
}

/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1023px
*/

@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {

}

/* 
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  .fc-header-center {
    padding: 5px 15px 20px 15px !important;
  }
  .h1-responsive {
    font-size: 1.85rem !important;
  }
  .h1 {
    font-size: 2rem; 
  }
  .px-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .p-5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .mx-5 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
  .lead {
    font-size: 1.25rem !important;
  }
  .btn-first {
    margin-left: 6px !important;
  }

  #myBtn {
    display: none !important;
  }

  .navbar-brand img {
    max-width: 100px;
    max-height: 100px;
  }
  .top-nav-collapse.navbar-dark .navbar-toggler-icon {
      background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }

  .features-text {
    margin-top: 1rem !important;
  }

  .feature-products-title {
    margin-bottom: 4.25rem;
  }
  .slick-prev {
    left: 35%;
    top: -5%;
    height: auto;
    width: auto;
  }
  .slick-next {
    right: 35%;
    top: -5%;
    height: auto;
    width: auto;
  }
  .slick-prev:before, .slick-next:before {
    font-size: 2.25rem;
  }
  .more-products {
    padding-top: 1.5rem !important;
  }

  .popular-row {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .col-reverse-top {
    order: 2
  }
  .col-reverse-bottom {
    order: 1
  }
  .img-tall {
    display: block;
    max-height: 200px;
    margin: auto;
  }

  .employee-name {
    margin-top: .5rem;
  }
  .team-email a {
    justify-content: center;
    font-size: 1rem;
  }
  .team-member-img {
    width: 50%;
  }
  .bio-modal-btn {
    font-size: 1.15rem;
  }

  .contact-card {
    width: 90%;
  }
  .team-pic {
    margin-top: 3rem;
  }

  .contact-list {
    font-size: 1rem;
  }
  .contact-list .col-sm-12 {
    margin-bottom: 1.5rem;
  }
  .contact-list .col-sm-12:last-child {
    margin-bottom: 0rem;
  }

  .ncp-copyright {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .copyright {
    font-size: 1rem !important;
  }
  .ps2-text {
    margin-bottom: 1.5rem !important;
  }
}

/* 
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  .fc-header-center {
    padding: 5px 15px 20px 15px !important;
  }
  .h1-responsive {
    font-size: 2rem !important;
  }
  .h1 {
    font-size: 2rem; 
  }
  .px-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .p-5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .mx-5 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
  .lead {
    font-size: 1.25rem !important;
  }
  .btn-first {
    margin-left: 6px !important;
  }

  #myBtn {
    display: none !important;
  }

  .navbar-brand img {
    max-width: 100px;
    max-height: 100px;
  }
  .top-nav-collapse.navbar-dark .navbar-toggler-icon {
      background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }

  .features-text {
    margin-top: 1rem !important;
  }

  .feature-products-title {
    margin-bottom: 4.25rem;
  }
  .slick-prev {
    left: 35%;
    top: -5%;
    height: auto;
    width: auto;
  }
  .slick-next {
    right: 35%;
    top: -5%;
    height: auto;
    width: auto;
  }
  .slick-prev:before, .slick-next:before {
    font-size: 2.25rem;
  }
  .more-products {
    padding-top: 1.5rem !important;
  }

  .popular-row {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .col-reverse-top {
    order: 2
  }
  .col-reverse-bottom {
    order: 1
  }
  .img-tall {
    display: block;
    max-height: 200px;
    margin: auto;
  }

  .employee-name {
    margin-top: .5rem;
  }
  .team-email a {
    justify-content: center;
    font-size: 1rem;
  }
  .team-member-img {
    width: 60%;
  }
  .bio-modal-btn {
    font-size: 1.15rem;
  }

  .contact-card {
    width: 90%;
  }
  .team-pic {
    margin-top: 3rem;
  }

  .contact-list {
    font-size: 1rem;
  }
  .contact-list .col-sm-12 {
    margin-bottom: 1.5rem;
  }
  .contact-list .col-sm-12:last-child {
    margin-bottom: 0rem;
  }

  .ncp-copyright {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .copyright {
    font-size: 1rem !important;
  }
  .ps2-text {
    margin-bottom: 1.5rem !important;
  }
}

/* IPhone 5 Size Portrait */
@media (min-width: 320px) and (max-width: 350px) {

  .h1-responsive {
    font-size: 1.75rem !important;
  }
  .h1 {
    font-size: 1.85rem !important;
  }
  .lead {
    font-size: 1rem !important;
  }

  .slick-prev:before, .slick-next:before {
    font-size: 2rem;
  }

  .team-email a {
    justify-content: center;
    font-size: .85rem;
  }

  .contact-list {
    font-size: 0.85rem;
  }

}