* {
	box-sizing: border-box;
}

body {
	width: 100%;
	max-width: 824px;
	margin: 0 auto;
	display: table;
	font-family: "Open Sans", sans-serif;
}
.question-count {
	font-size: 1.1em;
  font-weight: bold;
  color: #48A0D5;
  text-align: center;
}

.questions-container {
  text-align: left;
  margin: 1em auto;
}
.questions-container .question {
  font-weight: bold;
  font-size: 1.3em;
  margin-bottom: 1em;
}
.questions-container .image {
	height: 350px;
	margin-bottom: 1em;
}
.questions-container .image .front {
	background-position: center;
  background-size: cover;
	background-repeat: no-repeat;
}
.questions-container .image .front.results {
	background-image: none !important;
}
.questions-container .image .front.perfect {
	background: #45B19C;
}
.questions-container .image .front.excellent {
	background: #48A0D5;	
}
.questions-container .image .front.very-good {
  background: #48A0D5;  
}
.questions-container .image .front.good {
	background: #efc94c;
}
.questions-container .image .front.pretty-bad {
	background: #e74c3c;
}

.questions-container .image .back, .questions-container .image .front.results {
	text-align: center;
  font-size: 4em;
  font-weight: bold;
  color: #fff;
  padding-top: 120px;
}
.questions-container .image .back.correct {
	background-color: #45B19C;
}
.questions-container .image .back.incorrect {
	background-color: #e74c3c;
}


.questions-container .options {
	margin-top: 1em;
  margin-bottom: .75em;
}
.questions-container .options .opt {  
  width: 49%;
  display: inline-block;
  padding: 0.3em;
  border: solid 3px #3a3a3a;
  text-align: left;
  margin-bottom: 5px;
  vertical-align: top;
  text-align: center;
  font-size: 1.4em;
  font-weight: bold;
}
.questions-container .options .opt.active {
	cursor: pointer;
}
.questions-container .options .opt.active:hover {
  color: white;
  background-color: #3a3a3a;
}
.questions-container .options .opt:nth-of-type(odd) {
	margin-right: 1%;
}
.questions-container .options .opt:nth-of-type(even) {
	margin-left: 1%;
}

.questions-container .options .opt.correct {
  background-color: #45B19C;
  color: white;
  pointer-events: none;
}
.questions-container .options .opt.incorrect {
  background-color: #e74c3c;
  color: white;
  pointer-events: none;
}


.questions-container .next, .questions-container .show-results, .questions-container .play-again {
	width: 100%;
  padding: 0.5em;
  margin: 0 auto;
  font-weight: bold;
  color: white;
  cursor: pointer;
  text-align: center;
  font-size: 1.3em;
}
.questions-container .next {
  border: 4px solid #48A0D5;
  background-color: #48A0D5;
}
.questions-container .next:hover {
	background-color: white;
  color: #48A0D5;
}
.questions-container .show-results, .questions-container .play-again {
	border: 4px solid #924DD9;
	background-color: #924DD9;
}
.questions-container .show-results:hover, .questions-container .play-again:hover {
	background-color: white;
  color: #924DD9;
}

.questions-container .share-results {
  margin-top: 10px;
  margin-bottom: 20px;
}
.questions-container .share-results a {
  color: #fff;
  width: 49.7%;
  display: inline-block;
}
.questions-container .share-results p {
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
}
.questions-container .share-results .share {  
  width: 100%;
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
  display: inline-block;
  padding: 0.5em;
  cursor: pointer;
}
.questions-container .share-results .share:hover {
  background-color: #fff !important;
}
.questions-container .share-results .share.facebook {
	border: solid 3px #3b5998;
	background-color: #3b5998;
}
.questions-container .share-results .share.facebook:hover {
	color: #3b5998;
}
.questions-container .share-results .share.twitter {
	border: solid 3px #1dcaff;
	background-color: #1dcaff;
}
.questions-container .share-results .share.twitter:hover {
	color: #1dcaff;
}
.questions-container .share-results .share.whatsapp {
	border: solid 3px #25d366;
	background-color: #25d366;
}
.questions-container .share-results .share.whatsapp:hover {
	color: #25d366;
}

.desktop-hide {
  display: none !important;
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
	.questions-container .share-results a {
		width: 49.5%;
	}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
  .desktop-hide {
    display: block !important;
  }
  .mobile-hide {
    display: none !important;
  }

  a.whatsapp-link.desktop-hide {
    display: inline-block !important;
  }
  .questions-container .image {
    height: 220px;
  }
  .questions-container .question {
    font-size: 1.1em;
  }
  .question-count {
    font-size: 1em;
  }

  .questions-container .image .back, .questions-container .image .front.results {
    font-size: 3em;
    padding-top: 55px;
  }
  .questions-container .share-results a {
    width: 32.7%;
  }

  .questions-container .options .opt {  
    width: 100%;
    display: block;
    padding: .6em;
  }
  .questions-container .options .opt:nth-of-type(odd) {
    margin-right: 0%;
  }
  .questions-container .options .opt:nth-of-type(even) {
    margin-left: 0%;
  }

}
/* Custom, iPhone Retina */
@media only screen and (max-width: 435px) {
  .questions-container .share-results a {
    width: 32.4%;
  }
}