* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: aloeVeraLight,'Gill Sans', sans-serif;
    /* color: #fff; */
  }
  
  @font-face {
    font-family: aloeVeraLight;
    src: url('../assets/fonts/AloeveraDisplay-Light.woff');
  }

.show-project{
    background-color: #FFF6E9;
}

main{
  width: 100%;
  height: auto;
  background-color: #181209;
}

h1{
  font-family: aloeVeraLight,'Gill Sans', sans-serif;
  z-index: 100;
  color: white;
  position: absolute;
  top: 5%;
  left: 5%;
  padding-top: .8rem;
  font-size: 1.2rem;
}

.projectHead1{
  background: url(../assets/images/freely/freely.jpg) no-repeat top;
}

.projectHead2{
  background: url(../assets/images/infographic/italy.jpg) no-repeat  center;
}

.projectHead4{
  background: url(../assets/images/collab/harvest.jpg) no-repeat  center;
}

.projectHead5{
  background: url(../assets/images/park/head.jpg) no-repeat  center;
}

.projectHead6{
  background: url(../assets/images/foe/foe_bg.jpg) no-repeat  center;
}

.projectHead7{
  background: url(../assets/images/demo/wacom.jpg) no-repeat  center;
}

.projectHead8{
  background: url(../assets/images/signage/digital.jpg) no-repeat  center;
}

.projectHead{
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    width: 100%;
    height: 600px;
}



.projectHead img{
    position: absolute;
    width: 30%;
    height: auto;
    top: 20%;
    left: 5%;
}

a{
  text-decoration: none;
  color: white;
  text-align: center;
}


.view a{
  width: 150px;
  text-align: center;
  position: relative;
  font-family: aloeVeraLight;
  padding: 1.0rem 1rem ;
  background-color: #181209;
  color: white;
  border: #fff solid 1px;
  cursor: pointer;
  border-radius: 30px;
  font-size: 1rem;
  transition: 0.5s;
}

.view a:hover{
  cursor: pointer;
  background-color: #fff;
  border: #181209 solid 1px;
  color: #181209;
}

.view1{
  width: 160px;
  margin: 40px auto;
}

.view2{
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}




/* Next Buttons */

.nextBtns{
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  bottom: 5%;
  color: #FFF6E9;
  text-align: center;
}

.nextBtns div a{
  font-family: aloeVeraLight;
  padding: 1.0rem 2rem ;
  margin: 0px 40px 10px;
  background-color: #181209;
  color: white;
  border: #fff solid 1px;
  cursor: pointer;
  border-radius: 30px;
  font-size: 1rem;
  transition: 0.5s;
}

.nextBtns div a:hover{
  cursor: pointer;
  background-color: #fff;
  border: #181209 solid 1px;
  color: #181209;
}



.row-con h2{
  position: relative;
  text-align: left;
}

.row-con{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
}
.overview, .projectObj{
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 40%;
  height: auto;
  font-family: aloeVeraLight,'Gill Sans', sans-serif;
  color: #cac3bb;
  line-height: 1.7rem;
  font-size: 1.2rem;
  margin: 650px 50px 10px;
}

.overview1, .projectObj1{
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 40%;
  height: auto;
  font-family: aloeVeraLight,'Gill Sans', sans-serif;
  color: #cac3bb;
  line-height: 1.7rem;
  font-size: 1.2rem;
  margin: 50px 50px;
}
.overview h2, .projectObj h2{
  text-align: left;
  position: relative;
  margin-bottom: -15px;
}

.projectObj li{
  list-style: circle;
  margin-bottom: 30px;
}

.process{
  width: 80%;
  margin: 10px 100px 10px 0px;
}

.process h2{
  text-align: left;
  position: relative;
}


.apparel{
  width: 40%;
  margin: 50px auto;
}

.titleCentre{
  position: relative;
  text-align: center;
}




/* Images */

.fullWidth{
  width: 100%;
  height: auto;
}

.half{
  width: 45%;
  height: auto;
}

.heightw{
  height: auto;
  width: 70%;
  margin: 0 auto;
}

.width80{
  width: 80%;
  height: auto;
  margin: 0 auto;
}

.row1{
  display: flex;
  flex-direction: row;
}



/* Videos */

.video{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 80%;
  margin: 0 auto;
}

.frame2{
  aspect-ratio: 1 / 1;
  height: auto;
  width: 100%;
  margin: 0 auto;
}




@media only screen and (max-width: 600px) {
  .row-con{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
  }
  .overview, .projectObj{
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 85%;
    height: auto;
    font-family: aloeVeraLight,'Gill Sans', sans-serif;
    color: #cac3bb;
    line-height: 1.7rem;
    font-size: 1.2rem;
    margin: 0 auto;
    margin-top: 650px;
  }
  .projectObj{
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 85%;
    height: auto;
    font-family: aloeVeraLight,'Gill Sans', sans-serif;
    color: #cac3bb;
    line-height: 1.7rem;
    font-size: 1.2rem;
    margin: 0 auto;
    margin-top: 80px;
  }
}