@charset "UTF-8";
/* CSS Document */ 

:root {
  --limelightgreen: #67b945;
  --limelightdark: #18453def;
  --heroDivide: 800%;
}

.fraunces-<uniquifier> {
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "SOFT" 0,
    "WONK" 0;
}


.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.galHeroImg {
  object-fit:cover;
  object-position: center 40%;
  width:100%;
  min-height:100%;
}


@media (max-width:768px) {
  .galHeroImg  {
    height:110%;
  }
}


.navHed {
  height: 90px;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #00000000;
  z-index: 999;
  padding-top: 11px;
  transition:background-color .45s linear, box-shadow .45s linear;
}

.shadowMan {
  box-shadow: 0px 5px 5px #00000011;
}

.text-white {
  color:white!important;
}

.bg-light-gradient {
  background-image: linear-gradient(to bottom, #dfe9f3 0%, #fbfbfbcc  100%);
}

.photo-rotate {
  width:100%;
  overflow-x:hidden;
  position:absolute;
  top:0px;
  height:680px;
  z-index:-222;

}

.heroMan {
  width: 100%;
  height: 680px;
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.54));
  margin-top: 0;
  overflow-x: clip;
  margin-bottom:53px;
}

@media (max-width:768px) {
  .heroMan {
    height:750px;
  }
  .photo-rotate {
    height:750px;
  }
}

@media (min-width:1200px) {
  .heroMan {
    height:800px;
  }
  .photo-rotate {
    height:800px;
  }
  .galHeroImg {
    height:120%;
  }
}

.rotate-man {
  transform:rotate(180deg);
}

#downMan {
  transition:transform .125s linear;
}

@media (max-width:577px) {
  .heroCopyTop {
    transform:scale(.89) translateY(43px);
  }
}

.heroSub {
  width: 100%;
  height: 365px;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  overflow-x: clip;
}

.heroCopy {
  width: 55%;
  text-align: center;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width:991px) {
  .heroCopy {
    width: 100vw!important;
    padding: 30px;
  }
}

.down-arrow {
  display:inline-block;
  height:15px;
  transform:translateY(-1px);
}

.whyChose {
  width: 100vw;
  padding:84px 0;
  background:linear-gradient(90deg, #000000ff, #1a1a1abe 100%), url("images/limelight-photography-utah-dance-photographer-how-it-works.jpg");
  background-size:cover;
  background-position:50% 70%;
}

ol {
  margin:0;
  padding:15px;
}

.social-icon {
  opacity:.64;
  transition:all .125s ease;
}

.social-icon:hover {
  transform:scale(1.1);
  opacity:1;
}

td {
  vertical-align: top;
}

.boldboy {
  font-weight:800;
  -webkit-text-stroke: .25px white; 
}

.rowOne {
  text-align: end !important;
}

.rowTwo {
  width: 950px;
  height: auto;
  overflow: visible;
}

.rowThree {
  text-align: left !important;
}

.no-a {
  text-decoration:none;
  color:white;
  text-transform:uppercase;
}

.footer {
  height: 415px;
  background-color: var(--limelightgreen);
  color: white;
  padding-top: 34px;
  margin-bottom: 0;
}

.footer a {
  color: white;
  text-decoration: none;
  text-transform: uppercase
}

.logoRev {
  width: 350px;
}

.navNav a {
  color: #EBEBEB;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}

.logoMain {
  width:213px;
}

body.lock-scroll-x {
  overflow-x: clip!important;
  /* Optional: prevents page layout shift if the scrollbar disappears */
  scrollbar-gutter: stable; 
}

body.lock-scroll {
  overflow: hidden;
  /* Optional: prevents page layout shift if the scrollbar disappears */
  scrollbar-gutter: stable; 
}

.mobileNav {
  position:fixed;
  top:29px;
  right:33px;
  padding:9px 13px;
  border-radius:3px;
  z-index:9999;
  transition:background-color .25s ease;
}

.mobileNavItem {
  text-decoration:none;
  line-height:3;
  font-size:28px !important;
  color:white!important;
  transition:
    transform .25s linear, 
    opacity .125s linear;
  transform:translateY(0);
  border-bottom:solid thin #00000000;
  cursor:pointer;
  opacity:.7;
}

.mobile-nav-disappear {
/*  opacity:0!important;*/
  transform:translateY(-100vh);
  opacity:0;
}

.mobile-nav-disappear-down {
/*  opacity:0!important;*/
  transform:translateY(100vh);
  opacity:0;
}

.moblie-nav-gal-move {
  transform:translateY(-85px)!important;
}

.div-nav-items {
  transition:all .25s ease;
  transform:translateY(13px) scale(.92);
}

.mobile-underline span {
  border-bottom:solid thin white;
  padding-bottom:13px;
  opacity:1;
}

#mobileMenuIcon {
  transform:rotate(0deg);
  transition: transform .13s linear;
  z-index:9999;
}

.mobile-menu-modal {
  position:fixed;
  width:100vw;
  height:100dvh;
  background-color:#2b2b2bbf;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(11px);
  transform:translateY(-200%);
  top:0;
  left:0;
  z-index:3333;
  transition: transform .2s ease;
}

@media (min-width:768px) {
  .mobile-menu-modal {
    transition:transform 0s linear;
  }
}

.rotate-menu {
  transform:rotate(45deg)
}

.mobile-bottom {
  position:absolute;
  bottom:15px;
  width:100%;
}

.mobileNav:hover {
  background-color:#00000022;
}

.mobile-nav-sub-nav {
  position:absolute;left:0;top:0;z-index:2222!important;
  transition: translateY(15px) transform .2s ease;
}

.mobileNavItem:hover .mobile-nav-span {
  border-bottom:solid thin white;
  padding-bottom:13px;
  opacity:1;
}

@media (max-width:576px) {
  .mobileNav {
    top:21px;
    right:21px;
  }
}

@media (max-width:992px) {
  .logoMain { 
    transform:scale(80%) translateY(-8px) translateX(-11px);
  }
}

@media (max-width:768px) {
  .logoMain { 
    width:213px;
    transform:unset;
  }
}

@media (max-width:567px) {
  .logoMain { 
    transform:scale(86%) translateY(-8px) translateX(-11px);
  }
}

.heroCopyTop {
  padding-bottom:66px;  
}

.galHeroImg {
  object-fit:cover;width:100%;min-height:680px;
}

.navHed a {
  color: #8E8E8E;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.navigation a {
  opacity:1;
  color: rgba(99, 99, 99, 0.65);
}

.navigation a:hover {
  color: rgba(99, 99, 99, 1.00);
  opacity:1;
}

.navNav a:hover {
  color:white !important;
}

#navStuff {
  padding:0 88px;
}

.navStuff {
  padding:0 88px;
}

@media (max-width:864px) {
  #navStuff {
    padding:0 30px;
  }
  .navStuff {
    padding:0 30px;
  }
}

@media (max-width:576px) {
  #navStuff {
    padding:0;
  }
  .navStuff {
    padding:0;
  }
}

body {
  font-family: Lato, sans-serif;
  font-size: 13px;
  line-height: 27px;
  font-weight: 400;
  color: #979797;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: Montserrat, sans-serif;
  font-size: 36px;
  line-height: 1.31em;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-family: Montserrat, sans-serif;
  font-size: 28px;
  line-height: 1.31em;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

@media (max-width:576px) {
  h2 {
    font-size:21px;
  }
}

h4 {
  font-family: Montserrat, sans-serif;
  font-size: 17px;
  line-height: 1.4em;
  font-weight: 500;
  letter-spacing: 0em;
  text-transform: uppercase;
  color: black
}

.limeBtn {
  color: white;
  margin-top:22px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  letter-spacing: 2px;
  font-size:13px;
  background-color: var(--limelightgreen);
}

.limeBtn:hover {
  border:solid thin white;
  color:white;
}

.limeBtn-secondary {
  margin-top:22px;
  border:solid thin var(--limelightgreen);
  color:var(--limelightgreen);
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size:13px;
  letter-spacing: 2px;
}

.limeBtn-secondary:hover {
  border-color:white;
}

.limeBtn-secondary-2 {
  margin-top:22px;
  border:solid thin var(--limelightgreen);
  color:var(--limelightgreen);
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size:13px;
  letter-spacing: 2px;
}

.limeBtn-secondary-2:hover {
  background-color:var(--limelightgreen);
  color:white;
}

.rowMan {
  height: 180px;
}

@media (max-width:992px) {
  .rowMan {
    height: auto;
    padding-bottom:33px;
  }
}

.arrowMan {
  transform:translateY(-1.5px);
  display:inline-block;
}
.rotate {
  transform:rotate(180deg);
}

.navigate {
  color:white!important;
}

.menuSec {
  color: white !important;
  background-color: var(--limelightgreen);
  opacity:1!important;
}

.menuSec:hover {
  color: rgba(56, 56, 56, 1.00) !important;
}

.contactIco {
  opacity: 1;
}

.contactIco a:hover {
  opacity: .75;
}

.subNav {
  width: 300px;
  position: absolute;
  transform: translateX(105px);
  top: 90px;
  background-color: white;
  max-height:0px;
  overflow-y:clip;
  transition:all .25s linear;
  opacity:0;
}

.subNav-top {
  width: 250px;
  position: absolute;
  transform: translateX(130px);
  top: 70px;
  max-height:0px;
  overflow-y:clip;
  opacity:0;
  transition:all .25s linear;
}


.subNav .navItem {
  color: #8E8E8E;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: left;
  padding:1rem 1rem;
}

.subNav-top .navItem {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: left;
  padding:.69rem;
  opacity:.8
}

.subNav-top .navItem:hover {
  opacity:1;
}


.subNav .navItem:hover  {
  color: white;
  background-color: var(--limelightgreen);
}

.subNav-top .navItem:hover  {
  color: white;
  text-decoration:underline;
  text-underline-offset: 8px;
}

.navHide {
  display: block !important;
  max-height:310px;
  opacity:1;
}

#galBtn {
  cursor: pointer;
}

.heroImg {
  position: absolute;
  top: 90px;
  height: 55vh;
  width: 100vw;
  z-index: -2;
  overflow-x: clip;
}

.topper {
  background:black;
  color:white;
  font-size:12px;
  margin-bottom:13px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  letter-spacing: 2px;
  border-radius:88px;
  cursor:default
}

#heroGallery {
  height:680px;
  width:var(--heroDivide);
  transition: transform .25s ease-in-out;
}

.gal1 {
  max-width:85% 
}

.grid-container {
      display: grid;
      /* Creates 3 columns: 200px, remaining fluid space split 3 ways (2/3 and 1/3) */
      grid-template-columns: 33.33% 33.33% 33.333%;
      padding:0;
    }
    
    @media (max-width:992px) {
      .grid-container {
        display:inline-block;
        width:49%;
      }
    }
    
    @media (max-width:767px) {
      .grid-container {
        display:block;
        width:100%
      }
      
      .about-img {
        width:100%!important;
      }
    }


    
    .mobile-img1 {
      height:auto;
    }
    
    .about-img {
      width:150%;
      z-index:-1;
      position:relative;
      left:50%;
      transform:translateX(-55%);
      margin-bottom:-29px;
      margin-top:-49px;
    }
.about-img-desktop {
  width:150%;
  position:relative;
  left:50%;
  top:50%;
  transform:translate(-50%, -57%) scale(1);
  z-index:-1;
  
}

.img-about {
  transform:translateX(-50%) translateY(-53%);
  position:relative;
  left:50%;
  top:50%;
  z-index:-5555;
}

@media (max-width:768px) {
  .img-about {
    max-height:622px !important;
  }
}

@media (max-width:864px) {
  .img-about {
    max-height:800px;
  }
}

.spacey {
  min-height:44px;
}

.centerThis {
  text-align: left;
}
.centerThis2 {
  text-align: left;
}

@media(max-width:769px) {
  .centerThis2 {
    text-align: center
  }
}

@media (max-width:992px) {
  .centerThis {
    text-align:center;
  }
}

.modal-open {
  overflow: scroll;
  margin:0;padding:0;
}

.testimonials {
/*  height:350px;*/
}


.testTxt {
  width:inherit;
  max-width:789px
}

.testimonialTxt {
/*  padding:3rem;*/
  width:33.33%;padding:2em;
}

@media (max-width:864px) {
  
}

.testBtn {
  transition:all .125s linear;
  transform:translateY(0);
  cursor:pointer;
}

.testBtn:hover {
  opacity:.65;
  transform:scale(.94) translateY(0);
  transition:all .25s ease;
}

.bigMan {
  font-size:19px;
  line-height:2;
  font-family: "Fraunces", serif;
  font-weight:300;
  color:#3f3f3f;
}

.smallMan {
  font-size:13px;
  color:#3d3d3d
}


.gal-photo-dance {
  background:pink;
  aspect-ratio:3 / 2;
  cursor:pointer;
  background-size:cover;
  background-repeat:none;
}

.gal-photo-gymnastics {
  background:pink;
  aspect-ratio:3 / 2;
  cursor:pointer;
  background-size:cover;
  background-repeat:none;
}

.gal-photo-team {
  background:pink;
  aspect-ratio:3 / 2;
  cursor:pointer;
  background-size:cover;
  background-repeat:none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li::marker {
  display: none; /* or content: ""; */
}

.gallery-modal {
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.56);
  position:fixed;
  top:0;
  left:0;
  z-index:111111;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  align-self:center;
  opacity:0;
  transition:all .25s linear;
}

.modal-exit {
  position:absolute;
  right:25px;
  top:25px;
  opacity:.65;
  transition: all .125s linear;
  z-index:999999;
}

.modal-exit:hover {
  opacity:1;
  transform:scale(1.04);
}

.tab-mother {
  background-color:white;
  outline:5px solid white;
  max-width:max-content;
  margin:auto;
  padding:0;
  margin-bottom:45px;
  transform:scale(1.1);  
  border-bottom:.125px solid grey;
}

.gal-tab {
  padding:8px 11px;
  cursor:pointer;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  letter-spacing: 2px;
  font-size:13px;
  color:#bababa;
  text-shadow: 
    -.125px -.125px 0 #bababa,  
     .125px -.125px 0 #bababa,
    -.125px  .125px 0 #bababa,
     .125px  .125px 0 #bababa;
  transition:all .125s linear;
  border-bottom:none;
}

.gal-tab:hover {
  color:var(--limelightgreen);
  opacity:.8;
  background-color: #67b9453d;
  text-shadow: 
    -.25px -.25px 0 var(--limelightgreen),  
     .25px -.25px 0 var(--limelightgreen),
    -.25px  .25px 0 var(--limelightgreen),
     .25px  .25px 0 var(--limelightgreen);
}

@media (max-width:586px) {
  .tab-mother {
    transform:scale(0.95);
  }
  .gal-tab {
    padding:8px11px;
  }
}

.tab-active {
  border-bottom:solid 3px var(--limelightgreen);
  color:var(--limelightgreen);
    -.25px -.25px 0 var(--limelightgreen),  
     .25px -.25px 0 var(--limelightgreen),
    -.25px  .25px 0 var(--limelightgreen),
     .25px  .25px 0 var(--limelightgreen);
  transition:all .125s linear;
}

.gal-nav {
  opacity:.5;
  transition:opacity .125s linear;
}

.gal-nav:hover {
  opacity:1;
}

.how-it-works-img {
  background-image:url("images/limelight-photography-utah-dance-photographer-09103.jpg");
  background-size:cover;
  background-position:center center;
    min-height:600px;
}


.accordion {
--bs-accordion-btn-focus-box-shadow:default;  
  --bs-accordion-active-bg: #f6f6f6;
}