@font-face {
font-family: "Futura-Bold";
src: url("fonts/Futura-Bold.eot");
src: url("fonts/Futura-Bold.woff") format("woff"),
url("fonts/Futura-Bold.otf") format("opentype"),
url("fonts/Futura-Bold.svg#filename") format("svg");
}
@font-face {
font-family: "Futura-Medium-bt";
src: url("fonts/futura-medium-bt.eot");
src: url("fonts/futura-medium-bt.woff2") format("woff2"),
url("fonts/futura-medium-bt.ttf") format("truetype"),
}
@font-face {
font-family: "Futura-LightBT";
src: url("fonts/futura-light-bt.eot");
src: url("fonts/futura-light-bt.woff2") format("woff2"),
url("fonts/futura-light-bt.ttf") format("truetype");
}

a {text-decoration: none; color:black}
a:hover {text-decoration: none; color:grey} 

	/* Scroll bar */
 ::-webkit-scrollbar{
        height: 4px;
        width: 12px;
        background: #fbfbf6;
		/*display: none;*/ 
    }

    ::-webkit-scrollbar-thumb:horizontal{
        background: #c5c5c5;
        border-radius: 25px;		
    }
	/* Scrollbar thumb (the draggable part) */
	::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
	}
		
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	background: #555; 
    
}

body {
      margin: 0 0 0 7px;
      /*display: flex;  remove to have scroll bar at the bottom of the images*/
      flex-direction: column;
      min-height: 99vh;
	  overflow-x:hidden;
      /*overflow-x: auto;  Enable horizontal scrolling */
	  /* overflow-y: hidden;	  prevent body scrollbars */
	  font-family: 'Futura-Bold', Arial, sans-serif;
	  text-transform:uppercase;
	  font-weight: bold;
	  background-color:#fbfbf6; 
    }

    header {
      color: #000;
      text-align: center;
      padding: 7px 50px;
	  margin-bottom: 2.95%;
      font-size: 1.2rem;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .scroll-wrapper {
      flex: 1;
      overflow-x: auto;  /*horizontal scroll here */
      overflow-y: hidden;
      display: flex;	 
    }

    .container {
      display: flex;
      /*min-width: 200%; /* force horizontal scroll */
      height: 100%;
    }

    .left {
      flex: 0 0 400px;
      /*min-width: 15%;*/
	  /*width: 300px;*/
	  height: 600px;
      padding: 20px 20px 0 -1px;
	  margin:0 0 0 1.28%;
      box-sizing: border-box;
    }
	.left1 {
		flex: 0 0 335px; 
		height: 600px;
		padding: 20px 20px 0 -1px;
		margin: 0 0 0 18.28%;
	}
	.left2 {
		flex: 0 0 399px; 
		height: 600px;
		padding: 20px 20px 0 -1px;
		margin: 0 0 0 7.6%;
	}
	.left3 {
		flex: 0 0 331px; 
		height: 600px;
		padding: 20px 20px 0 -1px;
		margin: 0 0 0 6.5%;
	}
	.left-video {
	  flex: 0 0 391px;
	  height: 600px;
      padding: 20px 20px 0 -1px;
	  margin:0 0 0 7.9%;
      box-sizing: border-box;		
	}
    .right {
      /*flex: 0 0 8500px;*/
      /*min-width: 85%;*/
	  height: 600px;
      /*padding: 20px;*/
      box-sizing: border-box;
    }

    footer {
      display: flex;
	  position:fixed;
	  background-color: #fbfbf6;
      justify-content: space-between;
      align-items: center;
	  color:black; 
	  font-family: 'Futura-Bold' !important; 
	  font-size:0.73em;
	  width:100%; 
	  height:40px; 
	  /*padding-top:1em;*/
      /*padding: 10px;*/
	  /*margin:0 0 0 8%;*/
      position: sticky;
	  padding-left: 7%;
      /*bottom: 0;*/
      z-index: 10;
      /*min-width: 200%;*/
    }

    footer .footer-left {
      flex: 1;
    }

    footer nav {
      display: flex;
      gap: 48px;
	  margin:0 15% 0 0;
    }

    footer nav a {
      color: #000;
      text-decoration: none;
      font-weight: bold;
      transition: color 0.3s ease;
    }

    footer nav a:hover {
      color: grey;
    }
	
/* Pages, not work */
.left1 {flex: 0 0 33%; height: 600px; padding: 20px 20px 0 -1px; margin:0 auto; box-sizing: border-box;}
.pics {float:left; padding:0; margin:0; height:600px !important;}
.r-text {width:75%; margin:0 auto; padding:4% 3%}


/* Work pages styles */
.w-title {text-transform:uppercase; text-align:left; font-size:0.9em; margin-top:120px}
.w-stitle {font-size:0.65em; margin-top:80px}
.w-text {font-size:0.65em; margin-top:0px; width:302px; }
.w-date {font-size:0.65em; margin-top:60px; width:302px; }
.work-pic1 {float:left; padding:0; margin:0; height:600px !important;}
.video-pic {top:0;left:0;width:600px;height:600px;}
p {
font-weight:normal;
font-style:normal;
font-size:0.73em;
line-height:1.8em;
text-transform:uppercase;
padding-bottom:1.5em;
margin-top: 0;
}
	
    .small {
	 font-family: Futura-LightBT; 
	 font-size:0.7em; 
	 margin: 0 auto; 
	 padding: 10px 0;
	 text-transform: initial; 
	 font-weight: normal;
	 text-align: center;
	}

	.video-block {height:600px; width: 1080px; top:0;left:0;}


/*                    Mobile Versions               */
/*--------------------------------------------------*/

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	 footer {/*height: 0px; */margin: 0 0 0 0%; padding: 0 28px; }
	.left {margin:0 0px}
	.footer-left {width:20%}

.left, .lef1, .left2, .left3 {
      flex: 0 0 300px;
	  height: 600px;
      padding: 20px 20px 0 -1px;
	  margin:0 0 0 0.1%;
      box-sizing: border-box;
    }
	.left-video, .left2 {
	  flex: 0 0 300px;
	  height: 600px;
      /*padding: 20px 20px 0 -1px;*/
	  margin:0 0 0 0.7%;
      box-sizing: border-box;		
	}
	.vp-center {display: block !important}
	.work-pic1 {float:left; padding:0; margin:0; height:600px !important;}
	footer nav {display: flex; gap: 40px; margin: 0 15% 0 0;}
	
/* Pages, not work */
.r-text {width:100%; margin:0 auto; padding:4% 3%; font-size: 0.9em}
.pic {width:100%; margin-left:0}
.p-bio p {font-size:1em; line-height: 2em;}
.v-center {position:relative; margin:0}

  }
  
  
  @media only screen 
  and (max-width: 934px)
  and (orientation: landscape)  {
	header {margin-bottom: 0.2%;}
	footer {margin: 0 0 0 0%; padding: 0 1%;}  
	footer nav {display: flex; gap: 35px; margin: 0 7% 0 0;}
	.left-video, .left {margin:0 0 0 0.7%; flex: 0 0 355px;}
	.work-pic1 {height:300px !important;}
	.left {flex: 0 0 300px; /* min-width: 15%; width: 300px; */  height:47% !important; padding: 20px 20px 0 -1px; margin: 0 0 0 0.1%; box-sizing: border-box;}
	.w-text {padding:0; font-size:0.58em; width:340px}
	.w-title {text-transform: uppercase; text-align: left; font-size: 0.9em; margin-top: 0px;}
	.w-stitle {margin-top: 0px; padding:0}
	.right {height:600px}
	.container {height: 300px;}
	.w-date {margin-top: 30px; font-size:0.58em}
	.video-block {height:270px; width: 520px; top:0;left:0;}
	.small {font-size:0.55em}
	.video-pic {top:0;left:0;width:300px;height:300px;}
}

 /* Something here applies to the desktop!!!
 @media screen and (orientation: landscape)  {
	footer {margin: 0 0 0 0%; padding: 0 1%;}  
	footer nav {display: flex; gap: 48px; margin: 0 1% 0 0;}
	.left-video, .left {margin:0 0 0 0.1%; flex: 0 0 320px;}
	.right {}
	/*.work-pic1 {height:47% !important;}*/
	/*.w-title {margin-top:0}
  }
  @media (min-device-width:740px) {
	  .work-pic1 {height:600px !important;}
  }*/