@media (max-width: 1345px) {

.container .left-pannel {
     width: 304px;
}

.container .middle-pannel {
     left: 416px;
}

}

@media (max-width: 1340px) {
  nav .nav-middle a.active::after {
    content: "";
    width: 8.9vw;
     left: -10px;
    }
}
 

@media (max-width: 1310px){
.container .middle-pannel {
    left: 400px;
}
}

@media (max-width: 1300px){
.container .middle-pannel {
    left: 394px;
}

}

@media (max-width: 1280px){
   

.container .middle-pannel .story-section .stories .story.create .name {
     left: 4px;
}

.story-heading::after {
  content: "";
  width: 16vw;
}
}

@media (max-width: 1260px) {
 

  nav .nav-left>form>i.fas.fa-magnifying-glass {
    margin-left: 8px;
}

  nav .nav-left>form>input {
    height: 40px;
    width: 40px;
    outline: none;
    border: none;
    padding: 20px;
    color: #e4e6eb;
    font-size: 15px;
    border-radius: 25px;
    margin-right: 8px;
}
 
nav .nav-middle {
   left: 70px;
}
 
  nav .nav-middle a>i {
    font-size: 19px;
}
}
     
@media (max-width: 1240px) {

.container .middle-pannel {
  left: 390px;
}
}

@media (max-width: 1210px) {

.container .middle-pannel {
  left: 368px;
}
}

@media (max-width: 1200px){
.story-heading::after {
    content: "";
    width: 17vw;
    left: -30px;
} 
}

@media (max-width: 1190px) {

  nav .nav-middle {
    left: 62px;
}


.container .middle-pannel {
  left: 360px;
}

.container .middle-pannel .story-section {
   width: 40vw;
}

.post {
  width: 40vw;
}

}

  @media (max-width: 1150px) {
    nav .nav-middle a.active::after {
      content: "";
      width: 9vw;
      left: -5px;
  }

  .container .right-pannel {
     width: 275px;
  }

  }

  @media (max-width: 1130px) {
    nav .nav-middle {
      left: 72px;
  }
  
  
}
  
  @media (max-width: 1120px) {
   
    .container .left-pannel {
      width: 282px;
  }

  .container .middle-pannel {
    left: 344px;
}


}

@media (max-width: 1112px) {

.container .middle-pannel .story-section .stories .story.create .name {
   font-size: 13px;
}

.container .middle-pannel .story-section .stories .story .name {
   font-size: 13px;
}
}

@media (max-width: 1100px) {
  .container .middle-pannel .story-section {
    width: 42vw;
}
.post {
  width: 42vw;
}
}
  
@media (max-width: 1090px) {

.container .middle-pannel {
  left: 330px;
}
}

  @media (max-width: 1080px) {
    .container .left-pannel {
         display: none;
    } 
 
    .container .middle-pannel .story-section {
      width: 46vw;
  }

  .post{
    width: 46vw;
  }

  .container .middle-pannel {
    left: 165px;
}

.container .right-pannel {
  width: 304px;
}

}
    
@media (max-width: 1050px) {
  .story-heading::after {
    content: "";
    width: 20vw;
    left: -36px;
}

nav .nav-middle {
  left: 28px;
}

}
    
@media (max-width: 1020px) {
  nav .nav-middle a.active::after {
    content: "";
    width: 10vw;
    left: -4px;
}
}

@media (max-width:980px) {
  .container .middle-pannel {
    left: 128px;
}
}

@media (max-width:976px) {

  .container .middle-pannel .story-section {
    width: 50vw;
}



.post {
  width: 50vw;
}
}

@media (max-width:960px) {

nav .nav-middle a {
   padding: 10px 34px 15px 30px;
}
}
 
  @media (max-width:920px) {
    nav .nav-middle {
      left: 20px;
  }

}
    
  @media (max-width:900px) {
 
.container .right-pannel {
    display: none;
}  

nav .nav-middle {
  left: 12px;
}

nav .nav-right a {
width: 35px;
height: 35px;
}

nav .nav-right .profile, .container .left-pannel .profile{
  width: 40px;
  height: 40px;
}


.container .middle-pannel {
  left: 240px;
}
.container .middle-pannel .story-section {
  width: 56vw;
}

.post{
  width: 56vw;
}

}
     
@media (max-width:854px) {


  .container .middle-pannel .story-section .stories .story.create .name {
    left: 10px;
}


  .container .middle-pannel .story-section {
    width: 62vw;
}

.post{
  width: 62vw;
}

.story-heading::after {
  content: "";
  width: 26vw;
  left: -48px;
}

nav .nav-middle a.active::after {
  left: -7px;
}

nav .nav-middle a {
  padding: 10px 34px 15px 20px;
 }

} 
  
  @media (max-width:844px) {
    .container .middle-pannel .story-section .stories .story.create .name {
      left: 12px;
  }
  }
  @media (max-width:827px) {

  nav .nav-right a {
     height: 35px;
    width: 35px;
  }
  nav .nav-right a>i {
    font-size: 14px;
}

.story-heading::after {
  width: 30vw;
}

nav .nav-right .profile, .container .left-pannel .profile {
   height: 40px;
  width: 40px;
}

} 

@media (max-width:804px) {

nav .nav-middle a {
  padding: 10px 34px 15px 14px;
}
nav .nav-middle a.active::after {
  left: -18px;
  width: 11vw;
}
} 

@media (max-width:790px) {

.story-heading::after {
     left: -40px;
}
}

@media (max-width:774px) {
 
nav .nav-middle a {
  padding: 10px 18px 15px 18px;
}

nav .nav-middle a.active::after {
   width: 12vw;
}
}
 
  @media (max-width:755px) {

    nav .nav-middle {
      padding-left: 0px;
    }

.responsive-create{
      display: inline;
}
 
.container {
  height: 60.1vh;
}
.middle-pannel .mid-pannel-container  .create{
    display: none;
  }
  
  .container .middle-pannel .story-section {
    width: 73vw;
}

.container .middle-pannel .story-section .stories  .story  {
 display: inline;
}
header> .responsive-create .post-top {
     padding-left: 46px;
    width:94vw;
}

header> .responsive-create .border-line-3 {
   width: 100%;
}

header> .responsive-create .post-bottom {
  padding-left:100px;
  margin-right: 54px;
}

 

    .responsive-header{
      display: flex;
}

.responsive-pannel{
  display: flex;
}
nav .nav-middle a {
   margin: 0px 30px;
}

header> .responsive-header .nav-responsive-right{
  display: none;
}


nav .nav-right> .responsive-rit {
  display: none;
  
  }
  
  
nav .nav-right> .responsive-rit4 {
  display: grid;
  
  }
  

    .logo1{
    display: inline;
   }
   .logo2{
    display: none;
   }
   nav .nav-left>img {
    width: 115px;
}

nav .responsive-nav {
display: none;
}

nav .nav-right>form>i.fas.fa-magnifying-glass {
  margin-left: -35px;
}

nav .nav-right>form>input{
  height: 40px;
  width: 40px;
  outline: none;
  border: none;
  padding: 20px;
  color: #e4e6eb;
    background-color: #eee;
  font-size: 15px;
  border-radius: 25px;
  margin-right: 8px;
}
nav .nav-right>form{
display: inline;
margin: 0 16px;
}

nav .nav-left>form{
display: none;
}

.post{
  width: 73vw;
}
 

  nav .nav-middle a.active::after {
     bottom: -1px;
  }
  a.mid.responsive-mid {
    display: none;
  }
  }

  @media (max-width:724px) {
    nav .nav-middle a {
      margin: 0px 27px;
  }
  } 

@media (max-width:720px) {
 
.story-heading::after {
    left: -55px;
    width: 36vw;
}


}

 

  @media (max-width:700px) {
     
  nav .nav-middle a {
    margin: 0px 25px;
}

.container .middle-pannel {
  left: 200px;
}

.container .middle-pannel .story-section {
  width: 80vw;
  
} 

.post{
  width: 80vw;
}

}
 
@media (max-width: 688px){
 
  nav .nav-middle a {
    margin: 0px 24px;
}

} 
  

@media (max-width:650px) {
  nav .nav-middle a.active::after {
    left: -8px;
  }
  .container .middle-pannel {
    left: 188px;
}

.container .middle-pannel .story-section {
  width: 100vw;
}

.container .middle-pannel .story-section .stories .story {
  width: 145px;
  height: 38vw;
}

.container .middle-pannel .story-section .stories .story.create .name {
  left: 25px;
} 

.story-heading::after {
  left: -75px;
  width: 48vw;
}

.post{
      width: 100vw;

}

.post .post-React-container {
  width: 99%;
}

nav .nav-middle a {
  margin: 0px 20px;
}


}
 

@media (max-width:640px) {

  .container .middle-pannel .story-section .stories .story {
    width: 142px;
  }
}
  
@media (max-width: 620px){
     

  .container .middle-pannel .story-section .stories .story {
    width: 135px;
}
i.fas.fa-ellipsis-h {
  margin-right: 14px;
}

.container .middle-pannel {
  left: 180px;
}

.post .post-React-container {
  width: 98%;
}

}

@media (max-width:600px) {

.responsive-image{
  display: inline;
     color: green;
    font-size: 22px;
    position: relative;
    right: -10px;
    padding: 10px;
}

.responsive-image:hover{
  background: #ddd;
  border-radius: 10px;
}

header> .responsive-create .post-top {
  padding-left: 18px;
  width: 96vw;
}

header> .responsive-create .post-bottom{
  display: none;
}
 
header> .responsive-create .border-line-3{
  display: none;
}

.container {
  height: 67.3vh;
}


.container .middle-pannel .story-section .stories .story {
  width: 130px;
}

nav .nav-middle a {
  margin: 0px 16px;
}
.container .middle-pannel {
  left: 174px;
}

.post{
margin: 34px;
}

}

@media (max-width:594px) {
  .container .middle-pannel .story-section .stories .story.create .name {
    left: 18px;
}

.post .post-React-container {
  width: 96%;
}


.post .post-bottom{
  padding-right: 17px;
}

}

@media (max-width:590px) {

.container .middle-pannel .story-section .stories .story {
  width: 126px;
}
}

@media (max-width:580px) {

.container .middle-pannel .story-section .stories .story {
  width: 124px;
}

.container .middle-pannel {
  left: 172px;
}

.story-heading::after {
  left: -64px;
  width: 42vw;
}



}

@media (max-width:570px) {

  nav .nav-middle a {
    margin: 0px 13px;
}

.container .middle-pannel .story-section .stories .story {
  width: 120px;
}

.container .middle-pannel {
  left: 166px;
}


}

  @media (max-width:550px) {
      
    .container .middle-pannel {
      left: 162px;
  }
  
  .container .middle-pannel .story-section .stories .story.create .name {
    left: 14px;
}
  
.story-heading::after {
  left: -54px;  
}
}

@media (max-width:545px) {

.container .middle-pannel .story-section .stories .story {
  width: 116px;
}


}


@media (max-width:540px) {

  nav .nav-middle a.active::after {
    left: -2px;
}
}



@media (max-width:530px) { 
    .container .middle-pannel {
      left: 154px;
  }

  .container .middle-pannel .story-section .stories .story {
    width: 114px;
}
    
}

@media (max-width:520px) {

  nav .nav-middle a {
    margin: 0px 12.5px;
}

  .story-heading::after {
    width: 42vw;
    left: -47px;
}

.container .middle-pannel {
  left: 148px;
}

.container .middle-pannel .story-section .stories .story {
  width: 112px;
}

}

@media (max-width:512px) {

nav .nav-middle a {
  margin: 0px 12px;
}

.container .middle-pannel .story-section .stories .story {
  width: 110px;
}
}

@media (max-width:506px) {

nav .nav-middle a {
  margin: 0px 11.5px;
}

.container .middle-pannel .story-section .stories .story {
  width: 106px;
}
}


@media (max-width:500px) {
 
  nav .nav-middle a {
    margin: 0px 11px;
}
  
}



@media (max-width:490px) {
 
 header> .responsive-create .post-top {
   width: 94vw;
}
 
  nav .nav-middle a {
    margin: 0px 10px;
}

nav .nav-middle a.active::after {
    left: -11px;
    width: 16vw;
}

.container {
    height: 56.5vh;
}

.story-heading::after {
     left: -33px;
}

.container .middle-pannel {
    left: 142px;
}



  }   

@media (max-width: 480px){

 


  .container .middle-pannel {
    left: 138px;
}

nav .nav-middle a {
    margin: 0px 9px;
}

}

@media (max-width: 470px){
 

nav .nav-middle a {
    margin: 0px 8px;
}

nav .nav-right a {
     margin: 0 16px;
}

.container .middle-pannel {
  left: 135px;
}

}

@media (max-width: 466px){

nav .nav-middle a {
  margin: 0px 7px;
}
}


  @media (max-width:450px) {
  
    nav .nav-middle a {
      margin: 0px 5px;
  }

  .container {
    height: 56.5vh;
}

.container .middle-pannel {
  left: 130px;
}

.container .middle-pannel .story-section .stories .story.create .name {
  left: 1px;
}

}

@media (max-width:440px) {

.container .middle-pannel .story-section {
  width: 103vw;
} 
.container .middle-pannel .story-section .stories .story {
   height: 42vw;
   width: 96px;
} 



.post {
  width: 103vw;
}

}
 
@media (max-width: 430px){
nav .nav-middle a {
    margin: 0px 4px;
}


nav .nav-middle a.active::after {
  left: -6px;
}

.container .middle-pannel .story-section .stories .story {
  height: 48vw;
  width: 120px;
  position: relative;
  left: 10px;
  margin: 0px 9px;
}

.container .middle-pannel .story-section .stories .story.create .name {
  left: 14px;
}


.story.responsive-story {
  display: none !important;
}

.story-heading::after {
  left: -23px;
}

.arrow-right {
   left: 8px;
}



}

@media (max-width: 420px){
  
  nav .nav-middle a {
    margin: 0px 3px;
  }

.container .middle-pannel .story-section .stories .story {
     left: 0px;
}

.reel{
  padding-right: 50px;
  padding-left: 60px;
}

.arrow-right {
  left: -4px;
}



}
 
@media (max-width: 410px){
.container .middle-pannel .story-section .stories .story {
    left: -7px;
}
nav .nav-middle a {
  margin: 0px 2px;
}

.story-heading::after {
  left: -35px;
  width: 48vw;
}
}

@media (max-width: 400px){
 

  .arrow-right {
    left: -3px;
}

.container .middle-pannel {
  left: 120px;
}

.container .middle-pannel .story-section .stories .story {
  left: 0px;
}

}

 

@media (max-width: 390px) {
  
  nav .nav-middle a {
    margin: 0px 0px;
}

.container .middle-pannel {
  left: 115px;
}

nav .nav-middle a.active::after {
  left: -1px;
  width: 14vw;
}

.container .middle-pannel .story-section .stories .story.create .name {
  left: 7px;
}



}
 
@media (max-width: 380px) {

nav .nav-middle a.active::after {
  left: -1px;
  width: 15vw;
}

.reel {
   padding-left: 48px;
}

nav .nav-middle a {
  margin: 0px -1px;
}

} 

@media (max-width: 360px){
     
    
    .container .middle-pannel .story-section .stories .story {
      left: 1px;
      margin: 0px 4px;
height: 40vh;
}

.post .post-top>input {
   font-size: 12px;
}


  nav .nav-middle {
    left: -5px;
}

nav .nav-middle a.active::after {
  left: 2px;
}

.container .middle-pannel {
  left: 106px;
}

.story-heading::after {
  left: -30px;
  width: 52vw;
}

.reel {
  padding-left: 20px;
  padding-right: 20px;
}

}
 
@media (max-width: 340px){

.container .middle-pannel .story-section .story-reel {
   left: -10px;
   position: relative;
}

.arrow-right {
  left: 7px;
}

i.fas.fa-angle-right {
   height: 40px;
  width: 40px;
}

.container .middle-pannel .story-section .stories .story {
  left: -4px;
}

.post .post-top>input {
  font-size: 10px;
}

nav .nav-middle a>i {
  font-size: 17px;
}

nav .nav-right a {
  margin: 0 0px;
}

nav .nav-left>img {
  width: 100px;
}



}

@media (max-width: 321px){
.container {
  height: 57vh;
}
}

@media (max-width: 320px){
  

  .container {
    height: 56.5vh;
}
 
  nav .nav-middle a {
    margin: 0px -2px;
}


.container .middle-pannel {
    left: 101px;
}

.arrow-right {
  left: 8px;
}

}