@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.color-1 .progress-bar,
.color-1 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #f44336;
}
.color-1 BUTTON:NOT(.color-option):hover {
  background-color: #ba160a !important;
}
.color-1 A,
.color-1 H2,
.color-1 .progress-numbers,
.color-1 #input_wordcount {
  color: #f44336 !important;
}
.color-1 INPUT,
.color-1 TEXTAREA,
.color-1 #question-container FORM INPUT,
.color-1 #question-container FORM .emoji_answer,
.color-1 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #f44336 !important;
}
.color-2 .progress-bar,
.color-2 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #e91e63;
}
.color-2 BUTTON:NOT(.color-option):hover {
  background-color: #930e3b !important;
}
.color-2 A,
.color-2 H2,
.color-2 .progress-numbers,
.color-2 #input_wordcount {
  color: #e91e63 !important;
}
.color-2 INPUT,
.color-2 TEXTAREA,
.color-2 #question-container FORM INPUT,
.color-2 #question-container FORM .emoji_answer,
.color-2 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #e91e63 !important;
}
.color-3 .progress-bar,
.color-3 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #9c27b0;
}
.color-3 BUTTON:NOT(.color-option):hover {
  background-color: #52145d !important;
}
.color-3 A,
.color-3 H2,
.color-3 .progress-numbers,
.color-3 #input_wordcount {
  color: #9c27b0 !important;
}
.color-3 INPUT,
.color-3 TEXTAREA,
.color-3 #question-container FORM INPUT,
.color-3 #question-container FORM .emoji_answer,
.color-3 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #9c27b0 !important;
}
.color-4 .progress-bar,
.color-4 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #673AB7;
}
.color-4 BUTTON:NOT(.color-option):hover {
  background-color: #3b216a !important;
}
.color-4 A,
.color-4 H2,
.color-4 .progress-numbers,
.color-4 #input_wordcount {
  color: #673AB7 !important;
}
.color-4 INPUT,
.color-4 TEXTAREA,
.color-4 #question-container FORM INPUT,
.color-4 #question-container FORM .emoji_answer,
.color-4 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #673AB7 !important;
}
.color-5 .progress-bar,
.color-5 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #3F51B5;
}
.color-5 BUTTON:NOT(.color-option):hover {
  background-color: #252f69 !important;
}
.color-5 A,
.color-5 H2,
.color-5 .progress-numbers,
.color-5 #input_wordcount {
  color: #3F51B5 !important;
}
.color-5 INPUT,
.color-5 TEXTAREA,
.color-5 #question-container FORM INPUT,
.color-5 #question-container FORM .emoji_answer,
.color-5 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #3F51B5 !important;
}
.color-6 .progress-bar,
.color-6 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #2196F3;
}
.color-6 BUTTON:NOT(.color-option):hover {
  background-color: #0960a5 !important;
}
.color-6 A,
.color-6 H2,
.color-6 .progress-numbers,
.color-6 #input_wordcount {
  color: #2196F3 !important;
}
.color-6 INPUT,
.color-6 TEXTAREA,
.color-6 #question-container FORM INPUT,
.color-6 #question-container FORM .emoji_answer,
.color-6 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #2196F3 !important;
}
.color-7 .progress-bar,
.color-7 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #03A9F4;
}
.color-7 BUTTON:NOT(.color-option):hover {
  background-color: #02638f !important;
}
.color-7 A,
.color-7 H2,
.color-7 .progress-numbers,
.color-7 #input_wordcount {
  color: #03A9F4 !important;
}
.color-7 INPUT,
.color-7 TEXTAREA,
.color-7 #question-container FORM INPUT,
.color-7 #question-container FORM .emoji_answer,
.color-7 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #03A9F4 !important;
}
.color-8 .progress-bar,
.color-8 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #00BCD4;
}
.color-8 BUTTON:NOT(.color-option):hover {
  background-color: #00626e !important;
}
.color-8 A,
.color-8 H2,
.color-8 .progress-numbers,
.color-8 #input_wordcount {
  color: #00BCD4 !important;
}
.color-8 INPUT,
.color-8 TEXTAREA,
.color-8 #question-container FORM INPUT,
.color-8 #question-container FORM .emoji_answer,
.color-8 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #00BCD4 !important;
}
.color-9 .progress-bar,
.color-9 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #009688;
}
.color-9 BUTTON:NOT(.color-option):hover {
  background-color: #00302c !important;
}
.color-9 A,
.color-9 H2,
.color-9 .progress-numbers,
.color-9 #input_wordcount {
  color: #009688 !important;
}
.color-9 INPUT,
.color-9 TEXTAREA,
.color-9 #question-container FORM INPUT,
.color-9 #question-container FORM .emoji_answer,
.color-9 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #009688 !important;
}
.color-10 .progress-bar,
.color-10 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #009688;
}
.color-10 BUTTON:NOT(.color-option):hover {
  background-color: #00302c !important;
}
.color-10 A,
.color-10 H2,
.color-10 .progress-numbers,
.color-10 #input_wordcount {
  color: #009688 !important;
}
.color-10 INPUT,
.color-10 TEXTAREA,
.color-10 #question-container FORM INPUT,
.color-10 #question-container FORM .emoji_answer,
.color-10 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #009688 !important;
}
.color-11 .progress-bar,
.color-11 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #4CAF50;
}
.color-11 BUTTON:NOT(.color-option):hover {
  background-color: #2d682f !important;
}
.color-11 A,
.color-11 H2,
.color-11 .progress-numbers,
.color-11 #input_wordcount {
  color: #4CAF50 !important;
}
.color-11 INPUT,
.color-11 TEXTAREA,
.color-11 #question-container FORM INPUT,
.color-11 #question-container FORM .emoji_answer,
.color-11 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #4CAF50 !important;
}
.color-12 .progress-bar,
.color-12 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #8BC34A;
}
.color-12 BUTTON:NOT(.color-option):hover {
  background-color: #577d2a !important;
}
.color-12 A,
.color-12 H2,
.color-12 .progress-numbers,
.color-12 #input_wordcount {
  color: #8BC34A !important;
}
.color-12 INPUT,
.color-12 TEXTAREA,
.color-12 #question-container FORM INPUT,
.color-12 #question-container FORM .emoji_answer,
.color-12 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #8BC34A !important;
}
.color-13 .progress-bar,
.color-13 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #CDDC39;
}
.color-13 BUTTON:NOT(.color-option):hover {
  background-color: #89951a !important;
}
.color-13 A,
.color-13 H2,
.color-13 .progress-numbers,
.color-13 #input_wordcount {
  color: #CDDC39 !important;
}
.color-13 INPUT,
.color-13 TEXTAREA,
.color-13 #question-container FORM INPUT,
.color-13 #question-container FORM .emoji_answer,
.color-13 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #CDDC39 !important;
}
.color-14 .progress-bar,
.color-14 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #FFEB3B;
}
.color-14 BUTTON:NOT(.color-option):hover {
  background-color: #d4be00 !important;
}
.color-14 A,
.color-14 H2,
.color-14 .progress-numbers,
.color-14 #input_wordcount {
  color: #FFEB3B !important;
}
.color-14 INPUT,
.color-14 TEXTAREA,
.color-14 #question-container FORM INPUT,
.color-14 #question-container FORM .emoji_answer,
.color-14 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #FFEB3B !important;
}
.color-15 .progress-bar,
.color-15 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #FFC107;
}
.color-15 BUTTON:NOT(.color-option):hover {
  background-color: #a07800 !important;
}
.color-15 A,
.color-15 H2,
.color-15 .progress-numbers,
.color-15 #input_wordcount {
  color: #FFC107 !important;
}
.color-15 INPUT,
.color-15 TEXTAREA,
.color-15 #question-container FORM INPUT,
.color-15 #question-container FORM .emoji_answer,
.color-15 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #FFC107 !important;
}
.color-16 .progress-bar,
.color-16 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #FF9800;
}
.color-16 BUTTON:NOT(.color-option):hover {
  background-color: #995b00 !important;
}
.color-16 A,
.color-16 H2,
.color-16 .progress-numbers,
.color-16 #input_wordcount {
  color: #FF9800 !important;
}
.color-16 INPUT,
.color-16 TEXTAREA,
.color-16 #question-container FORM INPUT,
.color-16 #question-container FORM .emoji_answer,
.color-16 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #FF9800 !important;
}
.color-17 .progress-bar,
.color-17 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #FF5722;
}
.color-17 BUTTON:NOT(.color-option):hover {
  background-color: #bb2d00 !important;
}
.color-17 A,
.color-17 H2,
.color-17 .progress-numbers,
.color-17 #input_wordcount {
  color: #FF5722 !important;
}
.color-17 INPUT,
.color-17 TEXTAREA,
.color-17 #question-container FORM INPUT,
.color-17 #question-container FORM .emoji_answer,
.color-17 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #FF5722 !important;
}
.color-18 .progress-bar,
.color-18 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #795548;
}
.color-18 BUTTON:NOT(.color-option):hover {
  background-color: #392822 !important;
}
.color-18 A,
.color-18 H2,
.color-18 .progress-numbers,
.color-18 #input_wordcount {
  color: #795548 !important;
}
.color-18 INPUT,
.color-18 TEXTAREA,
.color-18 #question-container FORM INPUT,
.color-18 #question-container FORM .emoji_answer,
.color-18 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #795548 !important;
}
.color-19 .progress-bar,
.color-19 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #9E9E9E;
}
.color-19 BUTTON:NOT(.color-option):hover {
  background-color: #6b6b6b !important;
}
.color-19 A,
.color-19 H2,
.color-19 .progress-numbers,
.color-19 #input_wordcount {
  color: #9E9E9E !important;
}
.color-19 INPUT,
.color-19 TEXTAREA,
.color-19 #question-container FORM INPUT,
.color-19 #question-container FORM .emoji_answer,
.color-19 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #9E9E9E !important;
}
.color-20 .progress-bar,
.color-20 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #607D8B;
}
.color-20 BUTTON:NOT(.color-option):hover {
  background-color: #36474f !important;
}
.color-20 A,
.color-20 H2,
.color-20 .progress-numbers,
.color-20 #input_wordcount {
  color: #607D8B !important;
}
.color-20 INPUT,
.color-20 TEXTAREA,
.color-20 #question-container FORM INPUT,
.color-20 #question-container FORM .emoji_answer,
.color-20 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #607D8B !important;
}
.color-21 .progress-bar,
.color-21 #question-container FORM BUTTON:NOT(.color-option) {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background-color: #000000;
}
.color-21 BUTTON:NOT(.color-option):hover {
  background-color: #000000 !important;
}
.color-21 A,
.color-21 H2,
.color-21 .progress-numbers,
.color-21 #input_wordcount {
  color: #000000 !important;
}
.color-21 INPUT,
.color-21 TEXTAREA,
.color-21 #question-container FORM INPUT,
.color-21 #question-container FORM .emoji_answer,
.color-21 #question-container FORM TEXTAREA {
  border-bottom: 2px solid #000000 !important;
}
/*---------------------------------------------------
    LESS Prefixer
  ---------------------------------------------------

    All of the CSS3 fun, none of the prefixes!

    As a rule, you can use the CSS properties you
    would expect just by adding a '.':

    box-shadow => .box-shadow(@args)

    Also, when shorthand is available, arguments are
    not parameterized. Learn CSS, not LESS Prefixer.

    -------------------------------------------------
    TABLE OF CONTENTS
    (*) denotes a syntax-sugar helper
    -------------------------------------------------

        .animation(@args)
            .animation-delay(@delay)
            .animation-direction(@direction)
            .animation-duration(@duration)
            .animation-iteration-count(@count)
            .animation-name(@name)
            .animation-play-state(@state)
            .animation-timing-function(@function)
        .background-size(@args)
        .border-radius(@args)
        .box-shadow(@args)
            .inner-shadow(@args) *
        .box-sizing(@args)
            .border-box() *
            .content-box() *
        .columns(@args)
            .column-count(@count)
            .column-gap(@gap)
            .column-rule(@args)
            .column-width(@width)
        .gradient(@default,@start,@stop) *
            .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
            .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
        .opacity(@factor)
        .transform(@args)
            .rotate(@deg)
            .scale(@factor)
            .translate(@x,@y)
            .translate3d(@x,@y,@z)
            .translateHardware(@x,@y) *
        .text-shadow(@args)
        .transition(@args)
            .transition-delay(@delay)
            .transition-duration(@duration)
            .transition-property(@property)
            .transition-timing-function(@function)



    Credit to LESS Elements for the motivation and
    to CSS3Please.com for implementation.

    Copyright (c) 2012 Joel Sutherland
    MIT Licensed:
    http://www.opensource.org/licenses/mit-license.php

-----------------------------------------------------*/
/* Animation */
/* Background Size */
/* Border Radius */
/* Box Shadows */
/* Box Sizing */
/* Columns */
/* Gradients */
/* Opacity */
/* Text Shadow */
/* Transforms */
/* Transitions */
.container-fullwidth .row {
  margin: 0 !important;
  padding: 0 !important;
}
.container-fullwidth .row [class*="col-"] {
  margin: 0;
  padding: 0;
}
P {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 17px;
  line-height: 23px;
  text-align: center;
  font-weight: bold;
}
P A {
  display: inline !important;
  font-size: 17px !important;
  text-decoration: none !important;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
BODY {
  font-family: 'Lato', sans-serif;
  overflow-x: hidden;
}
.progress {
  height: 6px;
  background-color: #CED2D7;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.progress .progress-bar {
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  border-bottom-right-radius: 3px;
}
#question-container {
  position: relative;
  margin-top: 40px;
}
@media (min-width: 720px) {
  #question-container {
    padding-bottom: 5%;
    margin-top: 0;
  }
}
#question-container H1 {
  font-size: 34px;
  line-height: 41px;
  display: block;
  margin-bottom: 40px;
  font-weight: bold;
  text-align: center;
}
#question-container FORM H2,
#question-container FORM LABEL {
  margin-left: 10px;
  font-weight: bold;
}
#question-container FORM H2 {
  font-size: 14px;
  line-height: 17px;
  color: #0080FF;
}
#question-container FORM H3 {
  font-weight: bold;
}
#question-container FORM LABEL {
  font-size: 34px;
  line-height: 41px;
  display: block;
  margin-bottom: 40px;
}
#question-container FORM LABEL.no-margin {
  margin-bottom: 0;
}
#question-container FORM .start_subtext_rgb {
  font-size: 14px;
  line-height: 17px;
  font-weight: bold;
  margin-left: 10px;
  display: inline-block;
}
#question-container FORM .start_subtext_cmyk {
  font-size: 14px;
  line-height: 17px;
  font-weight: bold;
  margin-left: 75px;
  margin-bottom: 25px;
  display: inline-block;
}
#question-container FORM INPUT,
#question-container FORM TEXTAREA,
#question-container FORM .emoji_answer {
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  border: none;
  border-bottom: 2px solid #0080FF;
  outline: none;
  padding: 12px 10px;
  width: calc(100% - 68px);
  height: 40px;
  display: inline-block;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
#question-container FORM .emoji_answer,
#question-container FORM .emojionearea.emojionearea-inline > .emojionearea-editor {
  font-size: 30px;
  line-height: 40px;
  height: 50px;
  color: #000000 !important;
}
#question-container FORM TEXTAREA {
  height: auto;
  color: #000000;
}
#question-container FORM .ta-wrap {
  position: relative;
  display: inline-block;
  width: calc(100% - 68px);
}
#question-container FORM .ta-wrap TEXTAREA {
  width: 100%;
  padding-right: 50px;
}
#question-container FORM .ta-wrap #input_wordcount {
  font-size: 13px;
  line-height: 40px;
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 1;
  font-weight: bold;
}
#question-container FORM BUTTON {
  outline: none;
  cursor: pointer;
}
#question-container FORM BUTTON.endbutton {
  font-size: 20px;
  font-weight: bold;
  line-height: 24px;
  text-align: center;
  color: white;
  display: block;
  width: 100% !important;
  margin: 50px 0 !important;
}
#question-container FORM BUTTON[disabled] {
  background: #CED2D7 !important;
}
#question-container FORM BUTTON:not([data-start]) {
  height: 48px;
  width: 48px;
  border: none;
  vertical-align: bottom;
  background: #0080FF;
  margin-left: 15px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
#question-container FORM BUTTON:not([data-start]):hover {
  background: #004d99;
}
#question-container FORM BUTTON:not([data-start]) .arrow-right {
  background: url('../media/arrow-right.svg');
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-top: 2px;
}
#question-container FORM BUTTON:not([data-start]).color-option {
  border: 0 inset rgba(0, 0, 0, 0.5);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  margin: 20px 10px;
  height: 59px !important;
  width: 59px !important;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
#question-container FORM BUTTON:not([data-start]).color-option.selected,
#question-container FORM BUTTON:not([data-start]).color-option:hover {
  border: 10px inset rgba(0, 0, 0, 0.4);
}
#question-container FORM BUTTON[data-start] {
  width: 100%;
  padding: 15px;
  background: white;
  border: 2px solid transparent;
  margin-top: 40px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
#question-container FORM BUTTON[data-start] .rgb {
  background: url('../media/rgb.svg');
}
#question-container FORM BUTTON[data-start] .cmyk {
  background: url('../media/cmyk.svg');
}
#question-container FORM BUTTON[data-start] .rgb,
#question-container FORM BUTTON[data-start] .cmyk {
  width: 100%;
  height: auto;
  min-height: 132px;
  display: block;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#question-container FORM BUTTON[data-start] .type-label {
  font-size: 14px;
  line-height: 17px;
  text-align: left !important;
  color: #0080FF;
  display: block;
  margin-top: 26px;
  text-transform: uppercase;
}
#question-container FORM BUTTON[data-start]:hover {
  border: 2px solid #0080FF;
}
#question-container A {
  font-weight: bold;
  font-size: 34px;
  line-height: 41px;
  display: block;
  margin-bottom: 40px;
}
.apart-heading .apart-logo,
.apart-heading H1 {
  margin-top: 23px;
}
.apart-heading H1,
.apart-heading .progress-numbers {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  line-height: 17px;
}
.apart-heading .apart-logo {
  background: url('../media/logo-apart.svg');
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  width: 34px;
  height: 37px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.apart-heading .progress-numbers {
  color: #0080FF;
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 40px;
  margin-top: 30px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.question_row,
.backend_login {
  height: calc(100vh - 150px);
  min-height: 350px;
}
@media (max-width: 720px) {
  .question_row,
  .backend_login {
    height: auto;
  }
}
.backend_login H1 {
  text-align: center;
  margin-bottom: 40px;
}
.backend_login FORM INPUT {
  border: none;
  border-bottom: 2px solid #0080FF;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  outline: none;
  color: #000000;
  margin-top: 30px;
}
.backend_login FORM INPUT:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-bottom: 2px solid #004d99;
  color: #000000;
}
.backend_login FORM LABEL {
  display: none;
}
.backend_login FORM BUTTON {
  display: block;
  margin: 30px auto;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  height: 48px;
  width: 48px;
  background: #0080FF;
  border-color: #0080FF;
}
.backend_login FORM BUTTON:hover,
.backend_login FORM BUTTON:focus,
.backend_login FORM BUTTON:active,
.backend_login FORM BUTTON:visited {
  background: #004d99 !important;
  border-color: #0080FF !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
.backend_login FORM BUTTON .arrow-right {
  background: url('../media/arrow-right.svg');
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-top: 2px;
}
.backend_login .error {
  text-align: center;
  color: #e91e63;
}
.backend {
  margin-top: 120px;
}
.backend A {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.backend A:hover {
  text-decoration: none;
  color: #004d99;
}
.emojionearea.emojionearea-inline > .emojionearea-button {
  top: 13px !important;
}
.button-start {
  display: block;
  margin: 30px auto;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  height: 48px;
  background: #0080FF;
  border-color: #0080FF;
  width: 100%;
  color: white;
  font-weight: bold;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  outline: none;
  cursor: pointer;
}
.button-start:hover,
.button-start:focus,
.button-start:active,
.button-start:visited {
  background: #004d99 !important;
  border-color: #0080FF !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}