html,body{
  font-family: 'roboto', sans-serif;
}
.intro{
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100%; 
    width: 100%;
    position: absolute;
    -webkit-transition: all 0s ease-in-out 3.5s;
    transition: all 0s ease-in-out 3.5s;
}
.intro.close_intro {
    height:0px;
}
.logo{
  width:300px;
    -webkit-transition: all 0.5s ease-in-out 3s;
    transition: all 0.5s ease-in-out 3s;
}
.close_intro .logo{
    -webkit-transform:scale3d(1.3,1.3,1.3);
    transform:scale3d(1.3,1.3,1.3);
    opacity:0;
}

.main{
  background-color: #000;
  -webkit-transform:scale3d(0,1,1);
  transform:scale3d(0,1,1);
  width:100%;
  position: absolute;
  -webkit-transition: all 0.5s ease-in-out 3.5s;
  transition: all 0.5s ease-in-out 3.5s;
}
.main.welcome{
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
}
.canvas_container{
  width:100%;
  height:100%;
  overflow:hidden;
  position: absolute;
  top:0px;
  left:0px;
}
canvas{
    -webkit-transform:scale3d(1.1,1.1,1.1);
    transform:scale3d(1.1,1.1,1.1);
  opacity:0;
  -webkit-transition: all 1s ease-in-out 4s;
  transition: all 1s ease-in-out 4s;
}
.welcome canvas{
  opacity:1;
}

header{
  margin:40px 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
header img{
  display: block;
  opacity:0;
  -webkit-transform:scale3d(0.9,0.9,0.9);
  transform:scale3d(0.9,0.9,0.9);
  -webkit-transition: all 0.5s ease-in-out 4s;
  transition: all 0.5s ease-in-out 4s;
}
.welcome header img{
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
  opacity:1;
}
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
nav ul li{
  display: inline-block;
  margin: 0 10px;
  padding: 15px;
  opacity:0;
  -webkit-transform:scale3d(0.9,0.9,0.9);
  transform:scale3d(0.9,0.9,0.9);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
nav ul li a{
  color: #fff;
  text-decoration: none;
  letter-spacing: 3px;
  font-size:13px;
}
nav ul li:last-child{
  margin-right: 0;
  padding-right: 0px;
}
.welcome nav ul li{
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
  opacity:1;
}
.welcome nav ul li:nth-child(7){
  transition-delay: 4s;
}
.welcome nav ul li:nth-child(6){
  transition-delay: 4.05s;
}
.welcome nav ul li:nth-child(5){
  transition-delay: 4.1s;
}
.welcome nav ul li:nth-child(4){
  transition-delay: 4.15s;
}
.welcome nav ul li:nth-child(3){
  transition-delay: 4.2s;
}
.welcome nav ul li:nth-child(2){
  transition-delay: 4.25s;
}
.welcome nav ul li:nth-child(1){
  transition-delay: 4.3s;
}


.first_msg{
  width:100%;
  height:400px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.typewriter h1 {
  color: #fff;
  font-weight: 100;
  font-size: 48px;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .04em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  width: 0;
  border-color: transparent
}

.welcome .typewriter h1{
    animation: typing 2.5s steps(30, end) forwards, blink-caret .5s step-end infinite;
    animation-delay: 4s;
  }
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #a6d42b }
}

.first_ctas{
  margin-top:50px;
}
.first_ctas a{
  display: inline-block;
  width:200px;
  text-align: center;
  border-radius: 500px;
  background:transparent;
  border:1px solid #fff;
  padding:20px 30px;
  text-decoration: none;
  color:#fff;
  letter-spacing: .15em;
  font-weight: 200;
  margin:0 13px;
  opacity:0;
  -webkit-transform:scale3d(1.2,1.2,1.2);
  transform:scale3d(1.2,1.2,1.2);
}
.welcome .first_ctas a:first-child{
  -webkit-transition: transform 0.5s ease-in-out 6s, opacity 0.5s ease-in-out 6s, border 0.25s ease-in-out 0s;
  transition: transform 0.5s ease-in-out 6s, opacity 0.5s ease-in-out 6s, border 0.25s ease-in-out 0s;
}
.welcome .first_ctas a:last-child{
  -webkit-transition: transform 0.5s ease-in-out 6.25s, opacity 0.5s ease-in-out 6.25s, border 0.25s ease-in-out 0s;
  transition: transform 0.5s ease-in-out 6.25s, opacity 0.5s ease-in-out 6.25s, border 0.25s ease-in-out 0s;
}
.welcome .first_ctas a{
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
  opacity:1;
}
.first_ctas a:hover{
  border:1px solid #a6d42b;
}



.recent_works{
  margin-top:150px;
}

.small_title{
  color: #fff;
  font-weight: 100;
  font-size: 18px;
  white-space: nowrap; 
  text-align: center;
  letter-spacing: .15em; 
}
.recent_works .small_title{
  opacity:0;
  -webkit-transform:translateY(100px);
  transform:translateY(100px);
  -webkit-transition: all 0.5s ease-in-out 6s;
  transition: all 0.5s ease-in-out 6s;
}

.swiper-container {
  margin-top:30px;
  width: calc(100vw - 20px);
  height: 400px;
  opacity:0;
  -webkit-transform:translateY(100px);
  transform:translateY(100px);
  -webkit-transition: all 0.5s ease-in-out 6.25s;
  transition: all 0.5s ease-in-out 6.25s;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  opacity:0.6;
  border-radius: 50px;
  -webkit-transition:all 0.4s ease-in-out;
  transition:all 0.4s ease-in-out;
  -webkit-transform:scale3d(0.8,0.8,0.8);
  transform:scale3d(0.8,0.8,0.8);
  -webkit-box-shadow:  0px 0px 0px 1px #000;
-moz-box-shadow:  0px 0px 0px 1px #000;
box-shadow:  0px 0px 0px 1px #000;
}
.swiper-slide-active{
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
  opacity:1;
}
.welcome .swiper-container{
  opacity:1;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
}

.welcome .recent_works .small_title{
  opacity:1;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
}