/*
	file: grid.css
	author: Philip Munce
	last-mod: 29-12-2015
	comments: css styles for basic grid system
*/	

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  [class*='col-'] {
      float: left;
      padding-right: 20px;
  }
  .col-1-10 {
      width: 10%;
      text-align: center;
      margin: auto;
  }
  .col-6-10 {
      width: 60%;
      text-align: center;
      margin: auto;
  }
  .col-2-10 {
      width: 20%;
      text-align: center;
      margin: auto;
  }
  .col-2-10 {
      width: 20%;
      text-align: center;
      margin: auto;
  }
  .col-1-2 {
      width: 50%;
      text-align: center;
      margin: auto;
  }
  .col-1-4 {
      width: 25%;
      text-align: center;
      margin: auto;
  }
  .col-1-4-textcrowding {
      width: 10%;
      text-align: center;
      margin: auto;
  }
  .col-1-5 {
      /*width: 20%;*/
      text-align: center;
      -ms-flex-order: 0;
      order: 0;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -ms-flex-item-align: auto;
      align-self: auto;
  }
  .col-2-5 {
      text-align: center;
      -ms-flex-order: 0;
      order: 0;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -ms-flex-item-align: auto;
      align-self: auto;
  }
  .grid:after {
      content: "";
      display: table;
      clear: both;
  }
  .grid {
      width: 700px;
      box-sizing: border-box;
      -ms-flex-order: 0;
      order: 0;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -ms-flex-item-align: auto;
      align-self: auto;
  }
  
  .lesson-container {
      left: -4%;
      position: relative;
      cursor:pointer;
  }
  
  .lesson-wrap {
    width:20%;
    height:140px;
    position:relative;
    /*background-color:#333;*/
    float:left;
    /*margin-right:10px;*/
    -webkit-font-smoothing:antialiased;
  }
  
  .lesson-face {
    position:absolute;
    width:140px;
    height:140px;
    overflow:hidden;
  }
  
  .front {
    background-color:#FFF; 
  }
  
  .back {
    background-color:#FFF; 
  }
  