/* VARIABLES
 *******************/
/* Sizes */
/* Colors */
/* Borders */
/* Space */
#answers:after, #answers2:after, #sortable-quiz ul:after, #sortable-quiz2 ul:after, #timer-block div:after, #timer-block2 div:after, #timer-block:after, #timer-block2:after {
  content: '';
  display: table;
  width: 100%;
  height: 0.1px;
  clear: both; }

.container .col-md-9, .container2 .col-md-9 {
  float: none;
  margin: 0 auto;
  position: relative; }

#sortable-quiz, #sortable-quiz2 {
  margin: 20px auto;
  padding: 0;
  max-width: 800px; }
  
#sortable-quiz .overlay, #sortable-quiz2 .overlay2 {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5; }

.overlay-location, .overlay-location2 {
  opacity: 0.5; }

#answers, #answers2 {
  padding: 30px 0;
  border-bottom: 10px solid #003e2d; }

.btn-submit-answers, .btn-submit-answers2, .btn-correct, .btn-correct2 {
  margin: 30px auto 0 auto;
  clear: both; }

.btn-start, .btn-start2 {
  position: absolute;
  top: 45.5%;
  left: 42%; }

.columns {
  -webkit-columns: 190px 2;
  -moz-columns: 190px 2;
  columns: 190px 2; }

@media screen and (max-width: 450px) {
  .container, .container2 {
    padding-right: 0;
    padding-left: 0; }

  #sortable-quiz, #sortable-quiz2 {
    margin-top: 0; }

  .btn-start, .btn-start2 {
    top: 45%;
    left: 30%; }

  #answers, #answers2 {
    padding: 20px 0; }

  .btn-submit-answers, .btn-submit-answers2, .btn-correct, .btn-correct2 {
    margin: 20px auto 10px auto; } }
	
#sortable-quiz ul, #sortable-quiz2 ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 0; }
  
#sortable-quiz ul li, #sortable-quiz2 ul li {
    float: left;
    cursor: pointer;
    margin: 0 0.4em; }

button.btn-submit-answers, button.btn-submit-answers2, button.btn-start, button.btn-start2, button.btn-correct, button.btn-correct2 {
  border-radius: 0;
  width: 125px;
  font-size: 1em; }

.btn-submit-answers, .btn-submit-answers2 {
  background-color: #046a9b; }

.btn-correct, .btn-correct2 {
  background-color: #f31d12; }

.btn-submit-answers, .btn-submit-answers2, .btn-correct, .btn-correct2 {
  border: 0;
  transition: background-color 0.3s ease; }
  .btn-submit-answers:hover, .btn-submit-answers2:hover, .btn-correct:hover, .btn-correct2:hover {
    background-color: #003e2d; }

.btn-correct, .btn-correct2 {
  display: none; }

.btn-submit-answers, .btn-submit-answers2 {
  display: block; }

.btn-start, .btn-start2 {
  border: 0;
  background-color: #046a9b;
  transition: background-color 0.3s ease; }
  .btn-start:hover, .btn-start2:hover {
    background-color: #003e2d; }

.instructions {
  margin-bottom: 20px;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  color: #046a9b;
  text-align: center; }

#timer-block, #timer-block2 {
  padding: 0 2px;
  width: 100%;
  background-color: #003e2d;
  color: white; }
  #timer-block div, #timer-block2 div {
    margin: 0 auto;
    width: 65%; }
    #timer-block div p, #timer-block2 div p {
      display: inline-block;
      float: left;
      margin: 18px 0;
      font-size: 1em;
      font-weight: 400;
      line-height: 1;
      color: white; }
    #timer-block div #countdown, #timer-block2 div #countdown2 {
      float: right;
      width: 120px;
      font-size: 2.5em; }
      #timer-block div #countdown .numeral, #timer-block2 div #countdown2 .numeral2 {
        margin: 0 4px;
        padding: 0 2px 0 5px;
        font-size: 1em;
        font-weight: 600;
        line-height: 1;
        color: #003e2d;
        background-color: #fff;
        letter-spacing: 3px; }

.answer_block, .answer_block2 {
  position: relative;
  width: 23.5%;
  max-width: 191px;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
  color: white;
  text-align: center;
  transition: background-color 0.5s ease; }
  .answer_block:hover, .answer_block2:hover {
    background-color: #add18c; }

.one-line, .one-line2 {
  padding: 20px 2px; }

.two-lines, .two-lines2 {
  padding: 12px 2px; }

.three-lines, .three-lines2 {
  padding: 4px 2px; }

.default, .default2 {
  background-color: #046a9b; }

.match, .match2 {
  background-color: #add18c; }
  .match:after, .match2:after {
    content: "\e013";
    font-family: "Glyphicons Halflings";
    line-height: 1;
    margin: 10px;
    display: inline-block;
    position: absolute;
    bottom: -6px;
    right: -6px; }

.wrong, .wrong2 {
  background-color: #f31d12; }
  .wrong:after, .wrong2:after {
    content: "\e014";
    font-family: "Glyphicons Halflings";
    line-height: 1;
    margin: 10px;
    display: inline-block;
    position: absolute;
    bottom: -7px;
    right: -7px; }

@media screen and (max-width: 1200px) {
  #sortable-quiz ul li, #sortable-quiz2 ul li {
    margin: 0 0.5em; }

  .answer_block, .answer_block2 {
    width: 23%; } }
@media screen and (max-width: 750px) {
  .answer_block, .answer_block2 {
    font-size: 0.9em;
    width: 23%; }

  .three-lines, .three-lines2 {
    padding: 5px 2px; } }
@media screen and (max-width: 700px) {
  #sortable-quiz ul li, #sortable-quiz2 ul li {
    margin-right: 0.4em; }

  #timer-block div, #timer-block2 div {
    width: 80%; } }
@media screen and (max-width: 600px) {
  .answer_block, .answer_block2 {
    font-size: 0.8em; }

  .two-lines, .two-lines2 {
    padding: 13px 2px; }

  .three-lines, .three-lines2 {
    padding: 7px 2px; } }
@media screen and (max-width: 555px) {
  #sortable-quiz ul, #sortable-quiz2 ul {
    left: 0;
    width: 200px;
    margin: 0 auto; }
    #sortable-quiz ul li, #sortable-quiz2 ul li {
      float: none;
      display: block;
      margin-right: 0;
      margin-bottom: 10px;
      width: 200px; }

  #timer-block, #timer-block2 {
    padding: 8px 0px;
    width: 100%; }
    #timer-block div, #timer-block2 div {
      margin: 0 auto;
      width: 100%; }
      #timer-block div p, #timer-block2 div p {
        display: block;
        float: none;
        margin: 0 auto;
        padding-bottom: 8px;
        text-align: center;
        font-size: 0.8571em; }
      #timer-block div #countdown, #timer-block2 div #countdown2 {
        float: none;
        font-size: 2em; }

  .answer_block, .answer_block2, button.btn-submit-answers, button.btn-submit-answers2, button.btn-start, button.btn-start2, button.btn-correct, button.btn-correct2, .instructions {
    font-size: 0.8571em; }

  .two-lines, .two-lines2 {
    padding: 11px 3px; }

  .three-lines, .three-lines2 {
    padding: 11px 0; } }
	
	

