@media (min-width: 768px) and (max-width: 1023px) {

   .scrolldown4:after {
      content: "";
      position: relative;
      bottom: 20px;
      right: 0;
      top: 100px;
      right: 95px;
      width: 1px;
      height: 50px;
      background: black;
   }
   
   .whatilikebox{
     display:flex;  
   }
   
  .topcontainer::after{

top:1095px;
  }    
   
   
  .topcontainer img{
    margin-left:-100px;  
  }
   
 



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

.portfolio{
display:flex;    
margin-top:30px;
}

.header{
height:auto;    
}


.kannaart{
margin-top:50px;  
}

.ribbon{
width:300px;
}
.code{
width:150px;    
}

.getintouch{
margin-bottom:-200px;    
}

figure.snip1283 img {
  opacity: 1;
  width: 250px;
  height:auto;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

figure.snip1283 {
  color: black;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  max-height: 220px;
  width: 100%;
  height:auto;
  color: grey;
  text-align: left;
  opacity:80%;
  padding:0;
  font-size: 13px;
  -webkit-perspective: 50em;
  perspective: 50em;

}

figure.snip1283 p {
padding:1.3em;
font-size:10px;
line-height:1.8;
}

.quotationbox{
width:100%;
height:auto;
padding:1em;
position:relative;
z-index:1;
font-size:50px;
margin-bottom:100px;
margin-left:5px;
}


   .scrolldown4:before {
      top: 130px;    
   }

   .unipic {
      display: none;    
   }
   
   .thecats {
      display: none;    
   }
   
   .gomamisopic {
      display: none;    
   }
   
   .text {
      margin-top:200px;
      margin-left:140px;
   }
   
   .ribbon{
    width:200px; 
   }
   .intro {
      width: 100%; 
      height: 100%;
      margin-right: 420px;
      margin-bottom: 100px;
   }
   
   .luckycat{
     width:300px;
     margin-left:50px;
   }
 
 

   
   .intro p{ 
font-size:18px;
}
   
   .blockquote {
      display: none;
   }
   
   .container1 {
      width: 100%;
      height: 100%;
   }
   

   
   
   .kannapic2 {
      margin-left: 30px;    
   }
   
  .portfolio{
    margin-right:500px;   
   }
   .catasticdesign:hover,
   .catasticdesign2:hover {
      opacity: 70%;
      animation: none;
   }
   
   .mylife{
   padding-bottom:300px;
   }
  
   
   .profile3 {
      font-size: 13px;  
      padding: 2em;
   }
   
   .article1 {
      font-size: 13px;
      padding: 1em;
   }


.movingpaw{
font-size:50px; 
margin-left:800px; 
color:#7b5544;
animation:pawpaw 10s infinite;
transform:rotate(40deg);
display:none;
}



.movingpaw2{
  font-size:50px;
  margin-left:800px;
  margin-top:-250px;
  transform:rotate(50deg);
  z-index: 10;
  color:pink;
  position:relative;
  display:none;
}

.movingpaw3{
    font-size:30px;
    margin-left:800px; 
    color:salmon;
    display:none;
}

.movingpaw4{
  font-size:30px;
  margin-left:800px;
  color:tan;
  transform:rotate(80deg);
  display:none;
}

  .toppicture{
 display:none;      
  }
  
  .portfolio{
margin-top:100px;
margin-left:50px;
}

.mywords{
padding:5em;
}

.casestudy{
font-size:30px;   
margin-left:200px;
}}
@media screen and (max-width: 1024px) and (orientation: landscape) {

    .topcontainer::after{
top:929px;
}
.retroTV{
width:700px;    
margin-top:-300px;
}
.text{
margin-left:20px;
font-size:20px;
width:100%;
height:auto;
margin-top:-50px;
}

.getintouch{
margin-left:50px;
}

.ribbon{
width:100px;    
margin-right:100px;
}

.flower{
margin-top:-350px;    
}

.portfolio{
margin-left:50px;    
}

.luckycat{
margin-left:100px;
width:300px;
}

.menulist{
margin-bottom:30px;    
}


.designlife{
display:none;    
}}

@media (min-width: 1024px) and (max-width: 1366px) {
.topcontainer::after{
top:900px;    
}    
  .designlife{
    display:none;  
  }
  
   .unipic {
      display: none;    
   }
   
   .thecats {
      display: none;    
   }
   
   .unipic {
      display: none;    
   }
   
   .thecats {
      display: none;    
   }
   
 
   
   .blockquote{
       display:none;
   }
   
   .box{
    display:none;
   }
   
  .intro{
   width:100%;
   margin-top:200px;
  }
  
 
  
.movingpaw{
font-size:50px; 
margin-left:800px; 
color:#7b5544;
animation:pawpaw 10s infinite;
transform:rotate(40deg);
display:none;
}



.movingpaw2{
  font-size:50px;
  margin-left:800px;
  margin-top:-250px;
  transform:rotate(50deg);
  z-index: 10;
  color:pink;
  position:relative;
  display:none;
}

.movingpaw3{
    font-size:30px;
    margin-left:800px; 
    color:salmon;
    display:none;
}

.movingpaw4{
  font-size:30px;
  margin-left:800px;
  color:tan;
  transform:rotate(80deg);
  display:none;
}

.portfolio{
margin-left:250px;
margin-top:20px;
}

.intro p{
padding-left:7px;
font-size:20px;
}

.gomamisopic{
margin-right:50px;
height:400px;
}

.quotationbox{
width:100%;
height:auto;    
margin-right:500px; 
font-size:50px;
margin-top:100px;
}

.einstein{
margin-right:400px;    
}

figure.snip1283 img {
  opacity: 1;
  width: 250px;
  height:auto;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

figure.snip1283 {
  color: black;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  max-height: 220px;
  width: 100%;
  height:auto;
  color: grey;
  text-align: left;
  opacity:80%;
  padding:0;
  font-size: 13px;
  -webkit-perspective: 50em;
  perspective: 50em;

}

figure.snip1283 p {
padding:1.3em;
font-size:13px;
line-height:1.8;
}

.getintouch{
margin-left:20px;    
}

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

.portfolio{
display:flex;
}

.casestudy{
margin-left:50px;   
font-size:30px;
}

.kannaart{
margin-top:30px;
}

.intro h1{
margin-bottom:20px;    
}}