* {
    margin: 0;
    margin-left: 2%;
    margin-right: 2%;
    padding: 0;
    box-sizing: border-box;
    border: none;
    font-family: 'Montserrat', sans-serif;
}




  @keyframes fadein {
  
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  
  }




.column {
  float: left;
  width: 12.5%;
  border-left: 0.25px solid #DEDEDE;
  height: 1000vh;
  margin-right: 10px;
    z-index: -99;
}


.column2 {
  float: left;
  width: 12.5%;
  border-left: 0.25px solid #DEDEDE;
  height: 1000vh;
  margin-right: 10px;
  z-index: -99;
}






@media only screen and (max-width: 699px) {
.column {
  float: left;
  width: 28%;
  border-left: 1px solid #DEDEDE;
  height: 1000vh;
  margin-right: 10px;
    z-index: -99;
}

.column2 {
  float: left;
  width: 28%;
  border-left: 1px solid #DEDEDE;
  height: 1000vh;
  margin-right: 10px;
    z-index: -99;
}

#Designing_experiences h2 {

font-size: 48px;
line-height: 65px;


}


#about {
     position: absolute;
     top: 30%;
     left: 3.5%;
     width: 50%;
      z-index: 99;
  }






}



@media only screen and (max-width: 899px) {


#Designing_experiences h2 {

font-size: 55px;
line-height: 80px;


}


}






  #brief{
    left: 364px;
    top: 20px;
    position: absolute;
    overflow: visible;
    width: 170px;
    white-space: nowrap;
    line-height: 16px;
    margin-top: -2.5px;
    text-align: left;
    font-family: Montserrat;
    font-weight: lighter;
    font-size: 11px;
    color: rgba(0,0,0,1);

  }

#Designing_experiences {
 position: absolute;
 top: 22.5%;
 left: 3.5%;
 line-height: 99px;

}




#view {
top: 1%;
right: 0%;

}


.pageview svg :hover {

      stroke: #051CF7 !important;
      cursor: pointer; 
      stroke-width: 3;

}


#Values {
position: absolute;
 top: 40%;
 left: 5%;
max-width: 600px;
}


#about {
     position: absolute;
     top: 50%;
     left: 3.5%;
     max-width: 29%;
      z-index: 99;
  }



#work {
     position: absolute;
     top: 15%;
     left: 2.8%;
     max-width: 60%;
    z-index: 99;
  }


#work2 {
     position: absolute;
     top: 40%;
     left: 43.5%;
     float: ;
    z-index: 399;
  }

#work3 {
    z-index: 399;
  }





#description{
     position: absolute;
     top: 200%;
     left: 17.5%;
     max-width: 15%;
     z-index: 399;
}

  p {
    text-align: left;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 9px;
    color: rgba(0,0,0,1);
    margin-top: 10px;
  }



h1 {

    text-align: left;
    font-family: Montserrat;
    font-style: normal;
    font-weight: bolder;
    font-size: 70px;
    color: white;
     style="text-shadow:
    -1px -1px 0 #051CF7,
    1px -1px 0 #051CF7,
    -1px 1px 0 #051CF7,
    1px 1px 0 #051CF7;  
}

h2{

    text-align: left;
    font-family: Montserrat;
    font-weight: bolder;
    font-size: 68px;
    color: black;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 0.9;

}


h3 {
      text-align: left;
    font-family: Montserrat;
    font-weight: lighter;
    font-size: 12px;
    color: rgba(0,0,0,1);
  margin-top: 10px;
  line-height: 1.5;
}

a {
    text-align: left;
    font-family: Montserrat;
    font-weight: bold;
    font-size: 12px;
    color: #051CF7;
    text-decoration: none;


}

h4 {
    text-align: left;
    font-family: Montserrat;
    font-weight: normal;
    font-size: 15px;
    color: rgba(0,0,0,1);

}

h5 {
    text-align: left;
    font-family: Montserrat;
    font-weight: normal;
    font-size: 12px;
    color: rgba(0,0,0,1);
      line-height: 1.5;

}

h6 {

    text-align: left;
    font-family: Montserrat;
    font-weight: bolder;
    font-size: 25px;
    color: #051CF7;

}


h1:hover {
    color: #051CF7;
    cursor: pointer;
}



h4:hover {
    color: #051CF7;
    cursor: pointer;
}




a:hover{
  color: black;
  font-weight: bold;
}