.questions {
  background: #8dec98;
}
.subjects {
  background: #a2dbf1;
}
.verbs {
  background: #fbbc5d;
}
.objects {
  background: #f0a2f1;
}
.places {
  background: #c0a2f1;
}
.draggable {
    height: 35px;
    line-height: 30px;
    border-radius: 7px;
    border: 2px solid white;
    padding-left: 4px;
    padding-right: 5px;
    padding-top: 0px;
    margin: auto;
    float: left;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
}
.draggable:hover {
    box-shadow: 0px 0px 3px;
}
.draggable.is-pointer-down {
   box-shadow: 0px 1px 3px 1px #888888;
}
.draggable.is-dragging { opacity: 0.7; }

hr.style18 { 
    margin-bottom: 50px;
    margin-top: 12px;
    height: 40px;
    border-style: solid;
    border-color: #8c8b8b;
    border-width: 2px 0 0 0;
    border-radius: 20px;
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 0px 0; 
  border-radius: 20px; 
}
hr.style19 { 
	height: 30px;
    border-style: solid;
    border-color: #8c8b8b;
    border-width: 0px 0px 0px 0px;
    border-radius: 20px;
    border-bottom: 2px solid #8c8b8b;
} 
hr.style19:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}

/* MOVING SENTENCE ------------------------------------ */
.rw-wrapper{
    width: 100%;
  height: 50px;
    min-height: 25px !important;
    position: relative;
  display:flex;
  font-size: 18px;
    margin: 0px auto;
  margin-top: 5px;
    margin-bottom: 15px;
  padding: 10px 7px 10px 7px;
    overflow: hidden !important;
    text-align: center;
    background-color: #f5f5f58c;
    border-radius: 6px;
    border: 1px solid #FFC107;
    box-shadow: 0px 1px 1px 0px #a27c35;
}
.rw-words{
    display: inline-block;
    padding: 0px 7px 0px 7px;
    margin-top: -6px;
}
.rw-words-1 span{
    max-width: 0;
    display: inline-block;
    opacity: 0;
    height: 25px;
    margin-top: 1px;
    overflow: hidden !important;
    color: #cc0202;
    animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
    animation-delay: 3s;
    color: #cc0202;
}
.rw-words-1 span:nth-child(3) {
    animation-delay: 6s; 
    color: #cc0202; 
}
.rw-words-1 span:nth-child(4) {
    animation-delay: 9s; 
    color: #cc0202;
}
.rw-words-1 span:nth-child(5) {
    animation-delay: 12s; 
    color: #cc0202;
}
.rw-words-1 span:nth-child(6) {
    animation-delay: 15s; 
    color: #cc0202;
}
@keyframes rotateWord {
    2% { opacity: 0; max-width: 0; transform: translate(0%,-30%); }
    5% { opacity: 1; max-width: 200px; transform: translateY(5px);}
    17% { opacity: 1; max-width: 200px; transform: translateY(5px); }
    20% { opacity: 0; max-width: 0; transform: translate(0%,38%); }
    80% { opacity: 0; max-width: 0; }
}