@media only screen and (max-width : 335px) {
  h1 {
  	font-size: 23px !important;
  }
}

input:focus {
  outline: none;
}

#test_container {
  display: none;
}

#test_description {
  margin-bottom: 1em;
}

#test_trigger_parent {
  text-align: center;
}

#test_trigger, #form_submit {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  display: inline-block;
  width: 33%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 110.5%;
  padding: 0;
  color: white;
  border: 1px solid #777;
  border-radius: 5px;
  background-color: #cf4d35;
  font-family: Roboto Slab;
}

#test_trigger:active, #form_submit:active {
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

#pre_form_instructions {
  text-align: left;
  margin-top: 1em;
  margin-bottom: 1em;
}

#post_counter_instructions {
  display: inline;
}

#word_list {
  font-family: Raleway;
  font-size: 1em;
  padding-bottom: .5em;
  text-align: center;
  color: black;
}

label.checkbox {
  display: inline-block;
  min-height: 2em;
  width: 10.2em;
  margin-bottom: .4em;
  margin-left: .2em;
  margin-right: .2em;
  position: relative;
}

@media only screen and (max-width : 360px) {
  label.checkbox {
    width: 9.2em;
    width: -moz-calc(50% - .2em);
    width: -webkit-calc(50% - .2em);
    width: -o-calc(50% - .2em);
    width: calc(50% - .2em);
    margin-left: 0px;
    margin-right: 0px;
  }
  label.checkbox:nth-child(even) {
    margin-left: .4em;
  }
  label.checkbox > span {
    font-size: 12.5px;
    font-weight: bold;
  }
}

input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  opacity: 0;
  cursor: pointer;
}

input:disabled {
  cursor: default !important;
}

input:disabled + span, input[type=submit]:disabled {
  opacity: 0.5;
}

input[type=checkbox] + span {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  border: 1px solid #777;
  border-radius: 5px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

input[type=checkbox]:active + span, input[type=checkbox]:checked + span {
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  color: white;
}

#form_submit {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*Style progress bars per https://css-tricks.com/html5-progress-element*/
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress::-webkit-progress-bar {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress::-webkit-progress-value {
  background-size: 35px 20px, 100% 100%, 100% 100%;
  -webkit-transition: width .5s ease;
}

progress::-moz-progress-bar {
  background-size: 35px 20px, 100% 100%, 100% 100%;
  -moz-transition: width .5s ease;
}

span {
  text-align: center;
  display: inline-block;
  line-height: 28px;
}

span.round_1, progress.round_1, span.round_2, progress.round_2 {
  width: 25%;
}

span.round_3, progress.round_3, span.round_4, progress.round_4 {
  width: 25%;
}

form.round_1 span {
  background-color: #849ac8;
}

form.round_1 input[type=checkbox]:active + span, form.round_1 input[type=checkbox]:checked + span {
  background-color: #45619c;
}

@media only screen and (min-width : 768px) {
  form.round_1 input[type=checkbox]:hover:not(:disabled) + span {
    background-color: #459b9c;
    color: white;
  }
}

form.round_2 span {
  background-color: #99e3ff;
}

form.round_2 input[type=checkbox]:active + span, form.round_2 input[type=checkbox]:checked + span {
  background-color: #00acee;
}

@media only screen and (min-width : 768px) {
  form.round_2 input[type=checkbox]:hover:not(:disabled) + span {
    background-color: #e100ee;
    color: white;
  }
}

form.round_3 span {
  background-color: #eea59c;
}

form.round_3 input[type=checkbox]:active + span, form.round_3 input[type=checkbox]:checked + span {
  background-color: #dd4b39;
}

@media only screen and (min-width : 768px) {
  form.round_3 input[type=checkbox]:hover:not(:disabled) + span {
    background-color: #4b39dd;
    color: white;
  }
}

form.round_4 span {
  background-color: #80c7ec;
}

form.round_4 input[type=checkbox]:active + span, form.round_4 input[type=checkbox]:checked + span {
  background-color: #1d87bd;
}

@media only screen and (min-width : 768px) {
  form.round_4 input[type=checkbox]:hover:not(:disabled) + span {
    background-color: #87bd1d;
    color: white;
  }
}

input[type=checkbox]:focus + span {
  border-color: black;
}

.complete_round {
  opacity: 0.5;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

span.current_round {
  font-weight: bold;
}

span.current_round:before {
  content: "Round ";
}

progress.current_round {
  border: 1px solid black;
  border-radius: 2px;
}

progress:not(.complete_round):not(.current_round)::-webkit-progress-bar {
  background-color: lightgray;
}

progress.round_1::-webkit-progress-bar {
  background-color: #e6ebf4;
}

progress.round_1::-webkit-progress-value {
  background-image:
    -webkit-linear-gradient(-45deg, 
                            transparent 33%, rgba(0, 0, 0, .1) 33%, 
                            rgba(0,0, 0, .1) 66%, transparent 66%),
    -webkit-linear-gradient(top, 
                            rgba(255, 255, 255, .25), 
                            rgba(0, 0, 0, .25)),
    -webkit-linear-gradient(left, #45619c, #45619c);
}

progress.round_1::-moz-progress-bar {
  background-image:
    -moz-linear-gradient(
      135deg, 
      transparent 33%, 
      rgba(0, 0, 0, 0.1) 33%, 
      rgba(0, 0, 0, 0.1) 66%, 
      transparent 66% 
    ),
    -moz-linear-gradient(
      top, 
      rgba(255, 255, 255, 0.25), 
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(left, #45619c, #45619c);
}

progress.round_2::-webkit-progress-bar {
  background-color: #ddf6ff;
}

progress.round_2::-webkit-progress-value {
  background-image:
    -webkit-linear-gradient(-45deg, 
                            transparent 33%, rgba(0, 0, 0, .1) 33%, 
                            rgba(0,0, 0, .1) 66%, transparent 66%),
    -webkit-linear-gradient(top, 
                            rgba(255, 255, 255, .25), 
                            rgba(0, 0, 0, .25)),
    -webkit-linear-gradient(left, #00acee, #00acee);
}

progress.round_2::-moz-progress-bar {
  background-image:
    -moz-linear-gradient(
      135deg, 
      transparent 33%, 
      rgba(0, 0, 0, 0.1) 33%, 
      rgba(0, 0, 0, 0.1) 66%, 
      transparent 66% 
    ),
    -moz-linear-gradient(
      top, 
      rgba(255, 255, 255, 0.25), 
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(left, #00acee, #00acee);
}

progress.round_3::-webkit-progress-bar {
  background-color: #fbe9e6;
}

progress.round_3::-webkit-progress-value {
  background-image:
    -webkit-linear-gradient(-45deg, 
                            transparent 33%, rgba(0, 0, 0, .1) 33%, 
                            rgba(0,0, 0, .1) 66%, transparent 66%),
    -webkit-linear-gradient(top, 
                            rgba(255, 255, 255, .25), 
                            rgba(0, 0, 0, .25)),
    -webkit-linear-gradient(left, #dd4b39, #dd4b39);
}

progress.round_3::-moz-progress-bar {
  background-image:
    -moz-linear-gradient(
      135deg, 
      transparent 33%, 
      rgba(0, 0, 0, 0.1) 33%, 
      rgba(0, 0, 0, 0.1) 66%, 
      transparent 66% 
    ),
    -moz-linear-gradient(
      top, 
      rgba(255, 255, 255, 0.25), 
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(left, #dd4b39, #dd4b39);
}

progress.round_4::-webkit-progress-bar {
  background-color: #dff1fa;
}

progress.round_4::-webkit-progress-value {
  background-image:
    -webkit-linear-gradient(-45deg, 
                            transparent 33%, rgba(0, 0, 0, .1) 33%, 
                            rgba(0,0, 0, .1) 66%, transparent 66%),
    -webkit-linear-gradient(top, 
                            rgba(255, 255, 255, .25), 
                            rgba(0, 0, 0, .25)),
    -webkit-linear-gradient(left, #1d87bd, #1d87bd);
}

progress.round_4::-moz-progress-bar {
  background-image:
    -moz-linear-gradient(
      135deg, 
      transparent 33%, 
      rgba(0, 0, 0, 0.1) 33%, 
      rgba(0, 0, 0, 0.1) 66%, 
      transparent 66% 
    ),
    -moz-linear-gradient(
      top, 
      rgba(255, 255, 255, 0.25), 
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(left, #CD7FE5, #67197F);
}