/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

dark blue   #140a31
Blue 1      #1c415d                   
Blue 2      #8ccfdc
Green       #d2f5d5
Yellow      #efea4a

*/

@font-face {
    font-family: 'Reg'; 
    src: url('Fonts/OldNewspaperTypes.ttf'); 
}
@font-face {
    font-family: 'HandWriting'; 
    src: url('Fonts/Skrawl.ttf'); }



Body {
 background-image:url(Assets/Pattern_BackgroundStars_04.png);
 background-color:#140a31;
 background-repeat:repeat;
  background-position:top;
  background-size:5%;
 color:#140a31;
 font-family:"Reg";
  padding-left:15%;
  padding-right:15%;
}
body:hover{
  cursor:url(Assets/Cursors/UFO.png),pointer; 
}

.Container {
  margin:auto;
  padding-left:60px;
  padding-right:60px;
  background-image:url(Assets/Txtrs/notepad.png);
  background-size:100%;
  background-repeat:repeat;  
}
.Container :hover{cursor:url(Assets/Cursors/hand.png),pointer;}
.Title{
  margin:auto;
  padding-top:11%;
  padding-bottom:10px;
}

.Title h1{text-decoration-line:underline; font-size:35px;text-align:center;}
.About h2 {font-size:24px; font-family:"HandWriting";}
.Title p {color:#1c415d; font-size:18px;}
.About {display:flex;flex-direction:row; align-items:center; justify-content:center;}
.icons{
  display:inline-flex;
  flex-direction:row;
  justify-content:space-evenly;
  align-items:flex-start;

  }
.icons h2{font-family:"Reg"; text-align:left; font-size:18px;}
.icon{
  display:contents;
  border:solid green;
  width:fit-content;
  }
.icon img{width:50px;margin-left:10px;margin-right:10px;}
.icon :hover{cursor:url(Assets/Cursors/handhover.png),pointer;}

.Meat {
padding:10px;
 margin:auto;
 max-height:900px;
 overflow:hidden;
}

.tab button {
  font-family:"Handwriting";
  color:#1c415d;
  font-size:24px;
  border:solid 5px #1c415d;
  border-radius:5px;
  background:none;
  margin:5px;
  padding:7px;
  }
.tab button:hover{
  background: #efea4a;
  }
  
  .tabcontent {
   overflow-y:scroll;
   overflow-x:hidden;
   max-height:800px;
   /*background-image:url(Assets/Txtrs/paperplain.jpg);*/
  background-size:100%;
  background-repeat:repeat;
  background-attachment: local;
  }
  .tabcontent::-webkit-scrollbar{
    width:10px;
    height: fit-content;
    background-color: #8ccfdc;
    }
    
  .tabcontent::-webkit-scrollbar-thumb{
    background-color: #1c415d;
    border-radius: 10px;
    }
  .tabcontent::-webkit-scrollbar-thumb:hover {
   background: #555;
  }
  .tabcontent p{font-size:24px;font-family:"handwriting";}
  .tabcontent h3{font-size:30px; text-decoration:underline;}
  .tabcontent{padding:5px;}
  
  /* ----------DEVELOPMENT ------------------------------------*/
  .ConceptGrid{
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
 }
 .ConceptGrid img{filter:drop-shadow(4px 5px 5px #1c415d);}
 .ConceptGrid img:hover{cursor:url(Assets/Cursors/handhover.png),pointer;filter:drop-shadow(1px 2px 3px #1c415d); translate:2px 2px;}
 
 .Backgrounds{
   display:flex;
   flex-direction:row;
   justify-content:space-around;
   padding:20px;

 }
 .Backgrounds img{
  margin:10px;
  max-height:250px;
 }
 .MaskDesigns{
    display:flex;
   flex-direction:row;
   justify-content:center;
   align-items:center;

   padding:20px;
 }
 .MaskDesigns img {
   margin:10px;
  max-height:250px; 
 }
 .Workflow{
  background-image:url(Assets/Txtrs/pexels-ron-lach-10526896.jpg);
   background-size:100%;
   background-repeat:no-repeat;
   background-position:center;
   background-attachment:local;
 }
 .Workflow p{
  margin:10px;
  padding:60px;
 }
   .WorkflowImages {
     margin:30px;
     padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:nowrap;
    overflow-y:scroll;
    overflow-x:hidden;
    max-height:400px;
 }
  .WorkflowImages::-webkit-scrollbar{
    width:20px;
    height: fit-content;
    background-color: #8ccfdc;
    }
    
  .WorkflowImages::-webkit-scrollbar-thumb{
    background-color: #1c415d;
    border-radius: 30px;
    }
  .WorkflowImages::-webkit-scrollbar-thumb:hover {
   background: #555;
  }
 .IndvWFImg{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    width:1000px;
 }

 .WorkflowImages img{
  max-width:700px; 
  filter:drop-shadow(3px 4px 5px #1c415d);
 
 }
 .WorkflowImages p{
   margin:20px;
   padding:20px;
 }
  /* ----------LAB DREAM ------------------------------------*/

  .FinalShots {

  padding:2%;
  overflow:hidden;
  }


.GalleryGrid {
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
  overflow:hidden;
}

.FinalImagesBox{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  padding:30px;
  
  background-image:url(Assets/Txtrs/pexels-arina-krasnikova-7002683.jpg);
  filter:drop-shadow(5px 7px 4px #140a31);
 }

.LabImgFull {
  display: none;
  }
.LabImgFull img{
  max-width:950px;
  }

.ImageGrid:after {
  content: "";
    clear: both;
}
.ImageGrid{
  background-image:url(Assets/Txtrs/pexels-834934396-20818857.jpg);
  background-size:100%;
  display: flex;
  flex-wrap:wrap;
  flex-direction:column;
  width:fit-content;
  align-items:center;
  justify-content:space-around;
  overflow:hidden;
  padding:2%;
  }
.GridThumbnails {
  margin:10px;
  max-width:350px;
  max-height:150px;
  overflow:hidden;
}
.GridThumbnails img{
  object-fit:cover;
  max-width:400px;
}
.GridThumbnails img:hover{
  cursor:url(Assets/Cursors/handhover.png),pointer;
  border:solid #1c415d;
}
.active .GridThumbnails{
   border:solid #1c415d;
}

  
  /* ----------STAGE DREAM ------------------------------------*/
  
  
  .StageFinalShots {
  padding:2%;
  overflow:hidden;

  }


.StageGalleryGrid {
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
  overflow:hidden;

}

.StageFinalImagesBox{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  padding:30px;
  width:950px;
  overflow:hidden;
  
  background-image:url(Assets/Txtrs/pexels-arina-krasnikova-7002683.jpg);
  filter:drop-shadow(5px 7px 4px #140a31);

 }

.StageImgFull {
  display: none;
  border:solid red;
  }
.StageImgFull img{
  max-width:950px;
  }

.StageImageGrid:after {
  content: "";
    clear: both;
}
.TheaterImageGrid{
  background-image:url(Assets/Txtrs/pexels-834934396-20818857.jpg);
  background-size:100%;
  display: flex;
  flex-wrap:wrap;
  flex-direction:column;
  width:fit-content;
  align-items:center;
  justify-content:space-around;
  overflow:hidden;
  padding:2%;

  }
.StageGridThumbnail {
  margin:10px;
  max-width:350px;
  max-height:100px;
  overflow:hidden;

}
.StageGridThumbnail img{
  object-fit:cover;
  max-width:400px;
}
.StageGridThumbnail img:hover{
  cursor:url(Assets/Cursors/handhover.png),pointer;
  border:solid #1c415d;
}

  
  
    /* ----------VFX ------------------------------------*/