/*Variables*/
/*General Styling*/
body {
  background-color: #F2F4F7;
  font-family: "Avenir Next", Arial, sans-serif;
  color: #042F96; }

/*Typography*/
h1 {
  font-size: 3em;
  font-weight: 700; }

p.lead {
  font-size: 1.3em;
  color: #666; }

/*Buttons*/
.btn-lg {
  border-radius: 5em;
  border-width: 2px; }

.btn-outline-primary {
  border-color: #135DEF;
  color: #135DEF; }

.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: #135DEF;
  border-color: #135DEF;
  color: #FFF; }

/*Mast*/
.mast {
  background: #F2F4F7; }
  .mast .hero {
    min-height: 85vh;
    padding: 4rem 0 1rem 0; }
    .mast .hero h1 {
      margin: 2rem auto 1rem auto; }
    .mast .hero .intro {
      flex-grow: 1; }
    .mast .hero .intro img {
      max-width: 100%; }
    .mast .hero .btn {
      margin: 2rem auto 0 auto; }
  .mast .jump .material-icons {
    font-size: 64px; }
  .mast .jump a {
    color: rgba(0, 0, 0, 0.3); }

.task {
  background: #F2F4F7;
  min-height: 100vh;
  padding: 4rem auto 6rem auto;
  margin-bottom: 5rem; }
  .task h1 {
    margin: 4rem auto 1rem auto; }
  .task p.lead {
    margin-bottom: 80px; }
  .task .items {
    display: flex;
    margin-top: 20px; }
  .task .items a {
    flex: 1;
    display: flex;
    box-sizing: border-box;
    border: 2px solid #ececec;
    background-color: #FFF;
    align-items: center;
    text-align: center;
    margin-right: 20px;
    justify-content: center;
    height: 200px;
    color: #666;
    transition: background-color 0.2s; }
  .task .items a:hover {
    background-color: #135DEF;
    color: #FFF;
    text-decoration: none;
    border-color: #135DEF; }
  .task .item:last-child {
    margin-right: 0; }
  .task .item a {
    display: block;
    width: 100%; }
  .task .item i {
    margin-bottom: 10px; }
  .task .item p {
    margin-bottom: 0; }
  .task .gallery {
    display: flex; }
  .task .template {
    flex: 1;
    margin-right: 20px;
    margin-bottom: 25px;
    background: #FFF;
    border: 1px solid #ECECEC; }
  .task .template:last-child {
    margin-right: none; }
  .task .template img {
    margin-bottom: 10px; }
  .task .template p {
    margin-bottom: 10px; }
  .task .template a {
    color: #888; }

/*Steps*/
.more-info {
  background-color: #135DEF;
  color: #FFF;
  padding-top: 4rem;
  padding-bottom: 2rem; }
  .more-info .steps {
    padding: 4rem 0;
    display: flex; }
  .more-info .step {
    padding: 1.5rem;
    border: 2px solid #FFF;
    flex: 1; }
  .more-info .step-progress {
    padding: 0 1rem; }
  .more-info .step p {
    margin-bottom: 0; }

@media (max-width: 576px) {
  .step-progress {
    margin: 20px 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); } }

#steps p.lead {
  color: #fff; }

/*Content*/
.form-group {
  margin-bottom: 20px; }

input.form-control {
  border-color: rgba(0, 0, 0, 0.1); }

.btn.outline {
  margin-top: 2rem;
  background-color: #135DEF;
  border-color: #135DEF; }

.btn.outline:hover {
  background-color: transparent;
  color: #135DEF; }

a.expander {
  color: #042F96; }

form.checklist .form-control-lg {
  margin-bottom: 50px; }

form.checklist .form-inline label {
  width: 15%;
  text-align: left;
  display: inline-block; }

form.checklist .form-inline input {
  width: 85% !important; }

form.checklist textarea::-webkit-input-placeholder, form.checklist input::-webkit-input-placeholder {
  color: #ccc; }

form.checklist textarea::-moz-placeholder, form.checklist input::-moz-placeholder {
  color: #ccc; }

form.checklist textarea:-ms-input-placeholder, form.checklist input:-ms-input-placeholder {
  color: #ccc; }

form.checklist textarea:-moz-placeholder, form.checklist input:-moz-placeholder {
  color: #ccc; }

form.resources .form-inline label {
  width: 25%;
  text-align: left;
  display: inline-block; }

form.resources .form-inline input, form.resources .form-inline textarea {
  width: 75% !important; }

form.resources .form-group:last-of-type {
  margin-bottom: 0; }

form.resources textarea::-webkit-input-placeholder, form.resources input::-webkit-input-placeholder {
  color: #ccc; }

form.resources textarea::-moz-placeholder, form.resources input::-moz-placeholder {
  color: #ccc; }

form.resources textarea:-ms-input-placeholder, form.resources input:-ms-input-placeholder {
  color: #ccc; }

form.resources textarea:-moz-placeholder, form.resources input:-moz-placeholder {
  color: #ccc; }

hr {
  margin-top: 20px;
  margin-bottom: 20px; }

.instruction {
  background: #fff;
  float: left;
  width: 100%;
  padding: 5% 10% 20px 10%;
  border-radius: 5px;
  margin-bottom: 40px;
  text-align: center; }
  .instruction h2 {
    font-size: 1.6rem;
    font-weight: 600; }
  .instruction hr {
    width: 100%;
    clear: both;
    float: left;
    margin-top: 0;
    margin-bottom: 40px; }
  .instruction p {
    color: #666; }
  .instruction p.lead {
    font-size: 1.1rem;
    margin-bottom: 0; }
  .instruction .detail {
    width: 100%; }
  .instruction .image {
    width: 100%;
    margin-top: 40px; }
    .instruction .image img {
      max-width: 100%;
      margin-bottom: 40px; }

/*Publish*/
.card {
  background: #135DEF;
  border: none;
  padding: 2rem;
  color: #fff; }

.card input {
  border: none; }

.card button {
  background: rgba(0, 0, 0, 0.3);
  border: none; }

/*Nav*/
nav {
  width: 100%;
  background: #135DEF;
  display: flex;
  position: fixed;
  bottom: 0; }
  nav .back a {
    padding: 1rem 3rem 1rem 2rem;
    display: block;
    color: rgba(255, 255, 255, 0.7); }
  nav .back a i {
    position: relative;
    top: 6.5px; }
  nav .stage {
    flex-grow: 1;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    text-align: right;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.7);
    padding-right: 3rem; }
  nav .next a {
    padding: 1rem 2rem 1rem 3rem;
    display: block;
    color: rgba(255, 255, 255, 0.7); }
  nav .next a i {
    position: relative;
    top: 6.5px; }

/*Editor*/
#editor .utility {
  background: #2c2f3d;
  padding: 12.5px; }
  #editor .utility a {
    color: #fff;
    position: relative;
    top: 8px; }
  #editor .utility a:hover {
    color: #2ca05a;
    text-decoration: none; }
  #editor .utility a.btn {
    top: 0; }
  #editor .utility ul li {
    margin-right: 20px; }

/*Popover*/
.popover {
  padding: 1rem;
  margin-top: 1rem;
  border-color: #ececec; }
  .popover h3.popover-header {
    text-align: center;
    background: #FFF;
    border-bottom: none; }
  .popover .popover-body {
    text-align: center; }

/* Modal */
.modal-dialog.full-modal {
  max-width: 80%;
  width: 80%; }

.full-modal .modal-content {
  background-color: #f5f7f9; }

.modal-dialog.med-modal {
  max-width: 40%;
  width: 40%; }
  .modal-dialog.med-modal .modal-header {
    border-bottom: none; }
  .modal-dialog.med-modal .modal-body {
    padding-top: 0;
    padding-bottom: 50px; }