
html {
	scroll-behavior: smooth;
}


.text-animator {
   background-image: linear-gradient(
      -225deg,
      #00ff44 0%,
      #44107a 29%,
      #ff1361 67%,
      #fff800 100%
      /* #231557 0%,
      #44107a 29%,
      #ff1361 67%,
      #fff800 100% */
   );
   background-size: auto auto;
   background-clip: border-box;
   background-size: 200% auto;
   color: blue;
   background-clip: text;
   /* text-fill-color: transparent; */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: textclip 1s linear infinite;
   display: inline-block;
   font-size: 1.25em;
   font-family:'Chakra Petch', sans-serif;
}


@keyframes textclip {
   to {
      background-position: 200% center;
   }
}



   

#CPOriginsLogoDIV {
   /* 949 x 162 --> 475 x 81 */
   /* background-image: url("../images/CryptoPunks-ORIGINS-NEW-BLUE.jpg"); */
   /* background-image: url("../images/CryptoPunks-ORIGINS-Large-INVERSED.png"); */
   
   /* background-image: url("../images/LOGOS/CryptoPunks-ORIGINS-Magenta-Opacity80.png"); */
   /* background-image: url("../images/LOGOS/CryptoPunks-ORIGINS-LG-Transparent-PINK-HalfSolid.png"); */
   /* background-image: url("../images/LOGOS/CryptoPunks-ORIGINS-LG-LiteBLU.png"); */
   /* background-image: url("../images/LOGOS/CryptoPunks-ORIGINS-LG-BLU-HalfFull-Opacity65.png"); */
   background-image: url("../images/LOGOS/CryptoPunks-ORIGINS-LG-BLUE-MIX.png");
   /* background-image: url("../images/CPOLore-Logo-AnimatedGIF.gif"); */
   /* background-image: url("../images/CryptoPunks-ORIGINS-Large-Transparent.png"); */
   /* background-image: url("../images/CryptoPunks-ORIGINS-NEW-MAGENTA.jpg"); */
   height: 81px;
   width: 475px;
   
   background-repeat: no-repeat;
   background-size: contain;
   padding: 0%;

   margin-top: 0%;
   margin-bottom: 0%;
}




.fadingInTooClass {
   opacity: 0;
   transition: all 2s;
}





#MasterVimeoContainerDIV {
   width: 100%;
   margin: auto;
   padding-top: 20px;
   padding-bottom: 20px;
   /* border: solid yellow 1px; */
   background-color: black;
}



#VimeoContainerDIV {
   width: 80%;
   margin: auto;
   max-width: 1140px;
   padding-top: 20px;
   padding-bottom: 20px;
   /* border: solid pink 1px; */
   background-color: black;
}






#MasterContainer {
   width: 100%;
   background-color: #3083DC;
   margin: 0%;
}




#MasterCastContainer {
   width: 100%;
   background-color: #dc30d3;
   margin: 0%;

   margin-top: 0% !important;
}




.card-body {
   min-height: 570px;
   /* min-height: 570px !important; */
   /* min-width: 500px !important; */
}




.masterButtonContainer  {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 1px;
   /* padding: 1.15rem; */
   
   padding: 0%;
   
   min-width: 1px;
   /* min-width: 500px; */

   overflow: hidden;

   border: solid 1px rgb(255, 0, 225);
   border-radius: 9px;
}







.artTokenImageClass {
   width: 96%;
   height: auto;
   border: solid 1px black;
}





#CIGsExplainerDIV {
   position: absolute;
   width: 50%;
   background-color: rgb(255, 247, 226);
   border-color: rgb(62, 63, 65);
   border-radius: 4.0px;

   padding: 15px;
   padding-left: 20px;
   padding-right: 20px;
   
   text-align: left;
   display: inline-block;
   
   /* top: 50px; */
   border-width: 2px;
   border-style: solid;

   overflow: scroll;
}



#NetworkAccountDIV {
   width: 75%;
   background-color: rgb(131, 255, 207);

   margin: auto;
   margin-top: 0rem;
   margin-bottom: 0rem;

   text-align: right;
}




#PaymentChoice0DIV {
   /* background-color: #00ff44; */
   margin: auto;
   margin-top: 20px;
}


/* .PaymentChoiceClass {
   width: 70%;
   background-color: bisque;
   border: solid 1px black;
   border-radius: 5px; 
   margin: auto; 
   padding: 7px; 
   text-align: left;
} */





#timeRemainingLabel {
   width: 75%;

   margin-left: auto;
   margin-right: auto;
   margin-top: 0px;

   background-color: #434343;
   color: aquamarine;

   font-family: 'Courier New', Courier, monospace;
   font-size: medium;
   padding: 3px;
   margin-top: 0px;
}



.sectionHeaderClass {
   /* background-color: rgb(64, 64, 64); */
   color: rgb(255, 0, 238);
   width: 100%;
   margin: auto;

   /* margin-left: 0px;
   margin-right: 15px; */
   margin-top: 0px;
   margin-bottom: 10px;

   /* margin-top: 15px; */
   padding-top: 15px;
   padding-bottom: 7px;

   text-align: center;
   font-family:'Chakra Petch', sans-serif;
   text-shadow: 2px 2px black;
}




.filmmakersHeader {
   font-family:'Chakra Petch', sans-serif;
   font-weight: 700;
   color: rgb(8, 4, 255);
   text-align: center;
   padding-top: 6px;
   padding-bottom: 6px;
}





.filmmakerImageStyleClass {
   -ms-flex-negative: 0;
   flex-shrink: 0;
   width: 100%;


   display: block;

   margin-left: auto;
   margin-right: auto;
   margin-top: 9px;

   max-height: 400px;
   width: auto;
}



.filmmakerHeaderClass {
   color: blue;
   font-family:'Titillium Web', sans-serif;
   /* font-family:'Chakra Petch', sans-serif; */

   font-size: 2.05rem;

   padding: 0%;
   margin: 0%;
}



.filmmakerSubHeaderClass {
   color: blue;
   font-family:'Chakra Petch', sans-serif;

   padding: 0%;
   margin: 0%;

   font-size: 1.45rem;
}





table {
   max-width: 400px;
   height: auto;
   margin: auto;
   background-color: #77757a;
   padding: 0px;
   border-spacing: 0px;
   border: solid 1px rgb(54, 54, 54);
   border-radius: 5px;
   font-size: 0.9em;
   overflow: hidden;
   border-collapse: separate;
}



input[type=radio] {
   /* float: left; */
   height: 100%;
   height: 25px;
   width: 25px;
   /* display: inline; */
   /* display: table-cell; */
   vertical-align: middle;

   background-color: #00ff44;
}




/* video background */
#backgroundVideo {
   position: fixed;
   width: 100vw;
   height: 100vh;
   object-fit: cover;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   z-index: -1;
 }



#VCR_PLAY_Video {
   position: relative;
   width: 600px;
   height: auto;
   object-fit: cover;

   top: -120px;
   left: -29px;
   /* right: 0px;
   bottom: 0px; */

   margin: 0%;
   padding: 0%;

   /* opacity: 0.5; */

   z-index: 2;

 }






 .footerLinkClass {
   color: #a7cfff;
   /* color: rgb(99, 128, 255); */
   font-family:  'Chakra Petch', sans-serif;
   
   margin-left: 5px;
   margin-right: 5px;
}



.footerLinkClassVisiting {
   color: rgb(99, 128, 255);
   font-family:  'Chakra Petch', sans-serif;
   
   margin-left: 5px;
   margin-right: 5px;
}






.radioLabelClass {
   text-align: left;
   margin-left: 10px;
   margin-right: 7px;
   /* display: block; */
   margin-bottom: 0%;
   /* background-color: pink; */
   color: black;
}


  
   
.TokenArtLabel {
   /* border: solid 1px rgb(51, 0, 255); */
   margin-top: 0%;
   margin-bottom: 6px;
}
        




.VideoClass {
   width: 100% !important;
}



.tokenPrice {
   font-size: 0.9em;
   color: #0606ff;
   font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}



.betterTextField {
   border-radius: 5px;
   line-height: 13px;
   font-size: 0.9em;
   /* padding: 10px; */
}





#CPOLogoDIV {
   width: 100%;
   background-color: black;
   text-align: center;
   
}




#CPOLogoImage {
   width: 100%;
   text-align: center;
   
   width: auto;
   height: 120px;

   /* width: 700px;
   height: auto; */
}





#PunkOwnershipVerificationDIV {
   width: 80%;
   margin: auto;
   background-color: bisque;
   border: solid black 1px;

   color: black;
}



#ArtTokensMasterDIV {
   background-color: rgb(185, 185, 185);
   width: 75%;
   margin-top: 0%;
   margin: auto; 

   padding-top: 12px;

   height: fit-content;
   text-align: center; 
}
     


#ArtTokensMasterDIV2 {
   background-color: rgb(202, 197, 197);
   /* background-color: rgb(63, 63, 63); */
   margin:auto; 
   height: 400px; 
   text-align: center; 

   display: inline-block;
   /* overflow: hidden; */
}
     


.ArtTokenDIV {
   width: 96%;

   margin: auto;
   margin-top: 20px;

   background-color: rgb(224, 240, 241);
   color: rgb(0, 55, 255);
   border: solid 1px rgb(33, 33, 37);
   border-radius: 5px;

   padding-bottom: 10px;

   text-align: center;
}



#DelegateCashDIV {
   width: 60%;
   margin: auto;
   border: solid 3px black;
   /* background-color: #888b8b; */
   background-color: #3083DC;
   color: rgb(255, 255, 255);
}



#BottomButtonsContainerDIV {
   position: absolute;
   bottom: 10px;
   left:0px;
   width: 100%;
   margin: auto;

   /* background-color: rgba(42, 255, 255, 0.65); */

   text-align: center;
   font-family:  'Montserrat', sans-serif;
}


#MinterDIV {
   width: 60%;
   margin: auto;

   background-color: rgba(37, 37, 37, 0.65);
   color: rgb(7, 234, 15);
   
   width: 60%;
   /* margin-top: 5px; */
   /* margin-bottom: 0px; */


   padding: 1px;
   padding-top: 8px;

   border: solid 2px gray;
   border-radius: 5px;

   text-align: center;
   font-family:  'Montserrat', sans-serif;
}



      
#MinterIsLiveHeader {
   text-align: center; 
   padding-top: 3px; 
   padding-bottom: 0px;

   font-size: 1.75em;
}



/* PAUSE BUTTON STUFF  */

#PauseButtonDIV {
   position: absolute;
   bottom: 10px;
   left: 10px;
   width: 110px;

   /* text-align: center; */
   /* font-family:  'Chakra Petch', sans-serif; */
}



#thePauseButton {
   /* ZERO OPACITY BACKGROUND! */
   background-color: rgba(204, 204, 204, 0.0);
   
   padding: 3px 8px 3px 8px;
   margin-left: 0px;
   margin-top: 0px;
   border-radius: 5px;
   
   font-family:'Chakra-Petch', sans-serif;
   /* font-weight: 400; */
   /* font-size: 0.9em; */
}


#thePauseButton img {
   width: 30px;
   height: auto;
}




#ConnectButtonDIV {
   width: 65%;
   background-color: rgb(201, 255, 237);
   margin: auto;
   text-align: center;
   padding: 7px;
}




#Web3ModalConnectButtonsDIV {
   width: 75%;
   background-color: rgb(188, 246, 218);
   margin: auto;
   text-align: center;
   padding: 7px;
}




.Web3ModalConnectButtonStyle {      
   margin: auto; 
   background-color: rgb(0, 26, 255); 
   color: rgb(222, 255, 188); 
   opacity: 0.75;

   margin-top: 3px;
   margin-left: 0%;
   margin-right: 0%;

   font-family: Arial, Helvetica, sans-serif;
   font-size: medium;
   
   /* Top Right Bottom Left: */
   padding: 5px 10px 4px 10px; 

   border-radius: 4px;
}


.Web3ModalDisconnectButtonStyle {      
   margin: auto; 
   background-color: rgb(175, 3, 26); 

   color: rgb(240, 227, 109); 
   margin-top: 3px; 

   /* Top Right Bottom Left: */
   padding: 6px 9px 6px 9px; 
}





#MainContentParagraph {
   width: 75%; 
   background-color: rgb(249, 213, 255); 
   margin: auto;
    
   font-family:  'Montserrat', sans-serif;
   font-size: 1.0em;
   text-align: center; 
   padding: 7px;
}
          



#MainHeader {
   width: 75%;
   margin: auto;
   background-color: rgb(39, 2, 100); 
   /* background-color: rgb(228, 0, 114);  */
   color: bisque; 
   margin-top: 0rem;
   margin-bottom: 0px;

   font-family:  'Montserrat', sans-serif;
   font-size: 2.15em;
   /* font-size: x-large; */
   text-align: center;
   /* font-size: x-large; font-size: large; */
   font-weight: 500;
}



#MintingStatusHeader {
   background-color: rgb(228, 0, 114); 
   color: bisque; 
   margin-top: 0rem;

   font-size: x-large;
   font-family: 'Montserrat', sans-serif;
   text-align: center;

   clear: both;
}






.numEditionsMintedClass {
   color: rgb(13, 3, 60);
   font-size: 0.85em;
}





#DocumentaryTitleHeader {
  text-align: center; 
  padding-top: 6px; 
  padding-bottom: 6px;

  font-size: x-large;
}



.thePinkMontserrat {
  font-family:'Montserrat', sans-serif; 
  color:  rgb(255, 4, 180);
}




/* #MetamaskConnectButton {
   background-color: blue;
   color: antiquewhite;

   border: solid 1px blue;
   border-radius: 5px;

   padding-left: 10px;
   padding-right: 10px;
   padding-top: 5px;
   padding-bottom: 5px;

   margin: auto;
} */




#smoothAlert {
   z-index: 501;
   top: 5%;
   width: 350px;
   left: -10000px;

   padding: 20px;
   background-color: blue;
    /* #2196F3; */
   color: white;
   opacity: 1;
   transition: opacity 0.9s;
   margin-bottom: 15px;
   display: inline-block;
   position: absolute;

}



.closeAlertBtn {
   /* background-color: red; */
   margin-top: -15px;
   margin-right: -9px;
   /* margin-left: 15px; */
   color: rgb(38, 255, 0);
   font-weight: bold;
   float: right;
   font-size: 22px;
   line-height: 20px;
   cursor: pointer;
   transition: 0.3s;
 }


 .closeAlertBtn:hover {
   color: rgb(255, 0, 212);
 }



#spinnerDIV {
   z-index: 500;

   display: inline-block;
   position: absolute;
   /* fixed;  */
    /* ; */
   top: 5%;

   text-align: center;
   padding-top: 9px;
   padding-left: 5px;
   padding-right: 5px;

   width: 350px;
   height: 250px;

   background-color: rgb(219, 255, 247);

   border-width: 2px;
   border-style: solid;
   border-radius: 15.0px;
   border-color: rgb(62, 63, 65);
}




#adminButtonsDIV {
   width: 80%; 
   background-color: rgb(211, 239, 216);
   color: rgb(99, 3, 172);

   border: solid 4px rgb(11, 6, 67);

   padding: 10px;
   margin-top: 5px;
   margin-bottom: 5px;
   margin-left: auto;
   margin-right: auto;

   text-align: center;
}



#FooterDIV {     
   width: 100%;
   background: rgb(22, 22, 22);
   /* background-color:rgb(228, 210, 165); */
   margin: 0px;
   padding-top: 10px;
   padding-bottom: 10px;
   border-top: solid 1px black;

   text-align: center;

   clear: both;
   /* font-family: 'Montserrat', sans-serif; */
   /* font-size: 1.0em; */
}



/* #whitelistRegistrationForm {
   background-color: rgb(255, 216, 43);
   overflow: auto;
}


#whitelistRegistrationDIV {
   width: 65%;
   overflow: auto;
   background-color: rgb(255, 165, 252);

   margin: auto;
   padding-left: 5px;;
   text-align: left;
} */



/* 
tbody {
   width: 100%;
   background-color: orange;
   padding: 10px;
} */


.videoHeader {
   color: blue;
   font-family:'Chakra Petch', sans-serif;

   padding: 0%;
   margin: 0%;
}



.LarvaLabsLogo {
   color:  rgb(255, 4, 180);
   font-family:'Montserrat', sans-serif;
}






input[type=number]::-webkit-inner-spin-button {
   opacity: 1;
}




.infoParagraphClass {
   margin-top: 0px !important;
   margin-bottom: 0rem;
   text-align: left;
   font-family: 'Courier New', Courier, monospace;
   font-size: 1.0em;
   padding-left: 7px;
}



.infoLabelClass {
   color: blue;

   margin-top: 0px !important;

   /* font-size: ; */
   font-weight: 400;
}








@media only screen 
and (device-width: 390px) 
and (device-height: 844px),
screen and (device-width: 375px),
screen and (device-width: 412px),
screen and (device-width: 414px),
screen and (device-width: 428px)
and (-webkit-device-pixel-ratio: 3) {



   #CPOLogoDIV {
      width: 100%;
      background-color: rgb(221, 35, 35);
      text-align: center;
      padding: 0px;
      margin: 0%;
   }


   #CPOLogoImage {
      /* background-color: rgb(221, 35, 35); */
      text-align: center;

      margin: auto;
      
      width: 380px;
      height: auto;

   }



   #adminButtonsDIV {
      width: 96%; 
      background-color: rgb(211, 239, 216);
      color: rgb(99, 3, 172);
   
      border: solid 4px rgb(11, 6, 67);
   
      padding: 10px;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: auto;
      margin-right: auto;
   
      text-align: center;
   }
   

   #ArtTokensMasterDIV {
      background-color: rgb(185, 185, 185);
      /* background-color: rgb(63, 63, 63); */
      margin-top: 0rem; 
      margin: auto;

      width: 98%;
      /* display: block; */
      /* height: 190px;  */
      /* overflow: hidden; */
   }
             
   
   .TokenArtLabel {
      /* border: solid 1px rgb(51, 0, 255); */
      margin-top: 0%;
      margin-bottom: 6px;
   }
        


   #MainContentParagraph {
      width: 97%;
      background-color: rgb(249, 213, 255);
      border: solid 1px black;
      margin: auto;

      text-align: center;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.9em;
      padding: 7px;
   }
         


   #MainHeader {
      width: 100%;
      margin: auto;
      background-color: rgb(39, 2, 100);
      /* background-color: rgb(228, 0, 114);  */
      color: bisque;
      margin-top: 0rem;
      margin-bottom: 0rem;

      font-family: 'Montserrat', sans-serif;
      font-size: 1.5em;
      text-align: center;
   }




   #MintingStatusHeader {
      background-color: rgb(228, 0, 114); 
      color: bisque; 
      margin-top: 0rem;
   
      font-family: 'Montserrat', sans-serif;
      text-align: center;
      font-size: x-large; 
      /* font-size: large; */
   
      clear: both;
   }

   


   #Web3ModalConnectButtonsDIV {
      width: 98%;
      background-color: rgb(188, 246, 218);
      margin: auto;
      text-align: center;
      padding: 7px;
   }



   #DelegateCashDIV {
      width: 98%; 
      margin: auto; 
      border: solid 3px black; 
      background-color: #3083DC; 
      color: rgb(255, 255, 255);
   }



   #NetworkAccountDIV {
      width: 100%;
      background-color: rgb(131, 255, 207);
   
      margin: auto;
      margin-top: 0rem;
      margin-bottom: 0rem;
   
      text-align: center;
   }
   

      
   #DocumentaryTitleHeader {
      text-align: center; 
      padding-top: 6px; 
      padding-bottom: 6px;

      font-size: x-large;
   }




   #MinterDIV {
      width: 90%;
      margin: auto;
      margin-top: 5px;
      margin-bottom: 0px;

      border: solid 2px gray;
      border-radius: 9px;

      padding: 1px;
      padding-top: 8px;
      background-color: rgb(0, 0, 0);
      color: rgb(7, 234, 15);
      
      text-align: center;
      font-family:  'Montserrat', sans-serif;
   }


      
   #MinterIsLiveHeader {
      text-align: center; 
      padding-top: 3px; 
      padding-bottom: 0px;

      font-size: 1.25em;
   }



   /* #FooterDIV {
      width: 100%;
      background-color:rgb(228, 210, 165);

      margin: auto;
      margin-top: 0px;
      padding-top: 7px;
      
      text-align: center;

      font-family: 'Montserrat', sans-serif;
      font-size: 0.9em;
   } */




   #FooterDIV {     
      width: 100%;
      /* background: rgb(174, 174, 174); */
      
      background-color: rgb(22, 22, 22);
      margin: 0px;
      padding-top: 10px;
      padding-bottom: 10px;
      border-top: solid 1px black;

      text-align: center;

      font-family: 'Montserrat', sans-serif;
      font-size: 0.9em;

      clear: both;
   }



   .infoParagraphClass {
      margin-top: 0px !important;
      margin-bottom: 0rem;
      text-align: left;
      font-family: 'Courier New', Courier, monospace;
      font-size: 0.925em;
      padding-left: 5px;
   }




   .infoLabelClass {
      color: blue;

      margin-top: 0px !important;
      
      font-weight: 400;
   }



   
   .Web3ModalConnectButtonStyle {      
      margin: auto; 
      background-color: darkorchid; 
      color: rgb(222, 255, 188); 
      opacity: 0.75;

      margin-top: 5px;
      /* margin-left: 0%; */
      margin-right: 0%;

      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.8em;
      
      /* Top Right Bottom Left: */
      padding: 9px 3px 6px 3px; 

      border-radius: 5px;
   }




   .text-animator {
      background-image: linear-gradient(
      -225deg,
      #00ff44 0%,
      #0606ff 29%,
      #ff1361 67%,
      #fff800 100%
      /* #231557 0%,
      #44107a 29%,
      #ff1361 67%,
      #fff800 100% */
      );
      background-size: auto auto;
      background-clip: border-box;
      background-size: 200% auto;
      color: blue;
      background-clip: text;
      /* text-fill-color: transparent; */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textclip 1s linear infinite;
      display: inline-block;
      font-size: 1.0em;
   }
 



   .VideoClass {
      width: unset !important;
      max-width: 100vw !important;

      margin: 0px auto !important;
   }



   .radioLabelClass {
      text-align: left;
      margin-left: 10px;
      margin-right: 7px;
      /* display: block; */
      margin-bottom: 0%;
      /* background-color: pink; */
      color: black;
   }


   /* .PaymentChoiceClass {
      width: 96%;
      background-color: bisque;
      border: solid 1px black;
      border-radius: 5px; 
      margin: auto; 
      padding: 7px; 
      text-align: left;

      font-size: 0.9em;
   } */



   table {
      width: 90%;
      height: auto;
      margin: auto;
      background-color: #77757a;
      padding: 0px;
      border-spacing: 0px;
      border: solid 1px rgb(54, 54, 54);
      border-radius: 9px;
      font-size: 0.9em;
      overflow: hidden;
      border-collapse: separate;
   }


   #CIGsExplainerDIV {
      width: 350px;
      max-height: 625px !important;
      overflow: scroll;

      position: absolute;
      left: 2px;
      top: 20px;

      /* background-color: rgb(255, 187, 246); */
      background-color: rgb(255, 247, 226);
      border-color: rgb(62, 63, 65);
      border-radius: 4.0px;
      
      padding: 9px;
      padding-left: 9px;
      padding-right: 9px;
      
      text-align: left;
      display: inline-block;

      border-width: 2px;
      border-style: solid;

      font-size: 0.9rem;
   }



   #timeRemainingLabel {
      width: 100%;
      margin: auto;

      background-color: #434343;
      color: aquamarine;

      font-family: 'Courier New', Courier, monospace;
      font-size: 0.9rem;
      padding: 3px;
      margin-top: 0px;
   }




   .card-body {
      min-height: 300px;
      /* min-height: 300px !important; */
      padding: 0.9rem;
   }
 
   

   .Web3ModalDisconnectButtonStyle {
      display: none !important;
   }




   .filmmakersHeader {
      font-family:'Chakra Petch', sans-serif;
      font-weight: 700;
      font-size: 1.5rem;
      color: rgb(8, 4, 255);
      text-align: center;
      padding-top: 6px;
      padding-bottom: 6px;
   }




   .filmmakerHeaderClass {
      color: blue;
      font-family:'Chakra Petch', sans-serif;
      /* font-family:'Chakra Petch', sans-serif; */
      

      font-size: 1.5rem;

      padding: 0%;
      margin: 0%;
   }



   .filmmakerSubHeaderClass {
      color: blue;
      font-family:'Chakra Petch', sans-serif;

      padding: 0%;
      margin: 0%;

      font-size: 1.15rem;
   }


   .col-sm-6 {
      padding-left: 10px;
      padding-right: 10px;
   }


}





@media (max-width: 992px) {

   .masterButtonContainer  {
      padding: 0%;
      
      max-width: 450px;

      border: solid 2px green;
      border-radius: 9px;
   }


   #VCR_PLAY_Video {
      position: relative;
      max-width: 400px;
      height: auto;
      object-fit: cover;

      top: -80px;
      left: -50px;
   }


}






@media (max-width: 768px) {

   .container {
      max-width: 720px;
      /* background-color: white; */
   }


   .col-3 {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 185px;
      /* max-height: 200px; */
      /* max-width: 25%; */
   }


   #CPOriginsLogoDIV {
      background-image: url("../images/LOGOS/CPO-Logo5.png");
      height: 55px;
      width: 264px;
   }


   .masterButtonContainer  {
      padding: 0%;
      
      max-width: 350px;

      border: solid 1px red;
      border-radius: 9px;
   }



   #VCR_PLAY_Video {
      position: relative;
      /* max-width: 400px; */
      height: auto;
      object-fit: cover;

      top: -60px;
      left: -50px;
   }


}



   

@media (max-width: 576px) {

   .my-col-sm-6 {
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
      margin-left: auto;
      margin-right: auto;

                                             /* ----- IMPORTANT!!! ---------------------------------------------- */
      /* border: solid 1px lime; */
      /* background-color: lightslategray; */
   }



   #MasterVimeoContainerDIV {
      width: 100%;
      margin: auto;
      padding-top: 0px;
      padding-bottom: 0px;
      /* border: solid yellow 1px; */
      background-color: black;
   }
   

   #VimeoContainerDIV {
      width: 99%;
      margin: auto;
      max-width: 1140px;
      margin: auto;
      padding-top: 0px;
      padding-bottom: 0px;
      /* border: solid pink 1px; */
      background-color: black;
   }
   


   #VCR_PLAY_Video {
      position: relative;
      /* max-width: 400px; */
      height: auto;
      object-fit: cover;

      top: -65px;
      left: -90px;
   }





   .filmmakerImageStyleClass {
      -ms-flex-negative: 0;
      flex-shrink: 0;
      width: 100%;


      display: block;

      margin-left: auto;
      margin-right: auto;
      margin-top: 9px;

      max-height: 300px;
      width: auto;
   }


}
