@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&display=swap');

*{
  margin: 0;
  padding: 0;
}


.highlight{
  background-color: #d94456;
}

body{
  background-image: url(../imgs/mainImgs/dubAffair_BG.jpg);
  background-size: 100vw;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #000000;
  font-family: 'Bebas Neue', cursive;
  font-weight: lighter;
  overflow-x: hidden;
  display: grid;
  justify-items: center;
  justify-content: end;
  /* justify-content: center; */
}
h1{
  font-size: 5em;
}
h2{
  font-size: 2.5em;
}
/* h3{
  font-size: 1.5em;
} */
p {
  font-size: 1.25em;
}

.reveal{
  position: relative;
  transform: translateY(50px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

.main-container {
  max-width: 90vw;
  margin: auto;
  filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 9.5));

}

/* OVERALL STYLES FOR HEADER / NAV ---------------------------------------*/

header{
  height: 55px;

  padding: 1% 0%;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0,0,0,1) 80%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: sticky;
  top: 0;
  z-index: 1500;
  
}

.sm-logo {
  width: 30%;
  z-index: 20;
}
.sm-logo img{
  width: 60%;
}

.trigger{
  display: none;
}
nav ul{
  display: flex;
  list-style-type: none;
}
li{
  padding-right: 20px;
}
a{
  font-size: 1.1em;
  text-decoration: none;
  color: white;
}
a:hover{
  color: #b47042;
}
#hit{
  color: #b47042;
  font-size: 1.1em;
}



/* HERO WELCOME SECTION---------------------------------------- */
.hero-section{
  display: flex;
  grid-row: 2;
  overflow-x: hidden;
  margin: 50px 0;
  max-width: 80vw;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.large-logo{
  width: 40%;
  position: relative;
  /* margin-bottom: -15%; */
}

/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
.sect-headers {
  z-index: 5;
  width: 80%;
  display: flex;
  justify-content: flex-start;
}
.sect-headers img {
  width: 50%;
  padding-top: 3%;
  margin-bottom: -5%;
}
.welcome-sect {
  border: black;
  border-style: solid;
  border-width: 5px;
  margin-top: 3%;
  width: 80%;
  background-color: #dbc8b86e;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
}

.welcome-cont {

}

.welcome-cont p {
  margin: 3% 0 3% 7%;

    font-size: 2.25vw;
    width: 88%;
    color: white;
    text-shadow: /* White glow */ 0 0 2px black, 0 0 4px black, 0 0 6px black;
}
.welcome-img img {
  width: 90%;
}
/* .welcome-cont img {
    width: 100%;
    position: relative;
    margin: -72% 0 0 0;
    z-index: -10;
} */


.spacer{
  height: 50px;
}


main {
  width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}


/* REGISTRATION CARDS  REGISTRATION CARDS  -------------------------------------------------*/


section.registration-cards {
  width: 90vw;
  padding-bottom: 5%;
  background-color: #dbc8b887;
  display: grid;
  /* gap: 1rem 0rem;
  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); */
}

.event-info-header {
  grid-column: 1 /span all;
  padding: 2%;
  width: 44vw;
  max-width: 400px;
  justify-self: center;
}

/* .car-show-card {
  grid-column: 2;
} */
.welcome-party-card-temp {
  display: flex;
  padding: 2% 4% 2% 4%;
  /* grid-column: 4; */
  width: 300px;
  height: 400px;
  background-image: url(../imgs/mainImgs/Welcoming-Party-bg.jpg);
  background-position: center;
  background-size: cover;
  background-color: #57eef9;
  border-radius: 10px;
  margin: 0 1% 0 1%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  justify-self: center;
}
.thirdLine {
  line-height: 1.35rem;
}
.welcome-party-card-temp .info-card-text2{

    padding-top: 187px;
    /* margin-bottom: 25px; */
    font-size: 1.5em;
    color: #000000;
    text-align: center;

}


.mission-card-temp {
  display: flex;
  padding: 2% 4% 2% 4%;
  /* grid-row: 2;
  grid-column: 2; */
  width: 300px;
  height: 400px;
  background-image: url(../imgs/mainImgs/Mission-car-show-bg.png);
  background-position: center;
  background-size: cover;
  background-color: #57eef9;
  border-radius: 10px;
  margin: 0 1% 0 1%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  justify-self: center;
}



.car-show-card h2{
  font-size: 2em;
  color: rgb(38 60 108);
  text-align: center;
}
h2.info-card-text{
  padding-top: 170px;
  font-size: 1.5em;
  color: black;
  text-align: center;
}
.car-show-card h3 {
  margin-top: -8px;
  line-height: 1.75rem;
  font-size: 2em;
  color: rgb(38 60 108);
  text-align: center;
}
.car-show-card p{
  padding: 2% 2% 7% 2%;
  font-size: 2vw;
}
.car-show-card a {
  display: grid;
  padding-bottom: 3%;
  align-items: center;
}
.car-show-card a button {
  cursor: pointer;
  background-color: #8C331F;
  border-radius: 10px;
  border: none;
  color: white;
  padding: 7px 86px;
  font-family: 'Bebas Neue', cursive;
  font-weight: lighter;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.25em;
}

.reg-card-temp a button:hover {
  cursor: pointer;
  background-color: rgb(38 60 108);
}

.volksFEST-card-temp{
  display: flex;
  padding: 2% 4% 2% 4%;
  /* grid-row: 4; */
  width: 300px;
  height: 400px;
  background-image: url(../imgs/VolksFest/NCDA-GilroyShow-BG-Img-1.jpg);
  background-position: 0px -15px;
  background-size: cover;
  background-color: #f9a057;
  border-radius: 10px;
  margin: 0 1% 0 1%;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  justify-self: center;

}

.volksFEST-card-temp .info-card-text2{
    /* padding-top: 170px; */
    font-size: 1.5em;
    font-weight: 300;
    color: rgb(255 213 0);
    text-align: center;
    filter: drop-shadow(2px 4px 6px black);
}

.volksFEST-card-temp > h2{
  font-size: 2em;
  font-weight: 300;
  color: rgb(255, 255, 255);
  text-align: center;
}

.volksFEST-card-temp > h3{
    /* margin-top: -78px; */
    line-height: 1.75rem;
    font-size: 2em;
    font-weight: 300;
    color: rgb(255 213 0);
    text-align: center;
    filter: drop-shadow(2px 4px 6px black);
}


/* SOCIAL MEDIA SOCIAL MEDIA SOCIAL MEDIA-------------------------------------------------*/
.social-media-con {
  margin-top: 5%;
  width: 90vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: rgb(180,112,66);
  background: linear-gradient(180deg, rgba(180,112,66,0) 0%, rgba(180,112,66,1) 100%);
  ;
}

.SM-Header {
  max-width: 550px;
  width: 90%;
}
.SM-Icons a {
  text-align: center;
}
.SM-Icons {
  width: 30vw;
  height: 150px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.SM-Icons img {
  width: 75%;
}
.SM-Icons svg {
  fill: #ffffff;
  animation: arrowAnimate 2s infinite;
}
 @keyframes arrowAnimate {
  0%{
    fill:#ffffff;
  }
  50%{
    fill: rgb(180,112,66);
  }
  100%{
    fill:#ffffff;
  }
 }
/* VIDEO VIDEO VIDEO -------------------------------------------------*/

.promo-video-cont {
  display: flex;
  width: 90vw;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: rgb(180,112,66);
  background: linear-gradient(180deg, rgba(180,112,66,0) 50%, rgba(180,112,66,1) 100%);
  margin: 10% 0;
}


.promo-video-cont img {
  max-width: 550px;
  width: 50vw;
}
.promo-video-cont iframe {
  width: 60%;
  min-height: 41vh;
  padding-bottom: 5%;
  aspect-ratio: 16 / 9;
}


/* FOOTER  FOOTER  FOOTER-------------------------------------------------*/

footer {
  /* height: 300px;
  width: 100%; */
  overflow-x: hidden;
  background: rgb(219,200,184);
  background: linear-gradient(180deg, rgba(219,200,184,0) 50%, rgba(219,200,184,1) 90%);
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr 1fr;
}


.CoaMoreInfo{
  width: 90%;
  background-color: #b47042;
}
.carImg {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.carImg img {
  margin: 41% 0 0 0;
  width: 85%;
}
.CoaMoreInfo{
width: 400px;
/* height: 200px; */
display: flex;
flex-direction: column;
align-items:center;
align-self: end;
}

.CoaMoreInfo p{
  padding: 5%;
  text-align: center;
  font-size: 1.5em;
  }
  .CoaMoreInfo h2 {
    font-size: 2em;
    padding-top: 1%;
}

.info-buts {
  background-color: #ffb853;
  border: none;
  border-radius: 7px;
  color: black;
  margin-bottom: 25px;
  padding: 5px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.75em;
  font-family: 'Bebas Neue', cursive;
}

.info-buts:hover {
  background-color: #774a0b;
  color: rgb(255, 255, 255);
}

.site-map-con{
  padding-right: 5%;
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 1fr;
  justify-self: center;
  align-self: end;
  z-index: 10;
}

.site-map-con img {
  justify-self: center;
  width: 80%;
}

.sitemap-links{
  padding: 5% 0 5% 0;
  font-size: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 25px;

}
.sitemap-links ul{
  list-style-type: none;
}
.sitemap-links a {
  text-shadow: /* White glow */ 0 0 2px black, 0 0 4px black, 0 0 6px black;
}
.sitemap-links #hit {
  text-shadow: /* White glow */ 0 0 2px black, 0 0 4px black, 0 0 6px black;
}

.left-links{
  text-align: center;
}

.right-links{
  text-align: center;
}

.left-links li{
  padding: 0;
}

.right-links li{
  padding: 0;
}

.copy-text {
  font-size: 1em;
  padding: 1% 0 1% 0;
  text-align: center;
  color: #000000e8;
  position: relative;
  grid-column: 1 / span3;
  /* grid-row: 2; */
  /* justify-self: center; */
  /* align-self: center; */
  background-color: #dbc8b8;
  width: 100%;
}

/* FIX FOOTER POSITION ONCE MORE CONTENT IS IN */


/* SMALL SCREEN-------------------------------------------------*/
@media only screen and (max-width: 1115px){
/*  */
/* section.registration-cards {
  grid-template-columns: repeat(2, minmax(33%, 1fr));
} */
.volksFEST-card-temp{
  grid-row: 3;
}

}





/* SMALL SCREEN-------------------------------------------------*/

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

/* FOOTER */

.cactusL-footer {
  width: 13vw;
}

.car-footer {
  width: 47vw;
  margin-left: -18%;
}
.cactusR-footer {
  width: 17vw;
}

}





/* SMALL SCREEN-------------------------------------------------*/


@media only screen and (max-width: 850px){
  header{
    padding: 3% 0%;
  }
  .sm-logo {
    width: 50%;
  }
 
  /* SMALL SCREEN NAV BAR----------------------------------------*/
    nav ul{
      display:block;
      list-style-type: none;
      justify-content: center;
    }
   
    .hamUl a{
      text-decoration: none;
      color: white;
    }
    .hamUl a:hover{
      color: #b47042;
    }
    .hamUl #hit{
      color: #b47042;
      font-size: 2em;
    }
  
    .hamburger{
      cursor: pointer;
     margin-right: 10px;
     float: left;
    }
    .hamburger span {
        height: 3px;
        width: 30px;
        background: white;
        display:block;
        margin-bottom: 5px;
        position: relative;
        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, opacity 0.3s ease-in-out;
        z-index: 225;
    }
    .trigger{
      display: none;
    }
    .trigger:checked ~ .hamburger span:first-child{
      transform: rotate(45deg);
      top: 8px;
    
      
    }
    .trigger:checked ~ .hamburger span:last-child{
      transform: rotate(-45deg);
      top: -8px;
      
    }
    .trigger:checked ~ .hamburger span:nth-child(2){
      opacity: 0;
      
    }
    .trigger:checked ~ nav{
      left:0;
    }
    
    nav{
      background: #000000e8;
      width: 100vw;
      height: 100vh;
      padding: 100px 15%;
      margin-top: -11px;
      position: absolute;
      left: -100vw;
      box-sizing: border-box;
      transition: left 0.3s ease-in-out;
      /* z-index: 500; */
    }
    .hamUl ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    
    .hamUl li{
      margin-bottom: 20px;
      }
    
    .hamUl a{
        font-size: 2em;
        text-decoration: none;
        color:white;
        }
        #sm-imgs2{
          display:flex;
        }

        .dropdown:hover .dropdown-content {
          margin: -4.5% 0 0 20vw;
        }

        .dropdown-content a {
          font-size: 4vw;
        }


        /* FOOTER */
        .car-footer {
          width: 50vw;
          margin-left: -18%;
          margin-bottom: 57%;
      }

      .cactusL-footer {
        width: 15vw;
      }

      .reg-card-temp a button {
        padding: 8px 51px;
      
      }

      }





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



.sm-logo img {
  width: 115%;
}
.hero-section {
  max-width: 100vw;
}
.large-logo {
  width: 61%;
  /* margin-bottom: -48%; */
}

  .sect-headers {
    width: 80%;
    justify-content: center;
}

  .sect-headers img {
    width: 90%;
    padding-top: 6%;
    margin-bottom: -6%;
}


.welcome-sect {
  width: 90%;
  grid-template-columns: 1fr;

}
    .welcome-cont {
      /* margin-top: 29%; */
      width: 100%;
  
  }

  .welcome-cont p {
  margin: 3% 0 2% 9%;
  font-size: 4.5vw;
  width: 88%;
  }
  .welcome-cont img {
    margin: -73% 0 0 0;
  }
  .event-info-header {

    width: 50vw;
    max-width: 400px;

}
  
  section.registration-cards {
    /* grid-template-columns: 1fr; */
    /* grid-gap: 20px; */
    display: flex;
    border-radius: 0px;
    width: 100vw;
    flex-direction: column;
    align-items: center;
}

section.registration-cards h1 {

    font-size: 7vw;

}
.reg-card-temp p {
  font-size: 4vw;
}


.reg-card-temp h2 {
font-size: 6vw;
}
.reg-card-temp {
margin: 0px 1% 6% 1%;
width: 54%;
}
.car-show-card{

grid-row: 2;
}

.parts-vend-card{

grid-row: 3;
}

.swap-space-card{

grid-row: 4;
}


.reg-card-temp a button {

font-size: 6vw;
}
.promo-video-cont img {
  width: 75vw;
}


.social-media-con {
  margin-top: 20%;
  width: 100vw;

}

.promo-video-cont {
  padding-top: 20%;
  width: 100vw;

}

.promo-video-cont iframe {
  width: 80%;

}
 /* FOOTER */
 footer {
  width: 100%;
  justify-items: center;
  grid-template-columns: none;
}
.carImg {
  align-items: center;
  justify-content: center;
}
.carImg img {
  width: 60%;
  margin-top: 20%;
}

.CoaMoreInfo {
  width: -webkit-fill-available;
  /* height: 200px; */
  margin-top: 7%;
}
.site-map-con {
  margin-top: 10%;
}
.site-map-con img {
  justify-self: center;
  width: 55%;
}
.right-links {
  text-align: left;
}
.left-links {
  text-align: right;
}

  }




      /* @media only screen and (max-width: 600px){
      
        .reg-card-temp {
          margin: 0px 1% 6% 1%;
          width: 65%;
          }



    .car-footer {
        width: 49vw;
        margin-left: -63%;
        margin-bottom: 191%;    
    }
    .cactusL-footer {
      width: 24vw;
   }
   .cactusR-footer {
    width: 25vw;
    } 
    .copy-text {
      font-size: 1em;
   }

   .SM-Header {
    font-size: 6.5vw;
    padding-top: 18%;
}
.SM-Icons {
  width: 60vw;
}

  } */
      /* SMALL SCREEN-------------------------------------------------*/

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

  .car-footer {
    margin-bottom: 300%;
}  
      
}


@media only screen and (max-width: 375px){
  .car-footer {
    display: none;
} 
  .dropdown-content a {
    font-size: 8vw;
  }

}