/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
XXX 1.0 Normalize XXX
XXX 2.0 Accessibility XXX
XXX 3.0 Alignments XXX
XXX 4.0 Clearings XXX
XXX 5.0 Typography XXX
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links
11.0 Featured Image Hover
12.0 Navigation
13.0 Layout
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts
   13.5 Pages
   13.6 Footer
14.0 Comments
XXX 15.0 Widgets
XXX 16.0 Media
XXX 17.0 Customizer
XXX 18.0 SVGs Fallbacks
XXX 19.0 Media Queries
XXX 20.0 Print
--------------------------------------------------------------*/

/*--------------------------------------------------------------
6.0 Forms
--------------------------------------------------------------*/

label {
  color: #333;
  display: block;
  font-weight: 800;
  margin-bottom: 0.5em;
}

fieldset {
  margin-bottom: 1em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  background: #fff;
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  border: 1px solid #bbb;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: block;
  padding: 0.7em;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #222;
  border-color: #333;
}

select {
  border: 1px solid #bbb;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  height: 3em;
  max-width: 100%;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted #333;
}

input[type="radio"],
input[type="checkbox"] {
  margin-right: 0.5em;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
  font-weight: 400;
}

button,
input[type="button"],
input[type="submit"] {
  background-color: #222;
  border: 0;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  padding: 1em 2em;
  text-shadow: none;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

input + button,
input + input[type="button"],
input + input[type="submit"] {
  padding: 0.75em 2em;
}

button.secondary,
input[type="reset"],
input[type="button"].secondary,
input[type="reset"].secondary,
input[type="submit"].secondary {
  background-color: #ddd;
  color: #222;
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: #767676;
}

button.secondary:hover,
button.secondary:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"].secondary:hover,
input[type="button"].secondary:focus,
input[type="reset"].secondary:hover,
input[type="reset"].secondary:focus,
input[type="submit"].secondary:hover,
input[type="submit"].secondary:focus {
  background: #bbb;
}

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
  color: #333;
  font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

:-moz-placeholder {
  color: #333;
  font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

::-moz-placeholder {
  color: #333;
  font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
  opacity: 1;
  /* Since FF19 lowers the opacity of the placeholder by default */
}

:-ms-input-placeholder {
  color: #333;
  font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

/*--------------------------------------------------------------
14.0 Comments
--------------------------------------------------------------*/

#comments {
  clear: both;
  padding: 2em 0 0.5em;
}

.comments-title {
  font-size: 20px;
  font-size: 1.25rem;
  margin-bottom: 1.5em;
}

.comment-list,
.comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list li:before {
  display: none;
}

.comment-body {
  margin-left: 65px;
}

.comment-author {
  font-size: 16px;
  font-size: 1rem;
  margin-bottom: 0.4em;
  position: relative;
  z-index: 2;
}

.comment-author .avatar {
  height: 50px;
  left: -65px;
  position: absolute;
  width: 50px;
}

.comment-author .says {
  display: none;
}

.comment-meta {
  margin-bottom: 1.5em;
}

.comment-metadata {
  color: #767676;
  font-size: 10px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1818em;
  text-transform: uppercase;
}

.comment-metadata a {
  color: #767676;
}

.comment-metadata a.comment-edit-link {
  color: #222;
  margin-left: 1em;
}

.comment-body {
  color: #333;
  font-size: 14px;
  font-size: 0.875rem;
  margin-bottom: 4em;
}

.comment-reply-link {
  font-weight: 800;
  position: relative;
}

.comment-reply-link .icon {
  color: #222;
  left: -2em;
  height: 1em;
  position: absolute;
  top: 0;
  width: 1em;
}

.children .comment-author .avatar {
  /*height: 30px;*/
  /*left: -45px;*/
  /*width: 30px;*/
}

.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
  border: 1px solid #333;
  padding: 2px;
}

.no-comments,
.comment-awaiting-moderation {
  color: #767676;
  font-size: 14px;
  font-size: 0.875rem;
  font-style: italic;
}

.comments-pagination {
  margin: 2em 0 3em;
}

.form-submit {
  text-align: right;
}

.comment-form #wp-comment-cookies-consent {
  margin: 0 10px 0 0;
}

.comment-form .comment-form-cookies-consent label {
  display: inline;
}