@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap");
body {
color: #f0f0f0; font-size: 14px;
font-weight: 400;
font-family: "Lato", sans-serif; background-color: hsla(200, 12%, 16%, 1);
background-image: url(/images/bg.svg),
linear-gradient(hsla(200, 12%, 11%, 1), hsla(200, 12%, 16%, 1) 15%);
background-repeat: repeat-x;
background-position: center 0, 0 0, 0 0;
}
::-moz-selection {
background: #fbac34;
color: #fff;
}
::selection {
background: #fbac34;
color: #fff;
}
img,
svg {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1,
h2,
.h2,
h3,
.h3,
h4,
h5,
h6 {
color: #fff;
font-weight: 300;
letter-spacing: -0.01em;
}
h1 {
font-size: 24px;
letter-spacing: -0.04em;
line-height: 1.5em;
color: #fff;
}
h2,
.h2 {
font-size: 32px; letter-spacing: -0.015em;
line-height: 1.3em;
font-weight: 700;
padding-bottom: 0.5em;
}
h3,
.h3 {
font-size: 19px;
line-height: 32px;
font-weight: 400;
}
a {
color: rgba(255, 255, 255, 0.95);
text-decoration: none;
transition: color 0.12s ease-in-out, text-decoration 0.12s ease-in-out;
}
a.link--light,
a:hover {
color: rgba(255, 255, 255, 0.95);
}
a.link--light:hover {
text-decoration: underline;
}
a.button {
border-radius: 0.8rem;
background: #ff9956;
height: 48px;
height: 4.8rem;
padding: 0 17px;
padding: 0 1.7rem;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
text-transform: uppercase;
font-weight: 700;
color: #fff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} nav.navbar,
nav.navbar.scrolled {
transition: all 200ms ease-in-out;
}
@supports (backdrop-filter: none) {
nav.navbar.scrolled {
backdrop-filter: blur(15px);
background-color: rgba(30, 35, 38, 0.69) !important;
}
}
@supports not (backdrop-filter: none) {
nav.navbar.scrolled {
background-color: rgba(30, 35, 38, 0.99) !important;
}
}
nav.navbar.scrolled {
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
@media only screen and (min-width: 768px) {
nav:not(.nav-blog).navbar .navbar-brand {
opacity: 0;
}
.wp-custom-logo nav:not(.nav-blog).navbar .navbar-brand,
nav.navbar.scrolled .navbar-brand {
opacity: 1;
}
}
@media only screen and (max-width: 768px) {
.navbar {
padding: 1.5rem 2rem;
}
.navbar-toggler {
border: 0;
color: white;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
transition: transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: rotate(0deg);
}
nav.open .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewbox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M 7,7 L 22,22 M 22,7 L 7,22' /%3E%3C/svg%3E");
transition: transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: rotate(-90deg);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -20%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
nav.open {
background: #191e20;
}
nav.open .nav {
animation: fadeIn 0.4s ease-in both;
}
nav.open .nav-item {
margin-top: 2em;
font-size: 20px;
}
.nav.navbar-nav {
height: 100vh;
}
} #ph {
width: 100%;
padding: 7px 10px 10px 10px;
box-sizing: border-box; background-color: #ea532a;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
letter-spacing: 0.2px;
text-align: center;
}
#ph a {
text-decoration: underline;
}
.watch-video {
font-size: 16px;
display: inline-block;
margin: 2em 0 1em 0;
}
header .btn {
margin-top: 0.5em;
}
.main {
padding: 15vh 0;
}
@media only screen and (min-width: 768px) {
.main {
padding-bottom: 35vh;
}
}
.main p {
color: rgba(255, 255, 255, 0.65);
font-size: 18px;
}
img.logo-img {
height: 63px;
}
@media only screen and (min-width: 768px) {
img.logo-img {
height: 93px;
}
}
.main-title {
margin: 2em 0 1.5em 0;
}
.main-cta {
margin-top: 4em;
}
.cta-sub {
margin-top: 1em;
}
.cta-sub small {
color: #eaeaea;
font-size: 12px;
font-weight: 300;
}
.video-btn {
font-size: 14px;
}
.btn-outline-primary {
background-color: #fbac34;
color: white;
border: none;
border-radius: 40px;
padding: 1em 3em;
font-size: 18px;
}
.btn-outline-primary:hover {
background-color: #fcba54;
}
.btn-primary-tiny {
background-color: #fbac34;
color: rgba(0, 0, 0, 0.6);
border: none;
font-weight: bolder;
border-radius: 8px;
padding: 0.3em 0.6em;
font-size: 12px;
border: 1px solid rgba(0, 0, 0, 0.6);
text-shadow: rgba(0, 0, 0, 0.2);
}
.btn-outline-secondary {
border: 1px solid white !important;
color: #fff;
border: none;
border-radius: 40px;
padding: 1em 3em;
font-size: 18px;
}
.btn-outline-secondary:hover {
color: #1e2225;
background-color: #fff;
}
.wakefy-gif {
margin-top: -250px;
margin: 0 auto;
z-index: 100;
} section.hero-video {
color: rgba(255, 255, 255, 0, 95); background: rgba(0, 0, 0, 0.2);
padding: 2em 0; transform: rotate(-5deg) skew(-5deg);
padding-bottom: 7em;
margin-bottom: 4em;
}
section.hero-video h2,
section.hero-video .h2,
section.hero-video p,
section.hero-video img {
transform: rotate(5deg) skew(5deg);
} @media all and (min-width: 768px) {
.hero-video-container {
margin-top: -20vh;
}
section.hero-video { margin-bottom: 7em;
}
section.hero-video::before {
}
}
@media all and (min-width: 768px) {
.hero-video-container {
background-image: url(/images/video-bg.svg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
}
.hero-video-container img {
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 15px 35px rgba(0, 0, 0, 0.1),
0 50px 100px rgba(50, 50, 93, 0.1);
}
#play-video-button {
cursor: pointer;
font-size: 54px;
transition: all 0.15s;
}
#play-video-button:hover {
font-size: 56px;
transition: all 0.15s;
}
section.new-version {
padding: 5em 0;
}
@media all and (min-width: 768px) {
section.new-version {
padding: 5em 0 15em;
}
}
section.main-features { }
section.main-features a,
.color-link,
.color-link:hover {
color: #fbac34;
}
.m1-logo-image {
mix-blend-mode: lighten;
width: 40%;
}
@media all and (min-width: 768px) {
.m1-logo-image {
width: 20%;
}
}
.feature-detail-image {
width: 90%;
}
.feature-detail-image-fluid {
width: 100%;
}
.row-cta {
border-top: 2px solid rgba(246, 249, 252, 0.1);
padding: 7em 3em;
}
.row-cta-inline {
border-bottom: 2px solid rgba(246, 249, 252, 0.1);
padding: 7em 0;
}
.row-cta .cta-button button.btn {
padding: 0.5em 2em 0.7em;
}
.row-cta .cta-button-text {
font-size: 14px;
}
.row-cta h2,
.row-cta .h2 {
font-weight: 300;
}
.row-cta h2,
.row-cta .h2,
.row-cta p {
font-size: 18px;
}
section.features-detail {
background: rgba(0, 0, 0, 0.2);
padding: 5em 0;
}
.feature-detail-row:not(:last-child) {
margin-bottom: 5em;
}
@media all and (min-width: 768px) {
section.features-detail {
padding: 15em 0;
}
.feature-detail-row:not(:last-child) {
margin-bottom: 15em;
}
}
.btn-link,
.btn-link:hover {
color: #708984;
}
.product-feature,
.product-image {
margin-bottom: 3em;
}
.feature-col {
margin-bottom: 2em;
font-size: 14px;
color: #f0f0f0;
}
.feature-icon {
font-size: 42px;
margin-bottom: 0.7em;
color: #23a67d;   }
.features-row {
padding: 3em;
}
section.experiences {
color: rgba(255, 255, 255, 0, 95);
background-image: url(/images/collage.jpg);
background-size: cover;
background-position: center center;
height: 14em;
}
section.testimonials {
padding: 0;
font-size: 18px;
font-weight: 400;
color: #fff;
}
@media all and (min-width: 768px) {
section.testimonials {
padding: 3em 0;
}
}
.carousel.slide {
padding-top: 2em; border-radius: 50px;
background: linear-gradient(145deg, #272e32, #20272a);
box-shadow: 20px 20px 60px #191e21, -20px -20px 60px #2f383d;
}
.carousel-item {
padding: 0 3em;
justify-content: center;
align-items: center;
display: flex;
opacity: 0;
}
.carousel-item.active {
opacity: 1;
display: flex !important;
transition: all 200ms ease-in-out;
}
@media all and (min-width: 768px) {
.carousel-item {
padding: 0 5em;
}
}
.testimonial-name {
margin-top: 1em;
}
.testimonial-name,
.testimonial-name > a {
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
font-weight: 400;
}
.testimonials a {
text-decoration: underline;
}
section.bottom-cta {
color: rgba(0, 0, 0, 0.85);
padding: 10em 0 4em 0;
}
section.bottom-cta .cta-button {
margin: 3em 0;
}
section.bottom-cta .cta-sub { }
footer {
padding: 2em 0;
}
.important-notes-wrapper {
padding-top: 3em;
margin-top: 3em;
background-color: #9ed2c724;
}
section.newsletter {
background: #23a67d;
transform: rotate(-1deg) skew(-1deg);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 15px 35px rgba(0, 0, 0, 0.1),
0 50px 100px rgba(50, 50, 93, 0.1);
}
.email-newsletter {
margin: 0 0 8em 0;
}
.newsletter-col {
color: #252a2e;
padding: 2em;
}
section.newsletter button {
display: block;
width: 100%;
}
@media all and (min-width: 768px) {
.newsletter-col {
padding: 3em 6em;
}
section.newsletter button {
width: auto;
}
}
.newsletter-col h2,
.newsletter-col .h2 {
font-weight: 700;
}
.newsletter-col h2,
.newsletter-col .h2,
.newsletter-col p {
color: #252a2e;
}
.newsletter-col .btn-hustl {
background: #252a2e;
}
.btn-hustl {
background-color: #fbac34;
color: white;
border: 0;
}
.btn-hustl:hover {
background-color: #fba21b;
}
.cta-button a.btn,
.cta-button button.btn {
padding: 0.7em 3.5em;
background-color: #fbac34; box-shadow: 0 7px 29px 0 rgba(119, 0, 23, 0.3);
transition: all 0.4s;
}
.cta-button a.btn:hover,  .cta-button button.btn {
transition: all 0.4s;
transform: translateY(-2px);
}
.cta-button-text {
font-weight: 900;
font-size: 18px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.cta-button.cta-button-sm a.btn,
.cta-button.cta-button-sm button.btn {
padding: 0.1em 1em 0.4em 1em;
transform: translateY(2px);
}
@media all and (min-width: 500px) {
.cta-button.cta-button-sm a.btn,
.cta-button.cta-button-sm button.btn {
margin-left: 0.5em;
}
}
.cta-button.cta-button-sm .cta-button-text {
font-size: 12px;
}
.feedback {
margin-top: 3em;
text-decoration: underline;
}
footer .cta-button {
padding: 8em 0;
}
.important-notes p {
font-size: 12px;
color: rgba(0, 0, 0, 0.7);
}
p.license {
font-size: 8px;
}
footer p {
font-size: 12px;
}
.footer-links {
font-size: 12px;
margin: 3em 0 2em 0;
}
section.signature {
margin-top: 2em;
}
header,
body {   }
@keyframes a {
0% {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
.site-header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
height: 96px;
}
.logo img {
width: 100px;
line-height: 0;
}
.footer { }
.modal-dialog {
max-width: 800px;
margin: 30px auto;
}
.modal-body {
position: relative;
padding: 0px;
}
.close {
position: absolute;
right: -30px;
top: 0;
z-index: 999;
font-size: 2rem;
font-weight: normal;
color: #fff;
opacity: 1;
}
.modal h1 {
color: rgba(0, 0, 0, 0.7);
}
.modal p {
color: rgba(0, 0, 0, 0.5);
}
.faq.container {
margin-top: 3em;
}
.faq,
.faq h1,
.faq a {
color: rgba(0, 0, 0, 0.85);
}
.faq a {
text-decoration: underline;
}
.faq .icon {
margin-top: 1em;
font-size: 24px;
}
p.btn-link {
font-size: 16px;
}
.press-copy-this {
font-family: "Courier New", Courier, monospace;
}
#donateModal .modal-body {
padding: 4em 2em;
}
#donateModal .muted-link {
color: #b3b3b3;
}
#donateModal .modal-title {
font-size: 36px;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 1em;
}
#donateModal .download-buttons {
margin-top: 2em;
}
#donateModal .download-buttons .btn {
margin-top: 1em;
}
#donateModal .btn-secondary {
border-radius: 40px;
padding: 1em 3em;
font-size: 14px;
}
@media screen and (max-width: 352px) {
}
@media screen and (max-width: 768px) {
h1 {
font-size: 24px; letter-spacing: -0.024rem;
}
h2,
.h2 {
font-size: 20px;
}
:-webkit-any(article, aside, nav, section):-webkit-any(article, aside, nav, section)
h1,
:-webkit-any(article, aside, nav, section) h1 {
font-size: 2rem;
}
.footer,
.header {
min-height: 55rem;
}
.header {
-ms-flex-pack: start;
justify-content: flex-start;
}
.main {
padding: 7em 0;
}
.btn-outline-primary,
.btn-outline-secondary {
font-size: 16px;
}
.footer { height: 78rem;
}
.site-header { }
.main-cta {
margin-top: 2em;
}
.features-row {
padding: 0;
}
.product-feature {
margin-bottom: 3em;
}
section.video {
padding: 5em 0;
}
section.main-features {
padding: 3em 0 0 0;
}
}
.community-wrapper {
overflow: hidden;
background: rgba(0, 0, 0, 0.69); position: relative;
padding: 8em 0;
}
section.community {
padding: 7em 0;
}
@media all and (min-width: 768px) {
section.community {
padding: 10em 0;
}
}
.submit-your-video {
font-weight: bold;
border: 1px solid #23a67d;
border-radius: 16px;
width: auto;
padding: 0.8em 1.5em;
transition: all 0.15s;
}
.submit-your-video:hover {
background-color: #23a67d;
transition: all 0.15s;
}
.submit-your-video a,
.submit-your-video i {
color: #23a67d;
}
.submit-your-video:hover a,
.submit-your-video:hover i {
color: white;
transition: all 0.15s;
}
* {
box-sizing: border-box;
}
.video-background {
background: #010101;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
.video-foreground {
width: 300%;
left: -100%;
}
}
@media all and (max-width: 600px) {
.vid-info {
width: 50%;
padding: 0.5rem;
}
.vid-info h1 {
margin-bottom: 0.2rem;
}
}
@media all and (max-width: 500px) {
.vid-info .acronym {
display: none;
}
}
.black-friday-banner {
display: inline-block;
width: auto;
background: rgba(255, 255, 255, 0.8);
color: #333;
border-radius: 8px;
padding: 0.65em 1.6em;
text-align: center;
font-family: "Lato", "Helvetica", "Arial", sans-serif;
font-weight: bold;
box-shadow: 0 6px 8px 0 rgba(255, 255, 255, 0.15);
}
.flipdown.flipdown-custom {
display: flex !important;
justify-content: center !important;
}
.frequently-bought-together {
}
.social-validation .client-logo,
.social-validation .press-logo {
filter: brightness(0) invert(1);
opacity: 0.6;
height: 30px;
}
.social-validation .press-logo {
height: 20px;
margin-right: 1em;
margin-top: 1em;
}
.social-validation a:hover {
text-decoration: none;
}
.social-validation .client-logo:not(:last-child) {
margin-right: 1.5em;
}
.social-validation .app-rating {
font-size: 3em;
}
.social-validation .press-quote {
opacity: 0.8;
font-size: 3em;
}
.social-validation .press-quote-author {
font-size: 1em;
opacity: 0.6;
text-transform: uppercase;
} section.bottom-cta.related-product {
padding: 4em 0;
}
section.bottom-cta .bottom-cta-card {
background: linear-gradient(90deg, #ff9f0e 0%, #f86416 100%);
background: url(//gohustl.co/assets/orange-background.jpg);
background-size: cover;
background-position: center;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
color: #fafafa;
padding: 5em 1em;
border-radius: 16px;
}
section.bottom-cta .bottom-cta-card .bulk-cta {
color: rgba(255, 255, 255, 0.8);
}
section.bottom-cta .bottom-cta-card.hustl-cta-card {
background-color: hsla(200, 12%, 16%, 1);
background-image: url(//gohustl.co/assets/orange-background.jpg),
linear-gradient(hsla(200, 12%, 11%, 1), hsla(200, 12%, 16%, 1) 15%);
background-repeat: repeat-x;
background-position: center 0, 0 0, 0 0;
}
section.bottom-cta .bottom-cta-card.hustl-cta-card .btn-cta {
color: hsla(200, 12%, 16%, 1);
}
section.bottom-cta h2,
section.bottom-cta .h2 {
text-shadow: 0 0 10px rgba(0, 0, 0, 0.19);
}
section.bottom-cta .btn-cta {
background: rgba(255, 255, 255, 0.99);
color: #ffb45b;
text-shadow: none;
margin-top: 2em;
} .hustl-speedpainting-snippet {
background: rgba(0, 0, 0, 0.3);
padding: 1.5em 1em;
border-top: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 20px 20px 60px #191e21, -20px -20px 60px #2f383d;
border-radius: 8px;
}
.hustl-speedpainting-snippet > p:first-of-type {
font-size: 1.4em;
font-weight: bold;
}
.hustl-speedpainting-snippet a {
color: #fbac34;
font-weight: bold;
}
@media all and (min-width: 768px) {
body.single-post .right-sidebar {
position: fixed;
right: 5em;
}
}