/*OVERALL */

html {  overflow: scroll; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
a  { color: #888888; text-decoration: none; }
ul { font-size: 14px; font-family: Helvetica; color: #000000; list-style-type: none; padding: 0; display: grid; grid-template-columns: repeat(3, 250px); justify-content: center; column-gap: 0px; row-gap: 4px; }
   li { font-size: 14px; font-family: Helvetica; color: #000000; }
    #clientlist { font-size: 14px; font-family: Helvetica; color: #000000; }
    #clientdrop { font-size: 14px; font-family: Helvetica; color: #000000; }
img {loading="lazy"; text-align:center;}


/*BODY */

body { background-color: white; width: 800px; top:0px; margin: 0px auto 45px auto; }


/*TOP COLOR BAR */

#topcolorbar {top: 0; position: fixed; background-color: #d6d096; height: 12px; width: 100%; z-index:10; left: 0; }


/*TOP LINK BAR */

#topbar {top: 11; position: fixed; background-color: white; height: 75px; width: 100%; z-index:10; left: 0; border-bottom: 1px #c3c9c8 solid; }
   
 
/*BULB LOGO */
   
#bulbdiv {margin: 0px 0px 0px 0px;  top: 30px; z-index: 12; position: fixed; display: inline-block; position: fixed; }
   #bulbimg {margin: 0px 0px 0px 0px;  top: 0px; z-index: 12; filter: brightness(1); position: absolute; right: 20px; 
    filter: drop-shadow(1px 0 0 white) 
          drop-shadow(-1px 0 0 white) 
          drop-shadow(0 1px 0 white) 
          drop-shadow(0 -1px 0 white);}
		  
		  
		    
/*NAME LOGO */
   
#namediv {margin: 0px 0px 0px 0px;  top: 33px; z-index: 12; position: fixed; display: inline-block;}
   #nameimg {margin: 0px 0px 0px 0px;  top: 33px; z-index: 12; position: fixed; filter: brightness(1);
    filter: drop-shadow(1px 0 0 white) 
          drop-shadow(-1px 0 0 white) 
          drop-shadow(0 1px 0 white) 
          drop-shadow(0 -1px 0 white);}
 

/*PAGE LINK BUTTONS */
 
#v1div {margin: 0px 0px 0px 425px;  top: 40px; z-index: 12; position: fixed; display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; font-weight:bold; border-bottom: 2px black solid; } 
#v2div {margin: 0px 0px 0px 425px;  top: 40px; z-index: 12; position: fixed; display: inline-block; font-size: 15px; font-family: Helvetica; color: #888888; font-weight:bold;}
#v2link {margin: 0px 0px 0px 425px;  top: 40px; z-index: 12; position: fixed; display: inline-block; font-size: 15px; font-family: Helvetica; color: #888888; font-weight:bold;}
   #v2div:hover {filter: brightness(0);}
   #v2link:hover {filter: brightness(0);}
   
#d1div {margin: 0px 0px 0px 564px;  top: 40px; z-index: 12; position: fixed; display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000; font-weight:bold; border-bottom: 2px black solid;}
#d2div {margin: 0px 0px 0px 564px;  top: 40px; z-index: 12; position: fixed; display: inline-block; font-size: 15px; font-family: Helvetica; color: black; font-weight:bold;}
#d2link {margin: 0px 0px 0px 564px;  top: 40px; z-index: 12; position: fixed; display: inline-block; font-size: 15px; font-family: Helvetica; color: black; font-weight:bold;}
   #d2div:hover {filter: brightness(0);}
   #d2link:hover {filter: brightness(0);}
   
#p1div {margin: 0px 0px 0px 710px;  top: 40px; z-index: 12; position: fixed; text-align:right; display: inline-block; font-size: 15px; font-family: Helvetica; color: #000000;font-weight:bold; border-bottom: 2px black solid;}
#p2div {margin: 0px 0px 0px 710px;  top: 40px; z-index: 12; position: fixed; text-align:right; display: inline-block; font-size: 15px; font-family: Helvetica; color: black;font-weight:bold;}
#p2link {margin: 0px 0px 0px 710px;  top: 40px; z-index: 12; position: fixed; display: inline-block;  font-family: Helvetica; font-size: 15px; color: black; font-weight:bold;}
#p2div:hover {filter: brightness(0);}
   #p2link:hover {filter: brightness(0);}
   
/*YOUTUBE EMBED TEST PAGE */
   
#refresh {margin: 0px 0px 0px 645px;  top: 40px; z-index: 12; position: fixed; display: inline-block; font-size: 15px; font-family: Helvetica; color: black; font-weight:bold;}
   #refresh:hover {filter: brightness(0);}
   #refresh:hover {filter: brightness(0);}
#youtube {margin: 0px 0px 0px 400px;  top: 40px; z-index: 12; position: fixed; text-align:right; display: inline-block; font-size: 15px; font-family: Helvetica; color: black;font-weight:bold; border-bottom: 2px black solid;}
#projectvideoembedtest { margin: 120px auto 2px auto; text-align: left;}


/*PAY INVOICE PAGE */
   
#payinvoice {margin: 0px 0px 0px 660px;  top: 40px; z-index: 12; position: fixed; text-align:right; display: inline-block; font-size: 15px; font-family: Helvetica; color: black;font-weight:bold; border-bottom: 2px black solid;}
#stripeouter { top: 100px; margin: 120px auto 2px auto; text-align: center; border: 1px #c3c9c8 solid;  width: 800px; height: 550px;}
#stripeinner {  margin: 55px auto auto auto; text-align: center; }
#powered {  margin: 15px auto 50px auto; text-align: center; font-size: 12px; font-family: Helvetica; color: #888888; height:50px;}

   
   
/*HEADER REEL INFO */

#burlington {   line-height: 1.4em; height: auto; width:800px; margin: 15px auto 0px 0px; font-size: 15px;  font-family: Helvetica; color: #000000; text-align:left; z-index:13; display: inline-block;}

#about1 {  line-height: 1.4em; height: auto; width: 800px; margin: 23px auto 0px 0px; font-size: 15px;  font-family: Helvetica; color: #000000; text-align:left;}
#about2 {  line-height: 1.4em; height: auto; width: 800px; margin: 3px auto 0px 0px; font-size: 15px; font-family: Helvetica; color: #000000;text-align:left; }
#about3 {  line-height: 1.4em; height: auto; width: 800px; margin: 3px auto 0px 0px; font-size: 15px; font-family: Helvetica; color: #000000;text-align:left; }

#email {  line-height: 1.4em; height: auto; width:800px; margin: 23px 4px 0px 0px; font-size: 15px; text-align: left; font-family: Helvetica; color: #000000; z-index:13; display: inline-block; }

#clientlist {  line-height: 1.4em; height: auto; width:800px; margin: 23px 4px 0px 0px; font-size: 15px; text-align: left; font-family: Helvetica; color: #000000; z-index:13; display: inline-block; text-decoration: underline;}

#linkedindiv { height: auto; margin: 20px 0px 0px 0px; font-size: 15px; text-align: center; font-family: Helvetica; color: #999999; display: inline-block;  width: auto !important;}
   #linkedinlink { height: auto; margin: 20px 0px 0px 0px; font-size: 15px; text-align: center; font-family: Helvetica; color: #999999; display: inline-block;  width: auto !important;}
   a.linkedinlink:hover { color: black; text-decoration: none; font-weight: none; filter: brightness(0);}
#instagramdiv { height: auto; margin: 0px 0px 0px 60px; font-size: 15px; text-align: center; font-family: Helvetica; color: #999999; display: inline-block;  width: auto !important;}
   #instagramlink { height: auto; margin: 0px 0px 0px 60px; font-size: 15px; text-align: center; font-family: Helvetica; color: #999999; display: inline-block;  width: auto !important;}
   a.instagramlink:hover { color: black; text-decoration: none; font-weight: none; filter: brightness(0);}
   
   
/*REEL VIDEO */

#reel { margin: 75px 0px 0px 0px;}

   
/*PROJECT INFO BOXES */

#projectinfoboxreel {  top: 84px; height: 165px; margin: 95px 0px 0px 0px; background-color: white; position: ; padding-top: 6px; padding-bottom: 6px; z-index: 8;}
#projectinfobox { margin: 120px 0px 5px 0px; }
#projectinfoboxdesign1 {  top: 74px; margin: 108px 0px 0px 0px; background-color: white; position: ; padding-top: 6px; padding-bottom: 6px; z-index: 8;}
#projectinfoboxpersonal1 { top: 74px; margin: 108px 0px 0px 0px; background-color: white; position: ; padding-top: 6px; padding-bottom: 6px; z-index: 8;}
#projectinfoboxnote {  font-size: 15px; margin: 0px auto 0px 0px;  background-color: white; padding-top: 6px; padding-bottom: 6px; padding-left: 2px; z-index: 8; line-height: 1.4em; height: auto; width: 800px; font-family: Helvetica; color: #000000; text-align:left;}


/*PROJECTS INFO TEXT */

.row { display: flex; gap: 20px;  line-height: 1.4em; font-family: Helvetica; color: black; font-size: 15px; text-align: left;}
.label { width: 50px;  line-height: 1.4em; font-family: Helvetica; color: black; font-size: 15px; text-align: left;}
.value { flex: 1;  line-height: 1.4em; font-family: Helvetica; color: black; font-size: 15px; text-align: left;}
#path {margin: 0px 0px 0px 0px;  z-index: 12; font-size: 15px; font-family: Helvetica; color: black; line-height: 1.4em; }

/*PROJECTS VIDEOS */

#projectvideo { margin: 0px auto 2px auto; text-align: center;}
#projectvideohidden { margin: 0px auto 2px auto; text-align: center;}


/*PROJECTS PICTURES */

#projectpicture { margin: 0px auto 2px 2px; text-align: center; width: 800px; height: 450px;  }
#projectpicturesquare { margin: 0px auto 2px 2px; text-align: center; width: 800px; height: 800px;  }
#projectpicture1 {  margin: 0px 0px 2px 2px; z-index: 8; width: 800px; height: 450px;}
#toppics { margin: 45px auto 2px 2px; text-align: center; width: 800px; height: 450px;  }


/*BOTTOM */ 
#scrollTopBtn { background: none; border: none; padding: 0; margin: 0; outline: none; box-shadow: none; cursor: pointer; display: none; /* if you're toggling visibility */ margin: 190px auto 0px auto; }
#scrollTopBtn img { display: block;   /* removes tiny spacing under image */ width: 50px;      /* adjust as needed */ height: auto; }
#scrollTopBtn:hover { opacity: 0.5; }
#bottomspace {height: 140px; width: 796px; }


/*YOUTUBE EMBED */
.video {
  position: relative;
  height: 0;
  max-width: 100%;
  background: #000;
  overflow: hidden;
  transform: translateZ(0);
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video iframe {
  scale: 1.001 ;
    transform: scale(1.001);
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  
}

.thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.play {
	/* width and color */
  -webkit-text-stroke: 1px black;
  /* separate properties */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  
  /* often used with transparent fill for "hollow" text */
  color: transparent;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 60px;
  cursor: pointer;
  color: white;
  font-size: 45px;
  display: flex;
  align-items: center;
  justify-content: center;

}
.play:hover {color: black;}