.usecase p, .usecase ul, .usecase ol {font-size:15px;}
a.usecase-back-link { 
  display:block; 
  margin: 8px 0px 16px 0px; 
  padding: 4px 12px 4px 12px; 
  font-size: 16px;
  text-align:center;
  color: #fff;
  background-color: #007841;
  border: 2px solid #fff;
  
}
a.usecase-back-link:hover {
  background-color: #fff;
  border: 2px solid #007841;
  color: #007841;
}

.shadow { box-shadow: 2px 2px 6px -5px rgba(100,100,100,.5); }
.usecase h2 { 
  color: #007841; 
  padding: 0 0 0 8px;
  font-size: 16px;
  margin: 0;
}

.usecase-info { margin-bottom: 60px; }
.usecase-description { background-color: #eee; display:block; height: 300px; }
.usecase-description > * { padding-left: 8px; }
.usecase-preview { margin-bottom: 32px; }
.usecase-videos { 
  margin-bottom: 0px; 
  padding: 8px 0px 8px 0px; 
}
.usecase-video {}
.usecase-video .videobox {position: relative; height: 400px; }
.usecase-video .videobox .video { height: 100%; }
.usecase-video .videobox .play-button { top: calc(50% - 32px); }

.usecase-step-controls {
  margin: 16px 0px 16px 0px;
}
.usecase-step-controls * { float:left; border: 1px solid #007841; margin-right: 8px; }
.usecase-step-controls span { padding: 8px; background: #007841; color: #FFF; font-weight:bold; }
.usecase-step-controls a { display:block; width: 8px; color: #007841; padding: 8px 16px 8px 16px; }

.usecase-steps { margin-bottom: 48px; }
.usecase-step-head > a,  h2.mat-head { 
  width: auto;
  background: #007841; 
  color: #FFF; 
  padding: 8px 16px; 
  margin: 8px 8px 8px 0px;
  z-index: 999999;
}

h2.mat-head{ display: inline; }

.usecase-step-top-link { text-align:center; }

.usecase-step { padding: 0px 0px 0px 0px; margin-bottom: 32px; }
.usecase-step-text { 
  position: relative; 
  display:block;
  background: #eee; 
  height: 434px;
  width: 484px;
  padding: 8px;
  margin: 0;
}
.usecase-step-text > * {
  padding-left: 8px;
}
.usecase-step h4 { 
  padding: 0px 0px 8px 0px; 
  margin: 0px 0px 8px 0px; 
  color: #057842; 
  display:block; 
  border-bottom: 1px solid #ddd;
}
.step-material-list { margin-left: 16px; }
.usecase-materials { padding: 0px; margin: 30px 0px; list-style-type:none; }
.usecase-material-check { margin: 0px; }
.usecase-material-image-wrap {
  width: 96px;
  height: 30px;
  position:relative;
  background:#fff;
  margin: -2px 8px 0px 0px;
  text-align:center;
}
.usecase-material-image {
  width: auto;
  height: 30px;
  margin: 0px auto 0px auto;
}
.usecase-material-link { margin: 0px 0px 0px 0px; color: #057842; font-size: 14px; padding: 3px 0px 0px 0px; }
.usecase-material-link:hover { text-decoration: underline; }

.usecase-form { padding: 16px; background-color: #eee; margin-top: 16px; }
.usecase-form input[type="submit"] {
  position:relative;
  background-color: #057842;
  color: #FFF;
  font-size: 14px;
  padding: 12px 16px;
  text-align:center;
  cursor:pointer;
  border: none;
}

.checkbox input[type="checkbox"] {
  visibility:hidden;
}

.checkbox {
  width: 25px;
  height: 25px;
  background-color: #057842;
  margin: 0px 8px 8px 0px;
  
  position: relative;
}

.checkbox label {
  cursor: pointer;
  position: absolute;
  width: 30px;
  height: 30px;
  left: 1px;
  top: 1px;
}

.checkbox label:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1;
  content: '';
  position: absolute;
  width: 23px;
  height: 23px;
  background: #fff;

  top: 0px;
  left: 0px;
}

.checkbox label:hover::after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  opacity: 0.8;
}

.checkbox input[type=checkbox]:checked + label:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
}