* {
  margin: 0;
  padding: 0;
}

html, body
{
    height: 100%;
}


/*xs*/
@media (max-width: 575.98px){
  #base-container-wrapper{
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  #navigation-wrapper{
    width: 80vw;
    height: 85vh;
    /*border: 1px #000 solid;*/
  }


  #mylogo{
    width: 3vmax;
  }

  #myname-sm{
    font-size: 1.3vmax;
    /*margin-top: -0.1vh;*/
    letter-spacing: 1.4vmax;
  } 

  #tombolati-main{
    margin-top: 0.6vmax;
  }

  #mynavbar{
    margin: -2vh 10vw;
  }

  #tombolati-inside{
    margin: 8.5vw 0;
    left: 25%;
    transform: translate(-25%);
    position: relative;
  }

  #mynavbar li > a {
    font-size: 1.6vmax;
    margin-top: 1.5vw;
  }

  #side-bottom-bar{
    position: relative;
    margin: -2vh 10.5vw;
  }

  #side-bottom-bar h5{
      font-size: 1.5vw;
    }

  #links-media{
    text-align: left;
    margin: 4vh 10.5vw;
  }

  #links-media a{
    color: #000;
    font-size: 1.7vmax;
  }

  .video-title{
    top: 50%;
  }

  #video-content-showreel{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #video-content-latestwork{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .video-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    height: 100%;
  }

#about-wrapper{
    width: 75vw;
    height: 70vh;
  }

  #profile-wrapper{
    height: 25%;
    margin-bottom: 5%;
  }

  #profilepic{
    height: 80%;
    border-right: 0.2vw solid black;
  }

  #focuses{
    height: 80%;
    padding: 2% 0 0 5%;
  }

  #focus-1 h1{
    font-size: 2.3vmax;
  }

  #focus-1 h2 {
    font-size: 1.3vmax;
  }

  #focus-1 h3 {
    font-size: 1.3vmax;
  }

  #focus-2{
    position: relative;
    top: 6%;
  }

  #focus-2 p{
    font-family: 'Futura LT';
    font-weight: 300;
    font-size: 1.3vmax;
  }

  .hl{
    border-bottom: 0.2vw #000 solid;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  #bio-edu-wrapper{
    height: 75%;
    left: 5%;
  }

  #lang-skill-wrapper{
    height: 75%;
    left: 5%;
  }

  #bio-edu-wrapper h1{
    font-size: 2vmax;
  }

  #lang-skill-wrapper h1{
    font-size: 2vmax;
  }

  #bio p{
    font-size: 2.5vmin;
    letter-spacing: 0.05vw;
    width: 90%;
    /*margin-bottom: 5%;*/
    line-height: 4.5vmin;
  }

  #bio{
    margin-bottom: 0%;
    height: 35%;
  }

  #languages p {
    letter-spacing: 0.05vw;
    font-size: 2.5vmin;
    line-height: 4.5vmin;
    /*margin-bottom: 25%;*/
  }

  #languages{
    margin-bottom:  0%;
    height: 35%;
  }

  #education h2{
    font-size: 1.5vmax;
  }

  #education p{
    font-size: 1.5vmax;
    line-height: 3.5vh; 
  }

  .pembatas{
    border-right: 0.12vw solid #000;
    margin: 0 3%;
  }

  #pembatas-college{
    height: 10.5vh;
  }

  #pembatas-highschool{
    height: 7.5vh;
  }
  

  #skill{
    margin-top: 0;
  }

  .skills-content p {
    font-size: 1.5vmax;
    line-height: 3.8vh;
  }


  #top-work {
    top: -10%;
  } 

  #top-work a{
    display: block;
    font-size: 3.5vw;
  }

  #works-content{
    position: relative; 
    z-index: 0;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -15%);
    width: 80vw;
    height: 200vmax;
    display: none;
    /*border: 1px solid red;*/
  }

  .alasworks{
    top: -20%;
    left: 50%;
    transform: translate(-50%);
  }

  .cardrow{
    width: 100%;
    height: 50%;
    margin: 0;
    display: block!important;
  }

  .cardnavirow{
    width: 100%;
    height: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
    font-size: 1.5vmax;
  }

  .card{
    width: 60%;
    margin: auto!important;
  }

  .page1{
    display: block!important;
  }

  .page2{
    display: none!important;
  }

  .link-to-contact{
    padding-top: 7vh;
    display: inline;
  }

  .hitme h2{
    font-size: 2vmax;
    letter-spacing: 0.05vmax;
  }

  .hitme p{
    font-size: 1.5vmax;
  }

  .hitme a{
    font-size: 2vmax;
  }

  #title-contact{
    margin-top: 50%;
  }

  #title-contact h1{
    font-size: 2vmax;
  }

  #title-contact h1:after{
    content: "———";
    letter-spacing: -0.7vw;
  }

  #linkedin-profile h2{
    margin: auto;
    margin-top: 5%;
    font-size: 1.5vmax;
  }

  .background{
    position: absolute;
    width: 100%;
    height: 62%;
    z-index: -1;
  }
}

/*//Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {

  #base-container-wrapper{
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #navigation-wrapper{
    width: 80vw;
    height: 85vh;
    /*border: 1px #000 solid;*/
  }

  #mylogo{
    width: 3vmax;
  }

  #myname-sm{
    font-size: 1.3vmax;
    /*margin-top: -0.1vh;*/
    letter-spacing: 1.4vmax;
  } 

  #tombolati-main{
    margin-top: 0.6vmax;
  }

  #mynavbar{
    margin: -2vh 10vw;
  }

  #tombolati-inside{
    margin: 8.5vw 0;
    left: 25%;
    transform: translate(-25%);
    position: relative;
  }

  #mynavbar li > a {
    font-size: 1.6vmax;
    margin-top: 1.5vw;
  }

  #side-bottom-bar{
    position: relative;
    margin: -2vh 10.5vw;
  }

  #side-bottom-bar h5{
      font-size: 1.5vw;
    }

  #links-media{
    text-align: left;
    margin: 4vh 10.5vw;
  }

  #links-media a{
    color: #000;
    font-size: 1.7vmax;
  }

  .video-title{
    top: 50%;
  }

  #video-content-showreel{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #video-content-latestwork{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .video-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    height: 100%;
  }

  #about-wrapper{
    width: 75vw;
    height: 70vh;
  }

  #profile-wrapper{
    height: 25%;
    margin-bottom: 5%;
  }

  #profilepic{
    height: 80%;
    border-right: 0.2vw solid black;
  }

  #focuses{
    height: 80%;
    padding: 2% 0 0 5%;
  }

  #focus-1 h1{
    font-size: 2.3vmax;
  }

  #focus-1 h2 {
    font-size: 1.5vmax;
  }

  #focus-1 h3 {
    font-size: 1.5vmax;
  }

  #focus-2{
    position: relative;
    top: 6%;
  }

  #focus-2 p{
    font-family: 'Futura LT';
    font-weight: 300;
    font-size: 1.5vmax;
  }

  .hl{
    border-bottom: 0.2vw #000 solid;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  #bio-edu-wrapper{
    height: 75%;
    left: 5%;
  }

  #lang-skill-wrapper{
    height: 75%;
    left: 5%;
  }

  #bio-edu-wrapper h1{
    font-size: 2vmax;
  }

  #lang-skill-wrapper h1{
    font-size: 2vmax;
  }

  #bio p{
    font-size: 1.9vmin;
    letter-spacing: 0.05vw;
    width: 90%;
    /*margin-bottom: 5%;*/
    line-height: 3.5vmin;
  }

  #bio{
    margin-bottom: 0%;
    height: 35%;
  }

  #languages p {
    letter-spacing: 0.05vw;
    font-size: 1.9vmin;
    line-height: 3.5vmin;
    /*margin-bottom: 25%;*/
  }

  #languages{
    margin-bottom:  0%;
    height: 35%;
  }

  #education h2{
    font-size: 1.5vmax;
  }

  #education p{
    font-size: 1.5vmax;
    line-height: 3.5vh; 
  }

  .pembatas{
    border-right: 0.12vw solid #000;
    margin: 0 5%;
  }

  #pembatas-college{
    height: 10.5vh;
  }

  #pembatas-highschool{
    height: 7.5vh;
  }
  

  #skill{
    margin-top: 0;
  }

  .skills-content p {
    font-size: 1.5vmax;
    line-height: 3.8vh;
  }

  

  #top-work {
    top: -10%;
  } 

  #top-work a{
    display: block;
    font-size: 2.5vw;
  }

  .cardrow{
    width: 100%;
    height: 50%;
    margin: 0;
    display: block!important;
  }

  #works-content{
    position: relative; 
    z-index: 0;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -15%);
    width: 80vw;
    height: 200vmax;
    display: none;
    /*border: 1px solid red;*/
  }

  .alasworks{
    top: -20%;
    left: 50%;
    transform: translate(-50%);
  }

  .cardnavirow{
    width: 100%;
    height: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
    font-size: 1.5vmax;
  }

  .card{
    width: 60%;
    height: 120%;
    margin: auto!important;
  }

  .page1{
    display: block!important;
  }

  .page2{
    display: none!important;
  }

  .link-to-contact{
    padding-top: 7vh;
    display: inline;
  }

  .hitme h2{
    font-size: 1.8vmax;
    letter-spacing: 0.05vmax;
  }

  .hitme p{
    font-size: 1.6vw;
  }

  .hitme a{
    font-size: 150%;
  }

  #title-contact{
    margin-top: 30%;
  }

  #title-contact h1{
    font-size: 1.8vmax;
  }

  #title-contact h1:after{
      content: "———";
      letter-spacing: -0.4vmax;
  }

  #linkedin-profile h2{
    margin: auto;
    margin-top: 5%;
    font-size: 1.5vmax;
  }

  .background{
    position: absolute;
    width: 100%;
    height: 60%;
    z-index: -1;
  }

}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
  #base-container-wrapper{
    overflow-x: hidden;
    overflow-y: hidden;
    overflow:hidden;
    scroll-behavior: smooth;
  }

  #navigation-wrapper{
    width: 83vw;
    height: 83vh;
  }

  .space{
    padding: 0 2.5vw;
  }

  #mylogo{
    width: 3vmax;
  }

  #mynavbar{
   margin:auto;
  }

  #mynavbar li > a {
    font-size: 1.6vmax;
    margin-top: -0.5vw;
  }

  .navigasinyabro{
    left: 48%;
    transform: translate(-50%);
  }

  #myname{
    font-size: 1vmax;
    margin-top: 0.3vh;
    letter-spacing: 0.1vw;
  }

  #bottom-bar{
    position: relative;
    bottom: -90%;
  }
  
  #links-media{
    text-align: right;
    margin: -1.5vh 0;
  }
   
  #links-media a{
    color: #000;
    font-size: 1vmax;
  }

  #bottom-bar h5{
    font-size: 1vmax;
  }

  .video-title{
    top: 50%;
  }

  #video-content-showreel{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  #video-content-latestwork{
    position: absolute;
    top: 0;
    /*left: 5%;
    transform: translate(-50%);*/
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  #about-wrapper{
    width: 75vw;
    height: 70vh;
  }

  #profile-wrapper{
    height: 20%;
    margin-bottom: 3%;
  }

  #profilepic{
    height: 80%;
    border-right: 0.2vw solid black;
  }

  #focuses{
    height: 80%;
    padding: 0.5% 0 0 5%;
  }

  #focus-1 h1{
    font-size: 1.5vmax;
  }

  #focus-1 h2 {
    font-size: 1.2vmax;
  }

  #focus-1 h3 {
    font-size: 1.2vmax;
  }

  #focus-2{
    position: relative;
    top: 6%;
  }

  #focus-2 p{
    font-family: 'Futura LT';
    font-weight: 300;
    font-size: 1.2vmax;
  }

  .hl{
    border-bottom: 0.2vw #000 solid;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  #bio-edu-wrapper{
    height: 100%;
  }

  #lang-skill-wrapper{
    height: 100%;
    left: 3%;
  }

  #bio-edu-wrapper h1{
    font-size: 2vmax;
  }

  #lang-skill-wrapper h1{
    font-size: 2vmax;
  }

  #bio p{
    font-size: 1.5vmin;
    letter-spacing: 0.05vw;
    width: 90%;
    /*margin-bottom: 5%;*/
    line-height: 2.8vmin;
  }

  #bio{
    margin-bottom: 0%;
    height: 35%;
  }



  #languages p {
    letter-spacing: 0.05vw;
    font-size: 1.5vmin;
    line-height: 2.8vmin;
    /*margin-bottom: 25%;*/
  }

  #languages{
    margin-bottom:  0%;
    height: 35%;
  }

  #education h2{
    font-size: 1.5vmax;
  }

  #education p{
    font-size: 1.5vmax;
    line-height: 3.5vh; 
  }

  .pembatas{
    border-right: 0.12vw solid #000;
    margin: 0 auto;
  }

  #pembatas-college{
    height: 10.5vh;
  }

  #pembatas-highschool{
    height: 7.5vh;
  }

  #skill{
    margin-top: 0;
  }

  .skills-content p {
    font-size: 1.5vmax;
    line-height: 3.8vh;
  }


  #top-work {
    top: -10%;
  } 

  #top-work a{
    display: inline;
  }

  .cardrow{
    width: 100%;
    height: 50%;
    margin-top: auto;
  }

  #works-content{
    position: relative; 
    z-index: 0;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 80vw;
    height: 70%;
    display: none;
  }

  .alasworks{
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cardnavirow{
    width: 100%;
    height: 5%;
    margin-top: 5%;
    font-size: 1.5vmax;
  }

  .link-to-contact{
    padding-top: 7vh;
  }

  .hitme h2{
    font-size: 2vmax;
    letter-spacing: 0.09vmax;
  }

  .hitme p{
    font-size: 1.2vmax;
  }

  .hitme a{
    font-size: 200%;
  }


  #title-contact{
    margin-top: 30%;
  }

  #title-contact h1{
    font-size: 2.3vmax;
  }

  #title-contact h1:after{
      content: "———";
      letter-spacing: -0.4vw;
  }

  #linkedin-profile h2{
    margin: auto;
    margin-top: 5%;
    font-size: 1.5vmax;
  }

  .background{
    position: absolute;
    width: 100%;
    height: 70%;
    z-index: -1;
  }
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
  #base-container-wrapper{
    overflow-x: scroll;
    overflow-y: hidden;
    overflow:hidden;
    scroll-behavior: smooth;
  }

  #navigation-wrapper{
    width: 85vw;
    height: 83vh;
  }

  .space{
    padding: 0 4.2vw;
  }

  #mylogo{
    width: 2.5vmax;
  }

  #mynavbar{
   margin:auto;
  }

  #mynavbar li > a {
    font-size: 1.6vmax;
    margin-top: -0.2vw;
  }

  .navigasinyabro{
    left: 27vw;
    transform: translate(-50%);
  }

  #myname{
    font-size: 1vmax;
    margin-top: 0.55vh;
    letter-spacing: 0.1vw;
  }

  #bottom-bar{
    position: relative;
    bottom: -90%;
  }
  
  #links-media{
    text-align: right;
    margin: -1.5vh 0;
  }
  
  #links-media a{
    color: #000;
    font-size: 1vmax;
  }

  #bottom-bar h5{
    font-size: 1vmax;
  }

  .video-title{
    top: 48vh;
  }

  #about-wrapper{
    width: 80vw;
    height: 70vh;
  }

  #profile-wrapper{
    height: 100%;
  }


  #profilepic{
    width: 80%;
    height: 15vmax;
    border-bottom: 0.2vw solid black;
  }

  #focuses{
    width: 80%;
    height: 12vmax;
    position: relative;
    top: 17vmax;
    padding: 0;
  }

  #focus-1{
    height: 40%;
  }

  #focus-1 h1{
      font-size: 1.5vmax;
  }

  #focus-1 h2 {
    font-size: 1.1vmax;
  }

  #focus-1 h3 {
    font-size: 1.1vmax;
  }

  #focus-2{
    position: relative;
    top: 25%;
  }

  #focus-2 p{
    font-family: 'Futura LT';
    font-weight: 300;
    font-size: 0.9vmax;
}

  .vl{
    border-left: 0.2vw #000 solid;
    height: 95%;
    position: absolute;
    right: 15%;
    top: 0;
  }

  #bio-edu-wrapper{
    height: 100%;
  }

  #lang-skill-wrapper{
    height: 100%;
    left: 3%;
  }

  #bio-edu-wrapper h1{
    font-size: 2vmax;
  }

  #lang-skill-wrapper h1{
    font-size: 2vmax;
  }

  #bio p{
    letter-spacing: 0.02vw;
    font-size: 1.2vmax;
    width: 80%;
    /*margin-bottom: 30%;*/
    line-height: 2vmax;
  }

  #bio{
    margin-bottom: 0%;
    height: 50%;
  }

  #languages p {
    letter-spacing: 0.02vw;
    font-size: 1.2vmax;
    line-height: 2vmax;
    /*margin-bottom: 46%;*/
  }

  #languages{
    margin-bottom: 0%;
    height: 50%;
  }

  #education p{
    font-size: 1vmax;
    line-height: 3.5vh; 
  }

  #education h2{
    font-size: 1vmax;
  }

  .skills-content p{
    font-size: 1vmax;
    line-height: 4vh;
  }

  .pembatas{
    border-right: 0.12vw solid #000;
    margin: 0 auto;
  }

  #pembatas-college{
    height: 10vh;
  }

  #pembatas-highschool{
    height: 7.5vh;
  }

  .video-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: auto;
  }

  #top-work {
    top: -10%;
  } 

  #top-work a{
    display: inline;
    font-size: 2vw;
  }


  #top-work a:after{
    content: ' | ';
    font-weight: 500;
    font-size: 2.5vw;
  }

  #top-work a:last-child:after{
    content: '';
  }

  .cardrow{
    width: 100%;
    height: 50%;
    margin-top: auto;
  }

  #works-content{
    position: relative; 
    z-index: 0;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 80vw;
    height: 70%;
    display: none;
  }

  .alasworks{
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cardnavirow{
    width: 100%;
    height: 5%;
    margin-top: 5%;
    font-size: 1.7vmin;
  }

  .hitme h2{
    font-size: 1.7vmax;
    letter-spacing: 0.09vmax;
  }

  .hitme p{
    font-size: 1vmax;
  }

  .hitme a{
    font-size: 2vmax;
  }

  .link-to-contact{
    padding-top: 10vh;
  }

  #title-contact{
    margin-top: 17%;
  }

  #title-contact h1{
    font-size: 2vmax;
  }

  #title-contact h1:after{
      content: "———";
      letter-spacing: -0.4vw;
  }

  #linkedin-profile h2{
    margin: auto;
    margin-top: 5%;
    font-size: 1.3vmax;
  }  

  .background{
    position: absolute;
    width: 100%;
    height: 75%;
    z-index: -1;
  }

   
}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  #base-container-wrapper{
    overflow-x: scroll;
    overflow-y: hidden;
    overflow:hidden;
    scroll-behavior: smooth;
  }

  #navigation-wrapper{
    width: 85vw;
    height: 80vh;
  }

  .space{
    padding: 0 5vw;
  }

  #mylogo{
    width: 2vmax;
  }

  #mynavbar{
   margin:auto;
  }

  #mynavbar li > a {
    font-size: 1.6vmax;
    margin-top: -0.5vw;
  }
  .navigasinyabro{
    left: 24vw;
    transform: translate(-50%);
  }

  #myname{
    font-size: 1vmax;
    margin-top: 0.2vh;
    letter-spacing: 0.1vw;
  }

  #bottom-bar{
    position: relative;
    bottom: -90%
  }
  
  #links-media{
    text-align: right;
    margin: -1.5vh 0;
  }

  #links-media a{
    color: #000;
    font-size: 1vmax;
  }

  #bottom-bar h5{
    font-size: 1vmax;
  }

  .video-title{
    top: 48vh;
  }

  .video-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: auto;
  }

  #about-wrapper{
    width: 80vw;
    height: 65vh;
  }

  #profile-wrapper{
    height: 100%;
  }

  #profilepic{
    width: 80%;
    height: 15vmax;
    border-bottom: 0.2vw solid black;
  }

  #focuses{
    width: 80%;
    height: 12vmax;
    position: relative;
    top: 17vmax;
    padding: 0;
  }

  #focus-1{
    height: 40%;
  }

  #focus-1 h1{
    font-size: 1.5vmax;
  }

  #focus-1 h2 {
    font-size: 1.1vmax;
  }

  #focus-1 h3 {
    font-size: 1.1vmax;
  }

  #focus-2{
    position: relative;
    top: 25%;
  }

  #focus-2 p{
    font-family: 'Futura LT';
    font-weight: 300;
    font-size: 0.9vmax;
}

  .vl{
    border-left: 0.2vw #000 solid;
    height: 100%;
    position: absolute;
    right: 15%;
    top: 0;
  }

  #bio-edu-wrapper{
    height: 100%;
  }

  #lang-skill-wrapper{
    height: 100%;
    left: 3%;
  }

  #bio-edu-wrapper h1{
    font-size: 2vmax;
  }


  #lang-skill-wrapper h1{
    font-size: 2vmax;
  }


  #bio p{
    letter-spacing: 0.02vw;
    font-size: 1vmax;
    width: 80%;
    line-height: 1.7vmax;
  }

  #bio{
    margin-bottom: 0%;
    height: 50%;
  }

  #languages p {
    letter-spacing: 0.02vw;
    font-size: 1vmax;
    line-height: 1.7vmax;
  }

  #languages{
    margin-bottom: 0%;
    height: 50%;
  }

  #education p{
    font-size: 1vmax;
    line-height: 3.5vh; 
  }

  #education h2{
    font-size: 1vmax;
  }


  .skills-content p{
    font-size: 1vmax;
    line-height: 4vh;
  }

  .pembatas{
    border-right: 0.12vw solid #000;
    margin: 0 auto;
  }

  #pembatas-college{
    height: 10vh;
  }

  #pembatas-highschool{
    height: 7.5vh;
  }


  #top-work {
    top: -10%;
  } 

  #top-work a{
    display: inline;
    font-size: 2vw;
  }


  #top-work a:after{
    content: ' | ';
    font-weight: 500;
    font-size: 2.5vw;
  }

  #top-work a:last-child:after{
    content: '';
  }

   .cardrow{
    width: 100%;
    height: 50%;
    margin-top: auto;
  }

  #works-content{
    position: relative; 
    z-index: 0;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 80vw;
    height: 70%;
    display: none;
  }

  .alasworks{
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


  .cardnavirow{
    width: 100%;
    height: 5%;
    margin-top: 5%;
    font-size: 1.7vmin;
  }

  .hitme h2{
    font-size: 1.7vmax;
    letter-spacing: 0.09vmax;
  }

  .hitme p{
    font-size: 1vmax;
  }

  .hitme a{
    font-size: 2vmax;
  }

  .link-to-contact{
    padding-top: 10vh;
  }

  #title-contact{
    margin-top: 17%;
  }

  #title-contact h1{
    font-size: 2vmax;
  }

  #title-contact h1:after{
      content: "———";
      letter-spacing: -0.4vw;
  }

  #linkedin-profile h2{
    margin: auto;
    margin-top: 5%;
    font-size: 1.3vmax;
  }  

  .background{
    position: absolute;
    width: 100%;
    height: 85%;
    z-index: -1;
  }

   
}
/*--MAIN CSS--*/

.video-content:before{
  background-color: #000;
}

#focus-1 h1{
    font-family: 'Futura LT';
    font-weight: bold;
}

#focus-1 h2 {
    font-family: 'Futura LT';
    font-weight: 500;
}

#focus-1 h3{
    font-family: 'Futura LT';
    font-weight: 500;
}

#focus-2 p{
    font-family: 'Futura LT';
    font-weight: 300;
}

#bio-edu-wrapper h1{
  font-family: 'Kelson Sans';
  font-weight: bold;
}

#bio p{
  font-family: 'Futura LT';
  font-weight: 500;
}

#lang-skill-wrapper h1{
  font-family: 'Kelson Sans';
  font-weight: bold;
}

#languages p{
  font-family: 'Futura LT';
  font-weight: 500;
}

#education h2{
  font-family: 'Futura LT';
  font-weight: bold;
}

#education p{
  font-family: 'Futura LT';
  font-weight: 500;
  font-style: italic;
}

.skills-content p{
  font-family: 'Futura LT';
  font-weight: 500;
}


#top-work a{
  font-family: 'Kelson Sans';
  font-weight: 300;
  letter-spacing: 0.2vw;
  color: black;
  text-decoration: none;
  transition: letter-spacing .5s;
}

#top-work a:hover{
  font-weight: normal;
  letter-spacing: 0.25vw;
}

/*----*/
#blocker{
  transition: background-color 0.5s;
}

#mysidenav{
    background-color: rgba(0,0,0,0.5);
    position: fixed; 
    z-index: 7;
    width: 0;
    right: 0;
    height: 100vh;
    transition: width 1s;
    border-left: 0.5vw solid #fff;
}

#mysidenav > .is-active{
  transition: width 1s;
}

#mysidenav a{
  mix-blend-mode: difference;
  filter: invert(1);
}

#mysidenav button{
  mix-blend-mode: difference;
  filter: invert(1);
}

#mysidenav h5{
  mix-blend-mode: difference;
  filter: invert(1);
}

#side-bottom-bar h5{
  font-family: 'Kelson Sans';
  font-weight: 300;
}

#navigation-wrapper{
  position: fixed;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: difference;
  filter: invert(1);
}

#navigation-wrapper > div  { 
   pointer-events: auto; 
 }

#top-bar{
  position: relative;
  top: 0;
}




#mynavbar li > a {
  color: #000000;
  font-family: 'Kelson Sans';
  font-weight: normal;
  letter-spacing: 0.3vw;
  background-color: rgba(47, 79, 79, 0);
  transition: all .5s;
}

#mynavbar li > a:hover{
  font-weight:bold;
  letter-spacing: 0.4vw;
}

#mynavbar li > a.active{
  font-weight: bold;
  color: rgba(0,0,0,1);
  letter-spacing: 0.4vw;
/*  border-bottom: 0.2vw solid #000;*/
  text-align: center;
  pointer-events: none;
}

#mynavbar li > a.active:after{
  content: "\A •";
  font-size: 3vw;
  line-height: 3vh;
}

#myname{
  font-family: 'Hit the Road';
  text-align: right;
}

#myname-sm{
  font-family: 'Hit the Road';
  text-align: center;
}

#bottom-bar h5{
  font-family: 'Kelson Sans';
  font-weight: 300;
}

#links-media a:after {
    content: '|';
  color: #000;
    display: inline-block;
  padding: 0px 5%;
 }

#links-media a:last-child:after {
  content: ' ';
  padding:0;
 }


#base-container-wrapper{
  /*background-color: rgba(90,90,255,1);*/
  /*border: 1px #000;*/
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  z-index: 0;
  /*scroll-behavior: smooth;*/
}

.holder{
  display: inline-block;
  flex: 0 0 auto;
   width: 100%;
  height: 100%;
}

#home-page{
  background-color: rgba(0,0,0,1);
}

.video-title{
  position: absolute;
  left: 0;
  right: 0;
  transition: all .5s;
  text-align: center;
  /*background-color: rgba(0,0,0,0.5);*/
  margin-left: auto;
  margin-right: auto;
}

#showreel-div{
  width: 23vmax;
}

#latestwork-div{
  width: 18vmax;
}

.video-title a{
  font-family: 'Hit the Road';
  color: #fff;
  font-size: 1.5vmax;
  letter-spacing: 0.2vmax;
  transform: scale(1);
  transition: all .5s;
  border: 0.2vmax solid #fff;
  padding: 1vmax;
  border-radius: 1vmax;
}

.video-title:hover{
  transform: scale(1.1);
}

.video-title a:hover{
  letter-spacing: 0.5vw;
  text-decoration: none;
  color: #000;
  background-color: #FFF;
  border: 0px;
  font-weight: bold;
}

.videoplayer{
  position: fixed;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  z-index: 99;
}

.fullvideo-player{
  display: block;
  margin: 0 auto;
  width: 50vmax;
  height: 25vmax;
  position: relative;
  top: 20%;
  outline: 0.3vmin solid #fff;
  outline-offset: 1vmin;
}

#close-button-player{
  position: fixed;
  right: 20%;
  top: 10%;
  font-size: 150%;
}

#close-button-player a{
  color:#fff;
}


#about-page{
  background-color: rgba(255,255,255,1);
  z-index: 0;
}

#about-wrapper{
  position: relative;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -47%);
}


#works-page{
  background-color: rgba(255,255,255,1);
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

  #top-work{
    position: relative;
     text-align: center;
     visibility: visible;
     opacity: 1;
     transition: all 0.5s
  }

  .alasworks{
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
    width: 100%;
    height: auto;
  }

  .card-deck .card{
    border: none;
  }

  .card-deck > a  { 
    text-align: center;
    height: 4vh; 
    /*padding-top: 3vh;*/
    text-decoration: underline;
   }

   .card-deck .card:after{
    border-bottom: 0.5vw solid rgba(0,0,0,.5);
   }

  .card-title{
  /*  border-bottom: 0.05vw solid #000;*/
    color:#000;
    font-family: 'Futura LT';
    font-weight: bold;
    letter-spacing: 0;
    transition: all .5s;
    font-size: 90%;
    border-radius: 0.01rem;
    border-bottom: #000 solid 0.1rem;
  }

  .card-title:hover{
    color:#fff;
    background-color: rgba(0,0,0,1);
    letter-spacing: 0.05vw;
    padding: 0.2vw 0.4vw;
    border-radius: 0.3rem;
    text-decoration: none;
  }
  
  .card-img-top:hover{
    transition: all .5s;
    transform: scale(1.1);
  }

  .card-text{
    font-family: 'Futura LT';
      font-size: 85%;
      padding-top: 0.5vh;
  }

  .card-text:last-child{
    border-top: 0.05vw solid rgba(0,0,0,0.2);
    padding-top: 1vh;
    text-align: right;
  }

  .pageindicators{
    text-align: center;
    font-family: 'Futura LT';
  }

  .pageindicators > a{
    color:#808285;
    font-weight: 100;
    transition: all .5s;
  }

  .pageindicators > a.active{
    font-weight: bold;
    color:#000;
    pointer-events: none;
    text-decoration: underline;
  }

  .backto-collections{
    font-family: 'Futura LT';
    font-weight: normal;
    color: #000;
    letter-spacing: 0.05vw;
    text-decoration: none;
    transition: all .5s;
  }

  .backto-collections:hover{
    font-family: 'Futura LT';
    font-weight: bold;
    color: #000;
    text-decoration: none;
    letter-spacing: 0.15vw;
  }

    
#contact-page{
    background-color: rgba(255,255,255,1);
    z-index: 1;
}

  .hitme{
      position: relative;
      left: 50%;
      transform: translate(-50%);
      text-align: center;
      width: 100%;
      height: 25%;
      margin: 5% 0;
  }

  .hitme a{
    font-family: 'Futura LT';
    color: #000;
    border-bottom: #000 solid 0.3vh;
    border-radius: 5%;
    transition: all .5s;
  }

  .hitme a:hover{
    font-size: 230%;
    background: black;
    padding: 2% 7%;
    color: #fff;
    border-radius: 15%;
  }

  .hitme h2{
    font-family: 'Futura LT';
    font-weight: bold;
        margin-top: 3.5vh;
  }


  .hitme p{
    font-family: 'Futura LT';
    font-weight: 500;
  }

  #title-contact h1{
      font-family: 'Kelson Sans';
      font-weight: bold;

      margin: auto;
  }

  #linkedin-profile h2{
      font-family: 'Futura LT';
      font-weight: 100;
  }

#blocker{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0);
  position: fixed;
  pointer-events: none;
  z-index: 6;
  transition: all .5s;
}

/*FONTCSS*/
  @font-face {
      font-family: 'Kelson Sans';
      src: url('KelsonSans-Regular.woff2') format('woff2'),
          url('KelsonSans-Regular.woff') format('woff'),
          url('KelsonSans-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
      font-family: 'Kelson Sans';
      src: url('KelsonSans-Light.woff2') format('woff2'),
          url('KelsonSans-Light.woff') format('woff'),
          url('KelsonSans-Light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
  }

  @font-face {
      font-family: 'Kelson Sans';
      src: url('KelsonSans-Bold.woff2') format('woff2'),
          url('KelsonSans-Bold.woff') format('woff'),
          url('KelsonSans-Bold.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
  }

  @font-face {
      font-family: 'Hit the Road';
      src: url('HittheRoad.woff2') format('woff2'),
          url('HittheRoad.woff') format('woff'),
          url('HittheRoad.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
      font-family: 'Futura LT';
      src: url('FuturaLT-Bold.woff2') format('woff2'),
          url('FuturaLT-Bold.woff') format('woff'),
          url('FuturaLT-Bold.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
  }

  @font-face {
      font-family: 'Futura LT';
      src: url('FuturaLT-Condensed.woff2') format('woff2'),
          url('FuturaLT-Condensed.woff') format('woff'),
          url('FuturaLT-Condensed.ttf') format('truetype');
      font-weight: 500;
      font-style: normal;
  }

  @font-face {
      font-family: 'Futura LT';
      src: url('FuturaLT.woff2') format('woff2'),
          url('FuturaLT.woff') format('woff'),
          url('FuturaLT.ttf') format('truetype');
      font-weight: 500;
      font-style: normal;
  }

  @font-face {
      font-family: 'Futura LT';
      src: url('FuturaLT-Light.woff2') format('woff2'),
          url('FuturaLT-Light.woff') format('woff'),
          url('FuturaLT-Light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
  }

  @font-face {
      font-family: 'Futura LT';
      src: url('FuturaLT-Oblique.woff2') format('woff2'),
          url('FuturaLT-Oblique.woff') format('woff'),
          url('FuturaLT-Oblique.ttf') format('truetype');
      font-weight: 500;
      font-style: italic;
  }

  @font-face {
      font-family: 'Futura LT';
      src: url('FuturaLT-Heavy.woff2') format('woff2'),
          url('FuturaLT-Heavy.woff') format('woff'),
          url('FuturaLT-Heavy.ttf') format('truetype');
      font-weight: 900;
      font-style: normal;
  }

/*HAMBURGERCSS*/
  /*!
   * Hamburgers
   * @description Tasty CSS-animated hamburgers
   * @author Jonathan Suh @jonsuh
   * @site https://jonsuh.com/hamburgers
   * @link https://github.com/jonsuh/hamburgers
   */
  .hamburger {
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible; }
    .hamburger:hover {
      opacity: 0.7; }
    .hamburger.is-active:hover {
      opacity: 0.7; }
    .hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::before,
    .hamburger.is-active .hamburger-inner::after {
      background-color: #000; }

  .hamburger-box {
    width: 3.5vw;
    height: 3.5vw;
    display: inline-block;
    position: relative; }

  .hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -0.5vw; }
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
      width: 3.5vw;
      height: 0.6vw;
      background-color: #000;
      border-radius: 0.6vw;
      position: absolute;
      transition-property: transform;
      transition-duration: 0.15s;
      transition-timing-function: ease; }
    .hamburger-inner::before, .hamburger-inner::after {
      content: "";
      display: block; }
    .hamburger-inner::before {
      top: -1.5vw; }
    .hamburger-inner::after {
      bottom: -1.5vw; }


  /*
     * Squeeze
     */
  .hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    .hamburger--squeeze .hamburger-inner::before {
      transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
    .hamburger--squeeze .hamburger-inner::after {
      transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

  .hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    .hamburger--squeeze.is-active .hamburger-inner::before {
      top: 0;
      opacity: 0;
      transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
    .hamburger--squeeze.is-active .hamburger-inner::after {
      bottom: 0;
      transform: rotate(-90deg);
      transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

  /*