.hero-student{
    position: relative;
    background: url('../img/student/hero-student.jpg') no-repeat bottom #000000;
    
}
.hero-teacher{
    position: relative;
    background: url('../img/teacher/hero-teacher.jpg') no-repeat bottom #000000;
}
.hero-leader{
    position: relative;
    background: url('../img/leader/hero-leader.jpg') no-repeat bottom center #000000;
}
.hero-swap{
    position: relative;
    background: url('../img/word-swap/hero-swap.jpg?v=3') no-repeat bottom center #000000;
}
.hero-reading{
    position: relative;
    background: url('../img/student-experience/hero-reading.jpg') no-repeat bottom #000000;
    
}
.hero-features{
    position: relative;
    background: url('../img/features/hero-features.jpg') no-repeat bottom #000000;
}

header{
  z-index: 2;
}
.hero-reading .row{
  position: relative;
  z-index: 1;
} 

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px) {
  .hero-reading{
        background-position: -939px center;
        background-size: cover;
  }
  .hero-section{
      background-position: 70% !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-features{
      background: url('../img/features/hero-features.jpg') no-repeat calc(100% + 460px) bottom #000000;
  } 
  .hero-leader{
      background: url('../img/leader/hero-leader.jpg') no-repeat calc(100% + 460px) bottom #000000;
  }
  .hero-swap{
      position: relative;
      background: url('../img/word-swap/hero-swap.jpg?v=3')  no-repeat calc(100% + 460px) bottom #000000;
  }  
  .hero-teacher{
      background: url('../img/teacher/hero-teacher.jpg') no-repeat calc(100% + 460px) bottom #000000;
  }
  .hero-student{
      background: url('../img/student/hero-student.jpg') no-repeat calc(100% + 460px) bottom #000000;
  }     
  .hero-section:before{
   background: rgb(0 0 0 / 50%);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-home{
    background: url('../img/hero.jpg') no-repeat calc(100% + 570px) top #000000;
  }
  .hero-student{
    background: url('../img/student/hero-student.jpg') no-repeat calc(100% + 590px) bottom #000000;
  }
  .hero-teacher{
      background: url('../img/teacher/hero-teacher.jpg') no-repeat calc(100% + 440px) top #000000;
      position: relative;
  }
  .hero-leader{
      background: url('../img/leader/hero-leader.jpg') no-repeat 70% bottom #000000;
      position: relative;    
  }

  .hero-swap{
      position: relative;
      background: url('../img/word-swap/hero-swap.jpg?v=3') no-repeat 70% bottom #000000;
  }    

  .hero-features{
      background: url('../img/features/hero-features.jpg') no-repeat calc(100% + 420px) bottom #000000;
  }   
  .hero-student.hero-section:before, .hero-leader:before, .hero-home:before{
    display: none !important;
  }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-home{
    background: url('../img/hero.jpg') no-repeat calc(100% + 520px) top #000000;
  }      
  .hero-student{
      background: url('../img/student/hero-student.jpg') no-repeat calc(100% + 500px) bottom #000000;
  }
  .hero-teacher{
      background: url('../img/teacher/hero-teacher.jpg') no-repeat calc(100% + 490px) top #000000;
      position: relative;
  }
  .hero-leader{
      background: url('../img/leader/hero-leader.jpg') no-repeat calc(100% + 420px) top #000000;
      position: relative;    
  }

  .hero-swap{
      position: relative;
      background: url('../img/word-swap/hero-swap.jpg?v=3') no-repeat calc(100% + 420px) top #000000;
  }    

  .hero-leader br, .hero-swap br{
    display: none;
  }
  .hero-features{
      background: url('../img/features/hero-features.jpg') no-repeat calc(100% + 480px) bottom #000000;
  }     
  
  .hero-teacher .row{
    position: relative;
    z-index: 1;
  }   

}

@media (min-width: 1400px) and (max-width: 1799px) {
  .hero-home{
    background: url('../img/hero.jpg') no-repeat calc(100% + 300px) top #000000;
  }      
  .hero-student{
      background: url('../img/student/hero-student.jpg') no-repeat calc(100% + 300px) bottom #000000;
  }
  .hero-teacher{
      background: url('../img/teacher/hero-teacher.jpg') no-repeat calc(100% + 410px) bottom #000000;
  }
  .hero-leader{
      background: url('../img/leader/hero-leader.jpg') no-repeat calc(100% + 250px) bottom #000000;
      position: relative;    
  }   

  .hero-swap{
      position: relative;
      background: url('../img/word-swap/hero-swap.jpg?v=3')  no-repeat calc(100% + 250px) bottom #000000;
  }    
  .hero-features{
      background: url('../img/features/hero-features.jpg') no-repeat calc(100% + 400px) bottom #000000;
  }     
  .hero-teacher .row{
    position: relative;
    z-index: 1;
  } 
}

@media (min-width: 1800px) and (max-width: 1999px) {
  .hero-home{
    background: url('../img/hero.jpg') no-repeat calc(100% + 300px) top #000000;
  }     
  .hero-student{
      background: url('../img/student/hero-student.jpg') no-repeat calc(100% + 300px) bottom #000000;
  }
  .hero-teacher{
      background: url('../img/teacher/hero-teacher.jpg') no-repeat calc(100% + 100px) bottom #000000;
  }
  .hero-leader{
      background: url('../img/leader/hero-leader.jpg') no-repeat calc(100% + 100px) bottom #000000;
      position: relative;    
  }
  .hero-swap{
      position: relative;
      background: url('../img/word-swap/hero-swap.jpg?v=3')  no-repeat calc(100% + 100px) bottom #000000;
  }    
  .hero-features{
      background: url('../img/features/hero-features.jpg') no-repeat calc(100% + 250px) bottom #000000;
  }      
}

@media (min-width: 2000px) and (max-width: 2400px) {  
  .hero-student{
      background: url('../img/student/hero-student.jpg') no-repeat calc(100% + 100px) bottom #000000;
  }
  .hero-teacher,{
      background: url('../img/teacher/hero-teacher.jpg') no-repeat calc(100% + 100px) bottom #000000;
  }
  .hero-leader{
      background: url('../img/leader/hero-leader.jpg') no-repeat calc(100% + 100px) bottom #000000;
      position: relative;    
  }    
  .hero-swap{
      position: relative;
      background: url('../img/word-swap/hero-swap.jpg?v=3') no-repeat calc(100% + 100px) bottom #000000;
  }    
  .hero-features{
      background: url('../img/features/hero-features.jpg') no-repeat calc(100% + 80px) bottom #000000;
  }     
}