*,
*:before,
*:after{
    padding: 0;
    margin: 0;
}

    html, body {
        margin:0;
        background-color:white;
     }

     p{
      text-align: justify;
      font-family: futura-pt, sans-serif;
      font-weight: 400;
      font-style: normal;
      display: inline;
      line-height: 1.5;
     }

     @font-face {
      font-family: pixel;
      src: url(fonts/dogicapixel.ttf);
     }
    h1,h2,h3,h4,h5,h6{
        font-family: pixel;
    }

    a{ color: black; }
    a:link { text-decoration: none; }
    a:visited { text-decoration: none; }
    a:active { text-decoration: none; }
    a:hover { color: #9FB57A; }
    
/* -- grid ------------------------------------------------------------------------------*/

     .grid{
        margin: 40px 50px 10px 50px;
        display: grid;
        grid-template-columns: 30% 65%;
        grid-template-rows: 12vh 5vh 32vh 5vh 25vh 5vh;
        grid-row-gap: 10px;
        grid-column-gap: 30px;
      }

      .item{
        background: transparent;
        padding: 20px;
      }
      
      .item1 {
        grid-row: 2/3;
        border-bottom: 1px solid #7E8B7E;

      }
      .item2 {
        grid-column: 2/4;
        grid-row: 1/6;
        border-top: 2px solid #7E8B7E;
      }

      .item3{
        border-bottom: 2px solid #7E8B7E;
        border-top: 2px solid #7E8B7E;
      }
      
      .item4{
        border-bottom: 2px solid #7E8B7E;
      }

      .item5{
        border-bottom: 1px solid #7E8B7E;
      }
    
      .item7{
        border-top: 2px solid #7E8B7E;
        border-bottom: 1px solid #7E8B7E;
        grid-column: 1/4;
      }

    
/* -- logo ------------------------------------------------------------------------------*/
      .logo{
        margin-top: 10px;
        width: 150px;
      }

      hr{
        margin: 0px;
        padding: 0px;
        width: 100%;
      }


/* -- projects ------------------------------------------------------------------------------*/
  .projectText {
  height: 20px;	
  overflow: hidden;
  position: relative;
  border-left: 0px;
  }
  .projectText h3 {
  font-size: 1em;
  color: black;
  position: absolute;
  width: 450%;
  height: 100%;
  margin: 0;
  border-left: 0px;
  line-height: 20px;
  text-align: center;

  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);	
  transform:translateX(100%);

  -moz-animation: projectText 25s linear infinite;
  -webkit-animation: projectText 25s linear infinite;
  animation: projectText 25s linear infinite;
  }
  @-moz-keyframes projectText {
  0%   { -moz-transform: translateX(100%); }
  100% { -moz-transform: translateX(-100%); }
  }
  @-webkit-keyframes projectText {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(-100%); }
  }
  @keyframes projectText {
  0%   { 
  -moz-transform: translateX(100%); /* Firefox bug fix */
  -webkit-transform: translateX(100%); /* Firefox bug fix */
  transform: translateX(100%); 		
  }
  100% { 
  -moz-transform: translateX(-100%); /* Firefox bug fix */
  -webkit-transform: translateX(-100%); /* Firefox bug fix */
  transform: translateX(-100%); 
  }
  }


/* -- projects ------------------------------------------------------------------------------*/
.btn-group button {
  background-color: transparent;
  border: 1px solid transparent;
  color: black;
  padding: 5px 4px;
  cursor: pointer;
  width: 100%;
  display: block;
  text-align: left;
  display: inline-block;
}
.btn-group button img{
  width: 15px;
  display: inline-block;
}
.btn-group button h4{
  display: inline-block;
  font-size: 11px;
}
.btn-group button:not(:last-child) {
  border-bottom: none; 
}
.btn-group button:hover {
  color: #9FB57A;
}

/* -- about me ------------------------------------------------------------------------------*/
.item6{
  font-size: 14.5px;
  display: inline;
}

.item5 h4{
  display: inline-block;
}

.load{
  width: 30px;
  display: inline-block;
  margin-left: 4px;
}


/* -- project images ------------------------------------------------------------------------------*/
.item2 img{
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
	0% {

		transform: translatey(0px);
	}
	50% {
	
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

/* -- project placeholder ------------------------------------------------------------------------------*/
.item2 .chrome{
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: inline;
}


/* -- contact stying ------------------------------------------------------------------------------*/
.modal {
  padding: 1em;
  max-width: 5wh;
  border: 0;
  box-shadow: 0 0 1em rgb(0 0 0 / .3);
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.modal img{
  width: 200px;
  margin-left: 18%;
}

.close-button{
  width: 150px;
  height: 50px;
  background-color: #9FB57A;
  border-radius: 10px;
  border: none;
  color: white;
  margin-left: 25%;
  border: 0;
  cursor: pointer;
}

.open-button{
  border: 0;
  cursor: pointer;
  background-color: white;
}

.modal p{
  text-align: center;
  margin-left: 15%;
}

.button:hover{
  color: #9FB57A;
}


.modal::backdrop {
  background: rgb(0 0 0 / 0.4);
}

.icon{
  width: 18px;
  height: 14px;
  display: inline-block;
  margin-bottom: -1px;
}

.icon2{
  width: 20px;
  height: 14px;
  margin-bottom: -1px;
  display: inline-block;
  margin-left: 20px;
}

.icon1{
  width: 16px;
  margin-bottom: -1px;
  display: inline-block;
  margin-left: 20px;
}

.item7 h5{
  font-size: 14px;
  display: inline-block;
}

.item7 h4{
  display: inline;
  padding: 0 2px 0 2px;
}

.socials{
  position: absolute;
  display: inline-block;
  right: 5%;
  margin-bottom: 20px;
}

/* -- back to top ------------------------------------------------------------------------------*/
.backtotopimg{
  width: 32px;
  margin-left: 90%;
  margin-top: -10px;
  margin-bottom: 10px;
}

/* -- project grid ------------------------------------------------------------------------------*/
.main-box {
  display: grid;
  grid-template-columns: 30% 60%;
  grid-template-rows: 600px 70px 180px 180px 450px;
  margin: 40px 50px 10px 50px;
  grid-row-gap: 10px;
  grid-column-gap: 30px;
}
.box {
  padding: 20px;
  border-radius: 8px;
}

.box1 {
  grid-column: 1/4;
  border-top: 2px solid #7E8B7E;
  border-bottom: 1px solid #7E8B7E;
}

.box2 {
  grid-column: 1/4;
}

.box3{
  grid-column: 1/2;
}

.box4{
    grid-column: 2/4;
}

.box5{
    grid-column: 1/4;
    border-bottom: 1px solid #7E8B7E;
    
}

.box6, .box7, .box8, .box9{
  grid-column: 1/4;

  border-bottom: 1px solid #7E8B7E;
}
.box10{
  grid-column: 1/4;
}

.box11{
  grid-column: 1/4;
  border-top: 1px solid #7E8B7E;
}

.box12{
  grid-column: 1/4;

  border-top: 2px solid #7E8B7E;
  border-bottom: 2px solid #7E8B7E;
}


/* -- www stying ------------------------------------------------------------------------------*/

.box1 img{
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  /* width: 60%; */
  height: 100%;
  display: block;
  /* object-fit: cover; */
  margin-left: auto;
  margin-right: auto;
}

.dot{
  width: 15px;
  display: inline;
  margin-left: 150px;
}

.box3 p{
  display: inline;
}

.box3 h5{
  margin-left: 150px;
  margin-top: 15px;
}

.box2 h1{
  margin-left: 98px;
} 

.months, .role{
  margin-left: 160px;
}

.box4 h5, .box6 h5{
  margin-top: 15px;
}

.box5 img{
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  width: 40%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.box6 h5{
  margin-left: 150px;
  margin-top: 15px;
  margin-bottom: 5px;
}

.box6 p{
  display: inline;
}

.text2{
  margin-left: 150px;
}

.box7 img{
  width: 40%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  margin-bottom: 10px;
}

.box8 img{
  width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.box9 img{
  width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.box10 img{
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
}

.clickhere{
  width: 150px;
  margin-top: -46px;
  margin-left: 410px;
}

.main-box h3{
  margin-left: 100px;
  margin-top: 30px;
  margin-bottom: 20px;
}
.box12 h5{
  margin-left: 200px;
  margin-top: 25px;
  margin-bottom: 10px;
}

.backtohome{
  display: inline;
  margin-left: 80px;
  background-color: transparent;
  border: transparent;
  color: black;
}

.backtohome img{
  width: 10px;  
  margin-top: 50px;
}

.backtohome h5{
  display: inline;
}

.box2 h1{
  width: 490px;
  margin-left: 100px;
  border-right: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.type-animation{
  animation: typewriter 4s steps(40) 1s 1 normal both,
  blink 500ms steps(40) infinite normal;
}

@keyframes typewriter {
  from{
    width: 0;
  }
  to{
    width: 490px;
  }
}

.space{
  height: 20px;
}

.box12 .dwd-btn{
  margin-top: -22px;
  margin-left: 440px;
  margin-bottom: 10px;
}


/* -- sus stying ------------------------------------------------------------------------------*/

.sus-type h1{
  width: 570px;
  border-right: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.sus-animation{
  animation: suswriter 4s steps(40) 1s 1 normal both,
  blink 500ms steps(50) infinite normal;
}

@keyframes suswriter {
  from{
    width: 0;
  }
  to{
    width: 570px;
  }
}

@keyframes blink{
  from{
    border-right-color: black;
  }
  to{
    border-right-color: transparent;
  }
}

.box5 .sus-img{
  width: 70%;
  margin-top: -10%;
}

.no-mindmap{
  border-bottom: none;
  margin-top: -40px;
}

.box7 p, .box11 p {
  margin-left: 150px;
}

.box9 .sv-wire{
  width: 100%;
  margin-top: -150px;
}

.box10 img{
  margin-bottom: 30px;
}

/* -- myer stying ------------------------------------------------------------------------------*/
.myer-type h1{
  width: 110px;
  border-right: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.myer-animation{
  animation: myerwriter 1s steps(10) 1s 1 normal both,
  blink 400ms steps(10) infinite normal;
}

@keyframes myerwriter {
  from{
    width: 0;
  }
  to{
    width: 110px;
  }
}

.box10 .myer-vid{
  margin-left: 12.5%;
}


/* -- second slice cafe stying ------------------------------------------------------------------------------*/

.cafe-type h1{
  width: 445px;
  border-right: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.cafe-animation{
  animation: cafewriter 4s steps(40) 1s 1 normal both,
  blink 500ms steps(50) infinite normal;
}

@keyframes cafewriter {
  from{
    width: 0;
  }
  to{
    width: 445px;
  }
}

.sscwireframes{
  margin-bottom: 30px;
}

.sscmockup{
  width: 10%;
}

.sscbox1 img{
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  margin-bottom: 10px;
}

.second-box{
  display: grid;
  grid-template-columns: 30% 60%;
  grid-template-rows: 600px 70px 180px 180px 780px 0px 0px 870px;
  margin: 40px 50px 10px 50px;
  grid-row-gap: 10px;
  grid-column-gap: 30px;
}

.sscbox2{
  border-bottom: none;
}
.sscbox3{
  border-bottom: none;
}

.sscheader{
  margin-top: 30px;
}

/* -- zine stying ------------------------------------------------------------------------------*/
.zine-type h1{
  width: 270px;
  border-right: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.zine-animation{
  animation: zinewriter 4s steps(25) 1s 1 normal both,
  blink 400ms steps(25) infinite normal;
}

@keyframes zinewriter {
  from{
    width: 0;
  }
  to{
    width: 270px;
  }
}

.zine-box {
  display: grid;
  grid-template-columns: 30% 60%;
  grid-template-rows: 100px;
  margin: 40px 50px 10px 50px;
  grid-row-gap: 10px;
  grid-column-gap: 30px;
}

.clickhere2{
  width: 150px;
  margin-top: -35px;
  margin-left: 200px;
}

.zinepics{
  width: 100%;
}

/* -- showreel stying ------------------------------------------------------------------------------*/
.showreel-type h1{
  width: 220px;
  border-right: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.showreel-animation{
  animation: showwriter 4s steps(25) 1s 1 normal both,
  blink 400ms steps(25) infinite normal;
}

@keyframes showwriter {
  from{
    width: 0;
  }
  to{
    width: 220px;
  }
}
.showreelvid{
  margin-left: 23%;
}


/* -- desktop ------------------------------------------------------------------------------*/
@media only screen and (max-width:2560px){

  .grid{
    margin: 40px 50px 10px 50px;
    display: grid;
    grid-template-columns: 30% 65%;
    grid-template-rows: 12vh 5vh 32vh 5vh 30vh 5vh;
    grid-row-gap: 10px;
    grid-column-gap: 30px;
  }

  /* -- logo ------------------------------------------------------------------------------ */
  .logo{
    margin-top: 2%;
    width: 40%;
  }
  .btn-group button img{
    width: 5%;
    display: inline-block;
    margin-left: 5%;
  }
  .btn-group button h4{
    display: inline-block;
    font-size: 1em;
    margin-left: 5%;
    margin-top: 3%;
  }

  .item6{
    font-size: 1.2em;
    display: inline;
  }
  
  .load{
    width: 8%;
    display: inline-block;
    margin-left: 2%;
  }

  .swiper {
    width: 1300px;
    height: 100%;
  }
  
  .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;
  }
  
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* seconslice */
  .second-box{
    display: grid;
    grid-template-columns: 30% 60%;
    grid-template-rows: 80vh 15vh 15vh 25vh 120vh 0vh 10vh 130vh;
    margin: 40px 50px 10px 50px;
    grid-row-gap: 10px;
    grid-column-gap: 30px;
  }
  
  /* myer */
  iframe{
    width: 1350px;
    height: 750px;
  }

  .btn-group button img{
    width: 3%;
    display: inline-block;
    margin-left: 5%;
  }
}

/* -- mac ------------------------------------------------------------------------------*/
@media only screen and (max-width:1440px){

  /* -- grid ------------------------------------------------------------------------------*/

  .grid{
    margin: 40px 50px 10px 50px;
    display: grid;
    grid-template-columns: 30% 65%;
    grid-template-rows: 12vh 5vh 32vh 5vh 25vh 5vh;
    grid-row-gap: 10px;
    grid-column-gap: 30px;
  }

  .item{
    background: transparent;
    padding: 20px;
  }
  
  .item1 {
    grid-row: 2/3;
    border-bottom: 1px solid #7E8B7E;

  }
  .item2 {
    grid-column: 2/4;
    grid-row: 1/6;
    border-top: 2px solid #7E8B7E;
  }

  .item3{
    border-bottom: 2px solid #7E8B7E;
    border-top: 2px solid #7E8B7E;
  }
  
  .item4{
    border-bottom: 2px solid #7E8B7E;
  }

  .item5{
    border-bottom: 1px solid #7E8B7E;
  }

  .item7{
    border-top: 2px solid #7E8B7E;
    border-bottom: 1px solid #7E8B7E;
    grid-column: 1/4;
  }


/* -- logo ------------------------------------------------------------------------------*/
  .logo{
    margin-top: 10px;
    width: 150px;
  }

  hr{
    margin: 0px;
    padding: 0px;
    width: 100%;
  }


/* -- projects ------------------------------------------------------------------------------*/
    .projectText {
    height: 20px;	
    overflow: hidden;
    position: relative;
    border-left: 0px;
    }
    .projectText h3 {
    font-size: 1em;
    color: black;
    position: absolute;
    width: 450%;
    height: 100%;
    margin: 0;
    border-left: 0px;
    line-height: 20px;
    text-align: center;

    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);	
    transform:translateX(100%);

    -moz-animation: projectText 25s linear infinite;
    -webkit-animation: projectText 25s linear infinite;
    animation: projectText 25s linear infinite;
    }
    @-moz-keyframes projectText {
    0%   { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-100%); }
    }
    @-webkit-keyframes projectText {
    0%   { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
    }
    @keyframes projectText {
    0%   { 
    -moz-transform: translateX(100%); /* Firefox bug fix */
    -webkit-transform: translateX(100%); /* Firefox bug fix */
    transform: translateX(100%); 		
    }
    100% { 
    -moz-transform: translateX(-100%); /* Firefox bug fix */
    -webkit-transform: translateX(-100%); /* Firefox bug fix */
    transform: translateX(-100%); 
    }
    }


  /* -- projects ------------------------------------------------------------------------------*/
  .btn-group button {
  background-color: transparent;
  border: 1px solid transparent;
  color: black;
  padding: 0px;
  cursor: pointer;
  width: 100%;
  display: block;
  text-align: left;
  display: inline-block;
  }
  .btn-group button img{
  width: 15px;
  display: inline-block;
  }
  .btn-group button h4{
  display: inline-block;
  font-size: 11px;
  }
  .btn-group button:not(:last-child) {
  border-bottom: none; 
  }
  .btn-group button:hover {
  color: #9FB57A;
  }

/* -- about me ------------------------------------------------------------------------------*/
  .item6{
  font-size: 14.5px;
  display: inline;
  }

  .item5 h4{
  display: inline-block;
  }

  .load{
  width: 30px;
  display: inline-block;
  margin-left: 4px;
  }


/* -- project images ------------------------------------------------------------------------------*/
.item2 img{
-webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
filter: drop-shadow(5px 5px 5px #e2e2e2);
width: 100%;
height: 100%;
object-fit: contain;
display: none;
animation: float 6s ease-in-out infinite;
}

@keyframes float {
0% {

transform: translatey(0px);
}
50% {

transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}

/* -- project placeholder ------------------------------------------------------------------------------*/
.item2 .chrome{
-webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
filter: drop-shadow(5px 5px 5px #e2e2e2);
width: 100%;
height: 100%;
object-fit: contain;
display: inline;
}


/* -- contact stying ------------------------------------------------------------------------------*/

.icon{
width: 18px;
height: 14px;
display: inline-block;
margin-bottom: -1px;
}

.icon2{
width: 20px;
height: 14px;
margin-bottom: -1px;
display: inline-block;
margin-left: 20px;
}

.icon1{
width: 16px;
margin-bottom: -1px;
display: inline-block;
margin-left: 20px;
}

.item7 h5{
font-size: 14px;
display: inline-block;
}

.item7 h4{
display: inline;
padding: 0 2px 0 2px;
}

.socials{
position: absolute;
display: inline-block;
right: 5%;
margin-bottom: 20px;
}

/* -- back to top ------------------------------------------------------------------------------*/
.backtotopimg{
width: 32px;
margin-left: 90%;
margin-top: -10px;
margin-bottom: 10px;
}

/* -- project grid ------------------------------------------------------------------------------*/
.main-box {
display: grid;
grid-template-columns: 30% 60%;
grid-template-rows: 600px 70px 180px 180px 450px;
margin: 40px 50px 10px 50px;
grid-row-gap: 10px;
grid-column-gap: 30px;
}
.box {
padding: 20px;
border-radius: 8px;
}

.box1 {
grid-column: 1/4;
border-top: 2px solid #7E8B7E;
border-bottom: 1px solid #7E8B7E;
}

.box2 {
grid-column: 1/4;
}

.box3{
grid-column: 1/2;
}

.box4{
grid-column: 2/4;
}

.box5{
grid-column: 1/4;
border-bottom: 1px solid #7E8B7E;

}

.box6, .box7, .box8, .box9{
grid-column: 1/4;

border-bottom: 1px solid #7E8B7E;
}
.box10{
grid-column: 1/4;
}

.box11{
grid-column: 1/4;
border-top: 1px solid #7E8B7E;
}

.box12{
grid-column: 1/4;

border-top: 2px solid #7E8B7E;
border-bottom: 2px solid #7E8B7E;
}


/* -- www stying ------------------------------------------------------------------------------*/

.box1 img{
-webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
filter: drop-shadow(5px 5px 5px #e2e2e2);
/* width: 60%; */
height: 100%;
display: block;
/* object-fit: cover; */
margin-left: auto;
margin-right: auto;
}

.dot{
width: 15px;
display: inline;
margin-left: 150px;
}

.box3 p{
display: inline;
}

.box3 h5{
margin-left: 150px;
margin-top: 15px;
}

.box2 h1{
margin-left: 98px;
} 

.months, .role{
margin-left: 160px;
}

.box4 h5, .box6 h5{
margin-top: 15px;
}

.box5 img{
-webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
filter: drop-shadow(5px 5px 5px #e2e2e2);
width: 40%;
display: block;
margin-left: auto;
margin-right: auto;
}

.box6 h5{
margin-left: 150px;
margin-top: 15px;
margin-bottom: 5px;
}

.box6 p{
display: inline;
}

.text2{
margin-left: 150px;
}

.box7 img{
width: 40%;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
filter: drop-shadow(5px 5px 5px #e2e2e2);
margin-bottom: 10px;
}

.box8 img{
width: 60%;
display: block;
margin-left: auto;
margin-right: auto;
}
.box9 img{
width: 60%;
display: block;
margin-left: auto;
margin-right: auto;
}
.box10 img{
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
filter: drop-shadow(5px 5px 5px #e2e2e2);
}

.clickhere{
width: 150px;
margin-top: -46px;
margin-left: 410px;
}

.main-box h3{
margin-left: 100px;
margin-top: 30px;
margin-bottom: 20px;
}
.box12 h5{
margin-left: 200px;
margin-top: 25px;
margin-bottom: 10px;
}

.backtohome{
display: inline;
margin-left: 80px;
background-color: transparent;
border: transparent;
color: black;
}

.backtohome img{
width: 10px;  
margin-top: 50px;
}

.backtohome h5{
display: inline;
}

.box2 h1{
width: 490px;
margin-left: 100px;
border-right: 2px solid black;
overflow: hidden;
white-space: nowrap;
}

.type-animation{
animation: typewriter 4s steps(40) 1s 1 normal both,
blink 500ms steps(40) infinite normal;
}

@keyframes typewriter {
from{
width: 0;
}
to{
width: 490px;
}
}

.space{
height: 20px;
}

.box12 .dwd-btn{
margin-top: -22px;
margin-left: 440px;
margin-bottom: 10px;
}


/* -- sus stying ------------------------------------------------------------------------------*/

.sus-type h1{
width: 570px;
border-right: 2px solid black;
overflow: hidden;
white-space: nowrap;
}

.sus-animation{
animation: suswriter 4s steps(40) 1s 1 normal both,
blink 500ms steps(50) infinite normal;
}

@keyframes suswriter {
from{
width: 0;
}
to{
width: 570px;
}
}

@keyframes blink{
from{
border-right-color: black;
}
to{
border-right-color: transparent;
}
}

.box5 .sus-img{
width: 70%;
margin-top: -10%;
}

.no-mindmap{
border-bottom: none;
margin-top: -40px;
}

.box7 p, .box11 p {
margin-left: 150px;
}

.box9 .sv-wire{
width: 100%;
margin-top: -150px;
}

.box10 img{
margin-bottom: 30px;
}

/* -- myer stying ------------------------------------------------------------------------------*/
.myer-type h1{
width: 110px;
border-right: 2px solid black;
overflow: hidden;
white-space: nowrap;
}

.myer-animation{
animation: myerwriter 1s steps(10) 1s 1 normal both,
blink 400ms steps(10) infinite normal;
}

@keyframes myerwriter {
from{
width: 0;
}
to{
width: 110px;
}
}

.box10 .myer-vid{
margin-left: 15%;
}

iframe{
  width: 900px;
  height: 750px;
}


/* -- second slice cafe stying ------------------------------------------------------------------------------*/

.cafe-type h1{
width: 445px;
border-right: 2px solid black;
overflow: hidden;
white-space: nowrap;
}

.cafe-animation{
animation: cafewriter 4s steps(40) 1s 1 normal both,
blink 500ms steps(50) infinite normal;
}

@keyframes cafewriter {
from{
width: 0;
}
to{
width: 445px;
}
}

.sscwireframes{
margin-bottom: 30px;
}

.sscmockup{
width: 10%;
}

.sscbox1 img{
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
filter: drop-shadow(5px 5px 5px #e2e2e2);
margin-bottom: 10px;
}

.second-box{
display: grid;
grid-template-columns: 30% 60%;
grid-template-rows: 600px 70px 180px 180px 780px 0px 0px 870px;
margin: 40px 50px 10px 50px;
grid-row-gap: 10px;
grid-column-gap: 30px;
}

.sscbox2{
border-bottom: none;
}
.sscbox3{
border-bottom: none;
}

.sscheader{
margin-top: 30px;
}

/* -- zine stying ------------------------------------------------------------------------------*/
.zine-type h1{
width: 270px;
border-right: 2px solid black;
overflow: hidden;
white-space: nowrap;
}

.zine-animation{
animation: zinewriter 4s steps(25) 1s 1 normal both,
blink 400ms steps(25) infinite normal;
}

@keyframes zinewriter {
from{
width: 0;
}
to{
width: 270px;
}
}

.zine-box {
display: grid;
grid-template-columns: 30% 60%;
grid-template-rows: 100px;
margin: 40px 50px 10px 50px;
grid-row-gap: 10px;
grid-column-gap: 30px;
}

.clickhere2{
width: 150px;
margin-top: -35px;
margin-left: 200px;
}

.zinepics{
width: 100%;
}

.showreelvid{
  margin-left: 19%;
}

}
  
/* -- laptop ------------------------------------------------------------------------------*/
@media only screen and (max-width:1024px){
  /* -- grid ------------------------------------------------------------------------------*/

.grid{
  margin: 40px 50px 10px 50px;
  display: grid;
  grid-template-columns: 40% 50%;
}

.swiper {
  width: 800px;
  height: 100%;
}

/* -- www stying ------------------------------------------------------------------------------*/

.box1 img{
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

.dot{
  width: 12px;
  display: inline;
  margin-left: 5px;
}

.box3 p{
  display: inline;
}

.box3 h5{
  margin-left: 10px;
  margin-top: 15px;
}

.box2 h1{
  margin-left: 0px;
} 

.months, .role{
  margin-left: 10px;
}

.box4 h5, .box6 h5{
  margin-top: 15px;
}

.box5 img{
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  width: 40%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.box6 h5{
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 5px;
}

.box6 p{
  display: inline;
}

.text2{
  margin-left: 0px;
}


.clickhere{
  width: 110px;
  margin-top: 0px;
  margin-left: 20px;
}

.main-box h3{
  margin-left: 0px;
  margin-top: 30px;
  margin-bottom: 20px;
}

.box12 h5{
  margin-left: 0px;
  margin-top: 25px;
  margin-bottom: 10px;
}

.backtohome{
  display: inline;
  margin-left: 80px;
  background-color: transparent;
  border: transparent;
  color: black;
}

.backtohome img{
  width: 10px;  
  margin-top: 50px;
}

.backtohome h5{
  display: inline;
}

.box12 .dwd-btn{
  margin-top: 0px;
  margin-left: 40px;
  margin-bottom: 10px;
  font-size: 10px;
}

.box7 p, .box11 p{
  margin-left: 0px;
}

/* -- sv stying ------------------------------------------------------------------------------*/

.box5 .sus-img{
  width: 100%;
  margin-top: 0%;
}

.no-mindmap{
  border-bottom: none;
  margin-top: 0px;
}

.box9 .sv-wire{
  width: 100%;
  margin-top: 0px;
}

.box10 img{
  margin-bottom: 30px;
}


/* -- myer stying ------------------------------------------------------------------------------*/


iframe{
  width: 900px;
  height: 450px;
  margin-left: -100px;
}

.box10 .myer-vid{
  margin-left: 0px;
}

.showreelvid{
  margin-left: 6%;
}

}

/* -- tablet ------------------------------------------------------------------------------*/
@media only screen and (max-width:768px){
  

/* -- grid ------------------------------------------------------------------------------*/

.grid{
  margin: 40px 50px 10px 50px;
  display: grid;
  grid-template-columns: 50% 45%;
}

/* -- logo ------------------------------------------------------------------------------*/
.logo{
  margin-top: 15px;
  width: 100px;
}

/* -- projects ------------------------------------------------------------------------------*/

.projectText h3 {
  font-size: 1em;
  color: black;
  position: absolute;
  width: 450%;
  height: 100%;
  margin: 0;
  border-left: 0px;
  line-height: 20px;
  text-align: center;
}

/* -- contact stying ------------------------------------------------------------------------------*/

.icon{
  width: 14px;
  height: 12px;
}

.icon2{
  width: 16px;
  height: 12px;
  margin-bottom: -1px;
}

.icon1{
  width: 12px;
  margin-bottom: -1px;
}

.item7 h5{
  font-size: 11px;
  display: inline-block;
}

.socials{
  position: absolute;
  display: inline-block;
  right: 7.5%;
  margin-bottom: 20px;
}

/* -- project grid ------------------------------------------------------------------------------*/
.main-box {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 600px;
  margin: 40px 50px 10px 50px;
  grid-row-gap: 10px;
  grid-column-gap: 0px;
  
}

.swiper {
  width: 700px;
  height: 100%;
}

.swiper-slide, .contain-slide, .ssc-wrapper {
  text-align: center;
  font-size: 8px;
  background: #fff;}

.box1 {
  grid-column: 1/2;
  border-top: 2px solid #7E8B7E;
  border-bottom: 1px solid #7E8B7E;
}

.box2 {
  grid-column: 1/2;
}

.box3{
  grid-column: 1/2;
}

.box4{
  grid-column: 1/2;
}

.box5{  
  grid-column: 1/2;
    border-bottom: 1px solid #7E8B7E;
    
}

.box6, .box7, .box8, .box9{
  grid-column: 1/2;

  border-bottom: 1px solid #7E8B7E;
}
.box10{
  grid-column: 1/2;
}

.box11{
  grid-column: 1/2;
  border-top: 1px solid #7E8B7E;
}

.box12{
  grid-column: 1/2;

  border-top: 2px solid #7E8B7E;
  border-bottom: 2px solid #7E8B7E;
}

.box7 p, .box11 p {
  margin-left: 0px;
}

/* -- www stying ------------------------------------------------------------------------------*/

.box1 img{
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

.dot{
  width: 12px;
  display: inline;
  margin-left: 5px;
}

.box3 p{
  display: inline;
}

.box3 h5{
  margin-left: 10px;
  margin-top: 15px;
}

.box2 h1{
  margin-left: 0px;
  font-size: 20px;
} 

.months, .role{
  margin-left: 10px;
}

.box4 h5, .box6 h5{
  margin-top: 15px;
}

.box5 img{
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  width: 40%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.box6 h5{
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 5px;
}
.space{
  display: none;
}

.box6 p{
  display: inline;
}

.text2{
  margin-left: 0px;
}

.box7 img{
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
  margin-bottom: 10px;
}

.box7 p{
  display: none;
}

.box8 img{
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.box9 img{
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.box10 img{
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
}

.clickhere{
  width: 110px;
  margin-top: 0px;
  margin-left: 20px;
}

.main-box h3{
  margin-left: 0px;
  margin-top: 30px;
  margin-bottom: 20px;
}

.box12 h5{
  margin-left: 0px;
  margin-top: 25px;
  margin-bottom: 10px;
}

.backtohome{
  display: inline;
  margin-left: 80px;
  background-color: transparent;
  border: transparent;
  color: black;
}

.backtohome img{
  width: 10px;  
  margin-top: 50px;
}

.backtohome h5{
  display: inline;
}

.box2 h1{
  width: 305px;
  margin-left: 0px;
  border-right: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.type-animation{
  animation: typewriter 4s steps(40) 1s 1 normal both,
  blink 500ms steps(40) infinite normal;
}

@keyframes typewriter {
  from{
    width: 0;
  }
  to{
    width: 305px;
  }
}

.box12 .dwd-btn{
  margin-top: 0px;
  margin-left: 40px;
  margin-bottom: 10px;
  font-size: 10px;
}

/* -- sv stying ------------------------------------------------------------------------------*/
.box2 .sus-animation, .box2 .sus-type{
  width: 285px;
  border-right: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
  font-size: 16px;
}

@keyframes suswriter {
  from{
    width: 0;
  }
  to{
    width: 285px;
  }
}

.box5 .sus-img{
  width: 100%;
  margin-top: 0%;
}

.no-mindmap{
  border-bottom: none;
  margin-top: 0px;
}

.box9 .sv-wire{
  width: 100%;
  margin-top: 0px;
}

.box10 img{
  margin-bottom: 30px;
}

/* -- myer stying ------------------------------------------------------------------------------*/

.myer-type h1{
  width: 70px;
  border-right: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

@keyframes myerwriter {
  from{
    width: 0;
  }
  to{
    width: 70px;
  }
}

iframe{
  width: 625px;
  height: 450px;
  margin-left: -100px;
}

.box10 .myer-vid{
  margin-left: 0px;
}

/* -- second slice cafe stying ------------------------------------------------------------------------------*/

.cafe-type h1{
  width: 280px;
  border-right: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
  font-size: 16px;
}

@keyframes cafewriter {
  from{
    width: 0;
  }
  to{
    width: 280px;
  }
}

.sscwireframes{
  margin-bottom: 0px;
  width: 100%;
  margin-left: 10px;
  margin-right: 0px;
}

.sscbox3 img{
  width: 100%;
  margin-left: 10px;
  margin-right: 0px;
}

.sscbox1 img{
  width: 100%;
  margin-left: 10px;
  margin-right: 0px;
  margin-bottom: 0px;
}

.second-box{
  display: grid;
  margin: 40px 50px 10px 50px;
  grid-row-gap: 10px;
  grid-column-gap: 0px;
}

.sscheader{
  margin-top: 30px;
} 

.sscbox5 img{
  width: 100%;
}

.sscbox2{
  display: none
  ;
}

.sscbox4{
  display: none;
}

/* -- zine stying ------------------------------------------------------------------------------*/
.zine-type h1{
width: 165px;
}

@keyframes zinewriter {
from{
  width: 0;
}
to{
  width: 165px;
}
}

.zine-box {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100px;
margin: 40px 50px 10px 50px;
grid-row-gap: 10px;
grid-column-gap: 30px;
}

.clickhere2{
width: 80px;
margin-top: -35px;
margin-left: 200px;
}

.zinepics{
width: 100%;
} 

.showreelvid{
  margin-left: 9.5%;
}

}

/* -- phone ------------------------------------------------------------------------------*/
@media only screen and (max-width:545px){

  p{
    font-size: 14px;
  }

/* -- home ------------------------------------------------------------------------------*/

  .grid{
    margin: 40px 50px 10px 50px;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100px 50px 200px;
    grid-row-gap: 10px;
    grid-column-gap: 0px;
  }

  .item{
    background: transparent;
    padding: 20px;
  }
  
  .item1 {
    grid-row: 2/3;
    border-bottom: 1px solid #7E8B7E;

  }
  .item2 {
    visibility: hidden;
  }

  .icon{
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-bottom: -1px;
    margin-left: 20px;
  }
  
  .icon2{
    width: 10px;
    height: 10px;
    margin-bottom: -1px;
    display: inline-block;
    margin-left: 20px;
  }
  
  .icon1{
    width: 10px;
    margin-bottom: -1px;
    display: inline-block;
    margin-left: 20px;
  }
  
  .item7 h5{
    font-size: 10px;
    display: inline-block;
  }

  .socials{
    position: absolute;
    display: inline-block;
    left: 5%;
    margin-bottom: 20px;
  }

  .email, .instagram, .linkedin{
    display: block;
    margin-left: 10px;
    align-items: center;
  }

  .item7{
    width: 72%;
    border-bottom: none;
  }

/* -- project grid ------------------------------------------------------------------------------*/
  .main-box {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 600px;
    margin: 40px 50px 10px 50px;
    grid-row-gap: 10px;
    grid-column-gap: 0px;
    
  }

  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide, .contain-slide, .ssc-wrapper {
    text-align: center;
    font-size: 8px;
    background: #fff;}

  .box1 {
    grid-column: 1/2;
    border-top: 2px solid #7E8B7E;
    border-bottom: 1px solid #7E8B7E;
  }

  .box2 {
    grid-column: 1/2;
  }

  .box3{
    grid-column: 1/2;
  }

  .box4{
    grid-column: 1/2;
  }

  .box5{  
    grid-column: 1/2;
      border-bottom: 1px solid #7E8B7E;
      
  }

  .box6, .box7, .box8, .box9{
    grid-column: 1/2;

    border-bottom: 1px solid #7E8B7E;
  }
  .box10{
    grid-column: 1/2;
  }

  .box11{
    grid-column: 1/2;
    border-top: 1px solid #7E8B7E;
  }

  .box12{
    grid-column: 1/2;

    border-top: 2px solid #7E8B7E;
    border-bottom: 2px solid #7E8B7E;
  }

  .box7 p, .box11 p {
    margin-left: 0px;
  }

/* -- www stying ------------------------------------------------------------------------------*/

  .box1 img{
    -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
    filter: drop-shadow(5px 5px 5px #e2e2e2);
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
  }

  .dot{
    width: 12px;
    display: inline;
    margin-left: 5px;
  }

  .box3 p{
    display: inline;
  }

  .box3 h5{
    margin-left: 10px;
    margin-top: 15px;
  }

  .box2 h1{
    margin-left: 0px;
    font-size: 20px;
  } 

  .months, .role{
    margin-left: 10px;
  }

  .box4 h5, .box6 h5{
    margin-top: 15px;
  }

  .box5 img{
    -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
    filter: drop-shadow(5px 5px 5px #e2e2e2);
    width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .box6 h5{
    margin-left: 10px;
    margin-top: 15px;
    margin-bottom: 5px;
  }
  .space{
    display: none;
  }

  .box6 p{
    display: inline;
  }

  .text2{
    margin-left: 0px;
  }

  .box7 img{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
    filter: drop-shadow(5px 5px 5px #e2e2e2);
    margin-bottom: 10px;
  }

  .box7 p{
    display: none;
  }

  .box8 img{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .box9 img{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .box10 img{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
    filter: drop-shadow(5px 5px 5px #e2e2e2);
  }

  .clickhere{
    width: 110px;
    margin-top: 0px;
    margin-left: 20px;
  }

  .main-box h3{
    margin-left: 0px;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .box12 h5{
    margin-left: 0px;
    margin-top: 25px;
    margin-bottom: 10px;
  }

  .backtohome{
    display: inline;
    margin-left: 80px;
    background-color: transparent;
    border: transparent;
    color: black;
  }

  .backtohome img{
    width: 10px;  
    margin-top: 50px;
  }

  .backtohome h5{
    display: inline;
  }

  .box2 h1{
    width: 305px;
    margin-left: 0px;
    border-right: 2px solid black;
    overflow: hidden;
    white-space: nowrap;
  }

  .type-animation{
    animation: typewriter 4s steps(40) 1s 1 normal both,
    blink 500ms steps(40) infinite normal;
  }

  @keyframes typewriter {
    from{
      width: 0;
    }
    to{
      width: 305px;
    }
  }

  .box12 .dwd-btn{
    margin-top: 0px;
    margin-left: 40px;
    margin-bottom: 10px;
    font-size: 10px;
  }

/* -- sv stying ------------------------------------------------------------------------------*/
  .box2 .sus-animation, .box2 .sus-type{
    width: 285px;
    border-right: 2px solid black;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
  }

  @keyframes suswriter {
    from{
      width: 0;
    }
    to{
      width: 285px;
    }
  }

  .box5 .sus-img{
    width: 100%;
    margin-top: 0%;
  }

  .no-mindmap{
    border-bottom: none;
    margin-top: 0px;
  }

  .box9 .sv-wire{
    width: 100%;
    margin-top: 0px;
  }

  .box10 img{
    margin-bottom: 30px;
  }

/* -- myer stying ------------------------------------------------------------------------------*/

  .myer-type h1{
    width: 70px;
    border-right: 2px solid black;
    overflow: hidden;
    white-space: nowrap;
  }
  
  @keyframes myerwriter {
    from{
      width: 0;
    }
    to{
      width: 70px;
    }
  }

  iframe{
    width: 300px;
    height: 225px;
    margin-left: -100px;
  }

  .box10 .myer-vid{
    margin-left: 0px;
  }

/* -- second slice cafe stying ------------------------------------------------------------------------------*/

  .cafe-type h1{
    width: 280px;
    border-right: 2px solid black;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
  }

  @keyframes cafewriter {
    from{
      width: 0;
    }
    to{
      width: 280px;
    }
  }

  .sscwireframes{
    margin-bottom: 0px;
    width: 100%;
    margin-left: 10px;
    margin-right: 0px;
  }

  .sscbox3 img{
    width: 100%;
    margin-left: 10px;
    margin-right: 0px;
  }

  .sscbox1 img{
    width: 100%;
    margin-left: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

  .second-box{
    display: grid;
    margin: 40px 50px 10px 50px;
    grid-row-gap: 10px;
    grid-column-gap: 0px;
  }

  .sscheader{
    margin-top: 30px;
  } 

  .sscbox5 img{
    width: 100%;
  }

  .sscbox2{
    display: none
    ;
  }

  .sscbox4{
    display: none;
  }

  /* -- zine stying ------------------------------------------------------------------------------*/
.zine-type h1{
  width: 165px;
}

@keyframes zinewriter {
  from{
    width: 0;
  }
  to{
    width: 165px;
  }
}

.zine-box {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100px;
  margin: 40px 50px 10px 50px;
  grid-row-gap: 10px;
  grid-column-gap: 30px;
}

.clickhere2{
  width: 80px;
  margin-top: -35px;
  margin-left: 200px;
}

.zinepics{
  width: 100%;
} 

.showreelvid{
  margin-left: 15%;
}

}