body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
html, body {
height: 100%;
}
nav{
flex-shrink:0;
/*min-height: 64px;*/
z-index: 100;
}
main {
flex: 1 0 auto;
/*padding: 2em 0;*/
}
.brand-logo img{
/*width: 120px;*/
/*width: 175px;*/
height: 30px;
margin: 0.5em;
}
.mobile-brand-logo{
height: 30px;
margin: 2em auto;
}
.check {
margin: 2em 0;
}
.check > label > span {
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
.check > label > span:nth-child(3){
font-size: 1.25em;
}
.range-label{
font-size: 1.125em;
padding: 0!important;
}
.range-prompt{
font-size: 1.3em;
}
.range-row{
margin-top: 2em;
margin-bottom: 2em;
}
.thumb.active{
display: none;
}
.rather-image{
width: 80px;
/*-webkit-filter: grayscale(50%);*/
/*filter: grayscale(50%);*/
/*opacity: 0.6;*/
}
.industry{
border-radius: 0;
}
.alert{
margin: 2em 0;
}
.alert .card-content span {
font-weight: bold;
font-size: 1.1em;
margin-right: 4px;
}
.alert .card-content > p > .material-icons {
font-size: 1.5em;
position: relative;
top: 5px;
margin-right: 0.5em;
}
.alert .card-content a{
margin-top: -0.3em;
}
.section-header{
font-variant: small-caps;
color: gray;
font-size: 1.25em;
margin-top: 2em;
font-weight: 300;
}
.expert-name{
font-size: 1.3em;
}
.interest-image{
width: 60%;
margin: 0 auto;
}
.interest-deselect{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.micro{
font-size: 0.3em;
}
.small-text{
color: rgba(0,0,0,0.54);
font-size: 12px;
}
.mini-text{
font-size: 11px;
font-weight: 300;
}
.very-mini-text{
font-size: 9px;
line-height: 11px;
}
.light-text{
font-weight: 300!important;
}
.light-text p{
font-weight: 300!important;
}
p.light-text{
font-size: 1.15em;
}
.blur{
filter: blur(0.1rem);
}
/* RANGE INPUT */
/* from: https://www.cssportal.com/style-input-range/ */
input[type=range] {
height: 26px;
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 9px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #E2E2E2;
border-radius: 50px;
border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 50px;
background: #2196f3;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #E2E2E2;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 9px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #E2E2E2;
border-radius: 50px;
border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 50px;
background: #2196f3;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 9px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #E2E2E2;
border: 0px solid #000000;
border-radius: 100px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
background: #E2E2E2;
border: 0px solid #000000;
border-radius: 100px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 50px;
background: #2196f3;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #E2E2E2;
}
input[type=range]:focus::-ms-fill-upper {
background: #E2E2E2;
}
.dropdown-content{
width: max-content !important;
height:auto !important;
top: -4em;
}
#social-dropdown{
top: -0.75em;
}
.social-button{
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
opacity: 0.65;
}
.social-button:hover{
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}
.simpleMap{
background: url('data:image/svg+xml;utf8,');
background-position: center;
background-size: cover;
}
.pathDescription1 {
margin: -1.18em 0 -1.17em 0.5em;
border-left: 0.5em solid #3949ab;
padding: 0.02em 1em 0.5em 1.75em;
}
.pathDescription2 {
margin: -1.18em 0 -1.17em 0.5em;
border-left: 0.5em solid #e53935;
padding: 0.02em 1em 0.5em 1.75em;
}
.pathDescription3 {
margin: -1.18em 0 -1.17em 0.5em;
border-left: 0.5em solid #fb8c00;
padding: 0.02em 1em 0.5em 1.75em;
}
.pathDescription4 {
margin: -1.18em 0 -1.17em 0.5em;
border-left: 0.5em solid #2e7d32;
padding: 0.02em 1em 0.5em 1.75em;
}
.view-more-row, .view-more-card,
.view-more-row-l1, .view-more-card-l1,
.view-more-row-l2, .view-more-card-l2,
.view-more-row-l3, .view-more-card-l3,
.view-more-row-other, .view-more-card-other{
display: none;
}
/* Class for when element is above threshold*/
.pin-top {
position: relative;
}
/* Class for when element is below threshold*/
.pin-bottom {
position: relative;
}
/* Class for when element is pinned*/
.pinned {
position: fixed !important;
background-color: #FAFAFA;
z-index: 100;
}
.pinned h4{
font-size: 1.8em;
}
.mapSVG{
background: url('data:image/svg+xml;utf8,');
background-size: cover;
background-position: center;
}
.careerGPS{
background-image: url("../img/career-gps.svg");
background-size: cover;
background-position: center;
}
.landscape{
background-color: #8DD9FF;
background-image: url("../img/landscape.svg");
background-size: cover;
background-position: center;
}
.discover{
background-color: #FFDF4C;
background-image: url("../img/discover.svg");
background-size: cover;
background-position: center;
}
.insight{
background-color: LightGoldenRodYellow;
background-image: url("../img/insight.svg");
background-size: cover;
background-position: center;
}
.get-started{
background-color: navy;
background-image: url("../img/get-started.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.bullet-icon{
font-size: 1.5em;
position: relative;
top: 0.25em;
margin-right: 0.5em;
}
.grayscaled{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%) opacity(60%);
}
.love-it{
}
.not-sure{
}
.no-thanks{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%) opacity(30%);
}
@-webkit-keyframes spinning /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinning {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.spinning {
-webkit-animation: spinning 2s linear infinite;
-moz-animation: spinning 2s linear infinite;
-ms-animation: spinning 2s linear infinite;
-o-animation: spinning 2s linear infinite;
animation: spinning 2s linear infinite;
}
/* ONBOARDING */
.onboarding {
width: 125px;
height: 125px;
background-size: cover;
background-position: center;
margin: 1.5em auto 3em;
}
.geography {
background-image: url('../img/onboarding/geography.svg');
}
.journey {
background-image: url('../img/onboarding/journey.svg');
}
.time {
background-image: url('../img/onboarding/time.svg');
}
.sectors {
background-image: url('../img/onboarding/sectors.svg');
}
.achieve {
background-image: url('../img/onboarding/achieve.svg');
}
.vision {
background-image: url('../img/onboarding/vision.svg');
}
.birthday{
background-image: url('../img/onboarding/birthday.svg');
}
.personality{
background-image: url('../img/onboarding/personality-1.svg');
}
.enneagram{
background-image: url('../img/onboarding/bee-1.svg');
width: 60px;
height: 60px;
}
.hidden-feed-card{
display: none;
}
/* for homepage quotes */
blockquote {
/*font-family: Georgia, serif;*/
position: relative;
/*margin: 0.5em;*/
padding: 0.5em 2em 0.5em 3em;
border-left: none;
}
blockquote:before {
font-family: Georgia, serif;
position: absolute;
font-size: 6em;
line-height: 1;
top: 0;
left: 0;
content: "\201C";
color: #CCC;
}
/*blockquote:after {*/
/* font-family: Georgia, serif;*/
/* position: absolute;*/
/* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
/* float:right;*/
/* font-size:6em;*/
/* line-height: 1;*/
/* right:0;*/
/* bottom:-0.5em;*/
/* content: "\201D";*/
/* color: #CCC;*/
/*}*/
blockquote footer {
padding: 0 2em 0 0;
text-align:right;
}
blockquote cite:before {
content: "\2013";
}
.carousel .indicators .indicator-item{
background-color: rgba(90, 90, 90, 0.35);
}
.carousel .indicators .indicator-item.active{
background-color: rgba(90, 90, 90, 0.8);
}