/**
 * @license
 *
 * Font Family: Satoshi
 * Designed by: Deni Anggara
 * URL: https://www.fontshare.com/fonts/satoshi
 * © 2023 Indian Type Foundry
 *
 * Font Styles:
 * Satoshi Variable(Variable font)
 * Satoshi Variable Italic(Variable font)
 * Satoshi Light
 * Satoshi Light Italic
 * Satoshi Regular
 * Satoshi Italic
 * Satoshi Medium
 * Satoshi Medium Italic
 * Satoshi Bold
 * Satoshi Bold Italic
 * Satoshi Black
 * Satoshi Black Italic
 *
*/
/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 900.0;
*
* available axes:

* 'wght' (range from 300.0 to 900.0)

*/


@font-face {
  font-family: 'Miller Banner Black';
  src:
    url('fonts/Miller Banner Black.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'SVN-Miller Banner';
  src:
    url('fonts/SVN-Miller Banner.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Prumo Black';
  src:
    url('fonts/Prumo Display W00 Black.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Prumo Bold';
  src:
    url('fonts/Prumo Display W00 Bold.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Prumo SemiBold';
  src:
    url('fonts/Prumo Display W00 SemiBold.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Prumo Light';
  src:
    url('fonts/Prumo Display W00 Light.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Prumo Thin';
  src:
    url('fonts/Prumo Display W00 Thin.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Thin';
  src:
    url('fonts/Roboto-Thin.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Light';
  src:
    url('fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}



@font-face {
  font-family: 'BodoniModa-Italic';
  src:
    url('fonts/BodoniModa-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'BodoniModa';
  src:
    url('fonts/BodoniModa-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}


@font-face {
  font-family: 'ReadexPro-VariableFont';
  src:
    url('fonts/ReadexPro-VariableFont_HEXP,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}


@font-face {
  font-family: 'Inter-Variable';
  src:
    url('fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
/*
css reset
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  line-height: 100%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}


ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
css reset end
*/
body {
  background-color: white;
}

.project{
  margin: auto;
  width: 90vw;
}

h1 {
  color: #C7005D;
  color: #D00068;
  color: #C90064;
  color: #BD005E;
  text-align: left;
  font-family: 'ReadexPro-VariableFont';
    font-family: 'BodoniModa';
    font-family: 'Prumo Black';
    /*font-family: 'Miller Banner Black';*/

  /*  font-family: 'Prumo Black Italic';*/

  font-weight: 700;
    font-weight: 900;
  font-size: 4vw;
  font-size: 24vw;

  line-height:95%;


  margin-bottom: 0vw;
  <--!text-transform: uppercase;-->
  display: inline;
  /*-webkit-text-stroke-width: 1.5px;
 -webkit-text-stroke-color: #C7005D;*/
margin: 50px 0px 35px 0;
margin-bottom: 7px;
word-spacing: -3%;

}



h2 {

      color: #BD005E;

  text-align: left;

  font-family: 'ReadexPro-VariableFont';
  font-weight: 160;


  font-size: 4vw;

  margin-top: 10px;
  margin-bottom: 10px;
  /*//margin-bottom: 22px;
  //text-transform: uppercase;*/
  letter-spacing: -0.03em;
  letter-spacing: -0.015em;

  <--!text-transform: uppercase;-->
}
h3 {
  color: #232323;

  text-align: left;
  font-family: 'ReadexPro-VariableFont';
  font-family: 'Avenir';

  font-family: 'Inter-Variable';
  font-family: 'Prumo Light';
    font-family: 'ReadexPro-VariableFont';
    //font-family: 'Roboto Light';
  font-weight: 400;
  font-weight: 255;

  font-size:3vw;
  margin-top: 0vw;
  margin-bottom: 5px;
  text-transform: uppercase;


}
h4 {
  color: #828282;

  text-align: left;
  font-family: 'ReadexPro-VariableFont';
  font-family: 'Avenir';

  font-family: 'Inter-Variable';

  font-weight: 400;
  font-weight: 380;
  font-size: 1.85vw;
  margin-top: 0vw;
  margin-bottom: 0;

}
p {
  color: #454545;
  text-align: left;
  font-family: 'Inter-Variable';
  font-family: 'Roboto Light';
    font-family: 'ReadexPro-VariableFont';


  font-weight: 200;
  font-size: 3vw;


  line-height:150%;
  margin-bottom: 22px;

}

@media screen and (min-width: 320px) {
  h1 {
    font-size: calc(24px + 150* ((100vw - 320px) / 1000));
    margin-top: calc(0px + 20 * ((100vw - 320px) / 1000));
  }
  p,a {
    font-size: calc(20px + 5 * ((100vw - 320px) / 680));
  }
  h2{
    font-size: 28px;
  }
}


@media screen and (min-width: 600px) {
  p,h3,a {
     font-size: 24px;
  }
}
@media screen and (min-width: 1000px) {
  h1 {
    font-size: 118px;
    font-size: 126px;
    font-size: 132px;
  }
  h2{
    font-size: 43px;
    font-size: 34px;

  }
  h3{
    font-size: 18px;

  }
  p,a {
    font-size: 24px;
  }
}

@media screen and (min-width: 1600px) {
  p,a {
     font-size: 20px;
  }
  body{
    max-width: 1440px;
  }
}


strong{
  color: #BD005E;
}


.flex-item-text h3{

    text-align: center;
}



.flex-item-text p{

    text-align: center;
    font-weight: 350;
}




img{

width: 100%;
margin: 0.4vw 0px;
}


body{
  margin: auto;
    width: 90%;
}

.header {
  width: 40%;
  max-width: 450px;
  min-width: 240px;
  height: auto;
  display: block;


   margin: 0 0;
   margin-top: 30px;
   margin-bottom: -2px;
   margin-left: auto;
   margin-right: auto;
}
.header img{

}
.nav{

  margin: auto;
  text-align: center;
}


.about-link,p.nav ,a.nav {
  color: #444444;
   font-size: 1.3vw;
   font-size: 18px;
   font-family: 'ReadexPro-VariableFont';
   font-weight: 255;
   margin: auto;
   margin-bottom: 0vw;
   text-align: center;
   text-decoration: none;
}

a{
    color: #BD005E;
    text-decoration: none;
}


a:hover {
  text-decoration: underline;
}

/** { box-sizing: border-box; }
.two {
  width: 100%;
  max-width: 100%;
  margin: auto;
  }
.two p { display: inline-block; max-width: 50%; }
//.two p:nth-child(1) { float:left; }
.two p:nth-child(2) { float:right; }*/

.aboutimg {
/*float: left;*/
  width: 60vw;
  max-width: 450px;
  margin: 0px;
    margin-right: 20px;
    margin: auto;
    margin-bottom: 35px;
    margin-top: 30px;
    display: block;
}

.projects {
margin-top: 0vw;
}

.credits{
  flex-direction: column;
  display: inline-flex;
  margin-bottom: :20px ;
}



 h3.creadits ,p.credits  {
font-size: 16px;

align-items: center;
/*border: 1px solid black;*/

display: inline-flex;


margin-bottom: 0;
}

.quote {
  margin: 50px 0px;

}
.quote *{

  font-size: 45px;
}



.creditscontainer
{
  margin-bottom: 10px;
}
.creditsyear
{
color: #777777;
  /*width: 8vw;*/
  max-width: 110px;
  font-weight: 320;

  font-size: 1.2vw;

}
.creditsdiv {
  display: inline-grid;
  /*padding: 10px 5px;*/
  /*width:25vw;*/
  /*max-width: 500px;*/
  margin-top: -5px;


}

.creditsdiv *{

  line-height: 120%;

}
.creditsjob
{    color: #383838;
    font-weight: 400;
    font-size: 1.4vw;
}
.creditstitle
{
  font-size: 1.4vw;
}

@media (max-width: 1000px) {
   h3.creadits,p.credits{
    display: none;
  }
  .about {
    float:none;
    width: 100%;
    margin: auto;
  }

}

.projectbanner {
  margin: 20px 0px;
  height: 22vh;
height: 24vh;

  width: 100%;
  position: relative;
}

.projectbanner p {
  color: white;
  position: absolute;
  bottom: 0;
  font-size: 2.0vw;
  font-family: 'ReadexPro-VariableFont';

  font-weight: 580;

  margin-left: -0.6vw;
  margin-bottom: -2.6vw;

}

.projectbanner p {
  font-size: 24px;
}
@media screen and (min-width: 320px) {
  .projectbanner p {
    font-size: calc(24px + 56 * ((100vw - 320px) / 1000));
  }
}
@media screen and (min-width: 1000px) {
  .projectbanner p {
    font-size: 55px;
    margin-left: -5px;
    margin-bottom: -22px;
  }
}



.bannerFortnite {
  background-image: url("img/FortniteBanner.jpg");
  background-position: 50% 42%;
  background-size: cover;
}

.bannerHorizonForbiddenWest {
  background-image: url("img/KAR_NTR_UTR_ARC_Groundfarm-2048x1152.jpg");
  background-position: 50% 33%;
  background-size: cover;
}
.bannerGodofWarRagnaroek {
  background-image: url("img/SAH_KEY_LargeWorkshop_Interior_K_033-2048x1148.jpg");
  background-position: 50% 60%;
  background-size: cover;
}

.bannerCinematographer {
  background-image: url("img/Screenshot 2023-10-19 at 00.18.58.jpg");
  background-position: 50% 45%;
  background-size: cover;
}

.bannerDota2 {
  background-image: url("img/drow_artwork.jpg");
  background-position: 50% 36%;
  background-size: cover;
}
.bannerEric {
  background-image: url("img/Eric_01.jpg");
  background-position: 50% 33%;
  background-size: cover;
}

.bannerGVM {
  background-image: url("img/GVM_Amy_render.jpg");
  background-position: 50% 45%;
  background-size: cover;
}
.bannerCommunity {
  background-image: url("img/IMG_1083.jpeg");
  background-position: 50% 30%;
  background-size: cover;
}

.bannerPerformanceCapture {
  background-image: url("img/PerformanceCapture.jpg");
  background-position: 50% 33%;
  background-size: cover;
}
.bannerScanGuide {
  background-image: url("img/james-busby-free-3d-male-zbrush-model.jpg");
  background-position: 50% 33%;
  background-size: cover;
}

.footer{
  min-height: 10vw;
}

/*flex timeline*/

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-text {
/*   background-color: #f1f1f1;*/
  width: 24vmin;
  height: auto;
  padding: 10px 10px;
}

.flex-item-line {
  background-color: #C7005D;
  width: 12vmin;
  position: relative;
  height: 4px;
  margin-bottom: 20px;
}

.flex-item-line:last-child, .flex-item-line:first-child {
   background-color: transparent;
}

.timelinewrapper {
  width: max-content;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 40px;
}

.dot2 {

  background-color: rgba(255, 255, 255, 0.5);
  height: 16px;
  width: 6px;
  background-color: #C7005D;
  border-radius: 0%;
  position: absolute;
  left: -3px;
  top: -6px;
    margin: 0px;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
    display: inline-flex;
  }

  .flex-item-text {
    height: 10vh;
    width: 60vw;
align-items: center;
  /*border: 1px solid black;*/
 padding-top: 20px;
  }

  .flex-item-line {
    height: 5vh;
width: 4px;
    margin-bottom: 0px;
    margin-right: 20px;

  }
  .flex-item-text h3,.flex-item-text p
  {
    text-align: left;
  }

  .dot2 {
    width: 16px;
    height: 6px;
    left: -6px;
    top: -3px;
  }


}
body{
  font-size: 0;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content:center;
}

.image-gallery > li {
  /* height: 300px; */
  cursor: pointer;
  position: relative;
  /* flex: 1 1 auto; */
  /* flex-grow: 1; */
}

.image-gallery li img {
  object-fit: cover;
  /* width: 100%; */
  /* height: 100%; */
  /* max-width: 30vw; */
  height: 50vw;
  max-height: 400px;

  min-height: 200px;
  vertical-align: middle;
  width: auto;
  margin: 0px;
}


.textcenter {
  text-align: center;
  margin: 35px auto 25px auto;
}

.video-responsive {
  position: relative;
  display: block;
  width: 100%;
  max-width: 900px;
  overflow: hidden;

  margin: auto;
  margin-top: 10px;
  margin-bottom: 60px;
}


.video-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.video-responsive-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;


text-align: center;
font-family: 'Inter-Variable';
font-family: 'ReadexPro-VariableFont';
font-family: 'ReadexPro-VariableFont';
font-weight: 160;

//  font-family: 'Roboto Light';

font-size: 2.5vw;

font-weight: 160;
font-size: 2vw;
font-size: 34px;


line-height:150%;
width: 70%;
margin: 50px auto;
//padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
//margin: auto;
margin-top: 50px;
color: #BD005E;
}


blockquote:after {
    font-family: 'Prumo Black';
font-family: 'ReadexPro-VariableFont';
    position: absolute;
  display: block;
    float:right;
    font-size:6em;
      font-size: 40px;
    line-height: 1;
    right:+20px;

    top: 80px;
    bottom:-0.5em;
    content: "";
    color: #383838;
    color: #BD005E;
    vertical-align: bottom;
}


blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

/*flex timeline end*/