#task4-content {
  position: relative; }

@media (max-width: 1024px) {
  .main {
    flex-direction: column; }

  .contentsWrapper {
    flex: 0 0 0;
    width: calc(100% / 9 * 8); }
    .contentsWrapper .contents {
      margin: 0;
      margin-left: 12.5%;
      width: 87.5%;
      padding-right: 0;
      border-right: 0; }
      .contentsWrapper .contents #contentsList {
        margin: 0; }
    .contentsWrapper h2 {
      margin-bottom: 20px; }
    .contentsWrapper ul {
      list-style: none; }
      .contentsWrapper ul li {
        padding-left: 1rem;
        padding-right: 1rem;
        border-right: 1px solid #0E8A16;
        display: inline; }
        .contentsWrapper ul li .hed {
          display: inline; }
        .contentsWrapper ul li .crumb-active, .contentsWrapper ul li .crumb-inactive, .contentsWrapper ul li .dek {
          display: none; }
        .contentsWrapper ul li:first-child {
          padding-left: 0; }

  #navWrapper .nav {
    /* Force 2 col nav */ }
    #navWrapper .nav .colWrapper50pct {
      width: calc(100% / 9 * 4);
      float: left; }
    #navWrapper .nav .colContent50pct {
      margin-left: 25%;
      padding-top: 20px;
      width: 75%; }
    #navWrapper .nav .colWrapper50pctPlus {
      width: calc(100% / 9 * 5);
      float: left; }
    #navWrapper .nav .colContent50pctPlus {
      margin-left: 20%;
      padding-top: 20px;
      width: 80%; }
    #navWrapper .nav .colContent100pctHalf {
      margin-left: 12.5%;
      padding-top: 20px;
      width: 37.5%; }
    #navWrapper .nav .colHide {
      display: block; } }
.full-screen {
  background: #F8F9F9;
  position: absolute;
  border: 1px solid #ccc;
  padding: 40px;
  top: 0;
  left: 0; }

.page-pattern-maker .pattern-maker-buttons {
  position: absolute;
  bottom: 20px;
  right: 20px; }

.suggested-answer .exemplar-image {
  float: right;
  width: 50%;
  margin-left: 20px;
  margin-top: 50px; }
.suggested-answer .btn-hide-suggested {
  position: absolute;
  bottom: 20px; }

.pattern-maker-legend .fa-check {
  margin-left: 5px;
  opacity: 0; }
.pattern-maker-legend .complete {
  animation: fadeInOutBackground .5s ease;
  color: #0e8515; }
  .pattern-maker-legend .complete .fa-check {
    animation: scaleWithBounce .5s ease .5s forwards; }

/* quiz stuffs */
.question-images fieldset {
  margin: 80px 0; }
.question-images label {
  width: 33.33%;
  clear: none;
  display: block; }
  .question-images label button {
    position: relative;
    transition: transform .3s ease;
    border: none;
    background: none;
    padding: 0; }
    .question-images label button:hover, .question-images label button:focus {
      transform: scale(1.5);
      z-index: 5; }
    .question-images label button img {
      max-width: 100%; }
    .question-images label button .fa-circle, .question-images label button .fa-circle-o {
      color: white;
      padding: 4px 4px 4px 4px;
      border-radius: 4px;
      font-size: 22px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      margin-left: -12px; }
    .question-images label button .fa-circle-o {
      background: rgba(0, 0, 0, 0.5); }
    .question-images label button .fa-circle {
      display: none;
      font-size: 10px;
      padding: 0;
      bottom: 20px;
      margin-left: -3px; }
    .question-images label button.selected {
      border: 3px solid #FFC19C; }
      .question-images label button.selected .fa-circle {
        display: block; }
.question-images .selectable-answer img {
  max-width: 100%; }

#task3-1 table {
  margin: 20px 0; }
#task3-1 tr {
  border: 2px solid #ccc; }
#task3-1 td {
  padding-left: 20px; }
  #task3-1 td:first-child {
    padding: 20px 0 20px 20px; }
  #task3-1 td.feedback {
    width: 20px;
    padding: 0 0 20px 0; }
#task3-1 .allCorrectFeedback, #task3-1 .incorrectFeedback {
  margin: 20px 0; }
#task3-1 .completionControls {
  padding-bottom: 60px; }

.correct {
  color: #007FA3; }

.incorrect {
  color: #EC1944; }

@keyframes scaleWithBounce {
  0% {
    transform: scale(0.5);
    opacity: 0; }
  50% {
    transform: scale(1.7);
    opacity: 1; }
  70% {
    transform: scale(1.1);
    opacity: 1; }
  80% {
    transform: scale(1.5);
    opacity: 1; }
  100% {
    transform: scale(1.3);
    opacity: 1; } }
@keyframes fadeInOutBackground {
  0% {
    background-color: white; }
  50% {
    background-color: #F3FF5D;
    padding-top: 7px;
    padding-bottom: 7px; }
  100% {
    background-color: white;
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: none;
    /*font-size:13px;*/ } }

/*# sourceMappingURL=styles.css.map */