/*
Starts Mobile First and Media Queries move upwards to mid-size/tablet to large/desktop.
Media Queries are with their site/page sections at the moment for ease of editing.
*/
.wrapper {
  min-height: calc(100vh - 0px); /*-80px for the DNN Edit Bar - Otherwise you can't see the footer content to edit*/
}
.wrapper {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
  margin: 0 0 8% 0;
}

footer {
  flex-shrink: 0;
}

/***************************************************************************** Header */
header {
  display: flex;
  flex-wrap: wrap;
}

/***************************************************************************** Logo Container & Style CSS */
.logo-section {
  flex-basis: 40%;
  display: flex;
  justify-content: center;
  order: 2;
}

/* DNN Logo */
#dnn_dnnLOGO_hypLogo {
  margin: 8px 0 !important;
}

#dnn_dnnLOGO_imgLogo {
  vertical-align: unset;
  max-width: 115px;
}

/***************************************************************************** Action Menu Container & Style CSS  - Register, Login, Donate, Cart Icon - etc. */
.action-menu {
  flex-basis: 100%;
  display: none;
  justify-content: flex-end;
  align-items: center;
  order: 1;
  background-color: #2c526c;
}

.action-menu div {
  flex-basis: 100%;
  margin: 8px 0;
  display: flex;
  justify-content: flex-end;
}

.action-menu div a {
  padding: 0 24px 0 0;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}

.action-menu .last-name {
  display: none;
}

/* Buttons and not Cart Icon */
.action-menu div a {
  font-family: "Open Sans", sans-serif !important;
}

/***************************************************************************** Main Navigation  - DNN Menu Containter & Style - Add/Remove menu items via DNN */
.main-nav {
  flex-basis: 60%;
  font-size: 16px;
  display: flex;
  align-items: center;
  order: 3;
  min-height: 123px;
  max-height: 125px;
}

.main-nav .main-menu ul {
  background-color: transparent;
}

/********************************* Mobile Header - 3 bar/hamburger menu + Cart icon - Both Font Awesome 4 (Free) embedded in indexHome.ascx <link/> */
.main-nav .mobile-menu-header {
  flex-basis: 80%;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 10000;
}

.main-nav .main-menu {
  flex-basis: 100%;
  display: none;
}

.main-menu div div {
  display: flex;
  justify-content: center;
}

.nav > li ul {
  width: unset;
  padding: 0;
}

.nav > li ul li {
  margin-bottom: unset;
  font-size: unset;
  line-height: unset;
}

.main-menu div div .nav {
  flex-basis: 100%; /* squeeze the menu */
  display: flex;
  justify-content: space-between;
}

.main-menu div div .nav li {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 12px 24px !important;
}

.main-menu div div .nav li a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-menu div div .nav li a span {
  color: #4f5861 !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 900;
}

.main-menu div div .nav li:hover,
.main-menu div div .nav li.active,
.dropdown-menu li:hover {
  background-color: #2c526c;
}

.main-menu div div .nav li a:hover {
  cursor: pointer;
}

.main-menu div div .nav li a:focus {
  background-color: transparent;
}

/********************************* Sub Menu - on <li> hover */

.main-menu div div .nav li ul {
  position: absolute;
  top: 100%;
  left: 0;
  margin-left: 0;
  width: 100%;
}

.main-menu div div .nav li ul li {
  padding: 12px 4px !important;
  background-color: #86913e !important;
}

.main-menu div div .nav li ul li:hover {
  opacity: 0.9;
}

.main-menu div div .nav li ul li a span {
  font-weight: 400;
  font-size: 14px;
  line-height: unset;
}

.main-menu div div .nav li ul li:hover {
  cursor: pointer;
}

.main-menu div div .nav li ul li ul.side-dropdown-menu li ul.side-dropdown-menu {
  display: none;
}

.main-menu div div .nav li ul li ul.side-dropdown-menu li:hover ul.side-dropdown-menu {
  display: block;
}

/* For Desktop - Second Level "Side" Dropdown */
/* !important to win out over Materialize */

.side-dropdown-menu {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
}

.side-dropdown-menu li {
  display: none !important;
}

.main-menu div div .nav li ul li:hover .side-dropdown-menu li {
  display: block !important;
}

/********************************* Cart CSS */

.main-menu div div .nav li a[href*="Cart"] span {
  visibility: hidden;
}

.main-menu div div .nav li a[href*="Cart"] span::before {
  visibility: visible;
  font-family: FontAwesome;
  font-size: 32px;
  color: #2c526c;
  content: "\f07a";
}

.main-menu div div .nav li a[href*="Cart"]:hover span::before {
  color: #4f5861 !important;
}

.main-menu div div .nav li:hover a span,
.main-menu div div .nav li a:hover span {
  color: #fff !important;
  text-align: center;
}

.main-menu div div .nav li:last-child:hover {
  background-color: #fff;
}

.main-nav .mobile-menu-header button i,
.main-nav .mobile-menu-header .cart i {
  font-size: 42px;
  color: #4f5861;
  cursor: pointer;
}

.main-nav .mobile-menu-header button i:hover,
.main-nav .mobile-menu-header .cart i:hover {
  opacity: 0.8;
}

/*  End Cart */

/***************************************************************************** Header Media Queries | Tablet - Desktop */
@media only screen and (min-width: 1080px) {
  .action-menu {
    display: flex;
  }

  .main-nav .main-menu {
    display: block;
  }

  .main-nav .mobile-menu-header {
    display: none;
  }

  .logo-section {
    flex-basis: 12.5%;
  }

  .action-menu div a {
    padding: 0 48px 0 0;
    font-size: 16px;
  }

  .main-nav {
    flex-basis: 87.5%;
  }

  .main-menu div div ul li a span {
    font-size: 14px;
  }
}

@media only screen and (min-width: 1350px) {
  .main-menu div div ul li a span {
    font-size: 18px;
  }
}

@media only screen and (min-width: 1650px) {
  .action-menu div a {
    font-size: 22px;
  }

  .main-menu div div ul li a span {
    font-size: 24px;
  }

  .main-menu div div .nav li ul li a span {
    font-size: 16px;
  }
}

/*****************************************************************************  Breadcrumb and Page title */
#pageHeader {
  margin: 0 auto;
  padding: 12px 0;
  width: 100%;
  font-size: 16px !important;
  border-bottom: 1px dashed rgb(235, 235, 235);
}

.page-header-wrap {
  margin: 0 auto;
  max-width: 85%;
  display: flex;
  flex-wrap: wrap;
}

.page-header-wrap .breadcrumbs {
  flex-basis: 100%;
  order: 1;
}

.page-header-wrap h1 {
  flex-basis: 100%;
  order: 2;
  padding: 0;
  font-family: "Open Sans", sans-serif !important;
  font-size: 2em;
  line-height: initial;
  letter-spacing: -1px;
  font-weight: 600;
  color: #000;
  text-transform: unset;
}

@media only screen and (min-width: 1080px) {
  .page-header-wrap h1 {
    font-size: 3em;
  }
}

/* Overwrite - Force breadcrumb to show - Only happening on certain pages/layouts */
.breadCrumbs {
  margin: 0;
}

.layoutHome .breadcrumb {
  display: unset !important;
}

.page-header-wrap a {
  color: #000;
}

/* Main element - Found in  */

main .gutters {
  margin: 0 auto;
  max-width: 84%;
}

#mainContent {
  max-width: 100%;
  width: 100%;
  float: none;
}

.content-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/*********************************************************************************Hero */
/* Page Heros - Home Hero see below */
#hero {
  position: relative;
  width: 100%;
}

#hero img {
  position: relative;
  z-index: 1;
  width: 100%;
}

#heroText {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#heroText h1 {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 50px;
  line-height: 50px;
  font-family: "Open Sans", sans-serif !important;
}

@media only screen and (min-width: 768px) {
  #heroText h1 {
    font-size: 70px;
  }
}

/*  Home Page Hero */
#heroHome {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

#heroHome img {
  position: relative;
  z-index: 1;
  width: 100%;
}

#heroHome #heroText {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  /* padding: 8% 0 0 4%; */
}

#heroHome #heroText {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
  height: 75%;
}

#heroHome h1 {
  flex-basis: 80%;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  color: rgb(44, 82, 108);
  letter-spacing: 0px;
  text-align: unset;
}

#heroHome .hero-mission {
  flex-basis: 80%;
}

#heroHome p {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: rgb(79, 88, 97);
  max-width: 80%;
  display: none;
}

#heroHome .hero-button {
  flex-basis: 80%;
  margin: 32px 0 0 0;
}

#heroHome .hero-button a {
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  color: rgb(255, 255, 255);
  font-family: "Open Sans", sans-serif !important;
  background-color: rgba(134, 145, 62, 0.75);
  border-color: rgb(79, 88, 97);
  border-radius: 30px;
  outline: none;
  box-shadow: rgb(153, 153, 153) 0px 0px 0px 0px;
  box-sizing: border-box;
  cursor: pointer;
  visibility: inherit;
  transition: none 0s ease 0s;
  text-align: inherit;
  margin: 0px;
  padding: 8px 26px;
  letter-spacing: 0px;
}

#heroHome .hero-button a:hover {
  background-color: rgb(255, 189, 89);
  color: rgb(44, 82, 108);
}

@media only screen and (min-width: 768px) {
  #heroHome h1 {
    font-size: 40px;
  }

  #heroHome p {
    display: block;
    margin: 20px 0 12px 0;
  }
}

@media only screen and (min-width: 1200px) {
  #heroHome h1 {
    font-size: 60px;
  }

  #heroHome p {
    margin: 32px 0 24px 0;
    font-size: 24px;
    line-height: 36px;
    max-width: 60%;
  }
  #heroHome .hero-button a {
    font-size: 22px;
    padding: 12px 35px;
  }
}

/***************************************************************************** Society Footer  */

footer {
  margin: 0;
  padding: 100px 0 20px 0;
  background-color: #86913e;
  display: flex;
  justify-content: center;
}

.footer-wrap {
  flex-basis: 90%;
  display: flex;
  flex-wrap: wrap;
}

.footer-logo {
  flex-basis: 100%;
  margin: 0 0 30px 0;
}

footer #dnn_dnnLOGO_imgLogo {
  max-width: 135px;
}

.footer-logo img {
  padding: 8px;
  background-color: #fff;
}

.footer-menu {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-start;
}

.footer-menu .footer-links {
  display: flex;
  flex-wrap: wrap;
}

.footer-menu .footer-links span {
  flex-basis: 33%;
  padding: 0 0 22px 0;
}

.footer-menu .footer-links span a {
  width: auto;
  color: #fff;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}

.footer-social {
  flex-basis: 100%;
  margin: 15px 0 0 0;
}

.footer-social h5 {
  margin: 0 0 12px 0;
  color: #fff;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 1px;
}

.footer-social a {
  margin: 0 24px 0 0;
}

.footer-social a i {
  color: #fff;
  font-size: 28px;
}

.footer-menu .containerSolpart,
.footer-social .containerSolpart {
  display: none;
}

.footer-copyright {
  padding: 40px 0 0 0;
  flex-basis: 100%;
  display: flex;
  justify-content: flex-start;
}

.footer-copyright p {
  flex-basis: auto;
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 300;
}

@media only screen and (min-width: 1080px) {
  .footer-logo {
    flex-basis: 27.5%;
  }

  .footer-menu {
    flex-basis: 45%;
    justify-content: center;
  }

  .footer-social {
    flex-basis: 27.5%;
    margin: 0;
  }

  .footer-social .social-links {
    width: 60%;
    margin: 0 auto;
  }

  .footer-copyright {
    padding: 100px 0 0 0;
    justify-content: center;
  }
}

@media only screen and (min-width: 1350px) {
  .footer-wrap {
    flex-basis: 80%;
  }

  .footer-logo {
    flex-basis: 30%;
  }

  .footer-menu {
    flex-basis: 40%;
    justify-content: center;
    padding: 0;
  }

  .footer-social {
    flex-basis: 30%;
  }

  .footer-social .social-links {
    width: 60%;
    margin: 0 auto;
  }

  .footer-copyright {
    padding: 100px 0 0 0;
    justify-content: center;
  }
}

@media only screen and (min-width: 1450px) {
  .footer-social h5 {
    font-size: 18px;
  }
  .footer-menu .footer-links span a {
    font-size: 22px;
  }

  .footer-social a i {
    color: #fff;
    font-size: 42px;
  }
}
/* End Society Footer */

/********************************************************************* YouTube Video */
/* Wrap youtube video in div with class="youtube-video" and then a child div around the iframe */
/*  The below setup holds the aspect ratio to 16:9 */

.youtube-video div {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.youtube-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* End YouTube */

.productDetails .pricingCell.highlight {
  z-index: 99 !important;
}