@charset "UTF-8";
html {overflow:auto;}


/* MOVIE INSTRUCTOR PAGE
------------------------------------------- */

.teacher-img-introduction-flex {display: flex;flex-direction: row;padding: 0 10% 5em 10%;justify-content: space-between;}
.last-teacher-img{padding: 0 10% 8em 10%;}

.page-top-padding {padding: 9em 10% 5em;}

.instructor-page-bg {background-color: #f6f6f6;}
.instructor-picture {position: relative;overflow: hidden;padding-top: 50%;width: 47%;}
.instructor-picture .res-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height:100%;
  object-fit: cover;
  /* padding:2% 0% 48%; */
}
/* body.yoga .instructor-picture .res-img{padding:2% 15% 18%;} */
.instructor-profile {width: 47%;}

.instructor-name {
  font-size: 3em;
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  padding-bottom: 0.3em;
}
.instructor-team-name {
  font-size: 1.5em;
  font-family: 'Oswald', sans-serif;
  padding-bottom: 1em;
}
.instructor-team-name span{font-size:70%;letter-spacing:1px;padding-right:.5em;color:#ccc;}
.instructor-profile-size {
  font-size: 1.6em;
  font-family: 'Oswald', sans-serif;
  margin: 1em 0 0.5em;
  font-weight: 400;
}

.profile-overflow {
  overflow-y:scroll;
  width: 100%;
}
.profile-overflow p{font-size:1.2em;line-height:1.7;}

.instructor-lesson {width: 47%;}
.teaher-live-menu {font-size: 2rem;font-weight: 600;text-align: center;padding-bottom: 3rem;}
.class-box {background: #fff;box-shadow: 0 0 4px rgba(120,120,120,0.4);margin-bottom: 2.5em;padding: 2em;}
.video-wrap .no{text-align:center;width:100%;}
body.dance .class-box {background:none;border:1px solid #fff;}
.class-box .info {width:100%;position: relative;}
.class-box .info .lessontime {font-size: 1.9em;font-family: 'Oswald', sans-serif;font-weight: 500;position: static;line-height: 1.4;padding: 0.5em 0;}
.class-box .info div:first-child{width:60%;}
.class-box .info .genre, .class-box .info .level {font-size: 1.3em;line-height: 1.3;}
.class-box .info button {background: #EF1B49;color: #fff;padding: .75em 2em;font-size: 1.3rem;font-weight: bold;text-align: center;border-radius: 2px;}
.info {display: flex;justify-content: space-between;align-items: center;}

.inst-lesson .class-box .info .level{
  display: none;
}

.instructor-live-buy-button {width: 100%;background-color: #EF1B49;color: #fff;padding: 1.15em;border-radius: 3px;font-size: 1.7rem;}
.instructor-live-purchased-button {width: 100%;background-color: #34CECA;color: #fff;padding: 1.15em;border-radius: 3px;font-size: 1.7rem;}
.live-purchased-button-place {width: 35%;text-align: right;}

.instractor-video-list {width: 47%;}
.video-box {width: 45%;margin-bottom: 5rem;list-style: none;}
.video-wrap {display: flex;flex-wrap: wrap;justify-content: space-between;}
.video-text {font-size: 1rem;text-align: right;color: #000;font-family: 'Oswald', sans-serif;}
body.dance .video-text {color: #fff;}
.movie-number {font-size: 1.5rem;padding-left:.25em;}

.pagination-color {color: #000!important;}
body.dance .pagination-color {color: #fff!important;}

.noaschool-bt{text-align:center;padding-top:1em;}
.noaschool-bt a{border:1px solid;color:#fd1010;padding:1em;position:relative;display:block;font-size:1em;font-weight:bold;}
.noaschool-bt a:before{position:absolute; top: 50%; left: 5%; transform: translate(-5%,-50%); font-family: fontAwesome; content: '\f144';}
body.yoga .noaschool-bt a{border:1px solid;color:#444;}

/* @media screen and (max-width: 1444px) {
  .profile-overflow {height: 390px;}	
} */

/* @media screen and (max-width: 1280px) {
  .instructor-picture .res-img{padding:2% 0 48%;}
  body.yoga .instructor-picture .res-img{padding:2% 10% 18%;}	
} */
@media screen and (max-width: 1024px) {
  /* .teacher-img-introduction-flex{padding: 0 5% 5em 5%;}	
  .page-top-padding{padding: 12em 5% 6em 5%;}	 */
  /* .profile-overflow {height: 340px;} */
  .class-box {margin-bottom: 2.5em;padding: 1em;}	
}

@media screen and (max-width: 768px) {
  .teacher-img-introduction-flex {flex-direction: column;}
  .instructor-picture {padding-top: 100%;width: 100%; margin-bottom:2em;}
  .instructor-picture .res-img {padding:0 0;}
  body.yoga .instructor-picture .res-img{padding:0 0;height: 100%;}	
  .instructor-profile {width: 100%;}
  .instructor-name {font-size: 4rem;}
  .instructor-team-name {font-size: 3rem;}
  .instructor-profile-size {font-size: 2em;}
    
  .profile-overflow {height: 280px;}	
  .profile-overflow p{font-size:1.2em;}
    
  .instructor-lesson {width: 100%;padding-right: 0;padding-bottom: 5rem;}	
  .class-box .info .lessontime {font-size: 2.2rem;}
  .class-box .info .genre, .class-box .info .level {font-size: 1.2em;}
  .class-box .info button {padding: .75em 1.5em;}	
  .live-purchased-button-place {width: 35%;text-align: center;}
    
  .instractor-video-list {width: 100%;}
  .noaschool-bt{padding:1em 0 3em;}	
}

@media screen and (max-width: 500px) {
  .teacher-img-introduction-flex {padding: 0 5% 5em;}
  .page-top-padding {padding: 9em 10% 5em;}
  .instructor-name {font-size: 3.6rem;}	
  .instructor-team-name {font-size: 2rem;}
  .instructor-profile-size {font-size: 1.5em;}
  .profile-overflow p{font-size:1em;}	

  .teaher-live-menu{font-size: 1.7rem;}
  .instructor-lesson {padding-bottom: 2rem;}
  .class-box .info .lessontime {font-size: 1.6rem;}
  .class-box .info .genre, .class-box .info .level {font-size: 1em;}
  .class-box .info button {padding: .75em 1em;font-size: 1rem;}
  .instructor-live-buy-button {padding: 1em;font-size: 1.3rem;}
  .instructor-live-purchased-button {padding: 1em;font-size: 1.3rem;}
  .video-box{margin-bottom: 2em;}	
  .pagination-box{margin: 18px 0 0 0!important;}	
}

@media screen and (min-width: 769px) {

  .teacher-img-introduction-flex {
    padding: 0 3em 5em;
  }
  .page-top-padding {
    padding: 13em 3em 8em;
  }

  .instructor-picture {
    padding-top: 0;
  }
  .instructor-picture .res-img {
    position: static;
    top: inherit;
    left: inherit;
    transform: none;
    width: 100%;
    height: auto;

    max-width: 600px;
    margin: 0 0 0 auto;
    display: block;
  }
  .instructor-name {
    font-size: 3.6em;
  }
  .profile-overflow {
    overflow-y:auto;
    max-width: 500px;
  }
  .profile-overflow p {
    font-size: 1.1em;
  }
}
@media screen and (min-width: 1400px) {
  .teacher-img-introduction-flex {
    max-width: 1400px;
    margin: 0 auto 2em;
  }
}