/* CSS Document for AU Autosports Website */

.preload * { 

  animation-duration: 0.001s !important; 
  transition: none !important;

}



.resize-animation-stopper * {

  animation: none !important;
  transition: none !important;

}


/* Global styles */
* {

  font-family: "sweet-sans-pro", sans-serif;
  margin: 0;
  padding: 0;
  transition: all .25s;
    
}



/* variables for light and dark mode colors */
html {

  --mainFooterColor:#fbfbfb;
  --mainPageColor: #fafafa;
  --mainPageColorT: rgb(250,250,250,0);
  --mainTextColor: black;
  --auburnOrange: #e86100;
  --samfordBrickOrange: #cc4e0b;

}

html.dark {

  --mainFooterColor: #121212;
  --mainPageColor: #121212;
  --mainPageColorT: rgb(18, 18, 18, 0);
  --mainTextColor: white;
  
}


/* Body styles */
body {

  background-color: var(--mainPageColor);
  margin: auto;
  overflow-x: hidden;
  

}



/* Grid styles */
.grid {

  column-gap: 20px;
  display: grid;
  grid-template-columns: 10% repeat(12, [col-start] 1fr) 10%;
  justify-self: center;
  width: 100dvw;
    
}



/* Nav styles */
nav {

  align-items: center;
  background-color: var(--mainPageColor);
  display: grid;
  grid-column: -1/1;
  grid-template-columns: subgrid;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 300;
  
}

.nav-container { 

  align-items: center;
  background-color: var(--mainPageColor);
  display: flex; 
  grid-column: 2/14;
  justify-content: space-between;
  margin-top: 1em;
  margin-bottom: 1em;
  position: sticky;
  top: 0;
  
}

.nav-logo {

  align-items: center;
  display: flex;
  height: 4em;
  justify-content: left;
  margin: 0;
  top: 1em;

}

.nav-logo img {

  align-items: center;
  display: flex;
  height: 100%;
  justify-content: left;
  margin: 0;
  padding: 1em;
  user-select:none;
}

.nav-logo a {

  align-items: center;
  display: flex;
  grid-column: 2/14;
  height: 100%;
  justify-content: center;
  margin: 0;

}

.nav-pages {

  display: flex;
  grid-column: 2/14;
  justify-content: right;
  margin: 0;
  padding: none;
  width: 50%;
  z-index: 15;

}

.nav-pages li {

  list-style: none;
  margin: 0;
  
}

.nav-pages a{
  
  color: var(--mainTextColor);
  display: block;
  font-family: "sweet-sans-pro", sans-serif; 
  font-weight: 600;
  height: 30px;
  letter-spacing: 2px;
  margin: 0;
  padding: 1em;
  place-content: center;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  z-index: 16;

 
  
}



/* Alternate center nav styles */
/*
.nav-pages-l {

  display: flex;
  grid-column: 2/14;
  justify-content: left;
  margin: 0;
  padding: none;
  width: 50%;
  z-index: 15;
  
}
.nav-pages-l li {

  list-style: none;
  margin: 0;
  
}
.nav-pages-l a{

  color: var(--mainTextColor);
  display: block;
  font-family: "sweet-sans-pro", sans-serif; 
  font-weight: 600;
  height: 30px;
  letter-spacing: 2px;
  margin: 0;
  padding: 1em;
  place-content: center;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  z-index: 16;

}

.nav-pages-r {

  display: flex;
  grid-column: 2/14;
  justify-content: right;
  padding: none;
  margin: 0;
  width: 50%;
  z-index: 15;
  
}
.nav-pages-r li {

  list-style: none;
  margin: 0;
  
}
.nav-pages-r a{

  color: var(--mainTextColor);
  display: block;
  font-family: "sweet-sans-pro", sans-serif; 
  font-weight: 600;
  height: 30px;
  letter-spacing: 2px;
  margin: 0;
  padding: 1em;
  place-content: center;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  z-index: 16;

}
*/



/* Burger menu styles */
.burger {

  cursor: pointer;
  display: none;
  margin: 0;
  
}

.burger div.line-1{

  background-color: var(--mainTextColor);
  height: 3px;
  justify-content: center;
  margin: 1em 1em .5em ;
  transition: translate .125s ease, rotate .125s ease, opacity 0s;
  transition-delay:  .125s, 0s, .125s;
  width: 25px;
  z-index: 200;

}

.burger div.line-2{
  
  background-color: var(--mainTextColor);
  height: 3px;
  justify-content: center;
  margin: .5em 1em;
  transition: translate .125s ease, rotate .125s ease, opacity 0s;
  transition-delay:  .125s, 0s, .125s;
  width: 25px;
  z-index: 200;

}

.burger div.line-3{
  
  background-color: var(--mainTextColor);
  height: 3px;
  justify-content: center;
  margin: .5em 1em 1em ;
  transition: translate .125s ease, rotate .125s ease, opacity 0s;
  transition-delay:  .125s, 0s, .125s;
  width: 25px;
  z-index: 200;
  
}


.nav-active{

  transform: translateX(0%);

}

.link-text {

  transition: .25s ease;
  margin: 0;

}

.landing-header-container {

  grid-column: -1/1;
  height: calc(100dvh - 96px) !important;

}




/* Header image styles */
.landing-header-container {

  background-position: center;
  background-size: cover;
  grid-column: -1/1;
  height: 100%;
  position: relative;
  
}

.landing-header-container-1 {

  top: 0%;
  height: 50%;
  position: absolute;
  width: 100%;
 

}

.landing-header-container-2 {
  
  height: 50%;
  position: absolute;
  top: 50%;
  width: 100%;
 

}

.landing-header-text {
  display: block;
  color: white;
  justify-content: center;
  height: 100%;
  align-items: center;
  align-self: center;
  


}

.landing-header-text-h1 {
  display: block;
  position: relative;
  bottom: 0;
  color: white;
  height: 40%;
  width: 100%;
  text-align: center;

}

.landing-header-text-h1 h1 {
  display: block;
  position: absolute;
  bottom: .5em;
  color: white;
  
  width: 100%;
  text-align: center;
  font-size: 2.1vw;
  transform: scale(2,3);
  letter-spacing: 2px;
  font-weight: 1000;
  text-wrap: nowrap;
  z-index: -2;
}

.landing-header-text-h2 {
  position: relative;
  display: block;
  color: white;
  height: 50%;
  width: 100%;

}

.landing-header-text-h2 h2 {
  display: block;
  position: absolute;
  top: .5em;
  color: white;
  
  width: 100%;
  text-align: center;
  font-size: 2vw;
 
  letter-spacing: 2px;
  font-weight: 1000;
  z-index: -2;
}

.landing-button {
  

  
  display: flex;
  justify-content: center;
  left: calc((100% - 10dvw) / 2);
  position: absolute;
  top: calc((100% - 35%) - 55px) ;
  width: 10dvw;
  height: 10dvw;
  align-items: center;
  align-self: center;
  place-content: center;
  cursor: pointer;
 
  
  
}
.landing-button-1{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
 
}
.landing-button-2{
  z-index: 500;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.5;
  
}

@-webkit-keyframes pulse {
  0% {
    opacity: 0;

    
    
  }

  50% {
    opacity: 0.5;
    
    
  }
  
  100% {
    opacity: 0;
    -webkit-transform: scale(150%);
            transform: scale(150%);
  }
}

@keyframes pulse {
  0% {
    opacity: 0;
    
  }

  50% {
    opacity: 0.5;
    
    
  }
  
  100% {
    opacity: 0;
    -webkit-transform: scale(150%);
            transform: scale(150%);
  }
}

.pulse {
  
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
 

  animation: pulse 2s infinite ease-in-out;
  -webkit-animation: pulse 2s infinite ease-in-out ;

    
 

}



.landing-button:hover   {
  cursor: pointer;
  text-decoration: none;  
  transform:scale(110%); 
  transition: .25s ease; 

}

.landing-page-learn-more img{
  
  width: 50%;

}

.landing-header-container video {

  height: 100%;
  margin: 0;
  object-fit:cover;
  object-position: top;
  position: fixed;
  width: 100%;
  z-index: -3;
  
}
/*
.landing-header-container img {

  height: 100%;
  margin: 0;
  object-fit:cover;
  object-position: top;
  position: fixed;
  width: 100%;
  z-index: -3;
  
}*/



/* Landing Page Styles*/

.landing-page-gradient{
  display: flex;
  background: var(--mainPageColor);
  background: linear-gradient(180deg, var(--mainPageColorT) 0%, var(--mainPageColor) 100%);
  height: calc(100dvh - 3px - 3em);
  width: 100%;
  grid-column: 1/-1;
}

.page-header.learn-more{
  text-wrap: nowrap;
  grid-column: 1/-1;
  height: fit-content;
  
  
}


.landing-page-learn-more{
  height: calc(100dvh - 3px - 3em);
  background-color: var(--mainPageColor);
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  
}

.landing-page-learn-more div{

  display: flex;
  place-content: center;
  align-items: center;
  align-content: center ;
  width: 100%;
  grid-column: 3/13;
  height: fit-content;
}

.landing-page-learn-more div img{
  width: 100%;
  height: auto;
  padding: 1em;
}



.landing-page-learn-more-button{
  display: block;
  background-color: #e86100;
  border-radius: 1em;
  width: 25dvw;
  grid-column: 3/13;
  place-self: center;
  font-family: "sweet-sans-pro", sans-serif;
  margin-bottom: 2em;
  letter-spacing: 2px;
  
}
.landing-page-learn-more-button p{
  font-size: 2em ;
  padding: 1em;
  text-decoration: none;
  color:#fff;
}

.landing-page-learn-more-button:link  { text-decoration: none; color: #FFF}
.landing-page-learn-more-button:visited  { text-decoration: none; color: #FFF;}
.landing-page-learn-more-button:hover  { text-decoration: none;  color: #FFF; transform:scale(110%); transition: .25s ease; }


/* About us Page Style */
.page-header.about-us{
  background-image: url("../assets/placeholders/Aaron_Alec_Tabling.jpg");
  grid-column: 1/-1;
  height: calc(100dvh - 96px - 2em) !important;
  background-position: center;
  background-size: cover;
  color: #FFF;

}



.quote{
  display: flex;
  grid-column: 2/14;
}

.about-us-counter{
  grid-column: 1/-1;
  padding: 3em 2em;
  background: var(--auburnOrange);
  color: #fff;
  text-align: center;
}

.about-us-counter > div{
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 4em 2em;
}

.counter{
  position: relative;
}

.counter h1{
  font-size: 3em;
  margin-bottom: .5em;
}

.counter:not(:last-child)::before {
  content: '';
  background:  #fff;
  position: absolute;
  width: 2px;
  height: 3em;
  top: 50%;
  transform: translateY(-50%);
  right: -1em;
}

.about-us-container{
  display: block;
  grid-column: 2/14;
  color: var(--mainTextColor);
  font-family: "sweet-sans-pro", sans-serif;
  
}

.who-are-we{
 display: grid;
 grid-template-columns: repeat(12, [col-start] 1fr) ;
 column-gap: 20px;
 margin-top: 3em;
 margin-bottom: 3em;
}

.waw-img-container{
  grid-column: 1/7;
}

.waw-img-container img {
  width: 100%;
}

.waw-text-container{
  display: flex;
  grid-column: 7/-1;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.waw-text-container h1,.waw-text-container p{
  
  width: 100%;
}
.teamwork-makes-the-dreamwork{
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr) ;
  column-gap: 20px;
  margin-top: 3em;
  margin-bottom: 3em;
}



.tmtd-img-container-1{
  grid-column: 1/5;
}
.tmtd-img-container-1 img{
  width: 100%;
}
.tmtd-text-container{
  display: flex;
  flex-direction: column;
  grid-column: 5/9;
  justify-content: center;
  align-items: center;
}
.tmtd-img-container-2{
  grid-column: 9/-1;
}
.tmtd-img-container-2 img{
  width: 100%;
}

.about-engineering-container{

}

.about-business-container{

}

.about-car-container{

}

.about-officers-container{

}











/* Gallery Page Styles*/
/* Gallery carousel*/
.carousel-container {
  position: relative;
  grid-column: 2/14;
  
   
  height: calc(100vh - 96px - 4em);

   
    
 
}


.carousel-list {
  display: flex;
  gap: 8px;
  padding: 1em;

  list-style: none;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.carousel-item {
  flex-shrink: 0;
  width: 80%;
  height: calc(100vh - 96px - 4em);

  background-color: #FFF;

  scroll-snap-align: center;
  text-decoration: none;
  
}

.carousel-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-decoration: none;
  font-family: "sweet-sans-pro", sans-serif;
  font-size: 4vw;
  font-weight: bold;
}

.carousel-content.wallpapers{
  background-image: url("../assets/placeholders/pxfuel.jpg");
  background-size:cover;
  background-position: center;
}

.carousel-content.g2026{
  background-image: url("../assets/placeholders/pxfuel.jpg");
  background-size:cover;
  background-position: center;
}

.carousel-content.g2025{
  background-image: url("../assets/placeholders/pxfuel.jpg");
  background-size:cover;
  background-position: center;
}

a.carousel-link:link  { text-decoration: none; color: #FFF}
a.carousel-link:visited  { text-decoration: none; color: #FFF; }
a.carousel-link:hover  { text-decoration: none;  color: #e86100; transition: .25s ease; }


.carousel-button {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  background-color: #FFF;
  border-width: 0px;
  border-color: #121212;
  transform: translateY(-50%);
}
.carousel-button:hover{
  background-color: #e86100;
  transition: .25s ease;
  color: #FFF;
  cursor: pointer;
}



.carousel-button-previous {
  left: 1.5rem;
  
}

.carousel-button-next {
  right: 1.5rem;
}


.gallery-title{
  grid-column: 2/14;
  padding: 1em;
  color: var(--mainTextColor);
  font-size: 3vw;
  text-align: center;
  
}
.photogrid {
  
  grid-column: 2/14; 
 
}


.photocontainer {
  display: inline-block;
  position: relative;
  width: calc(100% / 3 - calc(20px/3));
  height: fit-content;
  flex-direction: row;
 margin-bottom: 10px;
}

.photogridsizer {
  width: calc(100% / 3 - calc(20px/3));
}
/* gallery things*/
.photocaptionoverlay {
  
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 20px, rgba(0, 0, 0, 0.5));
  bottom: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  padding-bottom: 10px;
  position: absolute;
  text-align: center;
  transition: opacity 250ms ease;
  width: 100%;
  visibility: visible;
  
}
.photocaptiontext {
  color: #fff;
  font-size: 14px;
  line-height: 17px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-overflow: ellipsis;
  top: 15px;
  transition: top 150ms 50ms ease-out;
  white-space: nowrap;
  
}
.photocontainer:hover .photocaptionoverlay {
  opacity: 1;
  transition: opacity 250ms ease-in-out; 
}
.photocontainer:hover .photocaptiontext {
  top: 0;
  transition: top 250ms 50ms ease-out; 
}

.photos{
  
  max-width: 100%;
  display: flex;
  margin: auto;
  flex-direction: row;

}




.error-container{
  grid-column: 2/14;
  display: flex;
  flex-wrap: wrap;
}

.error-header{
  display: block;
  font-size: 5vw;
  text-align: center;
  width: 100%;
  padding: 1em;
  padding-bottom: 0;
}

.error-caption{
  display: block;
  font-size: 2vw;
  text-align: center;
  width: 100%;
  padding: 2em;
}



.error-button{
  display: block;
  width: 25%;
  margin-left: calc(37.5% - 1em);
  margin-top: 1em;
  text-align: center;
  padding: 1em;
  background-color: var(--auburnOrange);
  border-radius: 1em;
  font-size: 3vw;
  font-weight: bolder;
}

.error-link{
  display: flex;
  width: 100%;
  align-items: center;
}

a.error-button:link  { text-decoration: none; color: #FFF}
a.error-button:visited  { text-decoration: none; color: #FFF;}
a.error-button:hover  { text-decoration: none;  color: #FFF; transform:scale(110%); transition: .25s ease; }




.page-header{
  grid-column: 1/-1;
  padding: 1em;
  color: var(--mainTextColor);
  font-size: 3vw;
  text-align: center;
  font-family: "sweet-sans-pro", sans-serif;
  
  
}

.contact-container{
  display: grid;
  grid-column: 2/14;
  column-count: 2;
  color: var(--mainTextColor);
}

.contact-form{
  display: flex;
  width: 100%;
  grid-column: 1;
}
.contact-info{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  grid-column: 2;
  
}



input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}



/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: var(--auburnOrange);
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker orange */
input[type=submit]:hover {
  background-color: var(--samfordBrickOrange);
}


.contact-socials{
  width: 100%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  height: fit-content;
 
}


.contact-team{
  width: 100%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  height: fit-content;
 
}

.contact-info-header-leads {
  width: 100%;
  font-size: 2vw;
  padding-bottom: 1em;
}

.team-leads{
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
}

.lead{
  display: flex;
  flex-wrap: nowrap;
  width: 75%;
  align-items: center;
  justify-content: left;
  height: fit-content;
 
}

.team-lead-list{
  list-style: none;
}

.lead-photo {
  width: 25%;
  height: fit-content;
  padding: 1em;
  align-items: center;
  display: flex;
  justify-self: left;
}
.lead-photo img{
  border-radius: 50%;
  height: 100%;
  width: 100%;
}

.lead-text{
  padding: 1em;
  align-items: center;
  display: block;
  flex-wrap: wrap;
  height: fit-content;
  width: fit-content;
  justify-self: right;
}

.lead-name {
  text-align: left;
  font-size: 2vw;
  font-weight: bolder;
  width: 100%;
  width: fit-content;
}
.lead-role{
  text-align: left;
  font-size: 1vw;
  width: 100%;
  width: fit-content;
  
}
.lead-email{
  text-align: left;
  font-size: 1vw;
  
  width: 100%;
  width: fit-content;
  
}

.lead-email a:link,.lead-email a:visited{
  color: var(--auburnOrange);
}


.contact-info-header-socials {
  width: 100%;
  padding-top: 2em;
  font-size: 2vw;
  padding-bottom: 1em;
}

.team-socials {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
}

.social{
  display: flex;
  flex-wrap: nowrap;
  width: 75%;
  align-items: center;
  justify-content: left;
  
 
}



.social-photo {
  width: 25%;
  height: fit-content;
  padding: 1em;
  align-items: center;
  display: flex;
  justify-self: left;
  
}
.social-photo img{
  
  height: 75%;
  width: 75%;
}



.social-text{
  padding: 1em;
  align-items: center;
  display: block;
  flex-wrap: wrap;
  
  width: fit-content;
  justify-self: right;
}

.social-name {
  text-align: left;
  font-size: 2vw;
  font-weight: bolder;
  width: 100%;
  width: fit-content;
}

.social-handle{
  text-align: left;
  font-size: 1.5vw;
  width: 100%;
  width: fit-content;
  
}

.social-handle a:link,.social-handle a:visited{
  color: var(--auburnOrange);
}




.sponsor-tier-container{
  grid-column: 2/14;
  display: flex;
  align-items: center;
  place-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
}

.sponsor-tier-container img{
  width: 100dvw;
}
.our-sponsors{
  grid-column: 2/14;
  display: flex;
  align-items: center;
  place-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
}

/* Schedule Pages Styles */

.schedule-container{
  grid-column: 3/13;
}

.schedule-container div{
  height: 100%;
}



/* Footer styles */
footer {

  align-items: center;
  background-color: var(--mainFooterColor);
  display: grid;
  grid-column: -1/1;
  grid-template-columns: subgrid;
  top: 0;
  width: 100%;
  
}

.ft-container { 

  align-items: center;
  background-color: var(--mainFooterColor);
  display: block; 
  grid-column: 2/14;
  margin: 0;
  top: 0;
  
}

.ft-logo
{

  align-items: center;
  display: flex;
  grid-column: 2/14;
  justify-content: center;
  margin: 0;
  padding-top: 5em;
  
}

.ft-logo img {

  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 1em;
  width: 400px;
  user-select:none;

}

.ft-pages {

  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  
}

.ft-pages li {

  list-style: none;
  margin: 0;
  
}

.ft-pages a{

  color: var(--mainTextColor);
  display: block;
  font-family: "sweet-sans-pro", sans-serif; 
  font-weight: 600;
  height: 30px;
  letter-spacing: 2px;
  margin: 0;
  padding: 1em;
  place-content: center;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  
}

.ft-links {

  display: flex;
  justify-content: center;
  margin: 0;
  width: 100%;
  
}

.ft-links li {

  list-style: none;
  margin: 0;
  
}

.ft-links a{

  color: var(--mainTextColor);
  display: block;
  height: 30px;
  letter-spacing: 2px;
  margin: 0;
  padding: 1em;
  place-content: center;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  
}


.ft-links img {

  align-items: center;
  display: flex;
  grid-column: 2/14;
  height: 100%;
  justify-content: left;
  margin: 0;
  user-select:none;
  
}

.ft-theme {

  align-items: center;
  display: grid;
  grid-column: -1/1;
  grid-template-columns: subgrid;
  top: 0;
  width: 100%;
  
}

.ft-copyright {

  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  padding-bottom: 5em;
  color: var(--mainTextColor);
  
}

.ft-copyright p {

  font-family: "sweet-sans-pro", sans-serif;
  font-size: 14px;
  color: var(--mainTextColor);
  padding: 1em;
  font-weight: bolder;
  
}



/* text styles animations and such*/
nav ul.image:hover {text-decoration: none; background-color: none; color: white;}
nav ul li a.link-text:hover  { text-decoration: none;  color: #e86100; transition: .25s ease; }
nav a img:hover { text-decoration: none; background-color: none; color: white;}
a {text-decoration: none;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }



/* Burger menu animations */
.toggle div.line-1 {

  translate: 0 calc(3px + .5em);
  rotate: -45deg;
  transition: translate .125s ease, rotate .125s ease;
  transition-delay: 0s, .125s;

}

.toggle div.line-2 {

  opacity: 0;
  transition: opacity 0s;
  transition-delay: .125s;
  z-index: 200;
 
}

.toggle div.line-3 {
  
  translate: 0 calc(-3px - .5em);
  rotate: 45deg;
  transition: translate .125s ease, rotate .125s ease;
  transition-delay: 0s, .125s;
  
}



/*dark/light toggle animations*/
.material-symbols-outlined{

  font-size: 2em;
  text-align: center;
  user-select:none;

}

.theme-toggle{

  align-items: center;
  cursor: pointer;
  display: flex;
  grid-column: 2/3;
  justify-content: center;
  padding: 1em;
  text-align: center;
  user-select: none;
  width: 48px;

}

.theme-toggle .light-mode-button{

  color: var(--mainTextColor);
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  user-select: none;
  width: 0%;

  opacity: 100;
  rotate: 0deg;
  scale: 0%;
  transition:  rotate 1s ease;
  
}

.theme-toggle .dark-mode-button{

  color: var(--mainTextColor);
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  text-align: center;
  user-select: none;
  width: 64px;

  opacity: 100;
  rotate: 0deg;
  scale: 100%;
  transition:  rotate .5s ease-out;

}


.theme-toggle.theme-active .light-mode-button  {

  color: var(--mainTextColor);
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  user-select: none;
  width: 0;

  opacity: 100;
  rotate: 0deg;
  scale: 0;
  transition:  rotate .5s ease-in;

}

.theme-toggle.theme-active .dark-mode-button {

  color: var(--mainTextColor);
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  user-select: none;
  width: 64px;

  opacity: 100;
  rotate: 360deg;
  scale: 100%;
  transition:  rotate .5s ease-in;

}

.theme-toggle.theme-scale .light-mode-button  {

  color: var(--mainTextColor);
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  user-select: none;
  width: 64px;

  opacity: 100;
  rotate: 720deg;
  scale: 100%;
  transition:  rotate .5s ease-in;
  
}

.theme-toggle.theme-scale .dark-mode-button {
  
  color: var(--mainTextColor);
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  user-select: none;
  width: 0%;

  opacity: 0;
  rotate: -360deg;
  scale: 0%;
  transition:  rotate 1s ease;
 
}


.theme-toggle.theme-active.theme-scale .light-mode-button  {

  color: var(--mainTextColor);
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  user-select: none;
  width: 64px;

  opacity: 100;
  rotate: 360deg;
  scale: 100%;
  transition:  rotate .5s ease-out;

}

.theme-toggle.theme-active.theme-scale .dark-mode-button {

  color: var(--mainTextColor);
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  user-select: none;
  width: 0%;

  opacity: 0;
  rotate: -360deg;
  scale: 0%;
  transition:  rotate 1s ease;
 
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
}


/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 480px){

  .grid {

    column-gap: 20px;
    display: grid;
    grid-template-columns: 16px repeat(12, [col-start] 1fr) 16px;
    justify-self: center; 

  }

  

  .photocontainer {
    width: 100%;
  }
  .photogridsizer {
    width: calc(100%-0px) ;
  }

  .ft-logo img {
   
    width: 300px;
  
  }

  .ft-pages a{

    font-size: 0.75em;
    
  }

  .about-us-counter > div {
    grid-template-columns:  1fr ;
    row-gap: 5em;
  }
  .counter:not(:last-child)::before{
    width: 90%;
    height: 2px;
    top: initial;
    right: initial;
    bottom: -3em;
    left: 50%;
    transform: translateX(-50%);
  }

}

@media only screen 
and (max-width : 1200px)
and (min-width : 481px){

  .photocontainer {
    width: calc(100% / 2 - calc(10px/2));
  }
  .photogridsizer {
    width: calc(100% / 2 - calc(10px/2));
  }
}

@media only screen 
and (max-width : 750px){
 
  .no-scroll{

    height: 100%;
    margin: 0;
    overflow-y: hidden;

  }


  
  nav {

    align-content: stretch;
    justify-content: space-between;
    z-index: 500;
    margin-top: 3.5px;
    margin-bottom: 3.5px;
  }

  .nav-logo {

    display: none;

  }

  .nav-container {

    grid-column: -1/1;

  }

  .burger {

    display:block;
    margin-left: calc(50% - (25px + 2em)/2);
    z-index: 200;
  
  }

  .nav-pages {

    align-items: center;
    background-color: var(--mainPageColor);
    display: block;
    flex-direction: column;
    height: calc(100dvh - 89px - 1em);
    justify-content: space-evenly;
    position: absolute;
    right: 0px;
    top:  calc(89px - 1em);
    width: 100dvw;
    z-index: 10;
    padding-bottom: 1em;
    transform: translateY(100%);
    transition: transform .25s ease;
  }

  .nav-active{
    transform: translateY(0%);
  }

  
  
  .nav-pages a {

    align-content: center;
    align-items: center;
    justify-content: center;
    opacity: 100;
    padding-bottom: 1em;
    padding-top: 1em;
    transition: opacity .25s ease;

  }


  .nav-pages li {

    align-content: center;
    height: calc(100%/6);

  }
  

  .header-img {

    height: calc(100dvh - 3px - 3em) !important;

  }

  
  .carousel-item {
    
    height: calc(80vh - 96px - 4em);
    margin-top: calc(((100vh - 96px - 4em) - (80vh - 96px - 4em)) / 2) ;
    margin-bottom: calc(((100vh - 96px - 4em) - (80vh - 96px - 4em)) / 2)  ;
    
  }

  .carousel-list {
    /* ... */
    
    /* Hide scrollbar in Firefox */
    scrollbar-width: none;

    /* Hide scrollbar in IE and Edge */
    -ms-overflow-style: none;
  }

  /* Hide scrollbar in webkit */
  .carousel-list::-webkit-scrollbar {
    display: none;
  }

  .carousel-button {
    display: none;
  }

  .contact-container{
    display: block;
    column-count: 1;
  }

  .contact-info-header-leads{
    padding-top: 2em;
  }

  .lead{
    width: 100%;
  }

  .lead-name {
 
    font-size: 3vw;
  
  }
  .lead-role{
 
    font-size: 2vw;
  
  
  }
  .lead-email{
 
    font-size: 2vw;
  
  
  }

  .social{
    width: 100%;
  }

  .social-name {
 
    font-size: 3vw;
  
  }
  .social-handle{
 
    font-size: 2.5vw;
  
  
  }
  


 
  
}

@media only screen 
and (max-width : 1048px) and (min-width: 930px) {

  .nav-pages a{
    padding: 1em;
    font-size: medium;
    letter-spacing: 0px;
  }
  
  .landing-button {

    width: 20%;
    border-radius: 3em;
    left: calc((100% - 20%) / 2);
  }
}

@media only screen 
and (max-width : 930px) {

  .nav-pages a{
    padding: 1em;
    font-size: small;
    letter-spacing: 0px;
  }
  .landing-button {

    width: 25%;
    border-radius: 2em;
    left: calc((100% - 25%) / 2);
  }
}

@media only screen 
and (max-width : 800px) {

  .nav-pages a{
    padding: .65em;
    font-size: small;
    letter-spacing: 0px;
  }
  .landing-button {

    width: 50%;
    border-radius: 1em;
    left: calc((100% - 50%) / 2);
    height: 10dvh;
  }

  .landing-button-text p{
    font-size: 4vw;
  }
  
}

@media only screen 
and (max-width : 750px)
and (min-width : 481px) {
  .about-us-counter > div{
    grid-template-columns: 1fr 1fr;
  }
  .counter:nth-child(2)::before {
    display: none;
  }
  
}