/*                 BODY
----------------------- */
*, *:after, *:before {
  box-sizing: border-box;
}
html, body {
  position: relative;
  height: 100%;
}
body {
  background: #FFF;
  color: #222;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  line-height: 150%;
  position: relative;
  cursor: auto;
}



.cl{
  position: relative;
  margin-bottom:0.2em;
  padding:.0.1em;
  float: left;
}
.cl span{
  display:block;
  background:#f55;
  color:white;
  text-align:center;
  padding:0.5em 0;
  opacity:0;
}

/*  Row 
------------------------------*/
.section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 70rem;
}
.section:before, .row:after {
  content: " ";
  display: table;
}
.section:after {
  clear: both;
}
/*  Grid 
------------------------------*/
.div{width:100%;}
.div-2{width:calc(100% / 2);}
.div-3{width:calc(100% / 3);}
.div-4{width:calc(100% / 4);}
.div-5{width:calc(100% / 5);}
.div-6{width:calc(100% / 6);}
.div-7{width:calc(100% / 7);}
.div-8{width:calc(100% / 8);}
.div-9{width:calc(100% / 9);}
.div-10{width:calc(100% / 10);}
.div-11{width:calc(100% / 11);}
.div-12{width:calc(100% / 12);}
/*  left and right divs 
------------------------------*/
.div-r {
  float: right!important;
}
.div-l {
  float: right!important;
}