@media only screen
and (max-width: 1200px)
{
  .mainFrame {width: 100%; padding: 0 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
  
  .tinymceCont P IMG {max-width: 100%; height: auto;}
}



@media only screen
and (max-width: 800px)
{
  #menu {flex-direction: column;}
  #menu .link {border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.3);}
  
  .lessonsFrame .lessonFrame {flex-wrap: wrap;}
  .lessonsFrame .lessonFrame .cell.name {width: 50%;}
  .lessonsFrame .lessonFrame .cell.valid {width: calc(50% - 50px); padding-right: 0; text-align: right;}
  .lessonsFrame .lessonFrame .cell.start {width: 100%; justify-content: flex-end;}
  
  .lessonHeading {flex-direction: column; align-items: flex-start;}
  .lessonHeading .left {margin-top: 10px;}
  .lessonHeading .right {margin-top: 10px;}
  
  .infoPanel P {width: calc(100% - 27px);}
}



@media only screen
and (max-width: 500px)
{
  #content {padding: 10px;}
  
  .lessonsFrame .lessonFrame .cell.name {width: calc(100% - 50px);}
  .lessonsFrame .lessonFrame .cell.valid {width: 60%; padding-left: 0; padding-right: 0; text-align: left; justify-content: flex-start;}
  .lessonsFrame .lessonFrame .cell.start {width: 40%; justify-content: flex-end;}
  
  .formLine .formRow {width: 100%; margin: 4px 0 4px 0;}
  .formLine .formInput {width: 100%;}
  .checkboxLine.leftPadding {padding: 0;}
  .formLine .formSubmit {margin: 0;}
  
  #footer {padding: 10px 0; flex-wrap: wrap; flex-direction: column;}
  #footer P {padding: 5px 0;}
}