/* class on the div that contains all the navbar. */
.navbar{
    display: flex;
    justify-content:center; 
  }
  /* class on the nav that contains the nav_links */
  .navbar_items {
    display: flex;
    align-items:center;
  }
  .navbar_link {
    margin-left: 2rem;
    }
  
  .navbar_items-right {
    margin-left:auto;
  }
  .navbar_btn {
    display: none;
  }
   
@media only screen and (max-width: 1024px) {
  .navbar_items,
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    /* margin-top:1.5rem;
    margin-bottom:1rem;  */
  }  
  
.navbar_items {
    display:none;
  } 
/* .nav_img{
  display: none;
} */
.navbar_items-right {
  margin-left:0;
} 
/* .navbar_toggleShow {
  
  animation: nav_height 600ms ease-in-out  ;
}
.rev_navbar_toggleShow {
animation: rev_nav_height 600ms ease-in-out forwards  ;
} */
.navbar_toggleShow {
  display: flex;
  max-height: 150px;
  opacity: 1;
  transition: max-height 300ms ease-out, opacity 300ms ease-out;
}

.rev_navbar_toggleShow {
  max-height: 0;
  opacity: 0;
  transition: max-height 300ms ease-in , opacity 300ms ease-in;
}

.navbar_btn {
  align-self: flex-end;
  display: block;
  /* position: absolute; */
  cursor: pointer; 
  } 
}
  
@keyframes nav_height {
  from{
    max-height: 0px;
    opacity: 0;
  }
  to{
    max-height:100px ;
    opacity: 1;
  }
  
}
@keyframes rev_nav_height {
  from{
    max-height: 100px;
    opacity: 1;
  }
  to{
    max-height:0px ;
    opacity: 0;
  }
  
}

.rotate360{
  animation: rotate360 500ms linear forwards;
}
@keyframes rotate360 {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(-180deg);
  }
}
.scaler{
  animation: scaleX 500ms ease-in-out forwards;
}
@keyframes scaleX {
  from{
    transform: scaleX(1);
  }
  to{
    transform: scaleX(1.4);
  }
}
.disappear{
    animation: fadeOut 0.5s ease-in-out forwards;
  }
  
  @keyframes fadeOut{
    from{opacity: 1; }
    to{opacity: 0; }
  }
.appear{
  animation: fadeIn 0.5s ease-in forwards;
}
    
@keyframes fadeIn{
  from{opacity: 0; }
  to{opacity: 1; }
}
.close{
  position:absolute;
  top: 0;
  right:0;
  }

.nav-link {list-style:none;color:#262526;}
.nav-link:hover{  color: #a61c28}
.nav-link::after{
    content: '';
    display:block;
    height:2px;
    background: #a61c28;
    transform: scale(0,1);
    transform-origin: left;
    transition: transform ease-in-out 550ms;
}
.nav-link:hover::after{
    transform: scale(1, 1);
    
}



#caddy{
  background: url('../img/access.png') no-repeat;
  background-color:#262526;
  background-size: cover;
  background-position: center;
  height:100%;
  }

.slide {
  animation-name: slideAndScale;
  animation-duration: 1s;
  visibility: visible;
}

@keyframes slideAndScale {
  0% {
    opacity: 0;
    transform: translateY(70%) scale(0.1);
  } 
  100% {
    opacity: 1;
    transform: translateY(0%) scale(1);
  }
}

.slideLeft {
  animation-name: slideAndScaleLeft;
  animation-duration: 1s;
  visibility: visible;
}

@keyframes slideAndScaleLeft {
  0% {
    opacity: 0;
    transform: translateX(-170%) scale(0.1);
  } 
  100% {
    opacity: 1;
    transform: translateX(0%) scale(1);
  }
}


.frame {
  --size: 10px; /* control the size */
  padding: var(--size);
  border: calc(2*var(--size)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1*var(--size));
  background: conic-gradient(from 90deg at 1px 1px,#0000 25%,#000 0);
}





@keyframes slideInRight {
  from {
    transform: translateX(150%) scale(0.2) translate3d(100%, 0, 0);
    opacity: 0; 
  }
  to {
    transform: translateX(0) scale(1) translate3d(0, 0, 0);
    opacity: 1;
  }
}
.slideInRight{
  animation: slideInRight 500ms ease-in 1 forwards;
}
@keyframes slideInLeft {
  from {
    transform: translateX(-150%) scale(0.2) translate3d(100%, 0, 0);
    opacity: 0; 
  }
  to {
    transform: translateX(0) scale(1) translate3d(0, 0, 0);
    opacity: 1;
  }
}

.slideInLeft {
  animation: slideInLeft 500ms ease-in 1 forwards;
}


.slideshow-container-fixed{
  width: 500px;
  height: 375px;
}


@keyframes openPerspective {
  0%{
    transform: rotateX(-90deg);
    
   }
  100%{
    transform: rotateX(0deg)
  }
}
@keyframes reversePerspective {
  0%{
    transform: rotateX(0deg);
   }
  100%{
    transform: rotateX(-90deg)
  }
}
.openNotificationCentre{
  animation: openPerspective 1s ease-in forwards;
  transform-origin: 0% 0%;
}
.closeNotificationCentre{
  animation: reversePerspective 1s ease-out forwards;
  transform-origin: 0% 0%;
}

.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #4388ae;
  border-right-color: #66d2dc;
  animation: l2 2s infinite linear;
}
@keyframes l2 {to{transform: rotate(1turn)}}

.bg-bct_red{
  background-color: #a61c35;
}
.text-bct_red{
  color:#a61c35;
}
.bg-light_grey{
  background-color: #f8f9fa;
}
.text-light_grey{
  color: #f8f9fa;
}

.asterisk{
  position: relative;
}
.asterisk::after{
  content: "\002A";
  color:red;
}