/**
 * Wing v1.0.0-beta
 * Copyright 2016-2018 Kabir Shah
 * Released under the MIT License
 * http://usewing.ml
 */

/*=============================
  Base Styles
=============================*/
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  line-height: 1.6;
  color: #111;
  font-size: 1rem;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
/*=============================
  Grid
=============================*/
.container {
  width: 80%;
  max-width: 960px;
  margin: 0 auto;
}
.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}
.row:last-child {
  margin-bottom: 0;
}
.row .col {
  flex: 1 1 0px;
}
.row .col,
.row [class^="col-"],
.row [class*=" col-"] {
  padding-right: 10px;
}
.row .col:last-child,
.row [class^="col-"]:last-child,
.row [class*=" col-"]:last-child {
  padding-right: 0;
}
.row .col-1 {
  width: 8.333333333333332%;
}
.row .col-2 {
  width: 16.666666666666664%;
}
.row .col-3 {
  width: 25%;
}
.row .col-4 {
  width: 33.33333333333333%;
}
.row .col-5 {
  width: 41.66666666666667%;
}
.row .col-6 {
  width: 50%;
}
.row .col-7 {
  width: 58.333333333333336%;
}
.row .col-8 {
  width: 66.66666666666666%;
}
.row .col-9 {
  width: 75%;
}
.row .col-10 {
  width: 83.33333333333334%;
}
.row .col-11 {
  width: 91.66666666666666%;
}
.row .col-12 {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .row .col,
  .row [class^='col-'],
  .row [class*=" col-"] {
    flex: 0 0 100%;
    margin-bottom: 10px;
    padding: 0;
  }
  .row .col:last-child,
  .row [class^='col-']:last-child,
  .row [class*=" col-"]:last-child {
    margin-bottom: 0;
  }
}
/*=============================
  Typography
=============================*/
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}
h1 {
  font-size: 2.986rem;
  line-height: 1.2;
}
h2 {
  font-size: 2.488rem;
  line-height: 1.25;
}
h3 {
  font-size: 2.074rem;
  line-height: 1.3;
}
h4 {
  font-size: 1.728rem;
  line-height: 1.35;
}
h5 {
  font-size: 1.44rem;
  line-height: 1.5;
}
h6 {
  font-size: 1.2rem;
  line-height: 1.6;
}
p {
  font-size: 1rem;
}
@media (max-width: 768px) {
  h1 {
    font-size: 2.027rem;
  }
  h2 {
    font-size: 1.802rem;
  }
  h3 {
    font-size: 1.602rem;
  }
  h4 {
    font-size: 1.424rem;
  }
  h5 {
    font-size: 1.266rem;
  }
  h6 {
    font-size: 1.125rem;
  }
}
/*=============================
  Form
=============================*/
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=number],
input[type=file],
input[type=tel],
input[type=url],
select,
textarea {
  height: 45px;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 1rem;
  background: #f5f5f5;
  border: 1px solid #a7a7a7;
  border-radius: 2px;
  transition: all 0.2s ease;
}
input[type=text]:hover,
input[type=password]:hover,
input[type=email]:hover,
input[type=search]:hover,
input[type=number]:hover,
input[type=file]:hover,
input[type=tel]:hover,
input[type=url]:hover,
select:hover,
textarea:hover {
  border-color: #111;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=file]:focus,
input[type=tel]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #0062ff;
}
textarea {
  min-height: 70px;
}
/*=============================
  Button
=============================*/
button,
.button,
[type=submit] {
  height: 45px;
  margin-bottom: 10px;
  padding: 10px 30px;
  outline: none;
  text-decoration: none;
  color: #f5f5f5;
  font-size: 1rem;
  background: #111;
  border: 1px solid #111;
  border-radius: 2px;
  transition: all 0.2s ease;
}
button:hover,
.button:hover,
[type=submit]:hover,
button:focus,
.button:focus,
[type=submit]:focus {
  opacity: 0.9;
}
button:active,
.button:active,
[type=submit]:active {
  opacity: 0.7;
}
button[disabled],
.button[disabled],
[type=submit][disabled] {
  opacity: 0.8;
  cursor: not-allowed;
}
button.outline,
.button.outline,
[type=submit].outline {
  color: #111;
  background: none;
}
button.outline:hover,
.button.outline:hover,
[type=submit].outline:hover,
button.outline:focus,
.button.outline:focus,
[type=submit].outline:focus {
  color: #f5f5f5;
  background: #111;
}
/*=============================
  Link
=============================*/
a {
  color: #0062ff;
  transition: all 0.2s ease;
}
a:hover {
  cursor: pointer;
  color: #111;
}
/*=============================
  List
=============================*/
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 0;
  list-style-position: inside;
}
ul li,
ol li {
  margin-bottom: 10px;
}
ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-left: 10px;
}
/*=============================
  Image
=============================*/
img {
  margin-top: 0;
  margin-bottom: 10px;
}
/*=============================
  Box
=============================*/
.box {
  margin-bottom: 10px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  border: 1px solid #a7a7a7;
  border-radius: 2px;
}
/*=============================
  Navigation
=============================*/
.nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}
.nav .nav-item {
  margin-right: 10px;
}
.nav .nav-item:last-child {
  margin-right: 0;
}
/*=============================
  Card
=============================*/
.card {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  border: 1px solid #a7a7a7;
  border-radius: 2px;
}
.card .card-content {
  margin: 0;
  padding: 10px;
}
.card .card-image {
  display: block;
  height: auto;
  width: 100%;
}
/*=============================
  Code
=============================*/
pre {
  margin-top: 0;
  margin-bottom: 10px;
}
pre code {
  display: block;
  padding: 10px 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
code {
  padding: 2px;
  white-space: nowrap;
  background: #e7e7e7;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  font-family: "Consolas", "Monaco", "Menlo", monospace;
}
/*=============================
  Divider
=============================*/
hr {
  border-width: 0.5px;
  border-color: #a7a7a7;
}
/*=============================
  Utilities
=============================*/
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}
.position-fixed {
  position: fixed;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.size-full-height {
  min-height: 100vh;
}
.size-full-width {
  width: 100%;
}
.size-full {
  width: 100%;
  min-height: 100vh;
}
.hidden {
  display: none;
}
.flex {
  display: flex;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}
.direction-vertical {
  flex-direction: column;
}
.direction-horizontal {
  flex-direction: row;
}
.center {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.border-black {
  border: 1px solid #111;
}
.border-gray {
  border: 1px solid #a7a7a7;
}
.border-white {
  border: 1px solid #f5f5f5;
}
.border-blue {
  border: 1px solid #0062ff;
}
.border-red {
  border: 1px solid #ff1500;
}
.border-yellow {
  border: 1px solid #ffbf00;
}
.border-green {
  border: 1px solid #00b30f;
}
.border-rounded {
  border-radius: 2px;
}
.border-circle {
  border-radius: 2px;
}
.color-black {
  color: #111;
}
.color-gray {
  color: #a7a7a7;
}
.color-white {
  color: #f5f5f5;
}
.color-blue {
  color: #0062ff;
}
.color-red {
  color: #ff1500;
}
.color-yellow {
  color: #ffbf00;
}
.color-green {
  color: #00b30f;
}
.background-black {
  background-color: #111;
}
.background-gray {
  background-color: #a7a7a7;
}
.background-white {
  background-color: #f5f5f5;
}
.background-blue {
  background-color: #0062ff;
}
.background-red {
  background-color: #ff1500;
}
.background-yellow {
  background-color: #ffbf00;
}
.background-green {
  background-color: #00b30f;
}