/*
  Based on the Eric Meyer CSS Reset v2.0 (http://meyerweb.com/eric/tools/css/reset/)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: top;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
body {
  font-size: 15px;
  line-height: 1.4;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
}
.container {
  width: 960px;
  margin: 0 auto;
}
.main_section {
  float: left;
  width: 780px;
  margin-left: 90px;
  margin-right: 10px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 2em;
}
.feature {
  float: left;
  width: 300px;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 1.5em;
}
.popular_searches{
  margin-top: 0em;
}
.try {
  float: left;
  width: 620px;
  margin-left: 170px;
  margin-right: 10px;
  padding-left: 0px;
  padding-right: 0px;
}
.editor {
  float: left;
  width: 940px;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 0px;
  padding-right: 0px;
}
article {
  float: left;
  width: 620px;
  margin-left: 170px;
  margin-right: 10px;
  padding-left: 0px;
  padding-right: 0px;
}
body {
  color: #4b5358;
  font-family: 'Open Sans', sans-serif;
  font-weight: 200;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}
h1 {
  font-size: 4em;
  /*margin-top: 0.75em;*/
  margin-bottom: 0.25em;
  font-weight: 200;
}
h2 {
  font-size: 2em;
  margin-top: 1em;
  margin-bottom: 0.75em;
  font-weight: 200;
}
h2.split-header {
  clear: both;
  text-align: center;
  padding-top: 2em;
}
h2.split-header span {
  background: #dbf1ff;
  padding: 0 15px;
}
h2.split-header:before {
  content: '';
  display: block;
  width: 70%;
  max-width: 515px;
  border-top: 1px solid white;
  margin: 0 auto -0.75em;
}
h3 {
  font-size: 1.5em;
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  font-weight: 200;
}
h4 {
  font-size: 1.125em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 200;
  color: #96a0a6;
}
h5 {
  font-size: 1.125em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
h6 {
  font-size: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
p {
  margin: 1em 0;
}
p.subline {
  font-size: 1.5em;
  color: black; /*#7b878e;*/
  text-align: center;
}
a {
  color: #2686be;
  text-decoration: none;
  font-weight: 400;
}
a:hover {
  text-decoration: underline;
}
abbr,
acronym {
  border-bottom: 1px dotted;
  cursor: help;
}
address {
  font-size: 1em;
  font-style: italic;
}
blockquote {
  margin: 1em 0;
  padding: 0 0 0 2em;
}
cite {
  font-style: italic;
}
code {
  font-size: 1em;
  font-family: monospace;
  background: #eeeeee;
  border: 1px solid #e1e1e1;
  padding: 0.125em 0.25em;
  line-height: 150%;
}
em,
i {
  font-style: italic;
}
strong,
b {
  font-weight: bold;
}
hr {
  outline: none;
  border: none;
  margin: 1em 0;
  padding: 0;
  border-top: 1px solid #eeeeee;
}
ol,
ul {
  margin: 1em 0;
  padding: 0 0 0 2em;
}
ol li,
ul li {
  font-size: 1em;
  list-style-position: outside;
}
ul li {
  list-style: disc;
}
ol li {
  list-style: decimal;
}
form {
  margin: 1em 0;
}
dl {
  margin: 1em 0;
}
dl dt {
  font-weight: bold;
}
dl dd {
  margin: 0 0 0.5em;
}
table {
  width: 100%;
  margin: 1em 0;
}
table th {
  padding: 0.5em;
  border: 1px solid #eeeeee;
  background: #f4f4f4;
  text-align: left;
  font-weight: bold;
}
table td {
  padding: 0.5em;
  border: 1px solid #eeeeee;
}
form {
  display: block;
}
fieldset {
  display: block;
  margin: 1.25em 0;
  padding: 0;
}
legend {
  display: block;
  width: 100%;
  margin: 0 0 1em 0;
  font-weight: bold;
  border-bottom: 1px solid #eeeeee;
}
label {
  display: block;
  margin: 0 0 0.25em;
  font-weight: bold;
}
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="image"],
input[type="color"] {
  display: block;
  padding: 0.5em;
  margin: 0 0 0.625em;
  vertical-align: middle;
  border: 1px solid #eeeeee;
  outline: none;
  font-family: inherit;
  font-size: 1em;
  -webkit-appearance: none;
  border-radius: 0;
}
select:hover,
textarea:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="image"]:hover,
input[type="color"]:hover {
  border: 1px solid #e6e6e6;
}
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="image"]:focus,
input[type="color"]:focus {
  border: 1px solid #e1e1e1;
}
input[type="submit"],
input[type="button"] {
  display: block;
  border-radius: 0;
}
input[type="file"] {
  padding: 0.125em;
  margin: 0 0 0.625em;
  font-family: inherit;
  font-size: 1em;
  -webkit-appearance: none;
  border-radius: 0;
  line-height: 100%;
}
textarea {
  padding: 0.25em;
}
progress,
meter {
  padding: 0.125em;
  margin: 0 0 0.625em;
  font-family: inherit;
  font-size: 1em;
}
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none;
  padding: 0.625em 1.25em;
  margin: 0 0 0.625em;
  font-family: inherit;
  font-size: 1em;
  border: none;
  outline: none;
  background: #eeeeee;
  line-height: 100%;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.button:hover,input:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background: #e6e6e6;
  text-decoration: none;
}
.button:active,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  background: #dfdfdf;
}
.button.disabled,
button.disabled,
input[type="button"].disabled,
input[type="submit"].disabled,
input[type="reset"].disabled {
  background: #f4f4f4;
  color: #c8c8c8;
  cursor: default;
}
button.primary,
.button-primary {
  background: #2498a8;
  color: white;
}
button.primary:hover,
.button-primary:hover {
  background: #54abdd;
}
button.primary:active,
.button-primary:active {
  background: #3ea0d9;
}
button.primary.disabled,
.button-primary.disabled {
  background: #bedff2;
  color: #69b5e1;
  cursor: default;
}
button.secondary,
.button-secondary {
  background: #9d6ab4;
  color: white;
}
button.secondary:hover,
.button-secondary:hover {
  background: #9259ab;
}
button.secondary:active,
.button-secondary:active {
  background: #844f9c;
}
button.secondary.disabled,
.button-secondary.disabled {
  background: #caaed6;
  color: #9d6ab4;
  cursor: default;
}
ul[class*="menu-"] {
  margin: 1em 0;
  padding: 0;
}
ul[class*="menu-"] li {
  position: relative;
  list-style: none;
}
ul[class*="menu-"] li a {
  padding: 0.75em 1.25em;
  line-height: 100%;
  color: #4b5358;
  text-decoration: none;
}
ul[class*="menu-"] li:hover > a,
ul[class*="menu-"] li a:hover,
ul[class*="menu-"] li a.selected,
ul[class*="menu-"] li.selected a {
  background: #eeeeee;
}
ul[class*="menu-"] li a:active,
ul[class*="menu-"] li a.selected:hover,
ul[class*="menu-"] li.selected a:hover {
  background: #e6e6e6;
}
.menu-primary li {
  display: inline;
}
.menu-primary li a {
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.menu-primary li ul {
  display: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 2.25em;
  left: 0;
  border: 1px solid #eeeeee;
  background: white;
  z-index: 1000;
}
.menu-primary li ul li {
  display: block;
}
.menu-primary li ul li a {
  display: block;
  white-space: nowrap;
}
.menu-primary li:hover ul,
.menu-primary li ul:hover {
  display: inline;
}
.menu-secondary {
  border: 1px solid #eeeeee;
}
.menu-secondary li {
  display: block;
}
.menu-secondary li a {
  display: block;
}
ul.menu-primary.site-menu li a {
  background: white;
  padding: 0.75em 1em;
}
ul.menu-primary.site-menu li:hover > a,
ul.menu-primary.site-menu li a:hover,
ul.menu-primary.site-menu li a.selected,
ul.menu-primary.site-menu li.selected a {
  color: #69b5e1;
  background: white;
}
ul.menu-primary.site-menu li a:active,
ul.menu-primary.site-menu li a.selected:hover,
ul.menu-primary.site-menu li.selected a:hover {
  color: #5cafde;
  background: white;
}
.clear {
  clear: both;
  height: 0;
}
.masthead {
  margin-bottom: -5.5em;
}
.masthead nav {
  text-align: center;
}
.masthead nav ul:before {
  display: block;
  border-top: 1px solid #eeeeee;
  width: 70%;
  content: '';
  margin: 30px auto -20px;
}
.main_section {
  text-align: center;
  padding: 2.5% 0 0;
  margin-top: 5.8em;
}
.main_section .slogan {
  font-size: 2em;
  line-height: 1.375;
  margin: 1em 0 1em;
}
.main_section p {
  margin: 0 0 0.5em;
  font-size: 0.95em;
}
.download-button {
  font-size: 1.25em;
  font-weight: 600;
  border-radius: 5px;
  padding: 0.625em 2em;
  box-shadow: 0 2px 0 #4ba6db;
}
.download-button.grey {
  background: #4b5358;
  box-shadow: 0 2px 0 #3b4145;
}
.download-button.grey:hover {
  background: #444b50;
}
.download-button.grey:active {
  background: #3d4347;
}
.logo {
  border-top: 5px solid #69b5e1;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.download-meta {
  color: #96a0a6;
}
.download-meta a {
  color: #626d74;
  font-weight: 400;
}
.download-meta a:hover {
  color: #69b5e1;
  text-decoration: none;
}
main {
  background: #dbf1ff;
  width: 100%;
  clear: both;
  /*padding: 2em 0 5em;*/
  overflow: hidden;
}
.try {
  text-align: center;
}
.arrow {
  width: 100%;
  padding-top: 100%;
  height: auto;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #eaf2f8;
  position: absolute;
  display: none;
}
.arrow-left {
  left: -100%;
  top: -68%;
}
.arrow-right {
  right: -100%;
  top: -68%;
}
.csstransforms .arrow {
  display: block;
}
.editor {
  border-radius: 5px;
  background: white;
  height: 400px;
  position: relative;
  margin-top: 4em;
}
.editor .pane {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.editor .pane.layout {
  left: 0;
  border-right: 1px solid #7d858d;
}
.editor .pane.grid {
  right: 0;
  border-left: 1px solid #7d858d;
}
.editor .label {
  position: absolute;
  top: -1.9em;
  left: 2em;
}
.editor .label span {
  background: white;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 4px 15px;
  font-weight: 700;
  font-size: 0.9em;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.editor .label em {
  font-size: 0.825em;
  padding: 2px 10px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  color: #626d74;
}
.editor .tabs {
  position: absolute;
  top: -2em;
  right: 2em;
}
.editor .tabs a {
  color: white;
  background: #656c72;
  display: inline-block;
  zoom: 1;
  *display: inline;
  padding: 7px 10px 5px;
  font-size: 1.25em;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  min-width: 20px;
  text-align: center;
}
.editor .tabs a.active,
.editor .tabs a.active:hover {
  background: #1D1F21;
}
.editor .tabs a:hover {
  background: #4d5257;
}
.editor .code-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 15px;
}
.editor .layout .code-editor {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.editor .grid .code-editor {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.components {
  margin-bottom: 2em;
}
.component {
  background: white;
  padding: 1em;
  margin: 0 0 0.5em;
  border-radius: 5px;
}
.component h3 {
  margin-top: 0;
  margin-bottom: 1em;
}
.get-started {
  text-align: left;
}
.get-started .button {
  margin-top: 1em;
}
footer {
  background: #4b5358;
  padding: 1em 0;
  color: white;
  text-align: center;
}
footer a {
  color: #b3b3b3;
}



@media (max-width: 767px) {
  body {
    font-size: 16px;
    line-height: 1.4;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.4;
  }
  .container {
    width: 100%;
    margin: 0 auto;
  }
  .main_section {
    float: left;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 0%;
    padding-right: 0%;
  }
  .feature {
    float: left;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 0%;
    padding-right: 0%;
  }
  .try {
    float: left;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 0%;
    padding-right: 0%;
  }
  .editor {
    float: left;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 0%;
    padding-right: 0%;
  }
  article {
    float: left;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 0%;
    padding-right: 0%;
  }
  .csstransforms .arrow {
    display: none;
  }
  .editor .pane {
    width: 100%;
  }
  .editor .pane.layout {
    display: none;
  }
  .editor .pane.grid {
    border-radius: 5px;
  }
  .editor .pane .label {
    display: none;
  }
  .editor .pane .tabs {
    left: 10px;
    right: auto;
  }
}

@media (min-width: 768px) and (max-width: 959px) {
  body {
    font-size: 14px;
    line-height: 1.4;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.4;
  }
  .container {
    width: 768px;
    margin: 0 auto;
  }
  .main_section {
    float: left;
    width: 624px;
    margin-left: 72px;
    margin-right: 8px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .feature {
    float: left;
    width: 240px;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .try {
    float: left;
    width: 496px;
    margin-left: 136px;
    margin-right: 8px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .editor {
    float: left;
    width: 752px;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 0px;
    padding-right: 0px;
  }
  article {
    float: left;
    width: 496px;
    margin-left: 136px;
    margin-right: 8px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .arrow-left {
    top: -45%;
  }
  .arrow-right {
    top: -45%;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 15px;
    line-height: 1.4;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.4;
  }
  .container {
    width: 1140px;
    margin: 0 auto;
  }
  .main_section {
    float: left;
    width: 921.5px;
    margin-left: 109.25px;
    margin-right: 14.25px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .feature {
    float: left;
    width: 351.5px;
    margin-left: 14.25px;
    margin-right: 14.25px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 1.5em;
  }
  .try {
    float: left;
    width: 731.5px;
    margin-left: 204.25px;
    margin-right: 14.25px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .editor {
    float: left;
    width: 1111.5px;
    margin-left: 14.25px;
    margin-right: 14.25px;
    padding-left: 0px;
    padding-right: 0px;
  }
  article {
    float: left;
    width: 731.5px;
    margin-left: 204.25px;
    margin-right: 14.25px;
    padding-left: 0px;
    padding-right: 0px;
  }
  body {
    /* color: #4b5358; */
    color: #2f4455ff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.4;
    font-family: 'Open Sans', sans-serif;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
  }
  h1 {
    font-size: 4em;
    margin-top: 0.75em;
    margin-bottom: 0.25em;
    font-weight: 200;
  }
  h2 {
    font-size: 2em;
    margin-top: 1em;
    margin-bottom: 0.75em;
    font-weight: 200;
  }
  h2.split-header {
    clear: both;
    text-align: center;
    /*padding-top: 2em;*/
  }
  h2.split-header span {
    background: #dbf1ff;
    padding: 0 15px;
  }
  h2.split-header:before {
    content: '';
    display: block;
    width: 70%;
    max-width: 515px;
    border-top: 1px solid white;
    margin: 0 auto -0.75em;
  }
  h3 {
    font-size: 1.25em;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    font-weight: 200;
  }
  h4 {
    font-size: 1.125em;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 200;
    color: #96a0a6;
  }
  h5 {
    font-size: 1.125em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  h6 {
    font-size: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  p {
    margin: 1em 0;
  }
  p.subline {
    font-size: 1.5em;
    /* color: #7b878e; */
    text-align: center;
  }
  a {
    color: #2686be;
    text-decoration: none;
    font-weight: 400;
  }
  a:hover {
    text-decoration: underline;
  }
  abbr,
  acronym {
    border-bottom: 1px dotted;
    cursor: help;
  }
  address {
    font-size: 1em;
    font-style: italic;
  }
  blockquote {
    margin: 1em 0;
    padding: 0 0 0 2em;
  }
  cite {
    font-style: italic;
  }
  code {
    font-size: 1em;
    font-family: monospace;
    background: #eeeeee;
    border: 1px solid #e1e1e1;
    padding: 0.125em 0.25em;
    line-height: 150%;
  }
  em,
  i {
    font-style: italic;
  }
  strong,
  b {
    font-weight: bold;
  }
  hr {
    outline: none;
    border: none;
    margin: 1em 0;
    padding: 0;
    border-top: 1px solid #eeeeee;
  }
  ol,
  ul {
    margin: 1em 0;
    padding: 0 0 0 2em;
  }
  ol li,
  ul li {
    font-size: 1em;
    list-style-position: outside;
  }
  ul li {
    list-style: disc;
  }
  ol li {
    list-style: decimal;
  }
  form {
    margin: 1em 0;
  }
  dl {
    margin: 1em 0;
  }
  dl dt {
    font-weight: bold;
  }
  dl dd {
    margin: 0 0 0.5em;
  }
  table {
    width: 100%;
    margin: 1em 0;
  }
  table th {
    padding: 0.5em;
    border: 1px solid #eeeeee;
    background: #f4f4f4;
    text-align: left;
    font-weight: bold;
  }
  table td {
    padding: 0.5em;
    border: 1px solid #eeeeee;
  }
  .arrow-left {
    top: -90%;
  }
  .arrow-right {
    top: -90%;
  }
}


input.submissionfield {
  width: 100%;
  height: 2em;
  border: 1px solid #999999;
  padding: 5px;
  font-size: 2.125em;

}
p.response {

  /* font-size: 1.5em; */
  font-size: 1.4em;
  line-height: 1.375;
  margin: 1em 0 2em;
  text-align: justify;
  /* font-family:'Caudex', serif; */
  /* font-family: 'Cutive Mono', monospace; */
  font-family: 'Cormorant', serif;
  /* font-family: 'Cormorant Garamond', serif; */

  /* border: 2px solid black; */
  /* padding: 5px; */
  /* font-size: 2.125em; */
  background: #dbf1ff;
  -webkit-appearance: none;
  padding: 0.625em 5%;
  margin: 0 0 0.625em;
  color: white;
  color: #dbf1ff;
  /* font-family: 'Aldrich', sans-serif;
  vertical-align: middle;
  display: inline-table;
  display: table-row;
  display: inline-block; */
  min-width: 75%;
}

.key_button {
  font-size: 1em;
  font-weight: 600;
  border-radius: 5px;
  padding: 0.625em 2em;
  background: #dbf1ff;
  /* color: #2f4455; */
}
.key_button:hover{
    /* background: #1f8693; */
    background: #dbf1ff;
    box-shadow: 0 2px 0 #4ba6db;
}

p.loading {
  color: #69b5e1;
}


div.loading {
  display:none;
}
div.results {
  display:none;
}
.main_section .description {
  font-size: 1.5em;
  line-height: 1.375;
  margin: 1em 0 2em;
  text-align: justify;
  /* font-family:'Caudex', serif; */
  /* font-family: 'Cutive Mono', monospace; */
  /* font-family: 'Cormorant', serif; */
  font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
   /* "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter"; */
   border: solid #2f4455ff;
   border: solid black;
   border-width: 2px;
   font-weight: 300;
   /* font-style: italic; */

   color:white;


   /* border-radius: 15px; */
   border-radius: 0px;
    /* background: #73AD21; */
    padding: 20px;
    /* text-align:center; */

}

.namo {
  font-style: italic;
}
/*.namo*/

.colorme{

color: #2f4455ff;
color: #828E99;
color: black;


-moz-transition: color 1s cubic-bezier(1,1,1,1);
-moz-transition-delay: 0s;
-ms-transition: color 1s cubic-bezier(1,1,1,1);
-ms-transition-delay: 0s;
-o-transition: color 1s cubic-bezier(1,1,1,1);
-o-transition-delay: 0s;

-webkit-transition: color 1s cubic-bezier(1,1,1,1);
-webkit-transition-delay: 0s;

transition: color 1s cubic-bezier(1,1,1,1);

transition: color 1s cubic-bezier(1,1,1,1);
transition-delay: 0s;
}

#about{
  text-align: left;
}

.trending{
  font-size: 1.5em;
}

.column {
  float: left;
  width: 10%;
  vertical-align: middle;
}

.main-column {
  float: left;
  width: 80%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  height: 3em;
}

.grapes{
  vertical-align: middle;
}
.grapes img{
    height:.9em;
    vertical-align: middle;
}
#joke{
  color: #2f4455;
  color: #828E99;
  /* vertical-align: middle; */
  font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
  /* font-family: 'Coming Soon', cursive; */

  display : flex;
  align-items : center;
  font-size: 1em;
}

.thanks{
  white-space:nowrap;
}