@media only screen and (max-width: 1350px){
   .side .img6{
    transform:translateX(40px);
   }
   .prev {
    left: 5vw;
  }
  .next {
    right: 5vw;
  }
}

@media only screen and (max-width: 1222px){
    .side .img4{
        transform:rotate(-35deg);
        translate:50px -350px;
    }

    .side .img6{
        translate: 5px -110px;
        width: 140px;
        height: 100px;
    }

    .side .img1{
        transform: rotate(-20deg);
        translate: 100px -140px;
      }

      .side .img2{
        translate: 0px -100px;
      }
      .navbar ul li{
        padding: 4px 14px;
        font-weight: 90;   
    }
    .dialogue{
        padding: 20px;
    }

    .heading{
        margin-bottom: 20px;
    }

    .main-foot .grid-foot{
      gap: 13vw;
    }
 }

 @media only screen and (max-width:1100px){
    .navbar ul li{
        padding: 3px 13px;
        font-weight: 80; 
        font-size: 0.9em;  
    }

    .dialogue{
        padding: 15px;
    }

    .heading{
        margin-bottom: 15px;
    }

    .dialogue2{
        padding-left:20px;
    }

    .side img{
        width:115px;
        height:145px;
    }

    .side .img6{
        width:120px;
        height: 95px;
    }
 }

 @media only screen and (max-width:1000px){
    .navbar ul li{
        padding: 2px 12px;
        font-weight: 70;
        font-size: 0.8em;
    }

    .side img{
        width:110px;
        height:140px;
    }

    .dialogue{
        font-size: 0.9em;
    }

    .side .img6{
        translate: -20px -110px;
    }

    .side .img1{
        transform: rotate(-20deg);
        translate: 80px -140px;
      }

      .prev {
        left: 4vw;
      }
      .next {
        right: 4vw;
      }

      .main-foot .grid-foot{
        gap: 10vw;
      }
 }

 @media only screen and (max-width:900px){
    .navbar{
        display:none;
    }
    .menubar{
        display:block;
    }

    .side img{
        width:100px;
        height:130px;
    }

    .side .img1{
        transform: rotate(-20deg);
        translate: 50px -140px;
      }

      
      .side .img2{
        translate: -35px -100px;
      }

      .dialogue{
        padding:10px;
        font: size 0.8em;
      }

      .dialogue2{
        padding-left:20px;
    }

    footer{
        font-size: 0.8em;
    }

    .staffinfo{
        gap:7px;
    }

    .allslides img{
        width: 50vw;
        height: 40vh;
    }

    .prev {
        left: 3vw;
      }
      .next {
        right: 3vw;
      }

 }

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

    footer{
        flex-direction: column-reverse;
        font-size: 0.9em;
    }
    .side .img4{
        translate:30px -330px;
    }

    .coreteam{
        margin:10px;
        padding: 5px;
        text-align: center;
      }

      .team{
        padding:15px;
        margin: 7px;
      }

      .staffinfo{
        grid-template-columns: 1fr;
        gap:10px;
      }

      .main-foot .grid-foot{
        gap: 1vw;
      }

      
 }

 @media only screen and (max-width:700px){
    section{
        flex-direction: column;
        gap:15px;
        margin:auto;
    }
    .dialogue{
        width:100%;
        margin:auto;
    }

    .side .img1{
        translate: 30px -140px;
      }

      .side .img2{
        translate: -55px -100px;
      }

      .side img{
        width:80px;
        height:110px;
    }

    .slideshow-container{
        height:40vh;
    }
    
    .image{
        height:40vh;
    }

    .side .img4{
        translate:30px -300px;
    }

    .aboutheadings{
        margin-bottom: 15px;
      }

      .prev {
        left: 1.75vw;
      }
      .next {
        right: 1.75vw;
      }

      .main-foot .grid-foot{
       grid-template-areas: 'grid1 grid1 grid3' 
                            'grid2 grid2 grid2';
      
      }

      
 }

 @media only screen and (max-width:600px){
    .allslides img{
        width: 40vw;
        height: 25vh;
    }

    .box-2 .actual_cmnt{
      font-size: 0.9em;
    }
 }

 @media only screen and (max-width:550px){
    .side img{
        width:70px;
        height:100px;
    }

    .side .img6{
        width:90px;
        height:75px;
        translate: -20px -90px;
    }
    .side .img1{
        translate: 10px -140px;
      }

      .side .img4{
        translate:10px -300px;
    }

    .menubar{
        width:40vw;
    }

    .menuitem{
      width:38.5vw;
    }

    .slideshow-container{
        height:35vh;
    }

    .image{
        height:35vh;
    }


    .side img{
        width:70px;
        height:100px;
    }

    .head .logo img {
        width: 40vw;
    }

    .team{
        flex-direction: column-reverse;
      }

      .vismis{
        flex-direction: column;
      }

      .vismis p{
        width:auto;
      }

      .aboutheadings{
        margin-bottom: 10px;
      }

      .team div img{
        width: 30vw;
      }

      .abtcontainer{
        margin: auto;
        padding: auto;
      }
      .vismis img{
        width: 130px;
        height: 130px;
      }

      .curriculumbox img{
        height:30vh;
      } 
      .contactus{
        margin: 10px;
        padding: 10px;
      }
      .box-1 img{
        width:30px;
        height:30px;
      }


 }

 @media only screen and (max-width:500px){
    .allslides img{
        border-radius: 20px;
    }
 }

 @media only screen and (max-width:470px)
 {
    .head .logo img {
        width: 45vw;
    }

    .menuitem ul{
        padding:5px;
    }

    .menuitem ul li{
        margin:1px;
        padding:4px;
    }

    footer{
        font-size: 0.8em;;
    }

     footer .foot1 img{
        width:35px;
        height:35px;
     }

     .staffinfo{
        width:65vw;
     }

     .staffinfo .teachers img{
        width: 150px;
        height: 150px;
      }

      .allslides img{
        border-radius: 15px;
      }

      .comment-box .box-1{
        margin: 3px;
        text-align: left;
      }

      .box-2 {
        padding: 5px;
      }

      .box-2 .username{
        font-size: 0.7em;
      }

      .box-2 .actual_cmnt{
        font-size: 0.8em;
      }
 }

 @media only screen and (max-width:450px){
  .slideshow-container{
    height:30vh;
  }

  .image{
    height:30vh;
  }
 }

 @media only screen and (max-width:400px){
    .head .logo img {
        width: 50vw;
    }

    .side img{
        width:65px;
        height:95px;
    }

    .side .img6{
        width:70px;
        height:65px;
    }
    .menuitem{
        border:1px solid black;
    }

    .menuitem ul{
        padding:2px;
    }

    article img{
        height:35vh;
        z-index:0;
    }

    .team div img{
        width: 33vw;
      }

      .allslides img{
        width: 35vw;
        height: 20vh;
        border-radius: 10px;
    }

    .slideshow-container{
      height:25vh;
    }

    .image{
      height:25vh;
    }
 }