/* Global Styles */
@primary: #2264A8;
@secondary: #3DA5D9;
@muted: #Fbfbfb;
@white: #fff;
@black: #000;
@highlight: #fec62f;
@gray: #ccc;
@dark-gray: #777;
@light-gray: #e0e0e0;
@dark-primary: #004276;
@trans-primary: rgba(0, 66, 118, .9);
@trans-highlight: rgba(254, 198, 47, .9);

a {
  font-weight: 600;
}

.trans-primary-grad {
  background: rgb(34,100,168);
  background: linear-gradient(90deg, rgba(34,100,168,0.8519782913165266) 35%, rgba(34,100,168,0.5214460784313726) 59%, rgba(34,100,168,0) 84%);
}

h1 {
  margin-bottom: 30px;
}

h1 span:nth-child(2) {
  position: relative;
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 20px;
  text-transform: none;
  font-weight: 400;
}

h1 span:nth-child(2):after {
    position: absolute;
    content: "";
    background: @highlight;
    width: 100%;
    height: 2px;
    top: -10px;
    left: 50%;
    transform: translatex(-50%);
}

.dark-primary-bg {
    background: @dark-primary;
}

.large-icon svg {
    width: 40px;
    height: 40px;
    padding: 5px;
    background: @secondary;
    border-radius: 50%;
}

.h2-margin-bottom {
    margin-bottom: 30px!important;
}

.h2-line-below-left {
    position: relative;
}

.h2-line-below-left:after {
    position: absolute;
    content: "";
    background: @highlight;
    width: 70px;
    height: 4px;
    bottom: -15px;
    left: 0;
}

.h2-line-below-center {
    position: relative;
}

.h2-line-below-center:after {
    position: absolute;
    content: "";
    background: @highlight;
    width: 70px;
    height: 4px;
    bottom: -15px;
    left: 50%;
    transform: translatex(-50%);
}

.border-bottom-secondary {
    border-bottom: 4px solid @secondary;
}

.tm-main a {
    font-weight: bold;
}
/* End Global Styles */

/* Header Menu Styles */
.uk-nav.uk-navbar-dropdown-nav {
  padding: 0;    
}

.uk-navbar {
    justify-content: right;
}

.uk-navbar-dropdown-grid>div>ul {
  border-top: 1px solid @light-gray;
  border-bottom: 4px solid @primary;
}

.uk-nav > li > a {
  padding: 7px 15px;
}

.uk-nav > li:hover > a {
  background: @secondary;
  color: @white;
  transition: .4s;
}

.uk-navbar-dropdown-nav > li.uk-active > a {
  border-left: 10px solid @secondary;
}

.uk-navbar-dropdown {
  box-shadow: 0 10px 12px rgba(0, 0, 0, 0.15);
}

.uk-navbar-dropdown-nav .uk-nav-sub a {
  padding: 7px 15px;
}

.uk-navbar-dropdown-nav li.uk-parent > a:hover:after {
  color: @white!important;
}

#tm-mobile .toggle_sub, #tm-mobile .uk-nav > li > a, #tm-mobile>div .uk-nav>li.uk-active>a:hover {
  color: #8b8b8b;
}

// .uk-navbar-nav > li:not(:last-child) > a {
//     position: relative;
//  }

// .uk-navbar-nav > li:not(:last-child) > a:after {
//     position: absolute;
//     content: "";
//     background: @primary;
//     width: 1px;
//     height: 25px;
//     right: 0;
// }

.uk-navbar-container .uk-navbar-left .uk-navbar-nav {
    margin: 0 0 0 auto;
}

@media only screen and (max-width: 1000px) {
  .upper-cta .uk-button-secondary {
      font-size: .75rem;
      transition: .4s;
  }
}

.tm-header-mobile .uk-navbar-container {
    background: @primary;
}
/* End Header Menu Styles */

/* Header Styles */
.upper-link {
    position: relative;
}

.upper-link:after {
    position: absolute;
    content: "";
    background: @white;
    height: 45px;
    width: 1px;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
}

.tm-headerbar-top {
  background: linear-gradient(90deg, rgba(255,255,255,1) 40%, rgba(34,100,168,1) 65%);
  z-index: 2000;
}

.tm-headerbar-top > .uk-container {
  position: relative;
}

.tm-headerbar-top > .uk-container .uk-logo {
  position: absolute;
  left: 0;
  bottom: -15px;
  z-index: 1;
}

.tm-headerbar-top > .uk-container .uk-logo:before {
  position: absolute;
  content: "";
  background: url(nativerank.dev/rocky-mountain-pool-builders/wp-content/uploads/2022/01/bg-logo-wave.svg);
  width: 3000px;
  height: 102px;
  top: 42px;
  right: -40px;
  transform: translateY(-50%);
  z-index: -1;
}

.tm-headerbar-top > .uk-container .uk-logo img {
  width: 450px;
}

@media (max-width: 1383px) {
  .tm-headerbar-top > .uk-container .uk-logo {
    position: absolute;
    left: 0;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 1;
  }  
  .tm-headerbar-top > .uk-container .uk-logo:before {
    display: none;
  }
  .uk-navbar-nav>li>a {
    font-size: .9rem;
  }
}

.tm-header {
  z-index: 1000;
}
/* End Header Styles */

/* Frontpage Styles */
.hero-overlay {
    border-radius: 3px;
}

.product-card-grid .el-link:hover h5 {
    color: @secondary;
    transition: .4s;
}

.product-card-grid .uk-card-default {
    border: 1px solid @light-gray;
    background: @white;
}

.product-card-grid .uk-card-media-top {
    border-bottom: 1px solid @light-gray;
}

.product-card-grid .uk-card-body {
    border-bottom: 4px solid @secondary;
}

.product-card-grid a h3 {
    transition: .4s;
}

.product-card-grid a:hover h3 {
    color: @primary;
    transition: .4s;
}

.product-card-grid .uk-card-body {
    position: relative;
}

.product-card-grid .uk-card-body .card-arrow {
    position: absolute;
    content: "";
    bottom: -17px;
    left: 50%;
    transform: translatex(-50%);
}

.uk-position-small svg {
    width: 50px;
    height: 50px;
    padding: 8px;
    background: @secondary;
    color: @white;
}

.card-arrow svg {
    background: @highlight;
    border-radius: 50%;
    height: 30px;
    width: 30px;
}

.booster-card-grid .uk-card-default {
    border: 1px solid @light-gray;
    background: @white;
}

.booster-card-grid .uk-card-body {
    border-bottom: 4px solid @secondary;
}

.booster-card-grid a h3 {
    transition: .4s;
}

.booster-card-grid a:hover h3 {
    color: @primary;
    transition: .4s;
}

.booster-card-grid .uk-card-body {
    position: relative;
    z-index: 2;
}

.booster-card-grid .uk-card-body .card-arrow {
    position: absolute;
    content: "";
    bottom: -17px;
    left: 50%;
    transform: translatex(-50%);
}

.outside-arrows {
    margin-bottom: -30px;
}

.booster-slider-arrow svg {
    width: 50px;
    height: 50px;
    padding: 8px;
    background: @secondary;
    color: @white;
}
/* End Frontpage Styles */

/* Footer Styles */
.mobile-cta {
  display: none;
}

@media only screen and (max-width: 960px) {
  .mobile-cta {
      display: flex;
      position: fixed;
      top: 82px;
      left: 0;
      border-radius: 0;
      width: 100%;
      z-index: 555;
  }
  .mobile-cta a {
      padding: 0;
      border-radius: 0;
      border: .5px solid @white;
  }
//   .tm-main {
//       margin-top: 46px;
//   }  
}

#footer .uk-divider-small {
    border-top: 4px solid @highlight;
    max-width: 75px;
}

#footer .thin-yellow {
    border-top: 1px solid @highlight;
}

.mobile-cta {
  display: none;
}

@media only screen and (max-width: 960px) {
  .mobile-cta {
      display: flex;
      position: fixed;
      top: 40px;
      left: 0;
      border-radius: 0;
      width: 100%;
      z-index: 555;
  }
  .mobile-cta a {
      padding: 0;
      border-radius: 0;
      border: .5px solid @white;
  }
  .tm-main {
      margin-top: 47px;
  }  
}
/* End Footer Styles */

/* Mainpage Styles */
.yellow-bg {
    background: @highlight;
    transition: .4s;
}

.yellow-bg h3 {
    color: @black!important;
    transition: .4s;
}

.yellow-bg:hover {
    background: @secondary;
    transition: .4s;
}

.yellow-bg:hover h3 {
    color: @white!important;
    transition: .4s;
}

.children-slider svg {
    background: @secondary;
    border-radius: 3px;
    height: 50px;
    width: 50px;
}

.children-slider .uk-position-center-left-out {
    margin-right: -20px;
}

.children-slider .uk-position-center-right-out {
    margin-left: -20px;
}

.children-slider .uk-position-center-left {
    margin-left: -10px;
}

.children-slider .uk-position-center-right {
    margin-right: -10px;
}

.children-slider .uk-card-default:hover {
    background: @secondary;
    transition: .4s;
}

.children-slider .uk-card-default:hover h3 {
    color: @white;
    transition: .4s;
}
/* End Mainpage Styles */

/* Subpage Styles */
.nr-content .uk-card.uk-card-default.uk-card-body.uk-margin {
  border-bottom: 4px solid @highlight;
}

aside nav > a h3 {
  background: @secondary;
  padding: 10px;
  color: @white!important;
}

aside nav ul {
  background: @white;
  margin-top: 10px;
  border-left: 3px solid @primary;
}

aside nav ul li {
  padding: 3px 10px;  
}

aside nav ul li a {
  color: @secondary;  
}

.widget-menu {
  box-shadow: 0 4px 4px 0 rgba(0,0,0,.15);
  background: @white;
}

.widget-menu .uk-list {
  margin-top: 0;
}

.widget-menu h3 {
  margin-bottom: 0;
}
/* End Subpage Styles */

/* Misc Styles */
#serviceMap {
  z-index: 0;
}

.service-list li {
  font-weight: bold;
}

.service-list a {
  text-decoration: none;
  border-bottom: 1px solid @secondary;
  line-height: 1.6;
}

.service-list a:hover {
  border-bottom: 1px solid @white;
}

.gallery-card a .uk-overlay-primary {
    background: rgba(0,0,0,0);
    transition: .4s;
}

.gallery-card a:hover .uk-overlay-primary {
    background: @trans-highlight;
    transition: .4s;
}

.gallery-card a .cross-icon {
    display: none;
    transition: .4s;
}

.gallery-card a:hover .cross-icon {
    display: block;
    color: @primary;
    transition: .4s;
}

.pool-supply-section .uk-position-small {
    margin: 0;
}

.pool-supply-section .uk-position-center-left-out {
    margin-right: -20px;
}

.pool-supply-section .uk-position-center-right-out {
    margin-left: -20px;
}
/* End Misc Styles */