.job_nav {
    border-bottom: 1px solid rgba(139, 148, 168, 0.1);
    width: 100%;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    padding: 8px 0;
}

.job_nav-group {
    display: flex;
    flex-wrap: wrap;
}

.mat-button.mat-button--job,
.mat-button.mat-button--job:hover {
    margin: 8px 0;
}

.mat-button.mat-button--job-left,
.mat-button.mat-button--job-left:hover {
    margin: 8px 0 8px 8px;
}

.mat-button.mat-button--position-status,
.mat-button.mat-button--position-status:hover {
    transform: none;
}

@media (max-width: 425px) {
    .mat-button_position-status-wide {
        display: none;
    }
}

.mat-button.mat-button--job.mat-button--job-static,
.mat-button.mat-button--job.mat-button--job-static:hover {
    background: none;
    color: #8b94a8;
    pointer-events: none;
    cursor: default;
    transform: translateY(0);
}

.job_header {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    padding: 32px 0 0 0;
    box-shadow: 0 3px 7px rgba(51, 74, 109, 0.16);
}

.job_company {
    display: flex;
    align-items: center;
}

.job_dates {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

@media (max-width: 425px) {
    .job_dates {
        display: none;
    }
}

.job_company-avatar {
    margin: 0 8px 0 0;
    border-radius: 50%;
    height: 32px;
    width: 32px;
    transition: .3s ease all;
}

.job_company:hover .job_company-avatar {
    opacity: .75;
}

.job_company.job_company--no-hover:hover .job_company-avatar {
    opacity: 1;
}

.job_company-cont {
    display: flex;
    flex-direction: column;
}

.job_company-name {
    color: #004579;
    font-size: 18px;
    line-height: 1.2em;
    font-weight: 600;
    transition: all .3s ease;
}

.job_company:hover .job_company-name {
    color: #007ddd;
}

.job_company.job_company--no-hover:hover .job_company-name {
    color: #004579;
}

.job_company-view-all {
    color: #8b94a8;
    font-size: 12px;
    line-height: 1;
    transition: all .3s ease;
}

.job_company:hover .job_company-view-all {
    color: #007ddd;
}

.job_body {
    width: 100%;
    display: flex;
    padding: 40px 0 56px;
}

.job_info {
    color: #8b94a8;
    width: 100%;
    font-size: 18px;
    margin: 0 0 16px 0;
    font-weight: 500;
}

.job_info--modal {
    width: auto;
    margin: 0 24px 32px 0;
}

.mat-tag--job-skill {
    margin: 4px 8px 4px 0;
    font-size: 14px;
    padding: 6px 12px;
}

a.mat-tag:hover {
    cursor: text;
    background: rgba(139, 148, 169, 0.12);
    color: #8b94a9;
}

.job_meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.job_meta-avatar {
    margin: 0 8px 0 0;
    border-radius: 50%;
    height: 24px;
    width: 24px;
}

.job_meta-label {
    font-size: 12px;
    width: 100%;
    margin: 0 0 2px 0;
}

.job_meta .icon {
    margin: 0 8px 0 0;
}

.job_tag-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.job_tabs {
    margin: 24px 0 0 0;
    width: 100%;
    display: flex;
}

.job_tabs li {
    display: flex;
}

.job_tab {
    color: #8b94a8;
    font-size: 16px;
    padding: 16px 12px;
    font-weight: 500;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}

.job_tab:before {
    position: absolute;
    cursor: pointer;
    bottom: 0;
    left: 0;
    transform: translateY(5px);
    content: "";
    height: 5px;
    width: 100%;
    color: rgba(0, 125, 221, 0);
    transition: all .3s ease;
}

.job_tab.active,
.job_tab:hover {
    color: #007ddd;
}

.job_tab.active:before,
.job_tab:hover:before {
    background: #007ddd;
    transform: translateY(0);
}

@media (max-width: 1080px) {
    .job_body,
    .job_header,
    .job_nav {
        padding-left: 24px;
        padding-right: 24px;
    }
}

h1.mat-h1--job-title {
    padding: 40px 0 24px;
    width: 100%;
}

.mat-input--job-title {
    margin: 32px 0 16px;
    width: 100%;
}

.mat-input--job-title .mat-input_element {
    font-size: 40px;
    font-family: "Sentinel A", "Sentinel B", "Besley", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.2em;
    height: auto;
    font-weight: 600;
}

.mat-input--job-title .mat-input_element::-moz-placeholder {
    font-size: 40px;
}

.mat-input--job-title .mat-input_element:-ms-input-placeholder {
    font-size: 40px;
}

.mat-input--job-title .mat-input_element::placeholder {
    font-size: 40px;
}

.mat-input--job-info {
    cursor: pointer;
    margin-bottom: 16px;
    width: 400px;
    max-width: 100%;
}

.mat-input--job-info .mat-input_element,
.mat-input--job-info .mat-input_prefix {
    font-size: 18px;
    height: 43px;
    color: #8b94a8;
    display: flex;
    align-items: center;
}

.mat-input--job-info .mat-input_element::-moz-placeholder {
    font-size: 18px;
}

.mat-input--job-info .mat-input_element:-ms-input-placeholder {
    font-size: 18px;
}

.mat-input--job-info .mat-input_element::placeholder {
    font-size: 18px;
}

.mat-input--job-info .mat-input_prefix .icon {
    top: -3px;
    position: relative;
}

.mat-input--job-info .mat-input_sufix {
    font-size: 18px;
    color: #8b94a8;
    padding: 0 0 5px 0;
}

.mat-input--job-info:hover .mat-input_sufix {
    color: #007ddd;
    opacity: 1;
}


/* Description */

p.mat-p--job-description,
p.mat-p--job-description * {
    background: none !important;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.6em !important;
    color: #313a44 !important;
    text-align: left !important;
}

p.mat-p--job-description p {
    margin: 0 0 1em 0;
}

p.mat-p--job-description ol {
    margin: 0 0 1em 24px;
}

p.mat-p--job-description ul {
    list-style: initial;
    margin: 0 0 1em 24px;
}

.mat-input--job-description {
    width: 100%;
}

.mat-input--job-description .mat-input_label {
    font-size: 14px;
}

.mat-input--job-description .mat-input_element {
    color: #8b94a8;
    overflow-y: auto;
    font-size: 18px;
}

.mat-input--job-description .mce-tinymce {
    margin: 16px 0 0;
}

.mat-input--job-description .mce-panel {
    background: none;
    border-color: rgba(139, 148, 168, 0.24);
    border-radius: 3px;
}

.mat-input--job-description .mce-toolbar-grp {
    padding: 4px;
}

.mat-input--job-description .mce-flow-layout-item {
    margin: 0;
}

.mat-input--job-description .mce-btn {
    border: none;
    transition: all .3s ease;
}

.mat-input--job-description .mce-btn:hover,
.mat-input--job-description .mce-btn:focus {
    color: #8b94a8;
    background-color: rgba(139, 148, 168, 0.48);
}

.mat-input--job-description .mce-btn button {
    background: rgba(139, 148, 168, 0.08);
    transition: all .3s ease;
}

.mat-input--job-description .mce-btn.mce-active,
.mce-btn.mce-active:hover {
    background: #8b94a8;
    color: #fff;
    border-radius: 3px;
}

.mat-input--job-description .mce-btn i {
    color: #8b94a8;
}

.mat-input--job-description .mce-btn.mce-active i,
.mat-input--job-description .mce-btn.mce-active:hover i {
    color: #fff;
}

.mat-input--job-description .mce-btn-group:not(:first-child) {
    border-left: 1px solid rgba(139, 148, 168, 0.08);
    padding-left: 6px;
    margin-left: 6px;
}


/* End description */


/* Jobs profile tab */

.jobs-tab {
    display: flex;
    width: 100%;
    max-width: 100%;
    padding: 32px 16px;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.jobs-tab--gq3 {
    padding: 32px 0;
}

.jobs-tab_sidebar {
    width: 224px;
    flex-shrink: 0;
    margin-right: 32px;
}

.jobs-tab_body {
    width: calc(100% - 224px - 32px);
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
}

.jobs-tab_section-label {
    color: #8B94A9;
    display: block;
    font-size: 14px;
    width: 100%;
    font-weight: 600;
    margin: 0 0 16px;
    line-height: 1.2em;
    transition: all .3s ease;
}

.jobs-tab_section-label-private {
    opacity: .5;
}

.mat-card--new-job,
.mat-card--new-job:hover {
    margin: 0 0 24px;
    cursor: default;
}

.mat-card_body--post-job {
    display: flex;
    justify-content: center;
    padding: 40px;
}

.mat-card--jobs-tab-nav {
    margin-bottom: 24px;
}

.mat-button--claim-jobs {
    margin: 8px 16px 0 0;
}

@media (max-width: 800px) {
    .jobs-tab {
        flex-wrap: wrap;
    }
    .jobs-tab_sidebar,
    .jobs-tab_body {
        width: 100%;
        margin: 0 0 24px;
    }
}


/* End Jobs profile tab */


/* Partner */

.mat-card_body--partner-jobs {
    display: flex;
    flex-wrap: wrap;
    padding: 56px;
    cursor: default;
}

.mat-p--partner-jobs {
    width: 100%;
    padding: 16px 0 16px;
}

.mat-button--partner-jobs {
    margin: 8px 16px 0 0;
}

.mat-card_partner-jobs-placeholder {
    height: 16px;
    background: rgba(139, 148, 168, 0.12);
    background: linear-gradient(270deg, #f2f3f4, #d9dcde);
    background-size: 1000% 1000%;
    -webkit-animation: placeholderFlow 5s ease infinite;
            animation: placeholderFlow 5s ease infinite;
    transition: .3s ease all;
    border-radius: 3px;
    max-width: 88%;
    width: 600px;
    margin: 0 0 16px 0;
}

@-webkit-keyframes placeholderFlow {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@keyframes placeholderFlow {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

.mat-card_partner-jobs-placeholder:last-of-type {
    margin: 0;
}

.mat-card_partner-jobs-placeholder--title {
    height: 24px;
    max-width: 240px;
}

.mat-card_partner-jobs-placeholder--button,
.mat-card_partner-jobs-placeholder--button:last-of-type {
    height: 32px;
    max-width: 88px;
    align-self: center;
    margin: 16px 0;
}

.mat-card_partner-jobs-placeholder--short {
    max-width: 50%;
}

@media (max-width: 800px) {
    .mat-card_body--partner-jobs {
        padding: 24px;
    }
    .jobs-tab_sidebar--fake {
        display: none;
    }
}


/* End partner */


/* Job cards */

.mat-card--job {
    width: 100%;
    flex-basis: 100%;
    margin: 0 0 16px 0;
}

.mat-card_body--job {
    display: flex;
    justify-content: space-between;
}

.mat-card_header--job {
    flex-wrap: wrap;
    max-width: calc(100% - 120px);
}

@media (max-width: 800px) {
    .mat-card_body--job {
        flex-wrap: wrap;
    }
    .mat-card_header--job {
        max-width: 100%;
    }
    .mat-card_actions--job {
        width: 100%;
        padding: 24px 0 0;
    }
}

.mat-card_meta-item--job {
    font-size: 14px;
}

@media (max-width: 550px) {
    .mat-card_actions--applicant {
        margin-top: 24px;
    }
}

.mat-card_applicants {
    align-items: center;
    display: flex;
    margin: 16px 0 0;
}

.mat-card_main-meta--applicants {
    display: flex;
    align-items: center;
}

.mat-meta--applicants {
    order: 2;
}

.connection-avatar--applicants,
* .connection-avatar.connection-avatar--applicants:last-of-type {
    margin-right: 6px;
    margin-left: -11px;
}

* .connection-avatar.connection-avatar--applicants:first-of-type {
    margin-left: -4px;
}


/* Profile overview Job card overides */

.job-block .mat-card--job {
    float: left;
    width: calc(100% - 32px);
    margin: 8px 16px;
}

.job-block .mat-card_body--job {
    flex-wrap: wrap;
}

.job-block .mat-card_header--job {
    max-width: 100%;
}

.job-block .mat-card_actions--job {
    width: 100%;
    padding: 24px 0 0;
}


/* End Job cards */


/* Applicant */

.mat-card--application {
    margin: 0 0 24px 0;
}

.mat-card_body--application {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.mat-card_header--application {
    flex-wrap: wrap;
    width: calc(100% - 260px);
}

@media (max-width: 1096px) {
    .mat-card_header--application {
        flex-wrap: wrap;
        width: 100%;
    }
}

.mat-input--cover-letter {
    margin: 0 0 16px;
}

.mat-card_meta--application {
    width: 100%;
}

.mat-card_pro-header.mat-card_pro-header--application {
    width: calc(100% - 260px);
}

.mat-card_actions--application {
    width: 250px;
}

.mat-button--application {
    margin: 0 0 0 16px;
}

.mat-card_meta-item--application {
    font-size: 14px;
}

.mat-p--application {
    width: 100%;
    margin: 16px 0 0;
    white-space: pre-line;
}

@media (max-width: 1096px) {
    .mat-card_pro-header.mat-card_pro-header--application {
        width: 100%;
        max-width: 100%;
    }
    .mat-card_actions--application {
        width: 100%;
        margin: 8px 0 0 0;
    }
    .mat-button--application {
        margin: 16px 16px 0 0;
    }
}

.mat-card--nested-job {
    margin: 24px 0 0;
}


/* End applicant */


/* Job onboarding */

.job-onboard_row {
    width: 100%;
    color: #8b94a8;
    background: rgba(139, 148, 168, 0.16);
    padding: 16px;
    border-radius: 3px;
    margin: 12px 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: .3s ease all;
}

.job-onboard_row:hover {
    box-shadow: 0 2px 4px rgba(51, 74, 109, .24);
    transform: translateY(-1px);
}

.mat-meta--job-onboard {
    width: 100%;
    margin: 0 0 4px 0;
}

.mat-meta--job-onboard:first-of-type {
    margin-top: 32px;
}

.icon--job-onboard {
    font-size: 36px;
    opacity: .5;
    margin-right: 16px;
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 600px) {
    .icon--job-onboard {
        font-size: 24px;
    }
}


/* End job onboarding */


/* GQ3 profile overview */

.profile_section--jobs .mat-card_body--job {
    flex-wrap: wrap;
}

.profile_section--jobs .mat-card_header--job {
    width: 100%;
    max-width: 100%;
}

.profile_section--jobs .mat-card_meta-item--job {
    margin-top: 16px;
}

.profile_section--jobs .mat-card_actions--job {
    padding: 24px 0 0 0;
}


/* End GQ3 profile overview */
@override https: //justin.www.guildquality.com/css/build/crew/app.css?53
*/ @import "imports/variables";
/* apply a natural box layout model to all elements, but allowing components to change */
/* overlay was defaulting to 1000 z-index and bootstrap fixed nav was 1030 */
.fp__overlay {
  z-index: 9999999999 !important;
}

::-webkit-input-placeholder {
  color: #828a9f;
}

::-webkit-input-placeholder:hover,
::-webkit-input-placeholder:active,
::-webkit-input-placeholder:focus {
  color: #007ddd !important;
}

:-moz-placeholder {
  /* older Firefox*/
  color: #828a9f;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #828a9f;
}

:-ms-input-placeholder {
  color: #828a9f;
}

::-moz-selection {
  background: rgba(69, 75, 99, 0.2);
}

::selection {
  background: rgba(69, 75, 99, 0.2);
}

::-moz-selection {
  background: rgba(69, 75, 99, 0.2);
}

a {
  color: #007ddd;
  cursor: pointer;
}

a:hover {
  color: #0184d6;
  text-decoration: none;
}

.cordova body {
  padding: 0 0 50px !important;
}

.crew-cont {
  padding: 0 16px;
  position: relative;
}

.header-navigation .crew-cont {
  padding: 0 8px;
}

@media (max-width: 650px) {
  .header-navigation .crew-cont {
    justify-content: center;
  }
}
.header-navigation .crew-cont:before,
.header-navigation .crew-cont:after {
  display: none;
}

.web {
  display: inherit !important;
}

.flex-web {
  display: flex !important;
}

.cordova .inline-native,
.inline-web {
  display: inline !important;
}

.inline-block-web {
  display: inline-block !important;
}

.cordova .flex-web,
.cordova .inline-web,
.cordova .inline-block-web,
.cordova .web {
  display: none !important;
}

.native {
  display: none !important;
}

.flex-native {
  display: none !important;
}

.inline-native {
  display: none !important;
}

.cordova .native {
  display: inherit !important;
}

.cordova .flex-native {
  display: flex !important;
}

.hide {
  display: none !important;
}

.rel {
  position: relative;
}

.text-no-wrap {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Bootstrap  width override until real desktop styles are ready */
@media (min-width: 650px) {
  .crew-cont.container {
    width: 600px !important;
    max-width: 100% !important;
  }

  .crew-cont {
    width: 600px;
    margin: 0 auto;
  }
}
.icon {
  cursor: pointer;
}

.cordova .card-skill-adder .tag-container:hover,
.cordova .skill-select .tag-container:hover,
.mobile .card-skill-adder .tag-container:hover,
.mobile .skill-select .tag-container:hover,
.tag-container {
  display: flex;
  align-content: center;
  margin: 0 7px 8px 0;
  font-size: 14px;
  line-height: 15px;
  padding: 8px 14px;
  border: 1px solid;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  border-color: #e7ebef;
  color: #8b94a8;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  transition: background 0.2s ease;
}

.card-skill-adder .tag-container {
  float: left;
}

.card-skill-adder .tag-container:hover,
.skill-select .tag-container:hover {
  background: #E1EAF3;
  color: #8b94a8;
  border: 1px solid #E1EAF3;
}

.tag-container.add-skills.open {
  background: #E1EAF3;
  border: 1px solid #E1EAF3;
  color: #fff;
  pointer-events: none;
  padding: 6px 8px 6px;
  height: 33px;
  align-items: center;
}

.tag-container.add-skills.open:hover {
  background: #E1EAF3;
  border: 1px solid #E1EAF3;
  color: #fff;
}

.tag-container.add-skills.open span {
  height: 6px;
  width: 6px;
  margin: 0 2px;
  background-color: #8b94a8;
  display: inline-block;
  border-radius: 50%;
  opacity: 0.4;
}
.tag-container.add-skills.open span:nth-of-type(1) {
  -webkit-animation: 3s ease-in blink infinite 0.2s;
          animation: 3s ease-in blink infinite 0.2s;
}
.tag-container.add-skills.open span:nth-of-type(2) {
  -webkit-animation: 3s ease-in blink infinite 0.4s;
          animation: 3s ease-in blink infinite 0.4s;
}
.tag-container.add-skills.open span:nth-of-type(3) {
  -webkit-animation: 3s ease-in blink infinite 0.6s;
          animation: 3s ease-in blink infinite 0.6s;
}

@-webkit-keyframes blink {
  15% {
    opacity: 1;
  }
  40% {
    opacity: 0.4;
  }
}

@keyframes blink {
  15% {
    opacity: 1;
  }
  40% {
    opacity: 0.4;
  }
}
.tag-container .tag-cont {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-container .skill-total {
  margin-top: -1px;
}

.cordova .tag-container:hover .skill-total,
.cordova .tag-container.from-me .skill-total,
.mobile .tag-container:hover .skill-total,
.mobile .tag-container.from-me .skill-total,
.tag-container .skill-total {
  display: flex;
  height: auto;
  float: right;
  align-items: center;
  margin-left: 8px;
  color: rgba(139, 148, 168, 0.45);
  font-weight: 600;
  text-align: center;
  transition: color 0.2s ease;
}

.cordova .tag-container.from-me:hover,
.mobile .tag-container.from-me:hover,
.tag-container.from-me {
  background: #E1EAF3;
  color: #8b94a8;
  border: 1px solid #E1EAF3;
}

.tag-container:hover .skill-total,
.tag-container.from-me .skill-total {
  color: #8b94a8;
}

.tag-line {
  display: block;
  height: 36px;
  width: calc(100% + 16px);
  margin: 0 -8px;
  white-space: nowrap;
  color: #82889d;
  font-size: 14px;
  padding: 6px 8px;
  line-height: 24px;
  border-top: 1px solid;
  cursor: default;
  border-color: #e1e4e5;
}

.no-content {
  color: #82889d;
  font-size: 14px;
  text-align: center;
  width: 100%;
}

.tag-line .skill-name {
  width: 65%;
  float: left;
  overflow: hidden;
  color: #323332;
}

.tag-line .no-endorsement {
  text-align: center;
}

.tag-line.from-me .skill-name {
  color: #007ddd;
  font-weight: 500;
}

.tag-line .icon {
  cursor: default;
  color: #bfc7d6;
  vertical-align: -2px;
}

.tag-line .skill-name .icon {
  margin-left: 4px;
  display: none;
  color: #007ddd;
}

.tag-line.from-me .skill-name .icon {
  display: inline;
}

.tag-line .skill-total {
  border-radius: 50%;
  display: inline-block;
  height: 24px;
  width: auto;
  line-height: 22px;
  font-size: 14px;
  float: right;
  background: none;
  text-align: right;
}

.feed-actions {
  height: 66px;
  width: 100%;
  clear: both;
  position: relative;
}

.feed-sorting {
  height: 52px;
}

.sorting-button {
  display: block !important;
  float: left;
  height: 36px;
  border: 1px solid #8b94a8;
  border-right: 0;
  color: #8b94a8;
  margin: 0;
  background: transparent;
}

.sorting-button.btn-primary,
.sorting-button:active,
.sorting-button:focus,
.sorting-button.btn-primary:active,
.sorting-button.btn-primary:hover,
.sorting-button.active,
.sorting-button.active:hover {
  background: #8b94a8;
  color: #edf1f2;
  border: none;
}

.sorting-button.btn-primary:hover {
  cursor: default;
}

.sorting-button:first-of-type {
  border-radius: 4px 0 0 4px;
}

.sorting-button:last-of-type {
  border-radius: 0 4px 4px 0;
  border-right: 1px solid !important;
}

.card {
  transition: none;
}

.card.post,
.card.question {
  margin: 0 -8px 16px -8px;
  width: calc(100% + 16px);
  padding: 24px;
}

.card.project {
  margin: 0 -8px 16px -8px;
  width: calc(100% + 16px);
  padding: 24px;
  cursor: default !important;
}

.card.project.hollow {
  margin: 0 0 24px;
  flex-basis: 100%;
  width: 100%;
}

.card.pro {
  margin: 0 -8px 16px -8px;
  width: calc(100% + 16px);
  padding: 24px;
  cursor: default !important;
}

.card.pro:hover {
  box-shadow: 0 1px 4px rgba(51, 74, 109, 0.15);
}

.card.gq2post {
  margin: 0 -8px 16px -8px;
  width: calc(100% + 16px);
  padding: 24px 24px 0 24px;
  overflow: hidden;
}

@media (max-width: 400px) {
  .card {
    margin: 0 -8px 8px -8px !important;
  }
}
.card .card-description p {
  width: 100%;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  color: #434957;
  color: rgba(18, 57, 101, 0.9);
  margin: 16px 0 0 0;
  text-align: left;
  cursor: default;
  word-wrap: break-word;
}

.card .card-description p a {
  color: #007ddd;
  transition: 0.3s ease;
}

.card .card-description p a:hover {
  color: #007ddd;
}

.card.question a.link-wrap {
  width: 100%;
  cursor: pointer;
}

.card.endorsement {
  padding: 24px 24px 24px;
}

.card.endorsement .card.nested-card {
  margin: 24px 0 0 0 !important;
}

.card.post .card-img-cont {
  height: auto;
  margin-top: 24px;
}

.card.post .card-img-cont img {
  width: 100%;
}

.card.post .card-multi-img-cont {
  display: flex;
  width: calc(100% + 56px);
  margin: 16px -28px -8px;
  overflow: hidden;
  height: 408px;
}

.card.post .card-multi-img-cont.three,
.card.post .card-multi-img-cont.four,
.card.post .card-multi-img-cont.lots {
  flex-wrap: wrap;
  height: 416px;
}

.card.post .multi-img {
  background-size: cover;
  background-position: center;
  margin: 0 4px 8px 4px;
  width: 100%;
  height: 400px;
  flex-shink: 1;
}

.card.post .three .multi-img,
.card.post .four .multi-img,
.card.post .lots .multi-img {
  position: relative;
  height: 200px;
  flex-basis: calc(50% - 8px);
}

@media (max-width: 400px) {
  .card.post .card-multi-img-cont {
    height: 308px;
  }

  .card.post .card-multi-img-cont.three,
.card.post .card-multi-img-cont.four,
.card.post .card-multi-img-cont.lots {
    height: 316px;
  }

  .card.post .multi-img {
    height: 300px;
  }

  .card.post .three .multi-img,
.card.post .four .multi-img,
.card.post .lots .multi-img {
    height: 150px;
  }
}
.card.post .three .multi-img.third {
  flex-basis: calc(100% - 4px);
  flex-shrink: 0;
}

.card.post .multi-img .overlay {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 40px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.card.post .multi-img .overlay:hover {
  background: rgba(0, 0, 0, 0.7);
}

.card.post .lots .multi-img.fourth .overlay {
  display: flex;
}

.card #linkable_body {
  width: 100%;
}

.cordova .card:hover {
  box-shadow: 0 1px 2px rgba(51, 74, 109, 0.1);
}

.card:active {
  transform: translate(0px, 0px);
  box-shadow: 0 2px 8px rgba(51, 74, 109, 0.2);
}

.about-card {
  display: block;
  background: #fff;
  border-radius: 3px;
  color: #123965;
  margin: 0 -8px 16px -8px;
  padding: 16px;
  position: relative;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(51, 74, 109, 0.1);
}

.about-card_title {
  font-weight: 500;
  width: 100%;
  color: #123965;
  font-size: 16px;
}

.about-card_sub {
  width: 100%;
  font-weight: 500;
  color: #8B94A9;
  font-size: 12px;
}

.about-card--accomplishments {
  display: flex;
  align-items: center;
}

.card-avater--accomplishments {
  width: 45px;
  height: 45px;
}

.about-card .icon:before {
  color: #8B94A9;
  font-size: 30px;
  color: rgba(139, 148, 169, 0.5);
  padding-right: 8px;
  vertical-align: -9px;
}

.about-card hr {
  border: 1px solid rgba(139, 148, 169, 0.1);
  margin: 16px -16px;
  height: 0px;
}

.skill-card,
.skill-card:hover.skill-card--no-hover {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 3px;
  font-weight: 400;
  color: #123965;
  padding: 8px 16px;
  margin: 0 -8px 8px -8px;
  position: relative;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(51, 74, 109, 0.1);
  transition: 0.3s ease all;
  cursor: default;
}

.skill-card:hover {
  box-shadow: 0 2px 4px rgba(51, 74, 109, 0.24);
  transform: translateY(-1px);
  cursor: pointer;
}

.skill-card.from-me {
  color: #007ddd;
}

.skill-card .skill-name .icon-check {
  display: none;
}

.skill-card.from-me .skill-name .icon-check {
  display: inline;
  margin-left: 8px;
  font-size: 14px;
  vertical-align: -1px;
}

.skill-card .skill-name {
  display: flex;
  flex-basis: 60%;
}

.skill-card .skill-endorsements {
  flex-basis: 40%;
  width: 40%;
  flex-shrink: 0;
  color: #8b94a8;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
}

.skill-card .skill-endorsements img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  float: right;
  margin: 0 6px 0 0;
}

.skill-card .skill-endorsements img:nth-of-type(5) ~ img {
  display: none;
}

@media (max-width: 600px) {
  .skill-card .skill-endorsements {
    flex-basis: 140px;
    width: 140px;
  }

  .skill-card .skill-endorsements img:nth-of-type(3) ~ img {
    display: none;
  }
}
.skill-card .skill-total {
  padding: 0 0 0 8px;
  display: flex;
  align-items: center;
}

.skill-card .skill-total .icon {
  cursor: default;
  padding: 0 4px 0 0;
}

.card.hollow .card-avatar {
  background: #E1EAF3;
}

.card.hollow .card-name {
  flex-wrap: wrap;
  margin-top: 16px;
  min-height: initial;
}

.card.hollow .card-name div {
  width: 100%;
  height: 20px;
  margin: 2px 0;
  border-radius: 3px;
  background: #E1EAF3;
}

.card.hollow .card-actions div {
  width: 20%;
  height: 32px;
  margin: 8px 0 0;
  border-radius: 3px;
  background: #E1EAF3;
}

.anti-card {
  cursor: default !important;
  box-shadow: none !important;
  border: 1px dashed #bdc5d4;
  background: transparent;
}

.card-body {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 12px;
  position: relative;
  align-items: center;
}

.card-thumb {
  display: table-cell;
  vertical-align: middle;
}

.card-face {
  display: flex;
  vertical-align: middle;
  flex-direction: column;
  padding: 0 8px 0 0;
  justify-content: center;
  width: calc(100% - 57px);
}

.card-action {
  display: table-cell;
  vertical-align: middle;
  width: 54px;
  height: 72px;
  position: relative;
}

.card-action-button {
  width: 45px;
  height: 45px;
  line-height: 43px !important;
  border-radius: 50%;
  color: #8b94a8;
  font-size: 24px !important;
  text-align: center !important;
}

.card-action-button.endorsed {
  background: #fff !important;
  border: 1px white !important;
  box-shadow: none !important;
}

.face-title {
  font-weight: 500;
  line-height: 18px;
  font-size: 16px !important;
  color: #123965;
  max-height: 36px;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Endorse button toggle */
.card-actions .button.endorsed {
  transition: all 0.3s ease;
}

.card-actions .button.endorsed div .icon-close,
.card-actions .button.endorsed:hover div .icon-check {
  display: none;
}

.card-actions .button.endorsed:hover div .icon-close {
  display: inline-block;
  font-size: 10px;
}

/* end endorse button */
.face-meta {
  font-size: 14px !important;
  line-height: 18px;
  margin-top: 2px;
  color: #8b94a8;
  max-height: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.checkers-others {
  display: inline;
}

.subtext {
  font-size: 14px;
  margin-top: -6px;
  display: inherit;
}

.bio {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.8em;
  color: #808080;
}

.name {
  color: #123965;
  font-weight: 500;
}

.pro_endorsements {
  background-color: #e1e2e6;
  font-weight: bold;
  padding: 2px 2px 2px 2px;
  text-align: center;
  color: #757575;
  font-size: 0.8em;
}

.fixed-bottom-layer {
  position: fixed;
  bottom: 0;
  left: 0;
}

.back_button {
  font-size: xx-large;
  color: #81889E;
  font-weight: 200;
}

.back {
  font-size: 1.1em;
  vertical-align: text-bottom;
  color: #81889E;
  font-weight: 200;
}

.screen-header,
.header-background {
  height: 459px;
}

.edit-profile .screen-header {
  height: 168px !important;
}

.screen-header {
  margin: 0 auto;
  position: relative;
}

.project-screen .header-meta,
.pro-screen .header-meta {
  padding-top: 24px;
}

@media (max-width: 1050px) {
  .project-screen .header-meta,
.pro-screen .header-meta {
    padding-bottom: 24px;
  }
}
.pro-projects .section-actions {
  border-top: none;
}

.actions-button.line-more-skills {
  float: none !important;
  margin: 8px auto !important;
  margin-left: auto !important;
  border-radius: 3px;
  font-size: 15px;
  border: none;
  width: auto;
  width: calc(50% - 12px);
}

.header-background {
  width: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 0;
}

@media (min-width: 1024px) {
  .screen-header,
.header-background {
    height: 22vw;
  }
}
.header-foreground {
  position: relative;
  z-index: 10;
}

.screen-body {
  position: relative;
  overflow: hidden;
}

.screen-meta {
  margin: 0 auto 36px;
  background: #007ddd;
}

.meta-content {
  line-height: 24px !important;
}

.stats-macro {
  font-size: 14px;
  margin-top: 5px;
  line-height: 16px;
}

.stats-micro {
  font-size: 14px;
  line-height: 16px;
  margin-top: 6px;
}

.screen-section {
  margin-bottom: 32px !important;
}

.section-header .header-endorsements {
  float: right;
}

.header-title:before {
  font-size: 18px;
  vertical-align: -4px;
  margin-right: 6px;
  color: #bfc7d6 !important;
}

.header-button {
  float: right;
  font-size: 14px;
  border-radius: 4px;
  text-transform: none;
  font-weight: normal;
}

.skills-row {
  text-align: left;
}

.no-skills {
  cursor: pointer;
}

.no-skills:hover {
  color: #007ddd;
}

.nav {
  top: 0;
  height: 50px;
  position: fixed;
  width: 100%;
  box-shadow: 0 0 7px rgba(1, 2, 2, 0.19);
  bottom: inherit;
  background: #fff;
  -webkit-transform: translateZ(0);
  z-index: 100;
}

.cordova .nav {
  top: inherit;
  bottom: 0 !important;
}

.nav-heart {
  position: relative;
  padding: 0;
}

.welcome-logo {
  position: relative;
  display: block;
  text-align: center;
  padding: 24px 0 0 0;
  opacity: 1;
  transition: opacity 0.3s ease;
}

a:hover .welcome-logo {
  opacity: 0.5;
}

.welcome-logo svg {
  width: 225px;
  height: 31px;
  margin: 0;
  padding: 0;
}

.nav.open .icon-menu {
  color: #123965;
  display: inherit;
}

.nav.open .active {
  color: #8b94a8;
}

.nav.open .icon-menu:before {
  content: "x";
  font-size: 20px;
  vertical-align: 2px;
}

.nav-icon.icon-activity:before {
  font-size: 28px;
  vertical-align: -2px;
}

.nav ul::-moz-selection {
  background: transparent;
}

.nav ul::selection {
  background: transparent;
}

.nav ul::-moz-selection {
  background: transparent;
}

.nav ul:before {
  display: none !important;
  content: "" !important;
  background: transparent;
}

.nav ul {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.nav ul li {
  display: inline-block;
  position: relative;
  width: 18%;
  text-align: center;
}

.nav ul li a {
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-block;
}

.sub-nav {
  height: 50px;
  border-bottom: 1px solid;
  border-color: #e4e4e7;
  background: rgba(139, 148, 169, 0.05);
}

@media (min-width: 610px) {
  .nav ul {
    text-align: right;
  }

  .nav ul li {
    width: 60px;
  }
}
.nav-icon {
  font-size: 24px;
  line-height: 48px;
  color: #8b94a8;
  transition: 0.2s all;
}

.nav-icon .icon-pro-search {
  font-size: 26px;
  line-height: 24px;
}

.nav-icon:hover,
.nav-icon.active {
  color: #123965;
  text-decoration: none;
}

.nav-label {
  font-size: 0.7em;
}

div[ui-view=content] {
  height: 100%;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

/*
.nav a.icon-help:before {
  background: #f2f2f3 !important;
  width: 34px !important;
  height: 34px !important;
  content: " " !important;
  border-radius: 100%;  
  display: inline-block;
  top: 5px;
  right: -12px;
  position: relative;
}*/
.nav a.icon-help {
  cursor: default !important;
}

#intercom-conversation div.intercom-sheet-header a.intercom-sheet-header-button.intercom-sheet-header-conversations-button div {
  background: transparent !important;
  overflow: hidden !important;
}

#intercom-conversation div.intercom-sheet-header a.intercom-sheet-header-button.intercom-sheet-header-conversations-button div:before {
  content: "z" !important;
  color: #8b94a8 !important;
  font-family: "gq3-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  top: 16px !important;
  position: relative;
  font-size: 18px;
}

div.intercom-sheet-header {
  height: 50px !important;
}

.edit-container .navbar-fixed-bottom,
.modal {
  z-index: 40000000 !important;
}

/*.intercom-launcher {
  top: 0px !important;
  right: calc((100vw - 750px)/2) !important;
}

.intercom-launcher-button {
  border: none !important;
  top: 8px !important;  
  right: 2px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 100% !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  background-color: #8b94a8 !important;
  background-size: 50% !important;
  background-position: 8px !important;
}

.modal-open .intercom-launcher-button {
  display: none !important;
}

.intercom-launcher-initials {
  margin: -1px !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  background-color: #007ddd !important;
}

#intercom-conversation, #intercom-conversations {
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  border-top: 1px solid;
  border-color: #e1e4e5;  
}

.intercom-launcher-preview {
  top: 4px !important;
  right: 32px !important;
  height: 42px !important;
  min-width: 228px !important;
  padding: 0px 6px !important;
  border-radius: 4px !important;
  background: transparent !important;
  display: table !important;
}

.intercom-launcher-preview:before,
.intercom-launcher-preview:after {
  border-radius: 4px !important;
  background: rgba(37, 154, 245, 0.73) !important;  
}


.intercom-launcher-preview-body {
  color: #fff !important;
  display: table-cell !important;  
  vertical-align: middle !important;
  line-height: 14px !important;

}

.intercom-launcher-preview-body p {
  line-height: 14px !important;
  font-size: 12px !important; 
  font-weight: bold !important; 
}

.intercom-launcher-preview-caret {
  position: relative !important;
  right: -7px !important;
  top: 3px !important;
  display: none;
}

.intercom-launcher-preview-caret:after {
  position: absolute;
  content: " ";
  width: 2px !important;
  height: 2px !important;
  border-left: 4px solid #007ddd !important;
}

.intercom-launcher-preview-caret:before {
  display: none !important;
}

div.intercom-launcher-preview-close {
 top: 12px !important; 
 left: -24px !important;
 opacity: 1 !important;
}*/
@media (max-width: 1024px) {
  .intercom-launcher {
    right: calc(((100vw - 750px)/2) + 60px) !important;
  }
}
@media (max-width: 767px) {
  .intercom-launcher {
    right: 6vw !important;
  }
}
div.container-menu {
  width: 80%;
  height: 100%;
  position: absolute;
  right: 0;
  background: white;
  padding: 0;
  box-shadow: 5px 0 10px 5px #172B5A;
}

/** Not supported **/
.not-supported {
  display: none;
}

.ios1 .not-supported,
.ios2 .not-supported,
.ios3 .not-supported,
.ios4 .not-supported,
.ios5 .not-supported,
.ios6 .not-supported,
.ios7 .not-supported,
.ie5 .not-supported,
.ie6 .not-supported,
.ie7 .not-supported,
.ie8 .not-supported {
  display: inherit;
}

.not-supported .pop-heart h3 {
  color: #323332;
  margin: 40px 0 8px 0;
}

.not-supported {
  background: rgba(18, 57, 101, 0.9);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 1050;
}

.not-supported .pop-heart .heart-button {
  margin: 24px 0 0;
}

/** end not supported **/
/** Sticky Nave **/
.sticky {
  display: none;
}

.scroll-nav .sticky.meta-back,
.scroll-nav .sticky.meta-sticktitle,
.scroll-nav .sticky.meta-icon {
  display: inherit;
  -webkit-animation: rises 0.8s ease-out;
          animation: rises 0.8s ease-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  transform: translate(0, 40px);
}

@-webkit-keyframes rises {
  0% {
    opacity: 0;
    transform: translate(0, 40px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes rises {
  0% {
    opacity: 0;
    transform: translate(0, 40px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.scroll-nav .project-screen .meta-title,
.scroll-nav .project-screen .meta-stats,
.scroll-nav .project-screen .check-in-fab,
.scroll-nav .pro-screen .meta-title,
.scroll-nav .pro-screen .meta-stats,
.scroll-nav .pro-screen .check-in-fab {
  display: none;
}

.scroll-nav .animate-hide {
  display: none;
}

.scroll-nav .screen-meta {
  position: fixed;
  width: 100%;
  top: 50px;
  z-index: 10;
  box-shadow: 0 0 7px rgba(1, 2, 2, 0.19);
}

.scroll-nav .screen-meta .meta-content {
  padding: 14px 16px 10px 16px;
  min-height: 0px;
  height: 50px;
  overflow: hidden;
}

.sticky.meta-back {
  float: left;
  width: 19%;
}

.sticky.meta-sticktitle {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  width: 62%;
  float: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

.sticky.meta-icon {
  width: 19%;
  float: right;
}

.sticky.meta-icon a {
  font-size: 24px;
  vertical-align: -7px;
  color: white;
  cursor: pointer;
  display: block;
  text-align: right;
}

.sticky.meta-back a {
  font-size: 24px;
  color: white;
  display: block;
  cursor: pointer;
  text-align: left;
}

.sticky.meta-icon a:hover,
.sticky.meta-back a:hover {
  color: #123965;
}

/** End Sticky Nav **/
/** New modals **/
.modal-overlay {
  width: 100%;
  background: #fff;
  height: 100%;
  display: block;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  top: 0;
  z-index: 40000000 !important;
}

.modal-content {
  padding: 0 0 60px 0;
  width: 100vw;
  width: 100%;
}

.fixed-nav .modal-content {
  padding: 50px 0 60px 0;
  position: relative;
  width: 100vw;
  width: 100%;
}

.modal-nav {
  padding: 0;
  margin: 0;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid;
  border-color: #e7ebef;
}

.post-modal-projects .modal-nav {
  padding: 0 16px;
}

.fixed-nav .modal-nav {
  position: fixed;
  top: 0;
  z-index: 100;
  background: #FFF;
  right: 0;
}

.modal .footer-button {
  margin: 10px 16px 0px 16px;
}

.post-modal-projects .modal-nav,
.search-company .modal-nav {
  border: none;
  box-shadow: 0 0 7px rgba(1, 2, 2, 0.19) !important;
  position: relative;
}

.modal-sub-nav {
  padding: 0 16px;
  margin: 0;
  height: 50px;
  background: #EAEAEF;
  width: 100%;
  border-bottom: 1px solid;
  border-color: #d9dadf;
}

.modal-sub-nav .search-field {
  display: inline-block;
  width: calc(100% - 155px);
  font-size: 1em !important;
  height: 50px;
  padding: 0 0 0 0 !important;
  float: left;
  background: transparent;
  margin: 0px 0 0 0;
  border-radius: 3px;
  font-size: 14px !important;
  position: inherit;
}

.modal-sub-nav .icon-search {
  width: 36px;
  height: 50px;
  font-size: 22px !important;
  line-height: 50px !important;
  color: #8b94a8;
  display: inline;
  float: left;
}

.post-modal-projects .card-actions {
  display: none;
}

.modal-label {
  margin: 16px 0 6px 0;
  width: 100%;
  float: left;
  color: #8B94A9;
  font-weight: 400;
}

.modal-input {
  position: relative;
  bottom: 0;
  left: 0;
  cursor: pointer;
  padding: 0 16px 0 16px !important;
  min-height: 66px;
  margin: 8px 0 0 0;
  width: 100%;
  color: #123965;
  border: #e7ebef 1px solid;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-appearance: none;
  transition: border 0.2s ease;
}

input.modal-input {
  cursor: text;
}

.modal-input.fake-input:hover,
.modal-input.fake-input {
  border: #e7ebef 1px solid;
  cursor: default;
}

.modal-input:focus,
.modal-input:hover {
  border-color: #007ddd;
}

.modal-input img {
  width: 32px;
  height: 32px;
}

.input-error {
  color: #dd0038;
  margin: 8px 0 0;
  float: left;
  font-size: 12px;
}

.modal-input textarea {
  width: 100%;
  height: 25px;
  font-size: 15px;
  resize: none;
  padding: 8px 0;
  background: none;
  align-self: center;
  text-decoration: none;
  border: none;
  overflow: visible !important;
  outline: none;
  box-shadow: none;
}

.ie11 .modal-input textarea {
  height: 33px !important;
  overflow: visible !important;
}

.modal-input input {
  width: 100%;
  font-size: 16px !important;
  line-height: 24px;
  resize: none;
  color: #123965;
  padding: 0 0 !important;
  background: none;
  text-decoration: none;
  border: none;
  overflow: auto;
  outline: none;
  box-shadow: none;
}

.modal-input input::-ms-clear {
  display: none;
}

.modal-input textarea::-webkit-scrollbar {
  width: 0 !important;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.modal-input .company {
  font-weight: 500;
  color: #123965;
  line-height: 16px;
}

.modal-input .role {
  font-weight: 400;
  font-size: 12px;
  display: block;
  color: #8B94A9;
}

.modal-input form.ng-pristine .actions-button {
  opacity: 0.5;
}

.modal-input form.ng-pristine .actions-button:hover {
  background: #8B94A9;
  cursor: default;
}

.modal-input .actions-button {
  background: #8B94A9;
  border: none;
}

.modal-input .actions-button:hover {
  background: #007ddd;
  border: none;
}

.modal-input .actions-button.white {
  background: none;
  color: #8B94A9;
  border: 1px solid #e7ebef;
}

.modal-input .actions-button.white:hover {
  background: none;
  color: #007ddd;
  border: 1px solid #007ddd;
}

.modal-input .content-right {
  min-width: 100px;
  width: auto;
  float: right;
  display: block;
  padding: 0;
}

.modal-input .content-left {
  float: left;
  display: flex;
  height: 50px;
  padding: 5px 8px 5px 0;
  width: 100%;
  max-width: calc(100% - 110px);
}

.modal-input .input-close {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  float: right;
  margin: 0 8px;
  color: #8B94A9;
  color: rgba(139, 148, 169, 0);
  padding: 0;
  background: none;
  border: none;
  height: 49px;
  line-height: 49px;
}

.modal-input .input-close:before {
  color: #8B94A9;
}

.modal-input .input-close:hover {
  cursor: pointer;
  color: #007ddd;
}

.modal-input form {
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-input .flex-wrap {
  display: flex;
  align-items: center;
}

.modal-input .input-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 16px 0 0;
  background: #E1EAF3;
  color: #8b94a8;
  transition: background 0.4s ease, color 0.2s ease;
}

.modal-input:hover .input-avatar {
  background: none;
  color: #007ddd;
}

.modal-input .input-avatar .icon {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal .top-section {
  text-align: center;
}

.modal .top-section .icon {
  margin: 24px 0 0;
  font-size: 60px;
  color: #8B94A9;
  display: inline-block;
}

.modal .top-section .meta-avatar {
  width: 95px;
  height: 95px;
  min-width: 95px;
  display: block;
  text-align: center;
  min-height: 95px;
  border-radius: 50%;
  margin: 24px auto 0 auto;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.25);
}

.modal .top-section p {
  text-align: center;
  margin: 8px 0 16px;
  font-size: 14px;
  color: #004579;
}

.modal .top-section h3 {
  font-size: 28px;
  font-weight: 600;
  color: #004579;
  margin: 16px 0 8px 0;
  text-align: center;
  font-family: "Sentinel A", "Sentinel B", "Besley", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.modal .skill-select .tag-holder {
  text-align: center;
  margin: 32px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.modal .share-holder p {
  text-align: center;
  font-size: 14px;
  color: #8B94A9;
  margin: 16px 0 8px 0;
}

.modal .share-holder input {
  background: #8B94A9;
  text-align: center;
  color: #fff;
  padding: 8px !important;
  border-radius: 3px;
}

.modal-sub-nav .search {
  float: left;
  display: block;
  width: 100%;
}

.post-modal-projects .card,
.search-company .card {
  border-radius: 0;
  border-bottom: 1px solid #EAEAEF;
  box-shadow: none;
  margin: 0 -8px;
}

.post-modal-projects .card.no-project-match {
  background: none;
  margin: 8px -8px 0 -8px;
  border: 1px dashed #d4d4dd;
}

.post-modal-projects .card-body {
  padding: 8px;
}

.post-modal-projects .card-body .thumb-img {
  color: #fff;
}

.post-modal-projects .card:hover {
  box-shadow: none;
}

.modal-sub-nav .search-actions {
  height: 50px;
  line-height: inherit;
  padding: 0;
  margin-right: 0;
  margin-top: 0px;
  display: flex;
  align-items: center;
}

.modal-sub-nav .action-icon {
  width: 25px;
  line-height: inherit !important;
  height: auto;
}

.modal-sub-nav form {
  float: left;
  display: block;
  width: 100%;
}

.modal-sub-nav .search:before {
  display: none;
}

/* .modal-container {
   width: 100%;
   padding: 0 16px;
 }*/
.modal .nav-container {
  width: 100%;
  padding: 0 16px;
}

@media (min-width: 610px) {
  .modal .nav-container {
    width: 600px;
    margin: 0 auto;
  }
}
.modal-nav .left-content {
  display: flex;
  align-items: center;
  color: #8B94A9;
  float: left;
  height: 50px;
  font-weight: 500;
  font-size: 14px;
}

.modal-nav .right-content {
  display: flex;
  align-items: center;
  float: right;
  height: 50px;
  color: #123965;
  font-size: 16px;
  font-weight: 500;
}

body.modal-open {
  overflow: hidden;
}

.post-page .modal-nav .right-content {
  color: #8B94A9;
  font-size: 13px;
}

/****** DOTS MENU *********/
dots-menu {
  display: flex;
  position: relative;
}

.icon--dots-menu.icon-close {
  font-size: 14px;
}

.dots-pop li {
  display: flex;
}

.dots-pop li a {
  font-size: 14px;
  color: #8b94a8;
  height: 40px;
  display: flex;
  align-items: center;
  font-weight: 600;
  width: 100%;
  line-height: 1em;
  white-space: nowrap;
  transition: all 0.3s ease;
  padding: 10px 24px;
  cursor: pointer;
}

.dots-pop li a:hover {
  color: #8B94A9;
  background: rgba(139, 148, 169, 0.1);
}

.dots-pop li a .icon {
  margin: 0 0 0 8px;
}

.dots-pop {
  background: #fff;
  margin: 0;
  position: absolute;
  right: 100%;
  top: 0;
  padding: 8px 0;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 15px rgba(48, 59, 76, 0.4);
  list-style-type: none;
  z-index: 9994000;
}

.dots-pop_background {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
}

.mat-button.mat-button--dots-menu {
  padding: 0.65em;
}

.activity-row .dots-pop {
  right: 40%;
  top: 24px;
  bottom: inherit;
}

.post-page .view-post-comments dots-menu {
  position: absolute;
  right: 0;
  top: 20px;
}

/* Post comment menus are hidden by default*/
.view-post-comments dots-menu {
  display: none;
}

.view-post-comments:hover dots-menu {
  display: block;
}

/****** DOTS MENU END *********/
/****** Report Modal *********/
.modal .report-modal .header {
  margin: 8px 0 8px 0;
  font-weight: 500;
  line-height: 18px;
  font-size: 16px !important;
  color: #123965;
}

.report-modal textarea {
  margin: 24px 0 8px 0;
  line-height: 18px;
  background: #EAEAEF;
  border: #e7ebef 1px solid;
  width: 100%;
  font-size: 15px;
  color: #333;
  padding: 16px;
  border-radius: 5px;
  height: 100px;
  text-align: left;
}

/****** Report Modal End *********/
.new-post-body .thumb-pro {
  width: 36px;
  min-width: 36px;
  height: 36px;
  margin: 0 8px 0 0;
}

.new-post-body {
  display: flex;
  padding: 16px 0;
  border-bottom: #e7ebef 1px solid;
}

.new-post-location {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 0;
  border-bottom: #e7ebef 1px solid;
}

.new-post-skills {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 0 12px 0;
  border-bottom: #e7ebef 1px solid;
}

.new-post-photo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 0;
  border-bottom: #e7ebef 1px solid;
}

.new-post-photo img {
  width: 100%;
}

.new-post-photo progress {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  padding: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 8px;
  background: #007ddd;
  color: #007ddd;
}

progress::-webkit-progress-value {
  background: #007ddd;
}

progress::-moz-progress-value {
  background: #007ddd;
}

.new-post-body label {
  margin: 0;
  height: auto;
  align-self: flex-start;
}

.new-post-buttons p {
  font-size: 12px;
  padding: 4px 0 0 0;
  color: #A8B0BF;
  font-weight: 500;
  display: inline-block;
  align-self: center;
}

.new-post-body textarea {
  margin: 0 0 0 4px;
  border: none;
  resize: none;
  width: 100%;
  height: 22px;
  color: #123965;
  font-size: 18px;
  font-weight: 300;
  line-height: 22px;
  border: none;
  padding: 0;
  align-self: center;
  display: inline;
}

.new-post-skills .tag-container {
  margin: 0 7px 4px 0;
}

.new-post-skills .tag-container:hover {
  background: #E1EAF3;
  color: #8b94a8;
  border: 1px solid #E1EAF3;
}

.new-post-skills .tag-container .skill-total {
  font-size: 10px;
}

.new-post-skills .tag-container .skill-total:hover {
  color: #007ddd;
}

.close-button {
  font-size: 18px;
  background: #fff;
  color: #8b94a8;
  padding: 0 0 0 8px;
  transition: color 0.2s ease;
}

.close-button:hover {
  color: #007ddd;
}

.new-post-photo .close-button {
  position: absolute;
  padding: 8px;
  top: -8px;
  right: -8px;
  border-radius: 5px;
}

.close-button:hover {
  color: #0185d7;
}

.modal-content .icon-container {
  width: 36px;
  margin: 0 8px 0 0;
  display: flex;
  justify-content: center;
}

.modal-content .content-container {
  width: 100%;
  font-size: 14px;
  color: #8B94A9;
  line-height: initial;
  position: relative;
  float: right;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.new-post-location .content-container {
  display: block;
}

.new-post-location .content-container span {
  margin: 0;
  font-weight: 500;
}

.icon-container .icon {
  color: #8b94a8;
  font-size: 24px;
  line-height: 23px;
}

.flex-container.start {
  align-self: flex-start;
}

.new-post-skills .flex-container.start,
.new-post-location .flex-container.start {
  align-self: center;
  margin: 0 0 4px 0;
}

.modal-nav .left-content:hover {
  color: #007ddd;
  cursor: pointer;
}

.modal-nav .icon-arrow-left {
  font-size: 24px;
  margin: -1px 8px 0 0;
}

.modal-button {
  width: 100%;
  text-align: center;
  margin: 0 0 32px 0;
}

.modal-button .actions-button {
  float: none;
  display: inline-block;
  margin: 0;
}

.modal-input .actions-button .right {
  float: right;
}

/* @group invite modal */
.invite-endorse-cont {
  background-size: 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
  background-position: 0 -25px;
  transition: background-position 0.8s ease, background 0.8s ease;
}

.invite-endorse-cont .bg-fade {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 10%, #fff 25%);
  min-height: 100vh;
  margin-top: 50px;
}

.invite-endorse-cont .top-section {
  padding: 208px 0 0;
  transition: padding 0.2s ease;
}

@media (max-width: 600px) {
  .invite-endorse-cont .bg-fade {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 10%, #fff 20%);
  }

  .invite-endorse-cont {
    background-position: 0 0;
  }
}
@media (max-width: 450px) {
  .invite-endorse-cont .bg-fade {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 5%, #fff 13%);
  }

  .invite-endorse-cont {
    background-position: 0 0;
  }

  .invite-endorse-cont .top-section {
    padding: 158px 0 0;
  }
}
@media (min-width: 900px) {
  .invite-endorse-cont {
    background-position: 0 -50px;
  }

  .invite-endorse-cont .bg-fade {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, #fff 55%);
  }
}
@media (min-width: 1200px) {
  .invite-endorse-cont {
    background-position: 0 -100px;
  }
}
.invite-endorse-cont .modal-nav {
  position: fixed;
  top: 0;
  z-index: 100;
  background: #FFF;
  box-shadow: 0 0 7px rgba(1, 2, 2, 0.19);
}

.invite-endorse-cont .invite-inputs {
  margin: 32px 0 48px;
}

.invite-endorse-cont .tag-holder p {
  margin: 0 16px 16px;
  text-align: center;
  font-size: 14px;
  color: #8B94A9;
  width: 100%;
}

.invite-endorse-cont .invite-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  float: left;
  width: calc(100% - 32px);
  margin: 64px 16px 40px 16px;
}

.invite-endorse-cont .invite-options p {
  margin: 0 16px;
  text-align: center;
  font-size: 14px;
  color: #8B94A9;
  width: 100%;
  flex-shrink: 0;
}

.invite-endorse-cont .invite-options .actions-button {
  background: none;
  color: #8B94A9;
  border: 1px solid #e7ebef;
  margin: 16px 8px 0 !important;
}

.invite-endorse-cont .invite-options .actions-button:hover {
  color: #fff;
  background: #007ddd;
  border: 1px solid #007ddd;
}

.button-center-cont .icon {
  display: inline;
  top: 2px;
  position: relative;
}

.button-center-cont .button {
  box-shadow: none;
  width: 100%;
  margin: 40px 0 32px;
  font-size: 18px;
}

.button-center-cont .disabled.button {
  background-color: #d3d6de;
  border-color: #d3d6de;
  box-shadow: none;
  cursor: default;
}

/* @end invite modal */
/* @group crew search header */
.crew-search-header {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  padding: 32px 0;
  transition: all 0.2s ease;
}

.crew-search-header .sub-title {
  color: #8B94A9;
  font-size: 14px;
  padding: 0.5em 0 1em;
  font-weight: 400;
  display: block;
  line-height: 1.2;
}

.crew-search-header_actions {
  display: flex;
}

.crew-search-header_title,
.crew-search-header_actions {
  margin: 0 24px;
  width: 100%;
}

.mat-button--search-header {
  margin: 0 8px 0 0;
}

.mat-button--search-header:last-of-type {
  margin: 0;
}

.crew-search_body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 16px 48px;
  width: 100%;
}

@media (max-width: 425px) {
  .crew-search_body {
    padding: 0 0 48px;
  }
}
.search-form {
  width: 100%;
  display: flex;
  margin: 24px 0 0;
  flex-wrap: wrap;
  position: relative;
}

.search-form .dropdown-menu {
  width: calc(100% - 32px);
  margin: 0 16px;
  position: absolute;
}

.search-form input {
  border-radius: 0px;
  width: 100%;
  -webkit-appearance: none;
  color: #004579;
  font-size: 16px;
  padding: 16px 16px 16px 48px;
  transition: all 0.2s ease;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-form input:hover,
.search-form input:active {
  z-index: 25;
  box-shadow: 0 3px 6px rgba(51, 74, 109, 0.15);
}

.search-form.address input,
.search-form.name input {
  padding: 16px 48px;
}

.search-form .before-icon {
  position: absolute;
  z-index: 50;
  color: #8B94A9;
  width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  cursor: default;
  font-size: 21px;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.search-form .input-cont:hover .before-icon {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0);
  color: #007ddd;
}

.search-form .input-cont {
  position: relative;
  width: 100%;
  box-shadow: 0 1px 4px rgba(51, 74, 109, 0.15);
}

.search-form .input-cont.location input {
  z-index: 20;
  border-top: 1px solid rgba(139, 148, 169, 0.24);
}

.search-form .icon-close {
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 50;
  color: #8B94A9;
  width: 46px;
  height: 100%;
  font-size: 16px;
  top: 0;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.search-form .icon-close:active,
.search-form .icon-close:hover {
  color: #007ddd;
  background: rgba(139, 148, 169, 0.08);
  opacity: 1;
}

.search-form input::-webkit-input-placeholder,
.search-form input:-moz-placeholder {
  color: #8B94A9;
  color: rgba(139, 148, 169, 0.5);
}

.search-form .button {
  font-size: 16px;
  width: calc(100% - 48px);
  min-width: 120px;
  margin: 24px 24px 0;
  align-self: center;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.32);
}

@media (min-width: 799px) {
  .crew-search-header {
    padding: 40px 0 32px;
  }

  .crew-search-header .sub-title {
    font-size: 16px;
  }

  .crew-search-header_title,
.crew-search-header_actions {
    width: auto;
    margin: 0;
  }

  .crew-search_body {
    padding: 0 0 48px;
  }

  .search-form .input-cont {
    width: 80%;
  }

  .search-form .input-cont.skill,
.search-form .input-cont.location {
    width: 40%;
  }

  .search-form--activity .input-cont,
.search-form.name .input-cont {
    width: 100%;
  }

  .search-form input {
    font-size: 18px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .search-form .input-cont.location input {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: none;
  }

  .search-form.address input,
.search-form.name input {
    width: 100%;
    border-radius: 3px;
  }

  .search-form .button {
    margin: 0;
    font-size: 18px;
    width: 20%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .search-form--activity .button {
    width: calc(100% - 48px);
    min-width: 120px;
    margin: 24px 24px 0;
    border-radius: 3px;
  }
}
/* @end crew search header */
/* Skill cards */
.mat-card--skill {
  margin: 0 0 8px;
}

.mat-card_skills {
  padding: 16px 24px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mat-card_skill {
  padding: 8px 16px;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  color: #004579;
  line-height: 1.2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mat-card_skill--from-me {
  color: #007ddd;
}

.mat-card_skill--from-me .icon--from-me {
  font-size: 14px;
  vertical-align: -1px;
}

.mat-card_skill--group {
  padding: 8px 0;
}

.mat-card_skill-total {
  margin-left: 16px;
  color: #8B94A8;
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

/* End skill cards */
/* Pagination */
.pager-cont--pros {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 24px;
}

.pager-cont--pros-bottom {
  padding: 16px 0 0;
}

.pager li a {
  padding: 0.65em;
  font-size: 14px;
  background: #e2e4e9;
  color: #8b94a8;
  margin: 0 16px;
  display: flex;
  border-radius: 3px;
  line-height: 1em;
  white-space: nowrap;
  font-weight: 600;
  align-self: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: "gq3-icons" !important;
}

.pager li a:hover {
  background: #8b94a8;
  color: #fff;
}

.pager li.disabled a,
.pager li.disabled a:hover {
  cursor: default;
  background: #e2e4e9;
  color: #8b94a8;
  opacity: 0.35;
}

.pager--first li:last-of-type,
.pager--second li:first-of-type {
  display: none;
}

.pager-label {
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  color: #8B94A9;
}

/* End pagination */
/* Toggle button */
.toggle {
  background: rgba(139, 148, 169, 0.08);
  box-shadow: none;
  border-radius: 50px;
  padding: 6px;
  display: flex;
  height: 40px;
}

.toggle--pros {
  margin: 0 8px 0 0;
}

.toggle_button {
  cursor: pointer;
  line-height: 28px;
  padding: 0 12px;
  font-size: 14px;
  color: #8B94A9;
  height: 28px;
  font-weight: 500;
  border-radius: 50px;
  transition: background 0.3s ease, box-shadow 0.2s ease;
}

.toggle_button:hover,
.toggle_button.active {
  color: #fff;
  background: #007ddd;
  box-shadow: 0 1px 4px rgba(51, 74, 109, 0.56);
}

.toggle_button.active:hover {
  background: #006bbd;
}

/* End toggle button */
/* Crew avatar - New Crew avatar to be used in all context. */
.crew-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.crew-avatar_core {
  width: 100%;
  height: 100%;
  background-size: cover;
  border-radius: 50px;
  transition: all 0.3s;
  transform: scale(1, 1);
}

.crew-avatar_core:before {
  transition: all 0.3s;
}

.crew-avatar:hover .crew-avatar_core:before {
  position: relative;
  content: "";
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(59, 58, 64, 0.1);
}

.crew-avatar:hover .crew-avatar_core {
  transform: scale(1.15, 1.15);
}

.crew-avatar:hover .crew-avatar_core--no-hover {
  transform: scale(1, 1);
}

.crew-avatar:hover .crew-avatar_core--no-hover:before {
  display: none;
}

/* End crew avatar */
/* Blank state */
.blank-state {
  padding: 48px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img--blank-state {
  width: 400px;
  max-width: calc(100% - 32px);
  margin: 0 16px;
  border: 3px solid rgba(139, 148, 169, 0.16);
  border-radius: 3px;
}

.h2--blank-state {
  font-family: "Sentinel A", "Sentinel B", "Besley", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  color: #8B94A9;
  color: rgba(139, 148, 169, 0.55);
  line-height: 1;
}

.p--blank-state {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #8B94A9;
  color: rgba(139, 148, 169, 0.55);
  margin: 24px 0 40px;
}

.icon--blank-state {
  font-size: 75px;
  padding: 0 0 8px;
  color: #8B94A9;
  color: rgba(139, 148, 169, 0.45);
  cursor: default;
}

/* End blank state */
/* Loading element */
.loading {
  text-align: center;
  width: calc(100% - 64px);
  margin: -150px 32px;
  height: 100vh;
  align-items: center;
  display: flex;
  justify-content: center;
}

.loading span {
  color: #8B94A9;
  color: rgba(139, 148, 169, 0.5);
  font-size: 46px;
  font-family: "Sentinel A", "Sentinel B", "Besley", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  opacity: 0.4;
}
.loading span:nth-of-type(1) {
  -webkit-animation: 3s ease-in load-blink infinite 0.1s;
          animation: 3s ease-in load-blink infinite 0.1s;
}
.loading span:nth-of-type(2) {
  -webkit-animation: 3s ease-in load-blink infinite 0.2s;
          animation: 3s ease-in load-blink infinite 0.2s;
}
.loading span:nth-of-type(3) {
  -webkit-animation: 3s ease-in load-blink infinite 0.3s;
          animation: 3s ease-in load-blink infinite 0.3s;
}
.loading span:nth-of-type(4) {
  -webkit-animation: 3s ease-in load-blink infinite 0.4s;
          animation: 3s ease-in load-blink infinite 0.4s;
}
.loading span:nth-of-type(5) {
  -webkit-animation: 3s ease-in load-blink infinite 0.5s;
          animation: 3s ease-in load-blink infinite 0.5s;
}
.loading span:nth-of-type(6) {
  -webkit-animation: 3s ease-in load-blink infinite 0.6s;
          animation: 3s ease-in load-blink infinite 0.6s;
}
.loading span:nth-of-type(7) {
  -webkit-animation: 3s ease-in load-blink infinite 0.7s;
          animation: 3s ease-in load-blink infinite 0.7s;
}
.loading span:nth-of-type(8) {
  -webkit-animation: 3s ease-in load-blink infinite 0.8s;
          animation: 3s ease-in load-blink infinite 0.8s;
}
.loading span:nth-of-type(9) {
  -webkit-animation: 3s ease-in load-blink infinite 0.9s;
          animation: 3s ease-in load-blink infinite 0.9s;
}
.loading span:nth-of-type(10) {
  -webkit-animation: 3s ease-in load-blink infinite 1s;
          animation: 3s ease-in load-blink infinite 1s;
}

/* End Loading element */
/* Angular fade in */
.fade-in {
  transition: 0.2s ease all;
  opacity: 1;
}

.fade-in.ng-enter {
  opacity: 0;
}

.fade-in.ng-leave {
  transition: 0.1s ease all;
  opacity: 0;
  display: none;
}

.fade-in.ng-show {
  opacity: 1;
}

.fade-in.ng-hide {
  transition: 0.1s ease all;
  opacity: 0;
  display: none;
}

/* End angular fade in */
/* Connections avatars */
.connection-avatar {
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  margin-right: -11px;
  margin-left: 6px;
  overflow: hidden;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 2px solid #fff;
  -webkit-backface-visibility: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

* .connection-avatar:last-of-type {
  margin-right: 0;
}

.connection-avatar--left {
  margin-right: 6px;
  margin-left: -11px;
}

.connection-avatar img {
  transform: scale(1, 1);
  transition: 0.3s ease all;
  max-width: 100%;
  max-height: 100%;
}

.connection-avatar:hover img {
  transform: scale(1.2, 1.2);
}

.connection-avatar--fake:hover img {
  transform: scale(1, 1);
}

@media (max-width: 425px) {
  .connection-avatar--skill-card {
    display: none;
  }
}
/* End connections avatars */
.crew-cont.activity-feed {
  padding-top: 16px;
}

.ng-holder {
  width: 100%;
}

.post_likes {
  width: auto;
  display: flex;
  margin-top: 8px;
  align-items: center;
}

@override https://justin.www.guildquality.com/css/build/crew/activity.css?53 */

.feed-actions .actions-right a,
.feed-actions .actions-left a {
  color: #7b7888;
  line-height: 45px;
  background: none;
  border-radius: 4px;
  height: 45px;
  width: 45px;
  padding: 0 6px;
  font-size: 40px;
  margin: 10px 0 0 0;
  display: block;
}
.feed-actions .actions-right a:hover,
.feed-actions .actions-left a:hover {
  color: #007ddd;
}

.onboarding-checklist {
  padding: 0 8px;
}

.onboarding.card {
  padding: 32px 40px 40px;
  text-align: center;
}

.modal .onboarding.card {
  box-shadow: none;
  text-align: center;
  border: #e7ebef 1px solid;
}

@media (max-width: 400px) {
  .onboarding.card {
    padding: 24px;
  }
}
.onboarding.card .copy-mrk-header {
  font-size: 22px;
  color: #004579;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.onboarding .copy-mrk-primary {
  margin: 0 0 24px 0;
  font-size: 16px;
}

.onboard-item {
  background: #007ddd;
  color: #fff !important;
  margin: 12px 0 0;
  padding: 12px 16px 14px;
  display: block;
  width: 100%;
  line-height: 20px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.2s all;
}

.onboard-item:hover {
  background: #006bbd;
}

.onboard-item .icon {
  font-size: 18px;
  padding: 0 4px 0 0;
  top: 2px;
  position: relative;
}

.onboard-item .avatar {
  position: relative;
  vertical-align: middle;
  top: 3px;
  padding-right: 6px;
}

.onboard-item .avatar img {
  border-radius: 50%;
  width: 22px;
  height: 22px;
}

.onboarding .close {
  position: absolute;
  top: 9px;
  right: 12px;
  font-size: 18px;
  color: rgba(139, 148, 168, 0.5);
  margin: 0;
  transition: 0.2s all;
}

.onboarding .close:hover {
  color: #8b94a8;
}

.onboarding .complete:hover,
.onboarding .complete {
  cursor: default;
  color: #ffffff;
  opacity: 0.3;
  background-color: #1E347B;
}

.inline-pop {
  padding: 16px 32px 32px 32px;
  text-align: center;
  cursor: default;
}

.inline-pop:hover {
  padding: 16px 32px 32px 32px;
  text-align: center;
  cursor: default;
}

.modal .inline-pop {
  display: none;
}

.inline-pop .icon {
  font-size: 55px;
  color: #007ddd;
  margin: 0 0 24px 0;
  position: default;
}

.inline-pop .header {
  color: #123965;
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.inline-pop .body {
  color: #8B94A8;
  margin: 0;
  line-height: initial;
}

.bottom-pop .close,
.inline-pop .close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 16px;
  color: #8b94a8;
  margin: 0;
}

.bottom-pop .close:hover,
.inline-pop .close:hover {
  color: #007ddd;
}

.inline-pop .actions-button {
  display: inline-block;
  text-align: center;
  float: none;
  margin-top: 16px;
}

.bottom-pop {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 32px 32px 16px 32px;
  text-align: center;
  box-shadow: 0 0 30px rgba(51, 51, 58, 0.2);
  z-index: 2000;
}

@media (min-width: 610px) {
  .bottom-pop {
    margin: 30px;
    width: auto;
    max-width: 400px;
  }
}
.checklist-min {
  float: left;
  cursor: pointer;
}

.checklist-min:hover .min-item,
.checklist-min:hover .min-icon {
  color: rgba(255, 255, 255, 0.8);
}

.checklist-min .min-item {
  float: left;
  color: #fff;
  font-size: 16px;
  margin: 12px 0 0 0;
}

.checklist-min .min-icon {
  float: left;
  color: #fff;
  font-size: 24px;
  margin: 11px 13px 12px 4px;
}

.onboarding-pop {
  background: rgba(18, 57, 101, 0.9);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 1050;
}

.pop-heart {
  margin: 10% auto;
  padding: 16px;
  width: 80%;
  max-width: 500px;
  background: #fff;
  text-align: center;
  border-radius: 6px;
}

.pop-heart .icon-close {
  float: right;
  color: #8b94a8;
}

.pop-heart .icon-close:hover {
  color: #123965;
}

.pop-heart .title-icon {
  font-size: 90px;
  margin: 24px 0;
  color: #007ddd;
  display: block;
  cursor: inherit;
}

.pop-heart p {
  color: #323332;
  margin: 0;
}

.pop-heart h3 {
  color: #323332;
  margin: 0 0 8px 0;
}

.pop-heart .heart-button {
  background: #007ddd;
  margin: 40px 0 0;
  font-size: 18px;
  padding: 16px;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}

.pop-heart .heart-button:hover {
  background: #0267f6;
}

.card.placeholder-card.no-results-CTA {
  padding: 8px 24px 24px;
  color: #8b94a8;
  text-align: center;
  margin: 16px -8px 24px;
}

.activity-feed .placeholder-card:hover {
  box-shadow: none !important;
  background: rgba(139, 148, 169, 0.1);
  cursor: default !important;
}

.no-results {
  text-align: center;
  color: #80879c;
  margin: 8px 0 0 0;
}

.no-results p {
  margin: 0;
  font-size: 18px;
}

.no-results .icon {
  font-size: 50px;
  cursor: default;
  clear: both;
  display: block;
  padding-top: 16px;
}

.card.hollow .card-avatar,
.card.hollow .card-name div,
.card.hollow .card-actions div {
  background: #f2f2f3;
  -webkit-animation-name: color;
          animation-name: color;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-delay: 0;
          animation-delay: 0;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.activity-feed .card.hollow .card-avatar,
.activity-feed .card.hollow .card-name div,
.activity-feed .card.hollow .card-actions div {
  -webkit-animation-name: none;
          animation-name: none;
}

@-webkit-keyframes color {
  0% {
    background: #e2e3e6;
  }
  100% {
    background: #f2f2f3;
  }
}

@keyframes color {
  0% {
    background: #e2e3e6;
  }
  100% {
    background: #f2f2f3;
  }
}
.card.activity {
  padding: 24px;
}

.card.activity .card-actions {
  justify-content: space-between;
}

.card.activity .card-thumb {
  padding: 0;
}

.card.activity .card-input {
  display: table-cell;
  vertical-align: middle;
  font-size: 16px;
  color: #8B94A8;
  padding: 10px 12px;
  width: 100%;
}

.action-container .meta-pros img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  float: left;
  margin: 0 0 0 4px;
  cursor: pointer;
}

.action-container .meta-pros {
  padding: 12px 16px 0 0;
  float: left;
  overflow: hidden;
  max-width: 60%;
}

.action-container .meta-pros div {
  color: #8B94A9;
  font-size: 14px;
  min-width: 24px;
  float: left;
  text-align: center;
  padding: 0 4px 0 0;
  height: 24px;
  line-height: 22px;
  border-radius: 50%;
}

.action-container .meta-pros div span {
  padding: 0 3px 0 0;
  vertical-align: -1px;
}

.action-container .meta-pros a {
  display: inline-block;
}

.action-container .meta-pros a:after {
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -24px;
  opacity: 0;
  border-radius: 50%;
  content: "";
  background: #000000;
}

.action-container .meta-pros a:hover:after {
  opacity: 0.2;
}

.actions-button.active .icon-close {
  display: none;
}

.actions-button.active:hover .icon-close {
  display: inline;
}

.post-filter {
  text-align: center;
  padding: 16px 24px 24px 24px;
  color: #8B94A9;
}

.post-filter .tag-container {
  display: inline;
  font-weight: 600;
  background: none;
  padding: 6px 14px 8px 14px;
  margin: 0;
  margin-left: 8px;
  height: 20px;
  line-height: 14px;
  border: 1px solid rgba(139, 148, 168, 0.32);
}

.post-filter .tag-container .icon {
  color: rgba(139, 148, 168, 0.55);
  vertical-align: -2px;
  margin-left: 5px;
  font-size: 12px;
}

.post-filter .tag-container:hover {
  border: 1px solid #007ddd;
  background: none;
  color: #007ddd;
}

.post-filter .tag-container:hover .icon {
  color: #007ddd;
}

.view-post-body_content {
  color: #123965;
  color: rgba(18, 57, 101, 0.9);
  font-size: 24px;
  width: 100%;
  word-wrap: break-word;
  font-weight: 400;
  margin-bottom: 0;
  -webkit-font-smoothing: subpixel-antialiased;
}

.post-body {
  padding: 12px 12px 14px;
}

.post-page .modal-input {
  float: left;
  margin: 24px 0 36px;
}

.post-page .view-post-comments {
  display: flex;
  position: relative;
  padding: 16px 20px 16px 0;
}

.post-page .view-post-meta {
  margin: 8px 0 16px;
}

.post-page .name {
  font-weight: 600;
}

.post-page .comment-body {
  color: #123965;
  color: rgba(18, 57, 101, 0.9);
}

.post-page .comment-body .meta {
  color: #8B94A9;
  font-size: 14px;
  width: 100%;
  display: block;
}

.post-photo {
  width: calc(100% + 24px);
  margin: 0px -12px;
  float: left;
}

.post-photo img {
  width: 100%;
  margin-bottom: -6px;
}

.view-post-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 0;
  font-size: 14px;
  color: #8B94A9;
  color: rgba(139, 148, 169, 0.6);
}

.view-post-context-left {
  display: flex;
  align-items: center;
}

.view-post-context a {
  color: #123965;
  font-size: 16px;
  font-weight: 600;
}

.view-post-body {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 0 0;
}

.view-post-photos {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

.view-post-skills {
  font-weight: 400;
  padding: 8px 0;
  color: #8B94A9;
  font-size: 13px;
  border-bottom: #e7ebef 1px solid;
  pointer-events: none;
}

.view-post-meta {
  width: 100%;
  position: relative;
  font-size: 13px;
  color: #8B94A9;
  overflow: hidden;
  font-weight: 500;
  display: flex;
  flex-direction: column;
}

.view-post-meta div:last-of-type {
  margin-bottom: 0px;
}

.view-post-meta div:first-of-type {
  margin-top: 8px;
}

.view-post-meta div {
  line-height: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  margin-bottom: 4px;
}

.view-post-meta div span.icon {
  font-size: 14px;
  margin: 0 4px 0 0;
  color: #8B94A9;
  vertical-align: -2px;
}

.view-post-meta a:hover {
  color: #007ddd;
}

.view-post-meta a {
  color: #8B94A9;
}

.view-post-photos .photo {
  width: 100%;
}

.view-post-photos .post-photo {
  margin: 0 -16px;
  width: 100%;
}

.view-post-photos .post-photo img {
  width: 100%;
  float: left;
  margin: -1px 0;
}

.post-page .thumb-pro {
  width: 36px;
  min-width: 36px;
  height: 36px;
  margin: 0 16px 0 0;
  transition: opacity 0.2s ease;
}

.post-page .thumb-pro:hover {
  opacity: 0.8;
}

.view-post-location {
  font-weight: 400;
  padding: 8px 0;
  color: #8B94A9;
  font-size: 13px;
}

.view-post-location a {
  color: #123965;
  font-weight: 500;
}

.view-post-likes {
  padding: 12px 0;
  float: left;
}

.cordova .view-post-likes .likes-cont:hover,
.mobile .view-post-likes .likes-cont:hover,
.view-post-likes .likes-cont {
  float: left;
  margin: 0 8px 0 0;
  color: #8b94a8;
  line-height: 25px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.view-post-likes .icon {
  font-size: 20px;
  vertical-align: sub;
}

.view-post-likes .likes-cont:hover,
.view-post-likes .active.likes-cont {
  color: #007ddd;
}

.view-post-likes .active.likes-cont:hover {
  color: #006bbd;
}

.post-page .modal-nav .right-content .active .icon {
  color: #007ddd;
}

.view-post-likes .meta-pros {
  float: left;
}

.view-post-likes .meta-pros img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  float: left;
  margin: 0 0 0 4px;
  cursor: pointer;
}

.activity-toggle {
  width: 100%;
  padding: 0 0 16px 0;
  display: flex;
  justify-content: center;
}

@media (max-width: 400px) {
  .activity-toggle {
    padding: 0 0 8px 0;
  }
}
.activity-discover {
  padding: 24px 0 0 0;
}

.section-header--activity {
  color: #8B94A9;
  width: 100%;
  margin: 0px -8px 16px -8px;
}

.search-form--activity {
  margin: 0 -8px;
  width: calc(100% + 16px);
  max-width: inherit;
}

@media (max-width: 736px) {
  .search-form--activity {
    margin: 0 -16px;
    width: calc(100% + 32px);
  }
}
.feed-wide {
  width: 100%;
}

/* Context bar - Right below the nav bar. Currently only applied on notification and messaging pages. */
.context-bar {
  display: flex;
  justify-content: center;
  height: 50px;
  width: 100%;
  padding: 0 16px;
  background: #fafafa;
  border-bottom: 1px solid #e2e4e9;
}

.context-bar--message {
  justify-content: space-between;
  position: fixed;
  z-index: 1;
  top: 50px;
}

.context-bar_button {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 16px;
  line-height: 1;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  position: relative;
  color: #8B94A9;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: rgba(139, 148, 169, 0);
  transition: all 0.3s ease;
  overflow: hidden;
}

.context-bar_button:hover {
  background: rgba(139, 148, 169, 0.1);
  color: #007ddd;
}

.context-bar_button span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 2;
}

.context-bar_col {
  width: 25%;
  flex-basis: 25%;
  display: flex;
  justify-content: center;
}

.context-bar_col--left {
  justify-content: flex-start;
}

.context-bar_col--right {
  justify-content: flex-end;
}

@media (max-width: 420px) {
  .context-bar {
    padding: 0 8px;
  }

  .context-bar_col {
    width: auto;
  }
}
.context-bar_button--tab {
  margin: 0 8px;
}

.context-bar_button--tab:after {
  content: "";
  transform: translateY(4px);
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: #007ddd;
  transition: all 0.3s ease;
}

.context-bar_button--tab.active:hover,
.context-bar_button--tab.active {
  color: #007ddd;
}

.context-bar_button--tab:hover::after,
.context-bar_button--tab.active:after {
  transform: translateY(0);
}

.context-user_blocked {
  opacity: 0.5;
}

/* End context bar */
/* Threads - Messaging threads page. */
.crew-cont--threads {
  padding: 0;
}

.threads_holder {
  position: relative;
}

.thread {
  width: 100%;
  border-bottom: 1px solid #e2e4e9;
  display: flex;
  transition: all 0.3s ease;
  padding: 16px;
  border-radius: 3px;
  cursor: pointer;
}

.thread:hover {
  background: rgba(139, 148, 169, 0.05);
}

.thread--blocked {
  background: rgba(139, 148, 169, 0);
  pointer-events: none;
}

.crew-avatar--threads {
  width: 50px;
  height: 50px;
}

.thread_data {
  padding: 0 48px 0 16px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: calc(100% - 56px);
}

.thread_text {
  font-size: 12px;
  color: #8b94a9;
  line-height: 1.3em;
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.3s ease all;
}

.thread_text--name {
  font-size: 16px;
  color: #004579;
  font-weight: 500;
}

.new-message .thread_text--name,
.new-message .thread_text {
  font-weight: 600;
  color: #004579;
}

.thread_blocked {
  color: #8b94a9;
}

.thread_actions {
  position: absolute;
  height: 100%;
  right: 16px;
  top: 0;
  display: flex;
  align-items: center;
}

/* End threads */
/* Messageing styles */
.crew-cont--messages {
  padding: 0 16px 0;
  margin: 0;
}

.message {
  padding: 24px 0 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.my-message .message {
  justify-content: flex-end;
}

.messages {
  padding: 50px 0 0 0;
}

.crew-avatar--message {
  width: 28px;
  height: 28px;
}

.my-message .crew-avatar--message {
  order: 2;
}

.message_avatar {
  width: 16px;
  height: 16px;
}

.message_avatar img {
  width: 16px;
  height: 16px;
}

.message_date {
  width: 100%;
  flex-basis: 100%;
  flex-shrink: 0;
  padding: 2px 0 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1em;
  text-align: left;
  color: rgba(139, 148, 169, 0.65);
}

.my-message .message_date {
  color: rgba(255, 255, 255, 0.65);
}

.message_bubble {
  max-width: 75%;
  margin: 0 12px;
  padding: 12px;
  background: #fff;
  font-size: 14px;
  line-height: 1.3em;
  font-weight: 500;
  position: relative;
  color: #004579;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(51, 74, 109, 0.08);
}

.my-message .message_bubble {
  color: #fff;
  background: #007ddd;
}

.copy-meta--messages {
  margin: 24px 16px;
  text-align: center;
}

.messages_body {
  height: calc(100vh - 100px);
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
}

.messages_bottom {
  height: calc(89px + 24px);
}

.messages_input {
  height: 89px;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e2e4e9;
}

.mat-button--message-input {
  position: absolute;
  right: 0;
  top: calc(50% - 14px);
  font-size: 12px;
}

.mat-input--messaging {
  display: flex;
  width: 100%;
}

.mat-input--messaging .mat-input_element--button {
  max-height: 65px;
  min-height: 22px;
  overflow-y: auto !important;
  margin-right: 88px;
  padding: 6px 0;
}

.mat-input.mat-input--messaging:after,
.mat-input.mat-input--messaging:hover:after {
  display: none;
}

@media (max-width: 650px) {
  .crew-cont--messages {
    width: 100%;
  }

  .messages_body {
    height: calc(100vh - 100px);
  }

  .messages_bottom {
    height: calc(64px + 24px);
  }

  .messages_input {
    height: 64px;
  }

  .mat-input--messaging .mat-input_element--button {
    max-height: 40px;
  }
}
/* End messageing styles */
/* Notifications page */
.notification-count {
  font-size: 10px;
  padding: 2px 4px;
  color: #fff;
  background: #ff6300;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

.notification-count--left {
  margin-right: 4px;
}

.notifications {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.crew-cont--notifcations {
  padding-top: 24px;
}

.notification-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
}

.notification-context {
  float: left;
  padding: 10px 0px 10px 8px;
  width: 82px;
  position: relative;
}

.notification-pro {
  font-weight: 500;
  font-size: 15px;
  color: #123965;
}

.notification-cont {
  float: left;
  color: #123965;
  font-size: 15px;
  justify-content: space-between;
  padding: 8px 0;
  width: calc(100% - 156px);
}

.notification-body {
  line-height: 1.2em;
}

.notification-body p {
  margin: 0;
}

.notification-date {
  padding: 0;
  color: #8b94a8;
  font-size: 13px;
  margin: 1px 0 0 0;
}

.notification-photo {
  width: 48px;
  padding: 0 0 8px 0;
  margin: 0 0 0 8px;
  position: absolute;
  right: 12px;
  top: 12px;
}

.notification-photo img {
  width: 100%;
}

.notification-icon {
  position: absolute;
  top: 18px;
  left: 4px;
  border-radius: 50%;
  height: 28px;
  width: 28px;
  color: #8a93a8;
  line-height: 28px;
  font-size: 14px;
  padding: 0 0 0 7px;
  background-color: #ffffff;
}

.notification-card .thumb-pro {
  left: 16px !important;
  position: relative;
  width: 46px;
  height: 46px;
}

.notification-icon.icon-add-person:before {
  margin: 0 0 0 1px;
}

.notification-state {
  position: absolute;
  right: 0;
  padding: 8px 8px 0 0;
  height: 20px;
}

.notification-state span {
  width: 8px;
  height: 8px;
  float: right;
  background: #fff;
  border-radius: 50%;
}

.unread .notification-state span {
  background: #8b94a8;
}

/* Notifications end */
.pac-container {
  width: 100% !important;
  height: 100%;
  left: 0 !important;
  top: 313px !important;
  box-shadow: none;
  background: #f8f8f9;
  border: none;
  padding: 24px;
  z-index: 90000000 !important;
  position: fixed !important;
}

.modal-open .pac-container {
  background: #fff;
}

@media only screen and (min-width: 610px) {
  .pac-container {
    width: 100% !important;
    left: 0 !important;
    top: 260px !important;
  }
}
.pac-item {
  width: 100%;
  max-width: 1080px;
  background: transparent;
  border-radius: 2px;
  text-align: left;
  overflow: hidden;
  padding: 8px;
  margin: 0 auto;
  border-top: 1px solid;
  border-color: rgba(139, 148, 169, 0.24);
  cursor: pointer;
}

.pac-item:last-of-type {
  margin-bottom: 16px;
}

.pac-item:hover {
  background: rgba(139, 148, 169, 0.24) !important;
  border-color: #fff !important;
}

.modal-open .pac-item:hover {
  background: #f2f2f3 !important;
  border-color: #DCDDDC !important;
}

.pac-item-selected {
  background: #fff !important;
  border-color: #fff !important;
}

.pac-item,
.pac-item-query {
  font-size: 14px !important;
}

.pac-item-query {
  margin-left: 8px;
  color: #004579;
}

.pac-item {
  color: #82899e !important;
}

.pac-icon {
  display: none;
  background: transparent !important;
}

.no-results-CTA .footer-button {
  margin: 16px 0;
  padding: 8px 16px;
  border-radius: 5px;
  color: #fff;
  background: #8b94a8;
  width: auto;
  display: inline-block;
  cursor: pointer;
}

.no-results-CTA .footer-button:hover {
  background: #123965;
}

.pro-feed .sorting-button {
  width: 50%;
}

.feed-footer {
  margin: 40px 0;
  text-align: center;
  color: #80879c;
  display: inline-block;
  width: 100%;
}

.feed-footer .footer-button {
  background: #007ddd;
  border: 2px solid #007ddd;
  border-radius: 3px;
  padding: 0.75em 1.5em 0.85em;
  color: #fff;
  line-height: 1em;
  margin: 16px 8px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}

@media (min-width: 650px) {
  .feed-footer .footer-button {
    margin: 16px 16px;
    font-size: 18px;
  }
}
.feed-footer .footer-button:hover {
  background: #0184d6;
}

.feed-footer .footer-button .icon {
  vertical-align: -3px;
  line-height: 13px;
}

.pro-card .card-body {
  height: 80px;
  align-items: center;
}

.pro-card .card-thumb {
  height: 45px;
  width: 45px;
  margin-right: 12px;
}

.thumb-pro {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
}

.card-context .thumb-pro {
  display: inline-block;
  float: left;
}

.dropdown-menu {
  bottom: auto !important;
  float: none !important;
  width: 70%;
  position: absolute;
  border-radius: 0;
  box-shadow: 0 -1px 6px rgba(1, 2, 2, 0.19);
  border-style: none;
  z-index: 999999;
  padding: 0;
  margin-bottom: 32px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  overflow: hidden;
}

.dropdown-menu > .active > a {
  background: #007ddd !important;
  color: #fff !important;
}

.dropdown-menu > li > a {
  padding: 8px 16px;
  text-align: left;
  color: #004579;
  float: left;
  width: 100%;
}

.endorse-by-email .face-meta {
  max-height: initial;
  white-space: normal;
}

.suggested-skills {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 24px 0;
  justify-content: center;
}

.card--skill {
  display: flex;
  flex-shrink: 0;
  margin: 0 4px 8px !important;
  padding: 6px 12px;
  width: auto;
  color: #8B94A9;
  text-align: center;
  box-shadow: none;
  background: rgba(139, 148, 169, 0.08);
  transition: all 0.3s ease;
}

.card--skill:hover {
  color: #007ddd;
  background: #fff;
}

.section-header--pros {
  color: rgba(139, 148, 169, 0.75);
  line-height: 33px;
  margin: 0;
  width: 100%;
}

@media (min-width: 799px) {
  .section-header--pros {
    width: auto;
  }
}
/* Material pro cards */
.mat-card-holder {
  width: 100%;
}

.mat-card--pro {
  width: 100%;
  margin: 0 0 16px 0;
}

.post-modal-projects .mat-card--pro {
  border: 1px solid rgba(139, 148, 168, 0.16);
}

.mat-card--pro-endorsed {
  margin: 16px 0 0 0;
}

.mat-card_pro {
  padding: 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mat-card_pro--placeholder {
  padding: 16px;
}

.mat-card_title-text--placeholder {
  min-height: 0;
  align-self: center;
}

.mat-card_avatar--pro-placeholder {
  width: 32px;
  height: 32px;
  align-self: center;
}

.mat-card_avatar--project {
  border-radius: 3px;
  font-size: 44px;
  position: relative;
  color: rgba(139, 148, 168, 0.5);
}

.mat-card_avatar--project:after {
  position: absolute;
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  content: "";
  z-index: 2;
  background: #007ddd;
  border-radius: 50%;
}

.mat-card_avatar--current-location:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  height: 100%;
  content: "";
  display: block;
  border-radius: 100%;
  background: rgba(37, 154, 245, 0.15);
  border: 1px solid rgba(36, 151, 244, 0.41);
  animation: pulsate 2s ease-out;
  -webkit-animation: pulsate 2s ease-out;
  -webkit-animation-iteration-count: infinite;
}

.mat-card_avatar--no-location:after {
  display: none;
}

.mat-card_pro-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-basis: calc(100% - 24px - 240px - 224px);
  width: calc(100% - 24px - 240px - 224px);
  max-width: 100%;
  margin: 0 24px 0 0;
  flex-grow: 1;
}

.mat-card_pro-header--placeholder {
  width: 100%;
  flex-basis: 100%;
}

.mat-card_pro-header--context {
  flex-basis: calc(100% - 200px);
  width: calc(100% - 200px);
}

.mat-card_pro-header.mat-card_pro-header--wide {
  width: 100%;
  max-width: 100%;
  flex-basis: 100%;
}

.mat-card_endorsed-by-user {
  color: #007ddd;
}

.mat-card_endorsed-by-user .icon {
  font-size: 12px;
  line-height: 12px;
  position: relative;
  top: 1px;
  color: #007ddd;
}

.mat-card_pro-preview {
  width: 240px;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  justify-content: flex-start;
}

.mat-card_photo.mat-card_photo--project {
  height: 72px;
  width: 72px;
  flex-grow: 1;
  flex-shrink: 0;
  margin: 0 8px 0 0;
}

.mat-card_pro-footer {
  width: 224px;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.mat-card_pro-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.mat-button--pro-narrow {
  display: none;
  width: 100%;
  flex-grow: 1;
  padding: 0px;
  justify-content: center;
  align-items: center;
}

.mat-card_pro-connections {
  margin: 16px 0 0 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
}

.mat-button--pro-wide {
  margin-left: 8px;
}

@media (max-width: 900px) {
  .mat-card_pro-preview {
    display: none;
  }

  .mat-card_pro-header {
    flex-basis: calc(100% - 24px - 225px);
    width: calc(100% - 24px - 225px);
    max-width: calc(100% - 24px - 225px);
  }

  .mat-card_pro-header--project {
    flex-basis: calc(100% - 24px - 240px - 224px);
    width: calc(100% - 24px - 240px - 224px);
    max-width: 100%;
  }
}
@media (max-width: 700px) {
  .mat-card_pro {
    flex-wrap: wrap;
    padding: 16px;
  }

  .mat-card_pro-header {
    width: calc(100% - 56px);
    max-width: calc(100% - 56px);
    flex-basis: calc(100% - 56px);
  }

  .mat-card_pro-footer {
    width: calc(100% - 56px);
    max-width: calc(100% - 56px);
    flex-basis: calc(100% - 56px);
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
  }

  .mat-card_pro-connections {
    justify-content: flex-start;
  }

  .mat-card_pro-preview {
    display: flex;
    margin: 16px 0 0 0;
    max-width: calc(100% - 56px);
    width: calc(100% - 56px);
    flex-basis: calc(100% - 56px);
  }

  .mat-card_pro-actions {
    position: absolute;
    right: 0;
    justify-content: space-around;
    flex-direction: column;
    top: 0;
    flex-wrap: nowrap;
    height: 100%;
    width: 56px;
    background: #fff;
    border-left: 1px solid rgba(139, 148, 168, 0.16);
  }

  .mat-button--pro-wide {
    display: none;
    margin-left: 8px;
  }

  .mat-button--pro-narrow {
    display: flex;
  }

  .mat-meta-pro-card-connection {
    order: 2;
  }

  .connection-avatar.connection-avatar--pro-card {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    margin-left: -11px;
  }

  .connection-avatar.connection-avatar--pro-card:first-of-type {
    margin-left: 0;
  }
}
/* End material pro cards */
/* Colleagues cards */
.mat-card_avatar--colleagues {
  height: 30px;
  width: 30px;
}

.mat-card_pro--colleagues {
  padding: 16px 22px;
}

.mat-card_pro-header.mat-card_pro-header--colleagues {
  margin: 0;
  max-width: 100%;
}

.mat-card_name--colleagues {
  font-size: 16px;
}

.mat-card_title-text--colleagues {
  min-height: 0;
  align-self: center;
}

.mat-card_endorsement-total {
  margin-left: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #8B94A8;
  display: flex;
  align-self: center;
  align-items: center;
  flex-shrink: 0;
}

/* End colleagues cards */
.search-company .card-body {
  padding: 8px 0 8px 0;
}

.search-company .card:hover {
  box-shadow: none;
}

.company-card .card-thumb {
  height: 65px;
  width: 90px;
  position: relative;
  padding: 8px 0 8px 8px;
}

.company-card .thumb-img {
  height: 50px;
  width: 80px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background-size: 80% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.company-card:hover {
  opacity: 0.5;
}

.company-card .card-face {
  padding-left: 8px;
}

.create-company-container .top-section h3 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mat-app-header_left--edit-profile {
  max-width: 100%;
}

.crew-settings {
  opacity: 0;
  transition: 0.3s ease all;
}

.crew-settings.show {
  opacity: 1;
}

.crew-setting_container {
  display: flex;
  align-items: flex-start;
}

.crew-setting_body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(100% - 240px);
  margin: 0 0 56px 40px;
  flex-shrink: 0;
}

.mat-h2--crew-setting {
  margin: 0 0 16px 0;
}

.mat-button--edit-profile {
  align-self: flex-start;
}

@media (max-width: 500px) {
  .mat-h2--crew-setting {
    margin: 0 16px 16px;
  }

  .mat-button--edit-profile {
    margin: 0 16px 0;
  }
}
.crew-setting_sidebar-interior {
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.crew-setting_sidebar-tab {
  width: 100%;
  color: #004579;
  font-size: 16px;
  padding: 0 0 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.crew-setting_sidebar-tab:last-of-type {
  padding: 0;
}

.crew-setting_sidebar-tab:before {
  position: absolute;
  left: -24px;
  transform: translateX(-5px);
  content: "";
  width: 5px;
  height: 22px;
  color: rgba(0, 125, 221, 0);
  transition: all 0.3s ease;
}

.crew-setting_sidebar-tab:hover,
.crew-setting_sidebar-tab.active {
  color: #007ddd;
}

.crew-setting_sidebar-tab.active:before,
.crew-setting_sidebar-tab:hover:before {
  background: #007ddd;
  transform: translateX(0px);
}

@media (max-width: 1006px) {
  .crew-setting_container {
    flex-direction: column;
  }

  .crew-setting_sidebar {
    width: 100%;
  }

  .crew-setting_body {
    width: 100%;
    margin: 32px 0 56px 0;
  }

  .crew-setting_sidebar-interior {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    justify-content: space-between;
    padding: 24px 16px 24px 16px;
  }

  .crew-setting_sidebar-tab,
.crew-setting_sidebar-tab:last-of-type {
    width: auto;
    padding: 0 12px;
    white-space: nowrap;
  }

  .crew-setting_sidebar-tab:before {
    left: 4px;
    bottom: -24px;
    transform: translateY(-5px);
    transform: translateX(0px);
    content: "";
    width: calc(100% - 8px);
    height: 5px;
  }

  .crew-setting_sidebar-tab.active:before,
.crew-setting_sidebar-tab:hover:before {
    transform: translateY(0px);
  }
}
.mat-card_body--crew-settings {
  padding: 16px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mat-input--profile-pic {
  margin: 16px 0 16px;
  width: 100%;
}

.mat-input--crew-settings {
  margin: 16px 0 16px;
  width: calc(50% - 16px);
}

@media (max-width: 1006px) {
  .mat-input--crew-settings {
    width: 100%;
  }
}
.mat-input_element--profile-pic {
  height: auto;
  cursor: pointer;
  justify-content: space-between;
  display: flex;
  padding: 12px 0;
}

.mat-input_element-left {
  display: flex;
  align-items: center;
}

.mat-input_avatar {
  width: 24px;
  height: 24px;
  margin: 0 8px 0 0;
  border-radius: 50%;
  background: rgba(139, 148, 169, 0.16);
  overflow: hidden;
}

.mat-input_skills-row {
  width: 100%;
  display: flex;
  padding: 0 0 8px;
  justify-content: space-between;
}

.mat-input_element--skills {
  padding: 6px 0 0;
}

form.ng-pristine .mat-button--skills {
  opacity: 0.4;
  box-shadow: none;
}

.crew-setting_company {
  border: 1px solid rgba(139, 148, 169, 0.16);
  margin: 16px 0;
  width: 100%;
  min-height: 98px;
  padding: 24px;
  display: flex;
  align-items: center;
  border-radius: 3px;
  justify-content: space-between;
}

@media (max-width: 1006px) {
  .crew-setting_company {
    flex-wrap: wrap;
  }

  .mat-button--company {
    margin: 16px 0 0 0;
  }
}
.crew-setting_company-cont {
  display: flex;
  align-items: center;
}

.crew-setting_company-avatar {
  width: 48px;
  max-height: 48px;
  margin: 0 16px 0 0;
  color: #8b94a8;
  border-radius: 3px;
  display: flex;
  flex-shrink: 0;
  background: #fff;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.crew-setting_company-avatar--add {
  background: #e1eaf4;
  height: 48px;
}

.crew-setting_skills {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 16px 0 0;
}

.mat-card--skill-fake,
.mat-card--skill-fake:hover {
  border: 1px solid rgba(139, 148, 168, 0.16);
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* Onboarding */
.mat-card--settings-onboarding {
  width: 100%;
  margin: 16px 0 0 0;
}

.mat-card_body--settings-onboarding {
  padding: 16px;
}

.settings-onboarding_close {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 12px;
  transition: 0.3s ease all;
  color: rgba(139, 148, 169, 0.5);
}

.settings-onboarding_close:hover {
  color: #8b94a9;
}

.mat-meta--settings-onboarding {
  margin: 8px 0 16px 0;
}

.settings-onboarding-item {
  width: 100%;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  margin: 8px 0 0 0;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 500;
  background: #007ddd;
  color: #fff;
  cursor: pointer;
  transition: 0.3s ease all;
}

.settings-onboarding-item:hover {
  background: #006bbd;
}

.settings-onboarding-item .icon {
  margin: 0 6px 0 0;
}

.settings-onboarding-item .icon-check {
  font-size: 13px;
  vertical-align: -1px;
  cursor: default;
}

.settings-onboarding-item.complete {
  cursor: default;
  background: rgba(139, 148, 169, 0.08);
  color: #8b94a9;
}

.settings-onboarding-tag {
  color: #fff;
  position: relative;
  background: #007ddd;
  display: flex;
  justify-content: space-between;
  padding: 8px;
  margin: 8px 0 8px 0;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
}

.settings-onboarding-tag .icon {
  opacity: 0.5;
  margin: 0 0 0 8px;
  transition: 0.3s ease all;
}

.settings-onboarding-tag .icon:hover {
  opacity: 1;
}

.settings-onboarding-tag:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #007ddd;
  position: absolute;
  bottom: -10px;
}

.settings-onboarding-tag--company {
  top: 0;
}

/* End onboarding */
body {
  background-color: #f8f8f9 !important;
}

.login-signup .container {
  padding: 0;
}

.uni-header {
  background: #f8f8f9;
}

.uni-main-header {
  background: none;
  box-shadow: none;
}

.uni-header .button {
  margin: 8px 0;
  display: initial !important;
  min-width: 74px;
  text-align: center;
}

.join-email-fields {
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.input-button .icon-right {
  top: 12px;
}

.social-login .input-button {
  margin: 0 0 16px 0;
}

.social-login .input-button:last-of-type {
  margin: 0 0 32px 0;
}

.join-container .help-block {
  margin: 0 0 8px;
  float: left;
  font-size: 15px;
  line-height: inherit;
  font-weight: 400;
  color: #dd0038;
}

.auth.modal-overlay {
  background: #f8f8f9;
}

.welcome {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.cordova .crew-landing .uni-header .left-content {
  display: none;
}

.menu-closed .uni-sub-header {
  background: #fff;
  border-color: #f2f2f4;
  box-shadow: none;
}

.menu-closed .uni-sub-header:hover {
  border-color: #007ddd;
}

.crew-landing .container.sign-up {
  padding: 0;
}

.crew-landing .container:not(.sign-up) {
  padding: 0 8px;
}

/*@media (max-width: 640px) { 
.crew-landing .container:not(.sign-up),
.crew-landing .single-col {
  padding: 0 32px;
}
}*/
.crew-landing h1,
.crew-landing h2 {
  margin: 48px 0 16px 0;
  font-family: "Sentinel A", "Sentinel B", "Besley", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  color: #123965;
  line-height: 1 !important;
  font-size: 50px;
  text-align: center;
}

.crew-landing h1 {
  margin-top: 112px;
}

.crew-landing p {
  color: #434957;
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 32px 0;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 640px) {
  .crew-landing h2,
.crew-landing h1 {
    font-size: 32px;
  }

  .crew-landing p {
    font-size: 16px;
  }
}
.crew-landing .button.cta {
  width: 35%;
  min-width: 250px;
  max-width: 100%;
  display: block;
  clear: both;
  margin: 16px auto 8px auto;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

/* @group sign up section */
.sign-up {
  background: #f8f8f9;
  background-size: cover;
  min-height: 550px;
  max-height: 550px;
  height: calc(100vh - 100px);
  -webkit-animation: fadeIn ease-out 0.4s forwards;
          animation: fadeIn ease-out 0.4s forwards;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 640px) {
  .crew-landing .sign-up {
    height: calc((100vw * 1.76) - 210px);
    min-height: 550px;
    max-height: 640px;
  }

  .welcome .sign-up {
    height: calc(100vw * 1.76 - 100px);
  }

  .cordova .welcome .sign-up {
    height: calc(100vw * 1.76);
    max-height: none !important;
  }

  .sign-up h1 {
    margin: 32px 0 16px 0;
  }
}
.sign-up .bg-fade {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.55) 100%);
  height: 100%;
  min-height: 550px;
  float: left;
  align-items: flex-start;
}

.photo-source {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 16px;
}

@media (max-width: 640px) {
  .photo-source {
    display: none;
  }

  .crew-landing .photo-source {
    display: flex;
    justify-content: center;
    width: calc(100% - 32px);
    position: absolute !important;
    margin: 0;
    width: 100%;
    padding: 32px 0 8px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.29) 100%) transparent;
  }

  .crew-landing .photo-source .card {
    color: white;
    background: transparent;
    margin: 0 !important;
    box-shadow: none;
    opacity: 0.6;
    text-align: center;
    width: 100%;
  }

  .crew-landing .photo-source .card a {
    color: white !important;
  }

  .crew-landing .photo-source .card img {
    display: none;
  }
}
.photo-source .thumb-img {
  float: left;
}

.down-button {
  position: absolute;
  color: #fff !important;
  text-decoration: none;
  font-size: 32px;
  height: 80px;
  margin: 0;
  margin-left: -16px;
  line-height: 80px !important;
  padding: 0;
  margin-top: 100vw;
  line-height: 80px !important;
  text-align: center;
  display: inline-block;
  line-height: 28px;
  left: 50%;
  transition: all 0.2s ease;
  -webkit-animation: bounce-down 2s ease infinite;
  animation: bounce-down 2s ease infinite;
  z-index: 999;
  display: none !important;
}

@-webkit-keyframes bounce-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes bounce-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(5px);
  }
}
@media (max-width: 640px) {
  .down-button {
    display: inline-block;
  }
}
.photo-source .card {
  margin: 0;
  padding: 8px;
  width: auto;
  line-height: 24px;
}

.sign-up .copy-meta a {
  color: #8B94A9;
  font-weight: 600;
}

.sign-up .copy-meta a:hover {
  color: #007ddd;
}

/* @end sign up section */
/* @group endorse section */
.endorse {
  background: #003c69;
  background: linear-gradient(to bottom, #00508d 0%, #002848 100%);
  padding: 0 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.endorse img {
  padding: 72px 0 0 0;
  margin: 0 32px 0 32px;
  width: 280px;
  opacity: 0;
}

.animate.endorse img {
  -webkit-animation: fadeInRightEase ease 0.4s forwards;
          animation: fadeInRightEase ease 0.4s forwards;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.endorse-copy {
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.animate .endorse-copy {
  -webkit-animation: fadeInLeftEase ease 0.4s forwards;
          animation: fadeInLeftEase ease 0.4s forwards;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.endorse h2 {
  color: #fff;
  text-align: right;
}

.endorse p {
  color: #fff;
  text-align: right;
  max-width: 550px;
}

.endorse .cta.button-primary {
  align-self: flex-end;
  margin: 8px 0 32px 0;
}

@media (max-width: 957px) {
  .endorse h2 {
    text-align: center;
  }

  .endorse p {
    text-align: center;
    margin-right: 8px;
    margin-left: 8px;
  }

  .endorse img {
    padding: 16px 0 0 0;
  }

  .endorse .cta.button-primary {
    margin-left: auto;
    margin-right: auto;
  }
}
/* @end endorse section */
/* @group check in */
.check-in {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, #f8f8f9 30.5%, #daefff 100%);
}

.check-in h2 {
  text-align: left;
}

.check-in p {
  text-align: left;
}

.check-in img {
  padding: 72px 0 0 0;
  margin: 0 32px 0 32px;
  width: 280px;
  opacity: 0;
}

.check-in .cta.button-primary {
  align-self: flex-start;
  margin: 8px 0 32px 0;
}

@media (max-width: 957px) {
  .check-in-copy {
    text-align: center;
  }

  .check-in h2,
.check-in p {
    text-align: center;
    margin-right: 8px;
    margin-left: 8px;
  }

  .check-in img {
    padding: 16px 0 0 0;
  }

  .check-in .cta.button-primary {
    margin-left: auto;
    margin-right: auto;
  }
}
.animate.check-in img {
  -webkit-animation: fadeInLeftEase ease-out 0.4s forwards;
          animation: fadeInLeftEase ease-out 0.4s forwards;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.check-in-copy {
  margin: 0 16px 0 16px;
  max-width: 550px;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  opacity: 0;
}

.animate .check-in-copy {
  -webkit-animation: fadeInRightEase ease 0.4s forwards;
          animation: fadeInRightEase ease 0.4s forwards;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

/* @end check in */
/* @group photos */
.crew-landing .container.photos {
  padding: 0;
  border-top: 1px solid;
  border-color: rgba(138, 147, 167, 0.2);
  background: #f8f8f9;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.photos h2 {
  opacity: 0;
  font-size: 32px;
  padding: 0 0 16px 0;
  margin-top: 72px;
  z-index: 10;
  position: relative;
}

.photos .h2-border {
  left: calc(25% + 20px);
  top: 90px;
  position: absolute;
  width: calc(50% - 40px);
  border-bottom: 1px solid rgba(139, 148, 169, 0.25);
}

.photos .h2-border:before {
  content: "";
  background: #f8f8f9;
  width: 60%;
  left: 20%;
  height: 30px;
  position: absolute;
  z-index: 1;
  top: -5px;
}

.photos p {
  opacity: 0;
  margin-right: 8px;
  margin-left: 8px;
}

.animate.photos h2 {
  -webkit-animation: fadeInRightEase ease 0.4s forwards;
          animation: fadeInRightEase ease 0.4s forwards;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.animate.photos p {
  -webkit-animation: fadeInLeftEase ease 0.4s forwards;
          animation: fadeInLeftEase ease 0.4s forwards;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.photo-row {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.photos .cta.button-primary {
  margin: 40px 0 72px;
}

.card.photo {
  min-height: 200px;
  opacity: 0;
  box-shadow: 0 0px 12px -1px rgba(51, 74, 109, 0.3);
}

.card.photo:hover {
  box-shadow: 0 0px 15px -1px rgba(51, 74, 109, 0.4);
}

.animate .card.photo {
  -webkit-animation: fadeIn ease-out 0.4s forwards;
          animation: fadeIn ease-out 0.4s forwards;
}

.animate .card.photo:nth-of-type(1) {
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}

.animate .card.photo:nth-of-type(2) {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.animate .card.photo:nth-of-type(3) {
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
}

.animate .card.photo:nth-of-type(4) {
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}

.animate .card.photo:nth-of-type(5) {
  -webkit-animation-delay: 750ms;
          animation-delay: 750ms;
}

@media (max-width: 1006px) {
  .photo-row {
    justify-content: flex-start;
  }

  .photo-row .card.photo:nth-of-type(3) {
    display: none;
  }

  .photos .h2-border {
    display: none;
  }
}
/* @end photos */
/*! Flickity v1.1.0
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: white;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button:hover {
  background: white;
}

.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09F;
}

.flickity-prev-next-button:active {
  filter: alpha(opacity=60);
  /* IE8 */
  opacity: 0.6;
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button:disabled {
  filter: alpha(opacity=30);
  /* IE8 */
  opacity: 0.3;
  cursor: auto;
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button .arrow {
  fill: #333;
}

/* color & size if no SVG - IE8 and Android 2.3 */
.flickity-prev-next-button.no-svg {
  color: #333;
  font-size: 26px;
}

/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #fff;
  border-radius: 50%;
  filter: alpha(opacity=25);
  /* IE8 */
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  filter: alpha(opacity=100);
  /* IE8 */
  opacity: 1;
}

.fp__overlay {
  z-index: 1050;
}

.join-container {
  margin-top: 50px;
}

.hide-form-fields .input-card {
  height: 0px;
  opacity: 0;
  transition: opacity 0.4s ease, height 0.4s ease;
}

.show.hide-form-fields .input-card {
  height: auto;
  opacity: 1;
}

.header-section {
  width: 100%;
  margin: 0 0 48px 0;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-signup .center-cols .icon-surveys-filled,
.login-signup .center-cols .icon-crew-filled,
.login-signup .center-cols .icon-homeowner-filled {
  font-size: 75px;
  line-height: 100px;
  display: inline-block;
  width: 100%;
  height: inherit;
  color: #8b94a8;
  text-align: center;
  cursor: default;
}

.login-signup .copy-body,
.login-signup .copy-body b {
  color: #004579;
  font-size: 14px;
  display: inline-block;
  text-align: center;
  max-width: 400px;
}

.login-signup a.copy-body {
  color: #007ddd;
  margin: 8px 0 0 0;
}

.login-signup .copy-body a {
  color: #007ddd;
}

.login-signup a.copy-body:hover,
.login-signup .copy-body a:hover {
  color: #006bbd;
}

.login-signup a.copy-body .icon-right:before {
  position: relative;
  top: 2px;
}

.login-signup .copy-title {
  color: #004579;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: "Sentinel A", "Sentinel B", "Besley", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 26px;
  font-weight: 600;
  margin: 4px 0 8px 0;
}

.alert-card {
  margin: 0 0 32px 0;
}

.main-portal {
  padding: 56px 0 88px 0 !important;
}

.main-portal .col1 {
  padding: 0 16px;
}

.other-portals {
  padding: 0 0 56px;
  border-top: 1px solid;
  border-color: rgba(138, 147, 167, 0.2);
}

.cordova .other-portals {
  display: none !important;
}

.other-portals .col1 {
  text-align: center;
  padding: 88px 16px 0;
}

.other-portals .button-cont {
  margin: 24px 0 0 0;
}

.other-portals .button-tertiary {
  margin: 0 4px;
  color: #8B94A9;
  border: 1px solid rgba(139, 147, 169, 0.5);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.other-portals .button-tertiary:hover {
  color: #007ddd;
  border-color: #007ddd;
}

.login-footer {
  padding: 72px 0 48px 0 !important;
  text-align: center;
}

.cordova .login-footer {
  display: none !important;
}

.form-cta {
  margin: 48px 0 0 0;
  text-align: center;
}

.join_banner {
  text-align: center;
  padding: 32px;
  font-size: 18px;
  font-weight: 500;
  background: #004579;
  color: #fff;
  margin: -56px auto 48px;
  display: flex;
  box-shadow: 0 1px 6px rgba(51, 74, 109, 0.32);
  justify-content: center;
}

.join_banner div {
  max-width: 800px;
}

/* @group Navbar styles */
body {
  position: relative;
  top: 50px;
  transition: margin 0.3s ease;
}

body.scroll-freeze {
  max-height: 100vh;
  overflow: hidden;
}

body.scroll-freeze .scroll-freeze--pointer {
  pointer-events: none;
}

body.marketing.scroll-freeze,
body.crew.scroll-freeze {
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

body.gq3.gq3--no-header {
  top: 0;
}

.flex {
  display: flex;
}

.navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  display: flex;
  height: 50px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(51, 74, 109, 0.12);
  justify-content: space-between;
  align-items: center;
  z-index: 2000;
  margin-bottom: 0px;
  border: 0;
}

.navbar .icon {
  width: auto;
  height: auto;
}

[mat-button].navbar_button,
.navbar_button {
  cursor: pointer;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 600;
  color: #8B94A9;
  position: relative;
  border-radius: 0;
  flex-shrink: 0;
  min-width: 0;
  line-height: 1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.gq3 [mat-button].navbar_button,
.gq3 .navbar_button {
  -webkit-animation: halfFadein 0.5s ease;
          animation: halfFadein 0.5s ease;
}

.navbar_button .mat-button-wrapper {
  display: flex;
  align-items: center;
}

[mat-button].navbar_button .mat-button-focus-overlay {
  display: none;
}

.navbar_button.button--hamburger .icon {
  font-size: 16px;
}

.navbar_button.button--logo svg {
  height: 22px;
  width: 145px;
}

.navbar_button.button--logo a {
  display: flex;
}

.navbar_middle .navbar_button {
  padding: 0 20px;
}

.navbar_middle .navbar_button .icon:before,
.navbar_middle [mat-button].navbar_button .icon:before {
  transition: font-size 0.3s ease;
  font-size: 15px;
  margin-right: 6px;
  position: relative;
}

.navbar_middle [mat-button].navbar_button .icon-activity:before,
.navbar_middle .navbar_button .icon-activity:before {
  font-size: 20px;
}

.navbar_middle .navbar_button .icon-answers:before {
  top: 1px;
}

.navbar_button.button--fake {
  filter: grayscale(50%);
  opacity: 0.5;
  cursor: default !important;
  -webkit-animation: none;
          animation: none;
}

.navbar_button.button--fake:hover {
  background: none !important;
}

.navbar_button.button--fake .icon {
  cursor: default !important;
}

.button--fake-logo,
.button--fake-logo:hover {
  background: none !important;
  cursor: default !important;
  -webkit-animation: none;
          animation: none;
}

[mat-button].navbar_button:hover,
.navbar_button:hover {
  background: rgba(139, 148, 169, 0.1);
  color: #8B94A9;
}

.navbar_button--fake:hover {
  background: none;
}

[mat-button].account-menu_button .mat-ripple-element,
[mat-button].nav-menu_button .mat-ripple-element,
[mat-button].navbar_button .mat-ripple-element {
  background-color: rgba(139, 148, 169, 0.08);
  transition: opacity, transform 0ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

.navbar_right .navbar_button.button--notificiations {
  font-size: 20px;
  padding: 0 16px;
}

.navbar_right .button3 {
  font-size: 13px;
  align-self: center;
  margin-right: 8px;
}

.navbar_right .button3.button3--blue {
  margin: 0 8px;
}

[mat-button].button.button--admin {
  margin-right: 16px;
}

.navbar_notifications {
  position: absolute;
  top: 8px;
  right: 25%;
  font-size: 10px;
  padding: 2px 4px;
  color: #fff;
  background: #ff6300;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

.navbar_left {
  padding: 0 24px;
  align-self: inherit;
  flex-basis: 25%;
  display: flex;
  flex-grow: 0;
  justify-content: flex-start;
}

.navbar_middle {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-basis: 50%;
  flex-grow: 0;
}

.navbar_middle.short {
  padding: 0 3%;
}

.navbar_right {
  padding: 0 24px;
  flex-grow: 0;
  flex-basis: 25%;
  display: flex;
  justify-content: flex-end;
}

.sub-navbar {
  height: 51px;
  background: #fff;
  background: rgba(139, 148, 169, 0.05);
  flex-basis: 100%;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 1;
  z-index: 30;
  position: relative;
  transition: opacity 0.3s ease, height 0.3s ease, border 0.3s ease;
  border-bottom: 1px solid rgba(139, 148, 169, 0.32);
}

/* Messes up search 
.sub-navbar--scroll.sub-navbar {
  height: 0px;
  opacity: 0;
}
*/
.sub-navbar_search-form {
  width: calc(100% - 24px);
  height: 50px;
  border-radius: 3px;
  margin: 0 24px 0 0;
  display: flex;
  align-content: center;
}

.sub-navbar_search-form .icon {
  height: 100%;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8B94A9;
}

.sub-navbar_search-form:hover .icon {
  color: #007ddd;
}

.sub-navbar:hover {
  border-bottom: 1px solid #007ddd;
}

.sub-navbar_search-form .twitter-typeahead {
  direction: initial;
  position: initial;
  display: flex;
  width: 100%;
  height: 50px;
}

.sub-navbar_search-form input {
  width: calc(100% - 24px);
  height: 50px;
  font-size: 13px;
  padding: 0 8px;
  border: 0;
  color: #123965;
  background: none;
  box-shadow: none !important;
}

.sub-navbar_search-form input::-webkit-input-placeholder {
  color: #8B94A9;
}

.sub-navbar_sales-number {
  flex-shrink: 0;
  font-size: 13px;
  color: rgba(139, 148, 169, 0.75);
  cursor: default;
}

.navbar_app {
  font-family: "Sentinel A", "Sentinel B", "Besley", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #123965;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 0 8px;
}

.button--fake .navbar_app {
  color: #8B94A9;
}

.navbar_avatar {
  width: 28px;
  height: 28px;
  background: rgba(139, 148, 169, 0.5);
  border-radius: 50%;
  position: relative;
}

.navbar_button--avatar {
  padding: 0 10px 0 6px;
}

.navbar_button--avatar .icon-chevron-down {
  font-size: 11px;
  opacity: 0.5;
  margin-right: 4px;
}

.navbar_button .brand-logo {
  width: 145px;
  padding: 10px;
}

.avatar--gq-logo {
  background: url(/img/header/q-logo-2.png);
  background-size: cover;
  flex-shrink: 0;
}

.avatar--gq-logo:before {
  color: rgba(139, 148, 169, 0.5);
  right: -19px;
  top: 6px;
  font-size: 14px;
  position: absolute;
}

.navbar_avatar.navbar_avatar--logo {
  background: url(/img/header/q-logo-2.png);
  background-size: cover;
  width: 28px;
  height: 28px;
}

.navbar_avatar.navbar_avatar--small {
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: 10px;
  right: 8px;
  background-size: cover;
}

.navbar_avatar.navbar_avatar--company {
  border-radius: 3px;
  background-size: contain;
  background-position: center;
  background-color: #fff;
  background-repeat: no-repeat;
}

/* Universal navbar responsive styles */
.notificiations.narrow,
.navbar_left .button3.narrow,
.button--logo.narrow {
  display: none;
}

@media (max-width: 830px) {
  .navbar_middle .navbar_button {
    padding: 0 14px;
  }

  .navbar_right {
    padding: 0 8px 0 0;
  }

  .navbar_left {
    padding: 0 0 0 8px;
  }

  .sub-navbar {
    padding: 0 16px;
  }

  .sub-navbar__search-form input,
.sub-navbar__search-form {
    width: 100%;
    margin: 0;
  }

  .sub-navbar_sales-number {
    display: none;
  }
}
@media (max-width: 700px) {
  .navbar_app,
.button--logo.wide,
.navbar_left .button--fake .navbar_avatar,
.button--notificiations.wide,
[mat-button].button.button--admin {
    display: none;
  }

  .button--logo.narrow,
.notificiations.narrow {
    display: flex;
  }
}
@media (max-width: 500px) {
  .navbar_left,
.navbar_right {
    flex-basis: inherit;
  }
}
@media (max-width: 400px) {
  .button--hamburger {
    padding: 16px;
    font-size: 20px;
  }

  .button--logo,
.button--logo.narrow {
    display: none;
  }
}
/* GQ3 navbar responsive styles */
.gq3 .navbar_middle {
  justify-content: space-between;
}

@media (max-width: 950px) {
  .gq3 .navbar_middle .text {
    display: none;
  }

  .gq3 .navbar_middle [mat-button] .icon:before {
    font-size: 20px;
    margin-right: 0;
  }
}
@media (max-width: 400px) {
  .navbar_left,
.navbar_right {
    min-width: 60px;
  }

  .gq3 .navbar_middle li:nth-of-type(1) {
    display: none;
  }
}
/* Marketing site navbar responsive styles */
@media (max-width: 1230px) {
  .marketing .navbar_middle li:nth-of-type(6) {
    display: none;
  }
}
@media (max-width: 1120px) {
  .marketing .navbar_middle li:nth-of-type(7),
.marketing .navbar_middle .text {
    display: none;
  }

  .marketing .navbar_middle .icon:before {
    font-size: 18px;
    margin-right: 0;
  }
}
@media (max-width: 700px) {
  .public .marketing .button--logo.wide {
    display: flex;
  }

  .marketing .navbar_middle li:nth-of-type(5),
.marketing .navbar_middle li:nth-of-type(4),
.public .marketing .button--logo.narrow {
    display: none;
  }
}
@media (max-width: 550px) {
  .marketing .navbar_right .button3.wide,
.public .marketing .navbar_middle li {
    display: none;
  }

  .marketing .navbar_left .button3.narrow {
    display: flex;
  }
}
@media (max-width: 400px) {
  .public .marketing .navbar_button.button--logo svg {
    width: 110px;
  }
}
/* Crew navbar responsive styles */
.user .crew .navbar_middle {
  padding: 0 3%;
}

@media (max-width: 1230px) {
  .public .crew .navbar_middle li:nth-of-type(6) {
    display: none;
  }
}
@media (max-width: 1120px) {
  .public .crew .navbar_middle li:nth-of-type(7),
.crew .navbar_middle .text {
    display: none;
  }

  .crew .navbar_middle .icon:before {
    font-size: 18px;
    margin-right: 0;
  }

  .crew .navbar_middle .icon-activity:before {
    font-size: 24px;
  }
}
@media (max-width: 700px) {
  .join.crew .button--logo,
.public .crew .button--logo {
    display: flex;
  }

  .public .crew .navbar_middle li:nth-of-type(4),
.public .crew .navbar_middle li:nth-of-type(5),
.public .crew .button--logo.narrow,
.crew .navbar_right .button3.button3--dashboard-crew {
    display: none;
  }
}
@media (max-width: 550px) {
  .crew .navbar_right .button3.wide,
.public .crew .navbar_middle li {
    display: none;
  }

  .crew .navbar_left .button3.narrow {
    display: flex;
  }

  .crew .button--logo,
.crew .button--logo.narrow {
    display: none;
  }
}
@media (max-width: 400px) {
  .join.crew .navbar_button.button--logo svg,
.public .crew .navbar_button.button--logo svg {
    width: 110px;
  }

  .public .crew .navbar_middle li,
.user .crew .navbar_middle li:nth-of-type(3) {
    display: none;
  }

  .user .crew .navbar_middle {
    padding: 0;
    justify-content: space-between;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .marketing .navbar_middle li:nth-of-type(7) {
    display: none;
  }
}
/* @end navbar styles */
/* @group Navbar menus */
.nav-menu,
.account-menu {
  position: fixed;
  width: 100vw;
  width: 100%;
  height: 1px;
  top: -1px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 8000;
}

.nav-menu.open,
.account-menu.open {
  top: 50px;
  padding-bottom: 32px;
  opacity: 1;
  height: 100vh;
}

.account-menu_list,
.nav-menu_list {
  max-height: calc(100vh - 50px);
  background: #fff;
  box-shadow: 3px 3px 4px rgba(51, 74, 109, 0.1);
  position: fixed;
  top: 50px;
  margin: 0 0 32px 0;
  padding: 8px 0 16px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  width: 250px;
  overflow-y: scroll;
  overflow-y: auto;
  z-index: 1;
}

.account-menu_list::-webkit-scrollbar,
.nav-menu_list::-webkit-scrollbar {
  display: none;
}

.nav-menu_list {
  border-bottom-right-radius: 3px;
}

.account-menu_list {
  border-bottom-left-radius: 3px;
  box-shadow: -2px 2px 7px rgba(51, 74, 109, 0.1);
  top: 50px;
  margin: 0 0 32px 0;
  right: 0;
  padding: 8px 0 8px;
  width: 225px;
}

.nav-menu_list .button3 {
  margin: 16px;
}

.nav-menu.open .nav-menu_list,
.account-menu.open .account-menu_list {
  opacity: 1;
  transform: scale(1);
}

.account-menu_list,
.account-menu.open .account-menu_list {
  transform-origin: top right;
}

.nav-menu_list,
.nav-menu.open .nav-menu_list {
  transform-origin: top left;
}

.nav-menu_overlay,
.account-menu_overlay {
  display: flex;
  transition: background 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  width: 1px;
  height: 1px;
  position: fixed;
  top: -1px;
  bottom: 0;
  left: -1px;
  right: 0;
  margin: 50px 0 0 0;
}

.nav-menu.open .nav-menu_overlay,
.account-menu.open .account-menu_overlay {
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  opacity: 1;
}

[mat-button].nav-menu_button,
.nav-menu_button {
  width: 100%;
  height: 40px;
  cursor: pointer;
  padding: 10px 32px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 600;
  color: #8B94A9;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1em;
}

[mat-button].nav-menu_button .mat-button-focus-overlay {
  display: none;
}

[mat-button].account-menu_button,
.account-menu_button {
  width: 100%;
  cursor: pointer;
  padding: 10px 32px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: #123965;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.1em;
}

.account-menu_button--minor {
  font-size: 12px;
}

[mat-button].account-menu_button .mat-button-wrapper {
  display: flex;
  width: 100%;
  white-space: normal;
  align-items: center;
}

[mat-button].account-menu_button:hover .mat-button-focus-overlay {
  display: none;
}

[mat-button].nav-menu_button .icon:before,
.nav-menu_button .icon:before {
  font-size: 18px;
  line-height: 18px;
  margin-right: 10px;
}

.account-menu_button:hover {
  background: rgba(139, 148, 169, 0.1);
  color: #123965;
}

.account-menu_button--fake:hover {
  background: none;
  cursor: default;
}

[mat-button].nav-menu_button:hover,
.nav-menu_button:hover {
  background: rgba(139, 148, 169, 0.1);
  color: #8B94A9;
}

[mat-button].nav-menu_button.button--header,
.nav-menu_button.button--header:hover,
.nav-menu_button.button--header {
  color: #004579;
  font-weight: 600;
}

.account-menu_button.button--avatar {
  height: auto;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 32px;
  color: #123965;
  text-align: left;
}

.account-menu_button.button--avatar:hover {
  color: #123965;
}

.account-menu_button--inactive-avatar {
  height: auto;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 32px;
  margin: -8px 0 0;
  color: #123965;
  background: rgba(139, 148, 169, 0.1);
}

.account-menu_button--inactive-avatar:hover {
  background: #8b94a9;
  color: #fff;
}

.account-menu .account-menu_user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  background: url(/img/header/q-logo-2.png);
  background-size: cover;
  margin: 0 12px 0 0;
  flex-shrink: 0;
}

.account-menu .account-menu_user-avatar--company {
  border-radius: 3px;
  background-size: contain;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
}

.account-menu .account-menu_user-avatar.add-avatar {
  background: rgba(139, 148, 169, 0.16);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8b94a9;
}

.menu-divider {
  width: 100%;
  height: 1px;
  margin: 8px 0;
  background: rgba(139, 148, 169, 0.24);
  flex-shrink: 0;
}

.nav-menu_close,
.account-menu_close {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 18px;
  color: rgba(139, 148, 169, 0.32);
  z-index: 25;
  padding: 14px 24px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.account-menu_close {
  right: 0;
  left: initial;
}

.nav-menu_close:hover,
.account-menu_close:hover {
  color: #8b94a9;
}

@media (max-width: 500px) {
  .account-menu_list {
    width: auto;
    max-width: 80%;
  }

  .account-menu_button.button--avatar {
    font-size: 18px;
  }

  [mat-button].account-menu_button,
.account-menu_button {
    font-size: 16px;
  }

  [mat-button].nav-menu_button,
.nav-menu_button {
    font-size: 16px;
    line-height: 16px;
    height: 46px;
  }

  .nav-menu_list,
.account-menu_list {
    box-shadow: -2px 5px 7px rgba(0, 0, 0, 0.2);
  }

  [mat-button].nav-menu_button .icon:before,
.nav-menu_button .icon:before {
    font-size: 22px;
    line-height: 22px;
  }

  .nav-menu_overlay,
.account-menu_overlay {
    background: rgba(59, 58, 64, 0.7);
  }
}
/* @end navbar menus */
/* @group Universal search */
.tt-dropdown-menu {
  background: #fff;
  border-radius: 0 0 3px 3px;
  padding: 0 8px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  width: calc(100% + 18px);
  max-width: 100%;
  left: -18px !important;
  top: 50px !important;
  overflow: hidden;
  z-index: 99999;
}

.tt-suggestion {
  width: 100%;
  float: left;
}

.suggest-row {
  width: 100%;
  float: left;
  padding: 6px 16px 6px 16px;
  border-radius: 2px 0 0 2px;
  text-align: left;
}

.suggest-row:hover {
  background: #f7f7f7;
  cursor: pointer;
}

.suggest-row .view-all {
  display: none;
  font-size: 13px;
  color: #8B94A9;
  float: right;
  margin-right: 8px;
  margin-top: 2px;
}

.suggest-divide-after {
  margin: 0 0 16px 0;
}

.suggest-avatar {
  width: 18px;
  height: 18px;
  margin: 1px 8px 0 0;
  border-radius: 3px;
  float: left;
  overflow: hidden;
  border: none !important;
}

.suggest-type {
  float: left;
  line-height: 20px;
  font-size: 13px;
  color: #123965;
  font-weight: 400;
  max-width: calc(100% - 32px);
}

.tt-highlight {
  font-weight: 700;
  color: inherit;
}

.suggest-pro-user-city,
.suggest-company-city {
  font-size: 13px;
  color: #8B94A9;
  margin: 0 0 0 8px;
  display: inline-block;
}

.suggest-header {
  width: 100%;
  height: 32px;
}

.suggest-header:before {
  border-top: 1px solid;
  border-color: rgba(139, 147, 169, 0.15);
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  margin-top: -14px;
  left: 0;
}

div.tt-dataset-search {
  margin-top: 5px;
}

.suggest-header .suggest-type {
  font-size: 13px;
  color: #8B94A9;
  margin-right: 16px;
}

.suggest-header .view-all {
  display: inherit;
}

/* @end Universal search */
/* @group Footer */
.uni-footer {
  height: auto;
  position: relative;
  flex-wrap: wrap;
  border-top: 1px solid #F3F3F3;
  transition: opacity 0.3s ease;
  transition-delay: 1s;
  background: #f8f8f9;
}

.sitemap-frame {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 48px 0 60px 64px;
  flex-shrink: 0;
  max-width: 980px;
}

.footer-top {
  border-top: 1px solid #F3F3F3;
}

.nav-cont {
  margin-top: -48px;
}

.sitemap-col {
  margin: 0 16px;
  width: 25%;
}

.sitemap-col ul {
  text-align: left;
  margin-bottom: 16px;
}

.sitemap-col li {
  line-height: 14px;
}

.sitemap-col li a {
  display: inline-block;
  margin: 0 0 0 24px;
  color: #8b94a9;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6em;
}

.sitemap-col li a:hover .icon,
.sitemap-col li a:hover,
.sitemap-col li a.category:hover {
  text-decoration: none;
  color: #007ddd;
}

.sitemap-col li a .icon {
  display: inline-block;
  width: 16px;
  top: 2px;
  position: relative;
  color: #123965;
  font-size: 17px;
  margin: 0 8px 0 0;
  transition: all 0.2s ease;
}

.ios .sitemap-col li a .icon {
  top: 7px;
}

.sitemap-col li a.category {
  margin: 4px 0;
  color: #123965;
  font-size: 20px;
  font-family: "Sentinel A", "Sentinel B", "Besley", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

.footer-bottom {
  width: 100%;
  padding: 42px 0;
  flex-shrink: 0;
  border-top: 1px solid #F3F3F3;
  text-align: center;
}

.footer-bottom li {
  font-size: 14px;
  font-weight: 400;
  color: #8B94A9;
  display: inline-block;
  margin: 16px 12px;
}

.footer-bottom li .icon {
  font-size: 20px;
}

.uni-footer li a {
  color: #8B94A9;
  transition: all 0.2s ease;
}

.uni-footer li a:hover {
  color: #007ddd;
  text-decoration: none;
}

@media (max-width: 960px) {
  .sitemap-frame {
    display: block;
    padding-left: 0;
  }

  .sitemap-col li a {
    margin: 0;
  }

  .sitemap-col {
    width: calc(100% - 32px);
    text-align: center;
  }

  .sitemap-col ul {
    padding: 0;
    text-align: center;
    margin: 0;
  }

  .sitemap-col li a:not(.category):not(.button) {
    display: none;
  }

  .footer-bottom .meta-links li {
    display: block;
  }
}
/* End footer */
/* @group ripple code */
.ripple {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  overflow: hidden;
}

.ripple_ink {
  display: block;
  position: absolute;
  background: rgba(0, 69, 121, 0.25);
  background: rgba(0, 125, 221, 0.25);
  background: rgba(139, 148, 169, 0.25);
  border-radius: 100%;
  transform: scale(0);
}

.ripple_ink.animate {
  -webkit-animation: ripple 0.45s linear;
          animation: ripple 0.45s linear;
}

@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}
/* @end ripple code */
/* @group GQ3 Buttons - Only here temporarily - Chris Feb 20 2017 */
.button3 {
  display: flex;
  color: inherit;
  padding: 0.65em 1em 0.65em;
  border: none;
  border-radius: 3px;
  line-height: 1em;
  white-space: nowrap;
  font-weight: 600;
  text-decoration: none;
  align-self: center;
  justify-content: center;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 12px;
  box-sizing: border-box;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  margin: 0;
  min-width: 0;
  vertical-align: baseline;
}

.button3 .mat-button-focus-overlay {
  display: none;
}

.button3.button3--orange {
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.24);
  background: #ff6300;
  color: #fff;
}

.button3.button3--orange:hover {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.32);
  background: #ec4f00;
  color: #fff;
  transform: translateY(-1px);
}

.button3.button3--blue {
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.24);
  background: #007ddd;
  color: #fff;
}

.button3.button3--blue:hover {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.32);
  background: #006bbd;
  color: #fff;
  transform: translateY(-1px);
}

.button3.button3--clear {
  background: none;
  color: #8b94a8;
}

.button3.button3--clear:hover {
  background: rgba(139, 148, 169, 0.1);
  color: #8b94a8;
  transform: translateY(-1px);
}

.button3.button3--clear-blue {
  background: none;
  color: #007ddd;
}

.button3.button3--clear-blue:hover {
  background: rgba(139, 148, 169, 0.1);
  color: #006bbd;
  transform: translateY(-1px);
}

/* @end GQ3 Buttons */
/* footer latest feed */
/* begin code brought over from WP styling */
.uni-latest ul.posts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.uni-latest ul.posts li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  width: 31.56%;
  margin-bottom: 30px;
  background-color: white;
}

.uni-latest ul.posts li * {
  word-wrap: normal;
}

.uni-latest ul.posts li:nth-of-type(2),
.uni-latest ul.posts li:nth-of-type(3n+2) {
  margin: 0 2.66% 30px 2.66%;
}

.uni-latest a.post-link-related {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
}

.uni-latest ul.posts li a:hover,
.uni-latest ul.posts li a:focus {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.uni-latest ul.posts li a,
.uni-latest ul.posts li.featured-post {
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.uni-latest ul.posts li a:active {
  position: relative;
  top: 0px;
}

.uni-latest .post-thumbnail {
  height: 185px;
  overflow: hidden;
  position: relative;
}

.uni-latest .post-thumbnail img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.uni-latest ul.posts li .post-text {
  padding: 28px 8% 72px;
}

.uni-latest .post-text .post-title {
  text-align: left;
}

.uni-latest .post-text .post-excerpt,
.uni-latest .post-text .post-excerpt span {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4em;
  color: #8B94A9;
  padding-top: 5px;
  text-align: left;
}

@media only screen and (min-width: 1540px) {
  .uni-latest #ajax-load-more ul.posts .alm-reveal li:not(.featured-post),
.uni-latest ul.posts:not(.latest-posts) li:not(.featured-post) {
    width: 23.005%;
    margin: 0 1.33% 30px !important;
  }

  .uni-latest #ajax-load-more ul.posts .alm-reveal li:not(.featured-post):nth-of-type(1),
.uni-latest #ajax-load-more ul.posts .alm-reveal li:not(.featured-post):nth-of-type(4n+1),
.uni-latest ul.posts:not(.latest-posts) li:not(.featured-post):nth-of-type(1),
.uni-latest ul.posts:not(.latest-posts) li:not(.featured-post):nth-of-type(4n+1) {
    margin: 0 1.33% 30px 0 !important;
  }

  .uni-latest #ajax-load-more ul.posts .alm-reveal li:not(.featured-post):nth-of-type(4),
.uni-latest #ajax-load-more ul.posts .alm-reveal li:not(.featured-post):nth-of-type(4n+4),
.uni-latest ul.posts:not(.latest-posts) li:not(.featured-post):nth-of-type(4),
.uni-latest ul.posts:not(.latest-posts) li:not(.featured-post):nth-of-type(4n+4) {
    margin: 0 0 30px 1.33% !important;
  }
}
@media only screen and (max-width: 1100px) {
  .uni-latest #ajax-load-more ul.posts .alm-reveal li,
.uni-latest ul.posts li {
    width: calc(50% - 15px);
    margin: 0;
  }

  .uni-latest #ajax-load-more ul.posts .alm-reveal li:nth-of-type(even),
.uni-latest ul.posts li:nth-of-type(even) {
    margin: 0 0 30px 15px;
  }

  .uni-latest #ajax-load-more ul.posts .alm-reveal li:nth-of-type(odd),
.uni-latest ul.posts li:nth-of-type(odd) {
    margin: 0 15px 30px 0;
  }
}
@media only screen and (max-width: 768px) {
  .uni-latest .post-thumbnail {
    height: 150px;
  }
}
@media only screen and (max-width: 640px) {
  .uni-latest #ajax-load-more ul.posts .alm-reveal li,
.uni-latest ul.posts li {
    width: 100%;
    margin: 0 0 16px !important;
  }

  .uni-latest #blog-page-content {
    max-width: 500px !important;
    margin: 0 auto;
  }
}
/* end code brought over from WP styling */
.uni-latest {
  padding: 56px 0 42px;
  border-top: 1px solid #F3F3F3;
  position: relative;
  background: #f8f8f9;
}

@media (max-width: 767px) {
  .uni-latest {
    padding-top: 48px;
    padding-bottom: 32px;
  }
}
.uni-latest .uni-container {
  max-width: 1420px !important;
  padding: 0 30px;
  margin: 0 auto;
  position: relative;
}

@media only screen and (min-width: 1290px) {
  .uni-latest .uni-container {
    padding: 0 60px;
  }
}
@media only screen and (max-width: 1066px) {
  .uni-latest .uni-container {
    padding: 0 16px;
  }
}
.uni-latest header {
  width: 100%;
}

.uni-latest header h3 {
  text-align: center;
  font-size: 28px;
  font-family: "Sentinel A", "Sentinel B", "Besley", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 1.5em;
  color: #004579;
}

.uni-latest header h3 a {
  font-family: "Sentinel A", "Sentinel B", "Besley", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
}

.uni-latest ul.posts {
  -ms-justify-content: center;
  justify-content: center;
}

.uni-latest ul.posts li {
  width: 195px;
  margin: 0 15px 30px 15px !important;
}

.uni-latest ul.posts li a.post-link {
  border-radius: 0;
}

.uni-latest ul.posts li .post-text {
  padding: 15px 18px 20px;
}

.uni-latest ul.posts li .post-thumbnail {
  height: 100px;
  background-size: cover;
  background-position: 50% 50%;
  background-color: #eee;
}

.uni-latest ul.posts li h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #004579;
  font-size: 15px;
  line-height: 1.3em;
  display: block;
  width: 100%;
}