h1, h2, h3, h4, h5, h6{
    font-family: museo-sans,sans-serif;
}


.bgcolor-black-60{
    background-color:rgb(0,0,0,0.4);
}
.portfolio-grid{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
 .aspect-ratio-tile, .ar-nav-tile{
        aspect-ratio: 6/3;
 }

a:hover .bgcolor-colonial-blue-hover{
    background-color: #5c7492;
}

a:hover .bgcolor-navy-hover{
    background-color: #0A1831;
}

.bgcolor-inherit{
    background-color:inherit!important;
}

.tile-transition{
    transition: all .25s ease-out;
}

/* Media queries for responsiveness */
@media (min-width: 576px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for screens smaller than 900px */
    }
    
    .aspect-ratio-tile{
        aspect-ratio: 4/3;
    }
}

@media (min-width: 1200px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for screens smaller than 1200px */
        }
}
.portfolio-tile{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
                            
                            .hidden {
                                display: none;
                            }

                            
                            /*Animation*/
                            @keyframes floatIn{
                                from{
                                    padding-top: 5%;
                                    opacity: 0;
                                }
                                to{
                                    padding-top: 0%;
                                    opacity: 1;
                                }
                            }
                            
                            .tileLoad{
                                animation-name: floatIn;
                                animation-duration: 1s;
                            }
                            
                           
                           
                           
                           
@media(min-width: 576px){
    .ar-nav-tile{
        aspect-ratio: 5/3;
    }
}           
@media(min-width: 992px){
    .aspect-ratio-tile, .ar-nav-tile{
        aspect-ratio: 4/3;
    }
}

.hover-bg-crimson:hover{
    background-color: #791026;
}
.tabCss input {
  display:none;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all .5s;
  background-color: white;
}
.tabCss input:checked ~ .tab__content {
  max-height: 10rem;
}

/* Visual styles */
.accordionCss {
  overflow: hidden;
}
.tab__label,
.tab__close {
  display: flex;
  color: white;
  cursor: pointer;
}
.tab__label {
  justify-content: space-between;
  animation: loadVis .19s;
}

.tab__content p {
  margin: 0;
  padding: 1rem;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.tabCss input:checked + div .tab__label i.bi.bi-chevron-down{
  animation: arrowDown .25s;
}

.tabCss input:not(:checked) + div .tab__label i.bi.bi-chevron-down{
  animation: arrowUp .25s;
}

.tabCss input:checked + div .tab__label i.bi.bi-chevron-down{
  transform: rotate(180deg);
}

.tabCss input:not(:checked) + div .tab__label i.bi.bi-chevron-down{
  transform: rotate(360deg);
}

@keyframes arrowUp {
  0%{
    transform: rotate(180deg)
  }
  100%{
    transform: rotate(360deg)
  }
}

@keyframes arrowDown{
  0%{
    transform: rotate(0deg)
  }
  100%{
    transform: rotate(180deg)
  }
}

@keyframes loadVis{
  0%{
    opacity: 0;
  }
  99%{
    opacity: 0;
  }
  100% {
    opacity: 1;  
  }
}