/* Box Model Hack */
* {
     box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
html, body {
     max-width: 100%;
     overflow-x: hidden;
     background-color: rgb(0, 0, 0);
     font-family: 'Kanit', sans-serif;
     color: white;
 }

body {
     overflow-x: hidden;
     overflow-y: hidden;
}

.navigation {
     background-color: cornflowerblue;
}



/******************************************
/* LAYOUT
/*******************************************/
header {
     background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);     
     padding-bottom: 10em;
     position: absolute;
     width: 100%;
     z-index: 999;

   }

header > nav {
     padding-top: 1em;
     overflow-y: hidden;
}

input {
     cursor: pointer;
}

.logo {
     min-width: 90%;
     height: 100%;
}
   
.logo > img{
     position: absolute;
     width: 20vw;
}
   


.circle-sketch-highlight{
     position:relative;
     left:0.1em;
     z-index: 2;
   }
   .circle-sketch-highlight:before{
     content:"";
     left:-0.2em;
     top:0.2em;
     border-width:2px;
     border-style:solid;
     border-color:crimson;
     position:absolute;
     border-right-color:transparent;
     width:100%;
     height:1em;
     transform:rotate(2deg);
     opacity:0.7;
     border-radius:50%;
     padding:0.1em 0.25em;
   }
   .circle-sketch-highlight:after{
     content:"";
     left:-0.5em;
     top:0.1em;
     padding:0.1em 0.25em;
     border-width:2px;
     border-style:solid;
     border-color:crimson;
     border-left-color:transparent;
     border-top-color:transparent;
     position:absolute;
     width:100%;
     height:1em;
     transform:rotate(-1deg);
     opacity:0.7;
     border-radius:50%;
   }
   
nav {
     text-align: right;
     white-space: nowrap;
}
   
nav ul {
     display: inline-block;
     margin: 0;
     padding: 0;
     list-style: none;
     font-size: 1em;
}
   
nav ul li {
     display: inline-block;
     margin: 0 0.5em;
}
   
nav ul li a {
     display: block;
     padding: 0.5em;
     color: #ffffff;
     text-decoration: none;
}
   
.about {
     position: relative;
     display: flex;
     flex-direction: row;
     margin: 20px 0 20px 5%;
     padding: 0;
     height: 600px;
     background-color: black;
}



.about p, h4{
     padding-top: 2em;
     color: white;
     margin: 0;
     width: 90%;


}

.about aside p{
     font-style: italic;
     font-size: clamp(2rem, 2.5vw, 4rem);
     font-weight: 300;
     margin-bottom: 0;
     padding-bottom: 0%;
}

.about h4 {
     font-weight:bolder;
     font-size: 2em;
     margin: .5em;
     padding-top: 0%;
     text-align: right;
     
}

.learn-header {
     margin-top: 70px;
     text-align: center;
     font-size: 5rem;
     font-weight: 500;
     color: crimson;
}

.highlight {
     font-weight: 400;
  background-image: linear-gradient(
    -100deg,
    rgba(220, 20, 60, 0.756),
    rgba(255, 20, 60, 0.7) 95%,
    rgba(255, 21, 60, 0.659)
  );
}

.highlight a {
     color: white;
     text-decoration: none;
}

section p {
     font-size: 1rem;
   
}

.quote-text {
     display: flex;
     flex-direction: column;
}

.learn-more-button {
     width: 100%;
     background-color: black;
     border: none;
     color: white;
     font-size: 1.6em;
     margin-top: auto;
     margin-bottom: 25%;

}

.learn-more-button a {
     color: crimson;
     text-align: center;
}



.head-vid {
     width: 100%;
     height: 600px;
     object-fit: cover;
}


.logo-row {
     display: flex;
     flex-direction: row;
     gap: 50px;
     background-color: rgb(0, 0, 0);
     height: 7em;
     width: 100%;
     padding-right: 80px;
}

.logo-row > * {
     margin: 0;
     padding: 0;
}

.fbwatch {
     width: 20%;
     background-image: url(../images/fbwatchgldgrad.webp);
     background-size:contain;
     background-repeat: no-repeat;
     background-position: center;
}
.history{
     width: 20%;
     background-image: url(../images/historyglddrag.webp);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     margin: 7px 12px;
}
.netflix{
     width: 20%;

     background-image: url(../images/netflixgldgrad.webp);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
}
.usanet{
     width: 20%;
     background-image: url(../images/usagldgrad.webp);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
}
.vh1 {
     width: 20%;
     background-image: url(../images/vh1gldgrad.webp);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
}

.posters {
     margin: 0;
     padding: 0;
     height: 700px;
     background-color: rgb(255, 255, 255);
     background-image: url(../images/POSTERS.webp);
     background-attachment: fixed;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     width: 100%;
}

.poster-container > h2, 
.poster-container > p {
     margin: 0;
     padding: 0 3em;
     background-color: #000000b3;
     width: 70%;
     color: #ffffff;
}

.poster-container > h2 {
     font-weight:bolder;
     padding: .5em;
     color: crimson;

     font-size: clamp(1.5rem, 4vw, 5em);

}

.poster-container > p {
     font-size: clamp(1.5rem, 3vw, 2em);
     font-weight: 300;
     font-style: italic;
}

.poster-container {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     background-color: rgba(0, 0, 0, 0.59);
     height: 700px;
}
   

.testimony-contact{
     background-color: rgb(0, 0, 0);
     display: flex;
     flex-direction: row;
     align-items: center;
}

.testimony {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-items: center;

     margin: 3em 2em;
     padding-top: 3em;

     text-align: center;
     width: 70%;
     color: #ffffff;
     height: 400px;

}

.testimony::after{
     content: "";
     background-color: #48484858;
     height: 260px;
     width: 30vw;
     position: absolute;
     border-radius: 30px;
}


.testimony hr {
     width: 25%;
     margin: 4px;
     color: white;
     height: .5px;
     border: none;
     background-color: white;
}

.testimony img {
     border-radius: 100px;
     height: 80px;
     opacity: 60%;
}

.testimony > aside {
     width: 80%;
     z-index: 2;
     font-size: clamp(1rem, 2vw, 2rem);

}

.title {
     font-weight: 200;
     font-size: 1.5em;
}

.name {
     font-size: clamp(1.5rem, 3vw, 3em);
     font-weight: 700;
}

.testimony > span {
     z-index: 2;
}

.testimony > i {
     font-size: 70px;
     z-index: 2;
}


.success-main {
     width: 500px;
     min-height: 400px;
     text-align: center;
     align-items: center;
     justify-items: center;
     display: flex;
     flex-direction: column;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

.success-main h2 {
     font-size: 8rem;
     margin: 0 0 1rem 0;
}

.success-main a {
     border: 5px solid crimson;
     font-size: 2rem;
     margin-top: 20px;
     padding: 5px 30px;
     border-radius: 15px;
     box-shadow: 0px 10px 0px crimson;
     transition: all ease-in-out .2s;
     width: 100px;
}

.success-main span {
     font-size: 1.5rem;
     font-weight: 200;
}

.success-main a:hover {
     box-shadow: 0px 0px 0px crimson;
     transform: translateY(10px);
}

.success-main img {
     width: 250px;
     transform: translateX(25px);
}

.contact-hero {
     height: 400px;
     background-image: url(/images/hero_prod.webp);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

.ignite-hero {
     height: 400px;
     background-image: url(/images/hero_photos.webp);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

.learn-hero {
     height: 350px;
     background-image: url(/images/visionreyshowcaseredcarpet.webp);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

.video-hero {
     height: 350px;
     background-image: url(/images/hero_actor.webp);
     background-position: top 0 center 0;
     background-repeat: no-repeat;
     background-size: cover;
     
}


.contact-text {
     width: 50%;
     margin: 0 auto;
     padding-right: 10%;
     color: #ffffff;
     gap: 15px;
}

.contact-text .speaker-container {
     width: 100%;
}

.contact-text > * {
     font-size: clamp(1rem, 1.4vw, 1.5rem);
}

.contact-text > h3 {
     color: crimson;
     font-weight: 600;
     font-size: 2em;
     margin: 0;
}

.contact-text > p {
     margin: 3px;
}

.contact-form {
     background-color: rgb(255, 255, 255);
     padding: 1em;
     width: 100%;
     text-align: center;
}

select {
     cursor: pointer;
}

.contact-form  input {
     width: 50%;
     border: 2px solid rgb(198, 14, 14);
     border-radius: 6px;
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.550), inset 3px 3px 3px rgba(0, 0, 0, 0.550);
     margin-top: 1em;
     cursor: text;
}
.contact-form > input:first-child{
     margin-top: 0;
}

.contact-form > input:nth-child(5){
     padding-bottom: 8em;
}

.contact-form > input:focus  {
     outline-width: 2px;
     outline-style: solid;
     outline-color: red;
}

.button {
     background-color: crimson;
     color: white;
     padding: .5em 0;
     width: 20%;
     border: 2px solid crimson;
     border-radius: 12px;
}

.contact-us-button {
     padding: 5px;
     margin: 20px 25%;
     width: 50%;
     font-size: 1.5em;
     font-weight: 600;
}


.sundown-hero {
     height: 350px;
     background-image: url(/images/sundown.webp);
     background-position: bottom;
     background-repeat: no-repeat;
     background-size: cover;
}

.sundown-main .sundown-list .cont-text-cont-main li{
     text-align: left;
     padding: 10px;
}

.sundown-main {
     padding-bottom: 60px;
}

.sundown-main img {
     width: 70%;
     display: block;
     margin: 0 auto;
}

.sundown-header {
     display: block;
     width: 60%;
     margin: 100px auto;
     text-align: center;
}

.sundown-header h1 {
     font-size: 4.5rem;
     color: crimson;
     font-weight: 500;
}

.sundown-header span {
     text-align: center;
     display: block;
     font-style: italic;
     font-size: 2rem;
     font-weight: 200;
}

.sundown-header p {
     padding-top: 40px;
     font-size: 2rem;
}

.crew-bios {
     width: 700px;
     margin: 0 auto;
}

.crew-bios h3 {
     font-size: 5rem;
     font-weight: 200;
     text-align: center;
     margin-bottom: 20px;
}

.crew-bios .tony-pic,
.crew-bios .allison-pic,
.crew-bios .soft-pic{
     width: 40%;
     height: auto;
     margin: 25px;
     float: left;
}


.crew-bios .kathbath-pic,
.crew-bios .enrique-pic,
.crew-bios .mackelmore-pic{
     width: 40%;
     height: auto;
     margin: 25px;
     float: right;
}

.crew-bios h4 {
     padding: 0;
     margin: 0;
     font-size: 2rem;
}

.crew-bios h5 {
     padding: 0;
     margin: 0;
     color: crimson;
     font-size: 1rem;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/


.speakers img {
     width: 100%;
}

header > h1 {
     display: none;
}


.hero {
     background-color: black;
     height: 60vh;
     min-height: 600px;

     display: flex;
     flex-direction: column;
     justify-content: flex-end;



   }

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

                              .hero{
                                   height: 40vh;
                              }

                              .hero-nav > ul {
                                   display: none;
                              }
                         }
   
     .fallbackImage {
          width: 100vw;
          height: 580px;
          position: absolute;
          object-fit: cover;
     }


     .hero-vid {
          z-index: 1;
          position: absolute;
          height: 60vh;
          min-height: 600px;
          width: 100%;
          object-fit: cover;

        }

   .hero-nav {
     background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);     
     padding-top: 10em;
     padding-right: 1.5em;
   }
   
   .hero-nav ul {
     font-size: 2.8vw;
     list-style: none;
   }


   .hero-nav a {
     color: #ffffff;
     text-decoration: none;
     transition: 0.5s
   }
   
   .hero-nav .actors:hover,
   .hero-nav .production:hover,
   .hero-nav .photos:hover,
   .hero-nav .branding:hover,
   .hero-nav .weddings:hover{
     transition: 0.1s;
     transform: scale(1.6) translateY(-1em);
   }



/******************************************
/* FOOTER
/*******************************************/

.foot-break {
     width: 85%;
     border: 0;
     height: 1.5px;
     background-color: crimson;
}
 
footer {
     height: 200px;
     width: 100%;
     display: flex;
     margin: 3em 0px 2em 0px;
}

.social-footer-left {
     width: 30%;
}

.social-footer-left > nav {
     text-align: center;
     padding-left: 1em;
     font-size: clamp(1rem, 2vw, 1.5rem);
}

.social-footer-left > figure {
     margin: 0 0 0 10px;
     background-image: url(../images/logo.webp);
     background-size:contain;
     background-repeat: no-repeat;
     background-position: center;
     width: 100%;
     height: 80px;
}

.mailing {
     width: 50%;
     color: white;
     align-items: center;
     justify-content: center;
     padding-top: 1em;
     padding-left: 110px;
}


.mailing input[type=text],
.mailing input[type=email]{
     cursor: text;
     width: 30%;
     margin: 5px 5px 0 0;
}


.footnav {
     color: white;
     width: 20%;
     height: 200px;
}

.footnav > ul {
     display: flex;
     flex-direction: column;
     text-align: left;
     font-size: 1.3rem;
}

.footnav li {
     padding: 1px 0;
}

.footnav a{
     color: white;
}

.current-page {
     color: crimson;
     transition: all .5s;
}

.current-page:hover {
     background-color: white;
     border-radius: 5px;
     padding: 0 2px;
}

.button{
     transition-duration: 0.4s;
     border: 0;
}

.button:hover {
     box-shadow: 0 12px 16px 0 rgba(255, 255, 255, 0.24), 0 17px 50px 0 rgba(255, 255, 255, 0.19);
     background-color: rgb(255, 255, 255);
     color: crimson;
}



/******************************************
/* LEARN MORE ABOUT ALLISON PAGE
/*******************************************/

.learn-container {
 padding: 20px 40px;
 margin: 40px 20%;
 height: 100%;
 background-color: rgb(20, 20, 20);
 border-radius: 5px
}

.learn-container p{
     font-weight: 200;
     font-size: 2rem;     
}


/******************************************
/* CONTACT US PAGE
/*******************************************/

.contact-main {
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
     grid-template-rows: auto;
     margin-top: 60px;

}


.cont-text-cont-main {
     display: grid;
     grid-column: 2/4;
     width: 100%;
     

     text-align: left;
     margin: 0;
     padding: 0;
}

.cont-text-cont-main li {
     list-style-type: none;
     font-weight: 200;
     font-size: 1.1rem;
     padding: 15px;
     background-color: rgba(105, 105, 105, 0.256);
}

.cont-text-cont-main ul {
          padding-left: 0;

}


.contact-form {
     background-color: black;
     color: white;
     display: inline-grid;
     grid-column: 2/4;
     justify-items: center;

     text-align: left;

     margin-top: 60px;
}

.contact-form form {
     display: grid;
     width: 100%;
     justify-items: center;
}

.contact-form label,
.contact-form input,
.contact-form select {
     font-size: 25px;
     font-weight: 200;
     width: 100%;
     margin: 10px;
}

input:focus {
     border: 3px solid red;
   }

.contact-form > form > .button {
     justify-self: left;
     margin-left: 0px;
     width: 50%;
}

.detail {
     padding-bottom: 200px;
}

.contact-info {
     display: grid;
     grid-column: 1/2;
     grid-row: 1/2;

     width: auto;
     justify-items: center;
     height: 60%;


     position: sticky;
     top: 50px;

     margin: 20px 50px;
     background-color: #b90b0b8b;
     color: white;
     font-size: 1em;
     font-weight: 300;
}

.contact-info i {
     font-size: 1.5em;
}

h6 {
     font-size: 1.5em;
     font-weight: 300;
     text-align: center;
     
     margin: 0;
     padding: 0;
}

.contact-info li {
     padding: 10px 0;
}



/******************************************
/* PHOTOGRAPHY PAGE
/*******************************************/


/* #photo-main {
     color: white;
     margin: 0;
     padding: 0;
}

#check1,
#check2,
#check3,
#check4 {
     display: none;
}

.gallery-container {
     width: 100%;
     text-align: center;
     margin: 40px 0;
}

.gallery-container h1 {
     position: relative;
     font-weight: normal;
     font-size: 5em;
     margin: 40px 0;
}         

.video-container h1::before
.gallery-container h1:before{
     content: "";
     position: absolute;
     width: 200px;
     height: 3px;
     background-color: crimson;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
}

.gallery-top-content {
     background-color: crimson;
     width: 90%;
     margin: 0 auto 20px auto;
     display: flex;
     justify-content: space-around;
     align-items: center;
     border-radius: 5px;
 
}


label {
     display: inline-block;
     height: 100%;
     padding: 0 5px;
     margin: 0 30px;
     line-height: 60px;
     font-size: 1.5em;
     font-weight: normal;
     cursor: pointer;
     transition: .7s;
}

label:hover {
     color: lightcoral;
     font-size: 2em;
}

.photo-gallery {
     width: 90%;
     margin: auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 20px ;
}

.pic{
     position: relative;
     height: 230px;
     cursor: pointer;
}

.pic img {
     width: 100%;
     height: 100%;
     border-radius: 2px;
     transition: .5s;
}

#check1:checked ~ .gallery-container .photo-gallery .pic{
     opacity: 1;
     transform: scale(1);
     position: relative;
     transition: .5s;
}

#check2:checked ~ .gallery-container .photo-gallery .headshot{
     opacity: 1;
     transform: scale(1);
     position: relative;
}
#check2:checked ~ .gallery-container .photo-gallery .event,
#check2:checked ~ .gallery-container .photo-gallery .estate{
     opacity: 0;
     transform: scale(0);
     position: absolute;
     transition: 0s;
}

#check3:checked ~ .gallery-container .photo-gallery .event{
     opacity: 1;
     transform: scale(1);
     position: relative;
}
#check3:checked ~ .gallery-container .photo-gallery .headshot,
#check3:checked ~ .gallery-container .photo-gallery .estate{
     opacity: 0;
     transform: scale(0);
     position: absolute;
     transition: 0s;
}

#check4:checked ~ .gallery-container .photo-gallery .estate{
     opacity: 1;
     transform: scale(1);
     position: relative;
}
#check4:checked ~ .gallery-container .photo-gallery .headshot,
#check4:checked ~ .gallery-container .photo-gallery .event{
     opacity: 0;
     transform: scale(0);
     position: absolute;
     transition: 0s;
} */


.photos-main {
     width: 90%;
     margin: 40px auto;
}

.photos-main h2 {
     font-size: 4rem;
     margin: 0;
     font-weight: 200;
     text-shadow: 2px 2px 3px crimson, 1px 1px 2px crimson;
}

hr {
     width: 99.5%;
     color: crimson;
     background-color: crimson;
     height: 2px;
     margin-top: 0;
}

.container {
     display: flex;
     width: 100%;
     padding: 0;
     box-sizing: border-box;
     height: 600px;
   }
   
   .box {
     flex: 1;
     overflow: hidden;
     transition: all .5s;
     margin: 0 3px;
     box-shadow: 0 20px 30px rgba(0,0,0,.1);
     line-height: 0;
     cursor: pointer;
   }
   
   .box > img {
     width: 100%;
     height: 500px;
     object-fit: cover; 
     transition: .5s;
   }
   
   .box > span {
     font-size: 2rem;
     display: none;
     text-align: center;
     line-height: 2.6;
     transition: all .5;
   }

   .box:hover > span {
     display: block;
   }
   
   .box:hover { flex: 1 1 50%; }
   .box:hover > img {
     width: 100%;
     height: 500px;
   }
    

   .bts-photos h2{
     text-align: center;
   }

   .bts-photos hr {
     width: 79%;
   }


   .headshot-wrapper {
     width: 100%;
     height: 0;
     padding-bottom: 100%;
     position: relative;
     overflow: hidden;
     cursor: pointer;
   }
   
   .headshot-wrapper img {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
     height: auto;
   }

   .masonry-gallery {
     column-count: 3;
     column-gap: 5px;
     margin: 0 120px;
   }
   
   .masonry-wrapper {
     display: inline-block;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     margin-bottom: 2px;
   }

   .masonry-wrapper img {
     width: 100%;
     height: auto;
     display: block;
   }

   .gallery {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     grid-gap: 4px;
     width: 100%;
   }


   .lightbox {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #1f0404e9;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 23;
   }
   
   .lightbox img {
     max-width: 90%;
     max-height: 90%;
     z-index: 18;
   }
   
   .hidden {
     display: none !important;
     z-index: 30 !important;
   }

   .wedding-gallery {
     width: 100%;
     overflow: hidden;
     padding: 0;
   }

   .wedding-gallery li {
     position: relative;
     list-style-type: none;
     display: grid;
     grid-template-rows: 300px;
     transition: grid-template-rows .5s;

   }

   .wedding-overlay {
     background-color: rgba(220, 20, 60, 0.56);
     display: block;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     position: absolute;
     z-index: 8;
   }

   .wedding-info {
     position: relative;
     width: 100%;
     z-index: 8;
     color: #fff;
     display: block;
     text-align:center;
     padding: 30px 20px 20px;
   }

   .wedding-info h2 {
     font-size: 3rem;
     font-weight: 20;
     text-shadow: 2px 2px 2px crimson, 3px 3px 3px crimson;
   }

   .wedding-info span {
     display: block;
     font-size: 2rem;
     margin: 0 auto;
     margin-top: 60px;
     padding: 7px;
     width: fit-content;
     
     border: 2px solid white;
     border-radius: 20px;
     cursor: pointer;
     transition: all .5s;
   }

   .wedding-info span:hover {
     border: 2px solid crimson;
     color: crimson;
     text-shadow: 2px 2px 2px white;
     box-shadow: inset 2px 2px 2px white, 2px 2px 2px white;
   }

   .wedding-description {
     margin-top: 80px;
     opacity: 0;
     visibility: hidden;
     z-index: -5;
     transition: opacity .8s, visibility .8s;
   }

   .wedding-description-two {
     z-index: -5;
   }

   .wedding-description .headshot{
     height: 100%;
     transition: all .8s;
   }

   .bg-img img {
     position: absolute;
     top:0;
     min-width: 100%;
     object-position: 0 -250px;
   }


   .unhide {
     opacity: 1;
     visibility: visible;
     z-index: 5;
   }


/******************************************
/* VIDEOGRAPHY PAGE
/*******************************************/

.video-main {
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
     /* color: white; */
     width: 100%;
     font-weight: normal;
     margin-bottom: 60px;
}



.video-main .main-vid {
     display: grid;
     grid-column: 1/5;
     height: 650px;
     position: relative;
     overflow: hidden;
}

.video-main img {
     width: 100%;
     min-height: 100%;
     object-fit: cover;
     align-content: center;
     justify-content: center;
}

.video-main section {
     cursor: pointer;
}


.video-main h3 {
     position: absolute;
}

.vid-foot {
     margin-top: 50px;
}

.video-main h1{
     color: crimson;
     font-size: clamp(2rem, 8vw, 8rem);     
     text-align: center;
     margin: 0;
}

.video-text span {
     width: fit-content;
     font-size: clamp(.80rem, 2vw, 3rem);   
     justify-self: center;
}

.video-text p {
     font-size: clamp(1rem, 1.4vw, 2.3rem);     

}

.video-text h1 {
     color: white;
     font-weight: 200;
}

.video-text {
     display: grid;
     grid-column: 2/4;
     margin: 50px 0;
     padding: 0;
}

.video-text .highlight {
     padding: 9px;
     border-radius: 15px;
     border: 3px solid rgb(255, 255, 255);
     box-shadow: 0 7px white;
     transition: all .2s;
}

.video-text .highlight:hover {
     transform: translateY(7px);
     border-bottom: 0;
     border: 3px solid white;
     box-shadow: none;
}


.vid-zero {
     display: grid;
     grid-column: 1/5;
     height: 650px;
     position: relative;
}


.vid-one {
     display: grid;
     grid-column: 1/3;
     height: 400px;
     position: relative;
}

.vid-two {
     display: grid;
     grid-column: 3/5;
     height: 400px;
     position: relative;
}

.vid-three {
     display: grid;
     grid-column: 1/3;
     height: 400px;
     position: relative;
}

.vid-four {
     display: grid;
     grid-column: 3/5;
     height: 400px;
     position: relative;
}

.vid-one,
.vid-two,
.vid-three,
.vid-four {
     overflow: hidden;
}

.winner-thumb {
     position: absolute;
     bottom: 0;
}


.bts-container .video-text {
     grid-column: 1/5;
     margin: 50px auto;

}

.bts-container .hero-vid {
     background-image: url(/images/minterview.png);

}

.video-main h3 {
     z-index: 2;
     font-size: 3em;
     font-weight: normal;
     top: 20px;
     left: 30px;
     pointer-events: none;
}

.vid-zero:after,
.vid-two:after,
.vid-three:after {
     content:'';
     position: absolute;
     left: 0;
     top: 0;
     width:100%;
     height:100%;
     /* background: rgba(195, 9, 9, 0.464); */
     pointer-events: none;

   }

.vid-one:after,
.vid-four:after {
     content:'';
     position: absolute;
     left: 0;
     top: 0;
     width:100%;
     height:100%;
     /* background: rgba(0, 0, 0, 0.35); */
     pointer-events: none;
   }


/******************************************
/* CONSULT PAGE
/*******************************************/


.consult-container {
     text-align: center;
     display: grid;
     grid-template-columns: 10% 40% 40% 10%;
}

.consult-header {
     display: grid;
     grid-column: 2/4;
}

.consult-container h3 {
     font-size: 3em;
     font-weight: normal;
     color: crimson;
}

.consult-container p {
     font-size: 1.5em;
     margin-bottom: 80px;
}




.testimony-consult-block {
     display: grid;
     grid-template-columns: 10% 40% 40% 10%;
     margin-top: 80px;
}

.testimony-consult-block .testimony {
     display: grid;
     grid-column: 2/4;

     justify-self: center;
     width: 80%;

     background-color: rgba(220, 20, 60, 0.212);
     border-radius: 25px;

     margin: 20px;
     padding: 0;
     height: auto;
}

.testimony-consult-block .testimony:after {
     height: 0;
}

.testimony-consult-block i {
     font-size: 3.5em;
}

.testimony-consult-block aside {
     font-weight: 200;

}



.consult-midcopy {
     display: flex;
     flex-direction: column;
     margin: 50px 200px;
     font-size: 2em;
     font-weight: 270;
}

.consult-form-container {
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
     background-color: rgb(179, 33, 33);
     padding-bottom: 70px;
}

.prices {
     text-align: center;
     margin: 30px auto;
     width: fit-content;
     display: flex;
     flex-direction: column;
     border: 2px solid white;
     border-radius: 10px;
     font-size: 2rem;
}

.prices ul {
     text-align: left;
     list-style-type: none;
     padding: 0;
     margin: 0;
}

.prices li:nth-child(2n-1) {
     background-color: white;
     padding: 20px;
     color: crimson;
}

.prices li {
     padding: 20px;
}

.price-time {
     background-color: crimson;
     padding: 20px;
}

.prices a {
     text-decoration: none;
     color: white;
     background-color: crimson;
     border-radius: 15px;
     width: 70%;
     margin: 20px auto;
     transition: all .5s;
}

.prices a:hover {
     background-color: white;
     color: crimson;
}


/******************************************
/* WEDDING PAGE
/*******************************************/


.wedding-header {
     text-align: center;
}
.wedding-header h1 {
     color: crimson;
     font-size: 8em;
     margin-bottom: 0;
     font-weight: 200;
}
.wedding-header h2{
     font-weight: normal;
     font-size: 3em;
}
.wedding-hero {
     display: grid;
     grid-template-columns: 10% 40% 40% 10%;
     margin-bottom: 60px;
     height: 550px;
}
.wedding-hero figure {
     display: grid;
     grid-column: 2/3;
}
.wedding-hero-text{
     display: grid;
     grid-column: 3/4;
     align-content: center;
}
.wedding-hero-text span{
     margin: 10px;
     padding: 0 10px;
     font-size: 1.5em;
     font-weight: 200;
}
.wedding-hero figure {
     background-image: url(https://placekitten.com/650/950);
     background-size: cover;
     box-shadow: 0 0 68px 68px rgb(0, 0, 0) inset;
}

.wedding-pre-gallery {
     background-color: crimson;
     height: 3px;
     width: 60%;
     border: 0;
     margin-bottom: 80px ;
}

.posters p {
     display: inline-block;
     padding-bottom: 2rem;
}

header {
     overflow-y: hidden;
}



header > nav {
     padding: 0;
}




#hamburger {
     margin: 15px 40px;
     font-size: 35px;
     position: fixed;
     right: 0;
     cursor: pointer;
     z-index: 8;
}


.mobile-nav {
     position: fixed;
     right: 0; 
     top: 0;
     width: 100%;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0); /* Start transparent */
     z-index: 5;
     transition: background-color 0.3s ease-out; /* Transition for background */
     overflow-x: hidden;
     pointer-events: none;
}

.mobile-nav > ul {
     margin: 0 0 0 auto;
     width: 30%;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;     

     background-color: black;
     border-left: 6px ridge crimson;
     gap: 20px;
     z-index: 10;
     transform: translateX(100%); /* Start offscreen */
     transition: transform 0.3s ease-out; /* Transition for slide-in */
}

.show {
     background-color: rgba(0, 0, 0, 0.668); /* Darken background */
     pointer-events: auto;
}

.show > ul {
     transform: translateX(0); /* Slide ul into view */
 }

.mobile-nav ul li a {
     color: white;
     padding: 0;
     font-size: 2rem;
     transition: color 0.3s ease-in-out;
}

.mobile-nav ul li a:hover {
     color: crimson;
     transition: color 0.3s ease-in-out;
}

.mobile-nav-logo {
     width: 200px;
     text-align: center;

     margin: 50px 0 150px 0;
}

.mobile-socialnav-icons {
     height: 30%;
     width: 70%;
     padding-top: 50px;
     background-color: black;
     display: block;
     text-align: center;
     margin: 0 auto;


}

.mobile-socialnav-icons i {
     font-size: 30px;
}

.button {
     cursor: pointer !important;
}

.showcase {
     display: grid;
     width: 80%;  
     margin: 30px auto;
     grid-template-columns: 1fr 1fr; 
     gap: 0 50px;
}

.showcase h2 a {
     text-decoration: none;
     color: white;
}

.showcase h2,
.showcase > h4 {
     grid-column: 1 / -1;
     margin: 0 auto;
     font-size: 3rem;
}

.showcase h2:nth-child(1) {
     font-size: 4rem;
     padding-bottom: 25px;     
}

.showcase h4 {
     font-size: 2rem;
     padding-top: 0;
     width: 100%;
     color: crimson;
}

.sponsor-images{
     grid-column: 1 / -1;
     width: 100%;
     margin: 0 80px;
}

.showcase img {
     width: 325px;
     padding: 20px;
}

.sklogo {
     height: auto;
     width: 200px !important;
}

.showcase-dates {
     justify-self: end;
     text-align: right;
}

.showcase p {
     margin: 3px;
     font-size: 1.5rem;
}

.showcase a {
    grid-column: 1 / -1;
    justify-self: center;
    padding-top: 30px;
}

.tickets-button {
     width: 400px;
     height: 65px;
     font-size: 2rem;
     padding: 0;
}

.showcase-hero,
.showcase-hero .hero-vid {
     height: 80vh;
     object-fit: cover;
     object-position: top center;
}


.showcase-text {
     text-align: center;
     padding-right: 0;
     font-size: 2rem;
}
.showcase-text p {
     font-size: 1.7rem;
     padding: 15px;
}

.showcase-text  .tickets-button {
     margin: 35px;
     height: 40px;
     font-size: 1.5rem;
}



.sponsor-txt {
     margin: 150px auto;
}

.sponsor-txt p {
     font-size: 1.3rem;
}

.sponsor-txt img {
     width: 80%;
     min-width: 500px;
     margin-top: 90px;
}

.sponsor-button {
     display: flex;
     align-self: center;
     text-decoration: none;
}

.sponsor-button .button {
     margin: 40px auto;
     font-size: clamp(2rem, 2.5vw, 4rem);
     padding: 20px;
     width: auto;
     height: auto;
}


.sponsor-tiers {
     display: block;
     width: 500px;
     margin: 0 auto;
}

.sponsor-container {
     width: 100%;

     padding: 60px;
}

.sponsor-body {
          background-image: url(/images/VisionRey_TheaterScreen_Static_Logo_4K.png);
     background-attachment: fixed;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     box-shadow: 0 0 1300px 1300px rgba(0, 0, 0, 0.893) inset;
}

.sponsor-body .contact-form {
     background-color: rgba(0, 0, 0, 0);
     margin-top: 0;
}

.sponsor-tiers p {
     font-size: 2rem;
     margin: 0 0 25px 0;
}

.gold, .silver, .bronze {
     font-size: 4.3rem;
     margin: 0;
     font-weight: 400;
     margin-top: 60px;
}

.gold {
     color: rgb(208, 191, 95);
}

.silver {
     color: silver;
}

.bronze {
     color: rgb(151, 122, 84);
}

.sponsor-contact img {
     width: 600px;
     margin: 80px auto 0;
     display: flex;
     justify-content: center;
}

.sponsor-contact .contact-main {
     margin-top: 0px;
}

.sponsor-tiers li {
     font-size: 1.3rem;
     font-weight: 300;
     padding: 3px 0;
}





/* Carousel Container */
/* Keyframes for animation */
@keyframes scroll {
     0% { transform: translateX(0); }
     100% { transform: translateX(calc(-470px * 5)); }
 }
 
 /* Styling for slider */
 .slider {
     background: black;
     box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
     height: 600px;
     margin: 120px auto;
     overflow: hidden;
     position: relative;
     width: 95%;
 }
 
 /* Before and After pseudo-elements for slider */
 .slider::before,
 .slider::after {
     /* This is the inlined white-gradient mixin */
     background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%);
     content: "";
     height: 600px;
     position: absolute;
     width: 200px;
     z-index: 2;
 }
 
 .slider::after {
     right: 0;
     top: 0;
     transform: rotateZ(180deg);
 }
 
 .slider::before {
     left: 0;
     top: 0;
 }
 
 /* Styling for slide-track */
 .slider .slide-track {
     /* Animation speed replaced with its value */
     animation: scroll 40s linear infinite;
     display: flex;
     width: calc(470px * 10);
 }
 
 /* Styling for each slide */
 .slider .slide {
     height: 600px;
     width: 400px;
     margin-right: 70px;
 }
 


 

/******************************************
/* MOBILE STYLES
/*******************************************/

          @media (max-width: 800px){
          
          main {
               overflow-y: hidden;
               overflow-x: hidden;
          }

          .logo > img{
               width: 40vw;
          }

          body > * {
               overflow-y: hidden;
               overflow-x: hidden;
          }

          header > nav {
               padding: 0;
          }

          #hamburger {
               display: block;
          }

          .mobile-nav > ul {
               width: 70%;
          }

          .mobile-nav ul li a {
               font-size: 1.5rem;
          }

          .mobile-nav-logo {
               margin: 50px 0 50px 0;
          }

          .about {
               display: flex;
               flex-direction: column;
               height: fit-content;
          }

          .about aside p {
               font-size: 1rem;
               font-weight: 400;
          }

          .about aside h4{
               margin-top: 40px;
               font-size: 1.2rem;
               font-weight: 200;
          }

          .learn-more-button {
               margin-top: 50px;
          }

          .learn-more-button a {
               font-size: 1.3rem;
          }

          .head-vid {
               height: 350px;
          }

          .logo-row > * {
               width: 100%;
          }

          .logo-row {
               margin: 0 ;
               padding: 0 15px;
               gap: 15px;
          }

          .poster-container {
               width: 100%;
               margin: auto 0;
               height: 400px;
          }

          .poster-container > * {
               padding: 10px 3px!important;
               width: 100% !important;
          }

          .poster-container h2 {
               display: inline-block;
               padding: 0 auto;
          }

          .poster-container p {
               font-size: 1.4rem;
               margin: 0 30px;
          }

          .posters {
               height: 400px;
               background-attachment: unset;
          }

          .testimony-contact {
               display: flex;
               flex-direction: column;
          }

          .testimony {
               width: 100%;
               margin: 10px 0;
          }

          .contact-text {
               width: 90%;
               margin: 0 auto;
          }


          .learn-header {
               font-size: 3rem;
          }

          .learn-container {
               width: 95%;
               margin: 20px auto;
               padding: 15px;
          }

          .learn-container p {
               width: 100%;
          }


          .contact-info {
               display: none;
          }

          .contact-main {
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-content: center;
          }

          .wedding-header h1 {
               margin-top: 80px;
               font-size: 2.5rem;
          }

          .wedding-hero {
               display: flex;
               flex-direction: column;
               height: fit-content;
          }

          .wedding-hero figure {
               display: flex;
               height: 400px;
               min-height: 400px;
               width: 300px;
               margin: 16 auto;
          }

          .wedding-hero-text p {
               display: block;
          }


          .video-main {
               display: flex;
               flex-direction: column;
               margin-bottom: 30px;
          }

          .video-text {
               width: 90%;
               margin: 30px auto;
          }

          .video-text .highlight {
               border: 4px solid white;
               background-color: crimson;
               color: crimson;
               background-image: none;
          }

          .consult-header p {
               margin: 24px 0;
               font-size: 1.3rem;
               font-weight: 200;
          }

          .consult-header h3 {
               margin: 24px 0;
               font-size: 2rem;
          }

          .testimony-consult-block {
               display: flex;
               flex-direction: column;
               margin-top: 20px;
          }

          .testimony-consult-block .testimony {
               width: 90%;
          }

          .testimony aside {
               width: 90%;
          }

          .consult-midcopy {
               width: 90%;
               margin: 30px auto;
               font-size: 1.2rem;
          }

          .prices {
               width: 85%;
          }

          .prices li {
               font-size: 1rem;
          }

          .prices span {
               font-size: 1rem;
          }

          .prices h2 {
               margin: 15px 0;
               font-size: 1.8rem;
          }

          .prices a {
               font-size: 1.5rem;
          }

          .consult-form-container {
               display: flex;
               flex-direction: column;
               padding: 0;
          }

          .consult-form {
               margin: 15px auto;
               width: 95%;
          }


          footer {
               padding-top: 20px;
               display: flex;
               flex-direction: column;
               height: fit-content;
          } 


          .video-main > section {
               width: 100%;
               height: 260px;
               margin-bottom: 10px;
          }

          .video-main .main-vid {
               width: 100%;
               height: 260px;
          }

          .video-main .main-vid img {
               height: 260px;
               width: 100%;
               position: absolute;
               object-fit: cover;
               object-position: 50% 50%;
          }

          .video-main h3 {
               font-size: 1.5rem;
          }

          .video-main span {
               font-size: 1rem;
          }

          .masonry-gallery {
               margin: 0 ;
          }


          .container {
               margin-bottom: 60px;
               height: fit-content;
          }

          .container .box {
               height: 300px;
          }





          footer figure {
               display: none;
          }

          .social-footer-left {
               width: 100%;
          }

          .social-footer-left > nav {
               font-size: 25px;
               padding: 0;
          }

          .mailing {
               width: 100%;
               display: flex;
               flex-direction: column;
               padding-left: 0;
          }

          .mailing input[type="text"], 
          .mailing input[type="email"] {
               width: 60%;
          }

          .mailing .button {
               margin-top: 5px;
          }

          .footnav {
               width: 100%;
               height: fit-content;
          }

          .footnav > ul {
               display: flex;
               flex-direction: row;
               font-size: 1rem;
               font-weight: 200;
               align-content: center;
               justify-content: center;
               margin: 5px auto;
          }

          .contact-text {
               padding-right: 0;
          }

          .video-hero {
               background-position:unset;
          }

          .crew-bios {
               width: 95%;
          }


          .sponsor-images{
               margin: 0;
          }

          .sponsor-txt img {
               min-width: 0;
             }

             .showcase-text .tickets-button {
               margin: 0;
             }

}

@media (prefers-reduced-motion: no-preference) {
     html {
       scroll-behavior: smooth;
     }
   }