@charset "UTF-8";
/* CSS Document */
body
{
    margin: 0;
    padding: 0;
    top: 0;
    color: #26262D;
    background-color: #FCFBFA;
    height: 100vh;
    overflow-x: hidden;
}
html {
  scroll-behavior: smooth;
}

.tong{
    width: 100%;
    height: 100%;
    background-color: #FCFBFA;
    position: absolute;
    overflow-y: flow;
    scroll-behavior: smooth;
}
.header{
    width: 100%;
    height: 10vh;
    background-color: #FCFBFA;
    z-index: 5000;
    
    position: fixed;
    top: 0px;
    background: #FCFBFA;

    transition: background 0.5s;
}
.header.is-sticky {
    height: 10vh;
    background: #fbfcfa;
    -webkit-box-shadow: 0px 2px 10px rgba(100, 100, 100, 0.2);
-moz-box-shadow: 0px 2px 10px rgba(100, 100, 100, 0.2);
box-shadow: 0px 2px 10px rgba(100, 100, 100, 0.2);
}

.menu {
    width: 10%;
    height: 100%;
    background-color: #FCFBFA;
    float: left;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 2vh;
}
.middle-head {
    width: 70%;
    height: 100%;
    background-color: #FCFBFA;
    font-family: "BlackerSansDisplayTrial-Regular";
    font-size: 18pt;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding-top: 3vh;
    padding-left: 11vh;
}
.middle-head a{
    text-decoration: none;
    color: #26262D;
}
.middle-head a:hover{
    color: #42424D;
}
.right-head{
    width: 15%;
    height: 100%;
    float: right;
    background-color: #FCFBFA;
    font-family: "BlackerSansDisplayTrial-Regular";
    font-size: 10pt;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding-top: 4vh;
    letter-spacing: 2px;
}
.right-head a {
    text-decoration: none;
    color: black;
    position: absolute;
}
.right-head a:hover{
    color: #42424D;
}

/*Underline*/
.underline {
  display: inline-block;
  position: relative;
    padding-bottom: 0.3vh;
  color: #26262D;
}
.underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 0.1vh;
  bottom: 0;
  left: 0;
  background-color: #26262D;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.underline:hover::after{
  transform: scaleX(1);
  transform-origin: bottom left;
}

/*FONT*/
@font-face {
  font-family: "BlackerSansDisplayTrial-Medium";
  src: url("../fonts/BlackerSansDisplayTrial-Medium.ttf");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "BlackerSansDisplayTrial-Regular";
  src: url("../fonts/BlackerSansDisplayTrial-Regular.ttf");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "BlackerSansDisplayTrial-Light";
  src: url("../fonts/BlackerSansDisplayTrial-Light.ttf");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "BlackerSansDisplayTrial-Extralight";
  src: url("../fonts/BlackerSansDisplayTrial-Extralight.ttf");
  font-style: normal;
  font-weight: 200;
}
@font-face {
  font-family: "BlackerSansDisplayTrial-Thin";
  src: url("../fonts/BlackerSansDisplayTrial-Thin.ttf");
  font-style: normal;
  font-weight: 100;
}
@font-face {
  font-family: "SegoeUI";
  src: url("../fonts/Segoe UI.ttf");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "SegoeUI";
  src: url("../fonts/Segoe UI Bold.ttf");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "BlackerSansDisplayTrial-Book";
  src: url("../fonts/BlackerSansDisplayTrial-Book.ttf");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Culture-Bold";
  src: url("../fonts/Culture-Bold.otf");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Culture-Normal";
  src: url("../fonts/Culture.otf");
  font-style: normal;
  font-weight: 400;
}

/*Menu Bar*/
.menubar {
    display: inline-block;
    cursor: pointer;
    padding-top: 50%;
}

.bar1 {
  width: 35px;
  height: 2px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
.bar2 {
  width: 25px;
  height: 2px;
  background-color: #333;
  margin: 6px 0;
}
/*Side Menu*/
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: #FCFBFA;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 10vh;
    font-family: "Culture-Normal";
    line-height: inherit;
}

.sidenav a {
  padding: 1vh 1vh 1vh 3.6vh;
  text-decoration: none;
  font-size: 28pt;
  color: #7C7B7F;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #26262D;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 28px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/*NOIDUNG1*/
.nd{
    width: 100%;
    height: 100vh;
    background-color: #FCFBFA;
    box-sizing: border-box;
    position: relative;
    top: 0vh;
    padding-top: 7vh;
}
.hinh1{
    width: 50vh;
    height: 62.75vh;
    background-color: none;
    position: absolute;
    margin-top:0px;
    margin-left: 0px;
    z-index: 100;
}
.nd h1{
    font-family: "BlackerSansDisplayTrial-Regular";
    font-size: 78pt;
    z-index: 100;
    position: relative;
    margin-top: 15vh;
    margin-left: 61vh;
    color: #26262D;
}
.nd p{
    font-family: "BlackerSansDisplayTrial-Light";
    font-size: 44pt;
    z-index: 100;
    position: relative;
    margin-top: -2vh;
    margin-left: 61vh;
    color: #26262D;
}
.stroke{
    height: 0.16vh;
    width: 11.11vh;
    background-color: #DCDAD8;
    z-index: 100;
    position: relative;
    margin-top: 6vh;
    margin-left: 61vh;
}
.nd p.light {
    font-family: "BlackerSansDisplayTrial-Extralight";
    font-size: 14pt;
    z-index: 100;
    position: relative;
    margin-top: 2.2vh;
    margin-left: 61vh;
}
.nd1{
    width: 80%;
    height: 63vh;
    background-color: none;
    position: absolute;
    margin-top: 15vh;
    margin-left: 16.7vh;
    z-index: 90;
    box-sizing: border-box;
}

/*Marquee*/
.marquee {
    height: 700px;
    width: 480%;
    padding: 0; 
    z-index: 0;
    margin-top: 0;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 480%;
  height: 700px;
    
    font-size: 340pt;
    text-decoration: none;
    color: #F3F3F4;
    font-family: "BlackerSansDisplayTrial-Extralight";

  position: absolute;
    top: -10vh;
  overflow: hidden;

  animation: marquee 120s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

/*NOIDUNG2*/
.nd2{
    width: 100%;
    height: 250vh;
    background-color: #FCFBFA;
    position: relative;
    top: inherit;
    box-sizing: border-box;
    padding-top: 10vh;
}
.nd2 h1{
    color: #26262D;
    font-family: "Culture-Bold";
    font-size: 70pt;
    position: relative;
    margin-top: 5.5vh;
    margin-left: 11vh;
}
.nd2 a{
    text-decoration: none;
    color: black;
    font-family: "BlackerSansDisplayTrial-Extralight";
    font-size: 16pt;
    position: relative;
    top: 1vh;
    left: 11vh;
}
.nd2 a:hover{
    color: #26262D;
}
.hinhtong{
    width: 100%;
    height: 150vh;
    background-color: #FCFBFA;
    z-index: 1000;
    position: absolute;
}
.hinh2{
    width: 23.1%;
    height: 38.35%;
    background-color: none;
    float: right;
    position: relative;
    margin-left: 3.8%;
    box-sizing: border-box;
}
.hinh3 {
    width: 38.5%;
    height: 51.9%;
    background-color: none;
    position: relative;
    top: 15vh;
    left: 34.6%;
    
}
.hinh4{
    width: 38.5%;
    height: 51.9%;
    background-color: none;
    float: right;
    position: absolute;
    top: 30vh;
    left: 34.6%;
}
.hinh5{
    width: 30.8%;
    height: 56.97%;
    background-color: none;
    float: left;
    position: relative;
    top: -12vh;
    margin-right: 3.8%;
}
.skill{
    font-family: "BlackerSansDisplayTrial-Regular";
    font-size: 14pt;
    position: relative;
    top: 3vh;
}
.skill1{
    font-family: "BlackerSansDisplayTrial-Regular";
    font-size: 14pt;
    position: relative;
    top: 3vh;
    left:1.6vh;
}
.project{
    font-family: "BlackerSansDisplayTrial-Regular";
    font-size: 10pt;
    position: relative;
    top: -0.9vh;
    float: right;
    margin-right: 1.6vh;
}
.project1{
    font-family: "BlackerSansDisplayTrial-Regular";
    font-size: 10pt;
    position: relative;
    top: -0.9vh;
    float: right;
}
.line2{
    height: 0.1vh;
    width: 100%;
    background-color: black;
    position: relative;
    top: 4.5vh;
    z-index: 4000;
}

/*Slider Hinh*/
.sliderhinh{
    width: 100%;
    height: 100vh;
    background-color: none;
    position: relative;
    top: 0;
    box-sizing: border-box;
    padding-bottom: 500px;
}
.carousel-fade .carousel-inner .item {
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  width: 100%;
    height: 100vh;
}
.item:nth-child(1) {
  background: url("../images/6.jpg");
    background-size: cover;
}
.item:nth-child(2) {
  background: url("../images/7.jpg");
    background-size: cover;
}
.item:nth-child(3) {
  background: url("../images/9.png");
    background-size: cover;
}

/*Leave Message*/
.mess{
    width: 100%;
    height: 110vh;
    background-color: #FCFBFA;
    position: relative;
    box-sizing: border-box;
    padding-top: 12vh;
    padding-left: 40vh;
}
.mess h1{
    color: #26262D;
    font-family: "Culture-Bold";
    font-size: 70pt;
    position: relative;
}
.mess table{
    font-family: "BlackerSansDisplayTrial-Light";
    font-size: 15pt;
    margin-top: 5vh;
    color: #535254;
}
.mess table input{
    width: 100%;
    height: 6vh;
    border-bottom: 0.1vh solid #000000;
    border-left: none;
    border-right: none;
    border-top: none;
    background-color: #FCFBFA;
    margin-top: 1.5vh;
    margin-bottom: 5vh;
    font-family: "SegoeUI";
    font-size: 12pt;
}
.mess table tr td{
    margin-bottom: 5vh;
}
.mess table input:focus
{
	outline: none;
}
.mess a:hover{
    color: #26262D;
}

/*Footer*/
.foundme{
    width: 100%;
    height: 100vh;
    background-color: #26262D;
    box-sizing: border-box;
    padding-top: 12vh;
}
.marquee2 {
    height: 700px;
    width: 185%;
    padding: 0; 
    z-index: 0;
    margin-top: 0;

  overflow: hidden;
  position: relative;
}

.marquee2 div {
  display: block;
  width: 185%;
  height: 700px;
    
    font-size: 340pt;
    text-decoration: none;
    color: #F3F3F4;
    font-family: "BlackerSansDisplayTrial-Extralight";

    position: absolute;
    top: -15vh;
    overflow: hidden;

  animation: marquee 15s linear infinite;
}

.marquee2 span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

/*Instagram*/
.foundme .social a{
    height: 7vh;
    width: 7vh;
    font-size: 20pt;
    color: #FFFFFF;
    border: .1vh solid #FFFFFF;
    margin: 3vh;
    border-radius: 50%;
    padding-top: 1.7vh;
    padding-left: 0.7vh;
    position: relative;
    bottom: 1.2vh;
    z-index: 3000;
}

.foundme .social a:hover{
    background-color: #3C3C3C ;
}
.foundme center{
    color: #FFFFFF;
    font-family: "BlackerSansDisplayTrial-Extralight";
    font-size: 18pt;
    position: relative;
    bottom: 19vh;
    letter-spacing: 5px;
    line-height: inherit;
}