.w-legal{
  counter-reset : section;
  box-sizing    : border-box;
  max-width     : 800px;
  padding-left  : 2.5em;
}

@media screen and (max-width:511px){
  .w-legal{
    font-size : 0.875em;
  }
}

@media screen and (max-width:383px){
  .w-legal{
    font-size : 0.8125em;
  }
}

.w-legal h1,
.w-legal h2,
.w-legal h3{
  position : relative;
}

.w-legal h1{
  font-size : 2em;
  margin    : 0 0 0.625em;
}

.w-legal h2{
  counter-reset : subsection;
  font-size     : 1.5em;
  margin        : 0 0 0.83em;
}

.w-legal h3{
  font-size : 1.25em;
  margin    : 0 0 1em;
}

.w-legal h2:before,
.w-legal h3:before{
  position : absolute;
  left     : -1.67em;
  opacity  : 0.5;
}

.w-legal h2:before{
  counter-increment : section;
  content           : counter(section);
}

.w-legal h3:before{
  counter-increment : subsection;
  content           : counter(section) '.' counter(subsection);
  left              : -2em;
}

.w-legal h3 > button{
  float       : right;
  margin      : 0;
  padding     : 0;
  border      : 0;
  background  : transparent;
  font-size   : 14px;
  line-height : 1.5;
  cursor      : pointer;
}

.w-legal h3 > button::-moz-focus-inner{
  padding : 0;
  border  : 0;
}

.w-legal h3 > button:before{
  content : 'Off';
  opacity : 0.5;
}

.w-legal h3 > button:after{
  content : 'On';
  opacity : 0.5;
}

.w-legal h3 > button > span{
  display        : inline-block;
  width          : 36px;
  height         : 20px;
  margin         : 0 4px;
  border-radius  : 10px;
  vertical-align : bottom;
  background     : #f30;
  cursor         : pointer;
  transition     : background 0.2s linear;
}

.w-legal h3 > button[data-group-permitted="true"] > span{
  background : #6c3;
}

.w-legal h3 > button > span > span{
  display       : block;
  position      : relative;
  left          : 0;
  width         : 16px;
  height        : 16px;
  margin        : 2px;
  background    : #fff;
  border-radius : 8px;
  transition    : left 0.2s;
}

.w-legal h3 > button[data-group-permitted="true"] > span > span{
  left : 16px;
}

.w-legal ul{
  counter-reset : contents-section;
  margin        : 0 0 1.25em;
  padding       : 0;
}

.w-legal ul ul{
  margin : 0 0 0 1.25em;
}

.w-legal li{
  margin          : 0;
  padding         : 0;
  list-style-type : none;
}

.w-legal li:before{
  counter-increment : contents-section;
  content           : counters(contents-section, '.');
  display           : inline-block;
  width             : 1.25em;
  opacity           : 0.5;
}

.w-legal li li:before{
  width : 2.125em;
}

.w-legal p{
  margin  : 0 0 1.25em;
  padding : 0;
}

.w-legal dd{
  margin  : 0 0 1.25em 1.25em;
  padding : 0;
}