@media screen and (min-width: 375px) {
  .top-nav {
    display: none;
  }
  .shopping-icon {
    display: block;
    padding: 0px !important;
    transform: translateX(-15px);
  }
  .menu-links a:nth-child(1),
  .menu-links a:nth-child(2),
  .menu-links a:nth-child(3) {
    display: none;
  }


}
@media screen and (max-width: 375px) {
  .glide__arrow--right{
    right: 1em;
  }
  .glide__arrow--left{
    left: 1em;
  }
}



@media screen and (max-width: 600px) {
  .hero-slider .carousel-cell .inner .title {
    font-size: 30px !important;
  }
  .hero-slider .carousel-cell .inner p {
    font-size: 12px !important;
  }
  
  .title-section .title-content p{
    font-size: 12px;
  }
  .title-section .title-content h1{
    font-size: 32px;
  }
  .bottom-icons-container{
    max-width: 90% !important;
  }
  .bottom-icons{
    height: 40rem;
  }
  .fc-col-header-cell,
  .fc-timeGridWeek-button,
  .fc-timeGridDay-button,
  .fc-dayGridMonth-button,
  .fc-today-button,
  .fc-next-button,
  .fc-prev-button,
  .fc-event-title-container,
  .fc-day-header{
    color: white;
    padding: .6rem !important;
    font-size: 10px !important;
  }

  .fc-toolbar h2{
    font-size: 18px !important;
  }


}

@media screen and (min-width: 768px) {
  .shopping-icon {
    display: none !important;
  }
  .hamburger {
    display: none !important;
  }
  .menu-links a:nth-child(1),
  .menu-links a:nth-child(2),
  .menu-links a:nth-child(3) {
    display: block;
  }
  .left-section{
    padding-right: 4rem !important;
  }
}

@media screen and (min-width: 600px) and (max-width: 992px) {
  .bottom-icons{
    height: 20rem;
  }
   .about-page .bottom-icons{
      height: 100% !important;
   }
  .bottom-icons-container{
    max-width: 50% !important;
  }

}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .training-card-text{
    height: 26rem;
  }
}

@media screen and (max-width: 768px) {
  .footer-text{
    width: 80% !important;
    margin-top: 3rem !important;
  }
  .footer-content{
    width: 80% !important;
    margin: auto;
  }
  .training-info{
    text-align: center;
  }
  .stories h1,
  .training-title h1{
    padding: 0rem 1rem;
  }
  .left-section{
    padding: 0 15px !important;
  }
  .event-details .container .row,
  .about-page .container .row{
    margin: 0;
  }
  .about-page .side-container-events{
    margin-bottom: 3rem;
    margin-top: 2rem;
  }

  .about-page .side-containers p{
    margin-top: 1rem;
  }

  .about-page .training-info p{
    padding: 1rem !important;
  }
  .about-right{
    padding-left: 0 !important;
  }
  .mission-content{
    width: 90%;
  }
  .side-container-events{
    height: unset !important;
  }
  .contact-cards .col-sm-12{
    max-width: 90%;
  }
  .contact-card{
    height: 29rem;
  }
  #mobile-calendar{
    display: block;
    max-width: 1300px;
    padding: 3rem 0rem;
  }
  #calendar{
    display: none;
  }
  #mobile-calendar .fc-event {
    display: table-row;
  }
  .grid-50{
   display: block;
  }
   .about-page .bottom-icons{
       display: block;
  }

    .stories .glide__arrow--left,
    .training .glide__arrow--left{
      left: -7% !important;
    }

    .stories .glide__arrow--right,
    .training .glide__arrow--right{
      right: -7% !important;
    }
.stories .glide__arrow i, .training .glide__arrow i{
   font-size: 50px !important;
}
}


@media screen and (min-width: 992px) {
  .navbar-toggler{
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.1);
    background-color: transparent !important;
  }
  .navbar-toggler button:hover{
    background-color: transparent !important;
  }
  .bottom-icons-container{
    max-width: 21.74% !important;
  }
  .navbar-expand-lg .navbar-collapse{
    max-height: 8rem;
  }
  .contact-cards .col-lg-3{
    max-width: 22%;
  }

}

@media screen and (min-width: 1024px) {
  .top-nav {
    display: flex;
  }
  .mobile-search {
    display: none !important;
  }
}

@media screen and (max-width: 992px) {
  .nav-desktop{
    display: none;
  }
  .nav-mobile{
    display: flex !important;
  }
  .navbar{
    padding: 0rem !important;
  }
  .navbar-brand{
    padding: 0;
    width: 35%;
  }
  .navbar-brand img{
    width: 100%;
  }
  .navbar-toggler{
    margin-right: 1rem;
  }
  .navbar-toggler:hover{
    background-color: transparent !important;
  }
  .title-bg{
    display: none !important;
  }
  .dropdown-lg{
    display: none;
  }
  .dropdown-sm{
    display: block;
  }
  .hero-slider .carousel-cell .inner {
    width: 100%;
    top: 50%;
    right: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: unset;
  }
  .hero-slider .carousel-cell .inner .title {
    text-align: center;
  }
  .hero-slider .carousel-cell .inner p {
    text-align: center;
    width: 80%;
    margin: auto;
    padding-bottom: 2rem;
    margin-bottom: 1rem;
  }
  .hero-slider .carousel-cell .inner .btn {
    display: unset;
  }

  .hero-slider .glide__bullets{
    left: 50% !important; 
    top: 113% !important;
  }

  .hero-slider .glide__bullet{
    width: 30px;
    height: 4px;
    opacity: 1;
    width: 1rem;
    border-radius: 50%;
    height: 1rem;
  }

  .hero-slider .glide__arrow--left{
    left: 30% !important; 
    top: 110% !important;
    z-index: 1000;
  }
  .hero-slider .glide__arrow--right{
    right: 30% !important; 
    top: 110% !important;
    z-index: 1000;
  }

  .title-section .title-content{
    transform: translate(0%, 30%);
    width: 100%;
    text-align: center;
  }
  .title-section .title-content p{
    text-align: center;
  }
  .glide__arrow--right{
    right: 20%;
  }
  .glide__arrow--left{
    left: 20%;
  }
  .hero-slider .glide__arrow{
    padding: 1.5rem 0rem;
  }
  .about-page .side-container-btn{
    margin-top: 1rem !important;
  }
  .home-icons{
    margin-bottom: 7rem !important;
  }
div.ctct-form-embed div.ctct-form-defaults{
   width: 85%
}
}

@media screen and (max-width: 1200px){
  .training-date{
    width: 100%;
    display: block !important;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1280px) {
  .stories .glide__slide p{
    height: 14rem;
  }

  .training-card-text {
    height: 22rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1250px) {
  .contact-cards .col-md-5{
    max-width: 45%;
    flex: 0 0 45%;
  }
}

@media screen and (min-width: 992px) and (max-width: 1250px) {
  .contact-card{
    height: 30rem;
  }
}


@media screen and (min-width: 992px) and (max-width: 1350px) {
  .bottom-nav a{
    font-size: 12px !important;
  }
  .navbar-brand img{
    width: 50%;
    margin: auto;
    display: flex;
  }
}

@media screen and (min-width: 992px) and (max-width: 1140px) {
  .title-section .title-content{
    transform: translate(0%, 45%);
  }
}

@media screen and (max-width: 500px) and (min-height: 770px) {
  .title-section{
    height: 32vh !important;
  }
}

@media screen and (max-height: 770px) {
  .title-section{
    height: 53vh !important;
  }
}

@media screen and (min-width: 500px) and (min-height: 770px) and (max-height: 900px) {
  .title-section{
    height: 50vh !important;
  }
}


@media screen and (min-width: 1140px) and (max-width: 1350px) {
  .title-section .title-content{
    transform: translate(0%, 58%);
  }
}

@media screen and (min-height: 1220px) {
  .hero-slider{
    height: 40vh;
  }
  .hero-slider .carousel-cell .inner{
    top: 40%;
  }
}

@media screen and (min-height: 1100px) and (max-height: 1300px) {
  .title-section{
    height: 37vh;
  }
}



@media screen and (min-height: 1300px) {
  .title-section{
    height: 30vh;
  }
}

  @media (min-width: 1200px){
    .container, .page-carousel-container {
      max-width: 1300px !important;
      margin: auto;
    }
  }


@media screen and (max-width: 992px) {
    .page-carousel-container{
        max-width: 960px !important;
        margin: auto;
       padding: 3rem 3rem 5rem 3rem;
    }
}


@media screen and (max-width: 768px) {
    .page-carousel-container{
        max-width: 720px !important;
        margin: auto;
       padding: 3rem 3rem 5rem 3rem;
    }
}

@media screen and (max-width: 576px) {
    .page-carousel-container{
        max-width: 540px !important;
        margin: auto;
    }
}























