::-moz-selection { /* Code for Firefox */
  color: black;
  background: white;
}

::selection {
  color: black;
  background: white;
}


.main-wrap{
 font-family: 'Kanit', sans-serif; 
 scroll-behavior: smooth;
}

p{
  color: white;
  font-weight: 200;
  font-size: 18px;
}

a{
  text-decoration: none;
}

.sidebar {
    background-color: #0A0A0A;
    width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 3% 100px;
}

.bg {
    background-color: #0A0A0A;
    position: fixed;
    top: 0;
    left: 500px;
    right: 0;
    bottom: 0;
    text-align:center;
    padding-top: 18%;
    z-index: -1;
}

.sidebar:after{
  animation: grain 8s steps(10) infinite;
  background-image: url('http://romanmoson.com/images/noisy-texture3.png');
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.6;
  position: fixed;
  top: -110%;
  width: 300%;
  z-index: -1;
}

h2{
  font-size: 30px;
}


@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

.elo{
  position: absolute;
  left:0;
  z-index:-1;
  margin-top:45px;
  font-weight: 500;
  line-height:100px;
  font-size: 250px;
  color: #1D1D1D;
}

.sidebar h1 {
   font-weight: 300;
   font-size: 88px;
   line-height: 80px;
   color: white; 

}

.subtitle p {
   margin-top: -10px;
   font-size: 36px;
   line-height: 42px;
   color: #777777;
   font-weight: 100;

}

.fale{
  position: absolute;
  left: 0px;
  top: 0px;
}

.video{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow:hidden;
    z-index: 100;
}

.video iframe{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}



.cases {
  position: absolute; 
  top: 100%; 
  left: 500px;
  right: 0;
  text-align: center;
  color:white;
}

.cases img {
  width: 100%;
}

.cases_cta{
  position:absolute;
  bottom: 0; 
  left: 500px;
  right: 0;
  text-align: center;
  font-size: 30px;
  color: white;
background: rgb(222,73,162);
background: linear-gradient(126deg, rgba(222,73,162,1) 0%, rgba(184,125,255,1) 100%);
  border-radius: 100px 0 0 0;
  padding-top: 30px;
  padding-bottom: 30px;
  font-weight: 200;
}

.cases_cta:hover{
background: rgb(255,88,77);
background: linear-gradient(126deg, rgba(255,88,77,1) 0%, rgba(222,73,162,1) 100%);
  cursor:pointer;
  transition:all 0.3s ease;
}

.cases_cta:not(:hover){
  transition:all 0.3s ease;
}

.arrow{
  height: 20px;
  margin-left: 20px;
}

.case{
  padding: 7%;
  padding-top:3.5%;
}


.the_codest{
  color:#fff;
  background-color: #101010;
}


.case1 {
  background-color: #E20074; 
}


.case2 {
  
  background-color: #000064;
  
}

.case4 {
  
  background-color: #F6680C;
  
}

.case3 {
  background-color: #32004A;
  border-radius: 0 0 0 100px;
  position: relative;
  z-index: 2;
}

.cta_section {
  position: relative;
  z-index: 0;
  margin-top: -100px;
  
  background-color: rgba(15, 15, 15, 0.98);
  /*padding-top: 50%;*/
  padding-bottom: 50%;
  padding-left:7%;
  padding-right:7%;

}


.cta_section_content {
  position: relative;
  margin: 0 auto;
  padding-top:50%;
  max-width: 600px;

}


.cta_section_content p{
  font-size: 24px;
}

.gray{
  color:gray;
}


.contact{
  position:absolute;
  bottom:0;
  margin-bottom:40px;
  letter-spacing: 1px;
  line-height: 18px;
 
} 

.contact_mobile{
  visibility: hidden;
  letter-spacing: 1px;
  line-height: 24px;
 
} 

.contact_mobile p{
   font-size: 18px;
  color: #C4C4C4;
}



.contact_box{
  padding-bottom: 10px;
  
}

 
.contact_box p:hover{
  background:white;
  color: black;
  font-weight: 300;
  transform: scale(1.2);
  transition:all 0.3s ease;

}

.contact_box p:not(:hover){
  transition:all 0.3s ease;
}


.social_circle{
  display: inline-block;
  height:48px;
  width:48px;
  margin-top:20px;
  margin-right:20px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  text-align:center;
  line-height: 54px;
  color: white;
  fill: currentColor;
  
}
  
.social_circle:hover{
  background-color: white;
  transition:all 0.3s ease;
  cursor: pointer;
}  

.social_circle:not(:hover){
  transition:all 0.3s ease;
  
}  

 .linkedin:hover{
  color: #0073b1;
  transition:all 0.3s ease;
  transform: scale(1.1);
}
 .linkedin:not(:hover){
   transition:all 0.3s ease;
}

 .instagram:hover{
  color: #0A0A0A;
   transition:all 0.3s ease;
   transform: scale(1.1);
}
 .instagram:not(:hover){
   transition:all 0.3s ease;
}

 .dribbble:hover{
  color: #ea4c89;
   transition:all 0.3s ease;
   transform: scale(1.1);
}
 .dribbble:not(:hover){
   transition:all 0.3s ease;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
  width: 400px;
  background-color: #fff;
  font-weight: 300;
  color: #000;
  text-align: center;
  padding: 10px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -70px; 
  margin-bottom:-10px; 
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}


@media only screen and (max-width: 1600px) {
  .bg{
    left: 400px;
    
  }
  
  .sidebar {
    width: 240px;
    padding: 3% 80px;
  }
  
  .sidebar h1 {
   font-size: 64px;
   line-height: 60px;
}
  
  .elo{
  line-height:60px;
  font-size: 200px;
}
  
  .subtitle p {
   margin-top: -10px;
   font-size: 30px;
   line-height: 36px;
   
}
  
.cases_cta{
  left: 400px;
  font-size: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
 
}
  
  .arrow{
  height: 16px;
  margin-left: 16px;
}
  
  .cases{
  left: 400px; 
  }
  
  .contact{
  margin-bottom:20px;
} 
  
  
/*----------------------------*/    
  .contact_box{
  margin-bottom: 0 0 0 0;
  
}  
  
/*----------------------------*/  
  
}


@media only screen and (max-width: 1400px) {
  
  .bg{
    left: 320px;
    
  }
  
  .sidebar {
    width: 240px;
    padding: 10px 40px;
  }
  
  .sidebar h1 {
   font-size: 56px;
   line-height: 50px;
}
  
  .elo{
  line-height:34px;
  font-size: 180px;
}
  
  .subtitle p {
   margin-top: -16px;
   font-size: 24px;
   line-height: 30px;
}
  
.cases_cta{
  left: 320px;
  font-size: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
 
}
  
  .cases{
  left: 320px; 
  }
  
  .contact_box{ 
  padding: 1px 0 0 0;
  
}
  
   .contact{ 
  padding: 1px 0 0 0;
  
}
  
}

@media only screen and (max-width: 900px) {
  
.cases_cta{
  left:0;
}
  
  .cases{
  left:0 ; 
  }

     .strzalka{ 
  display:none;
  
}
   
   .contact{ 
  /*margin-bottom: 110px;*/
  display:none;
  
}
  
  
.cases_cta{
  border-radius: 100px 100px 0 0;
 
}
  
.case3 {
  border-radius: 0 0 100px 100px;
 
}
  
  .cta_section{ 
    background-color: rgba(15, 15, 15);
  }
  
  .contact_mobile{
  visibility: visible;

}