/* reset */
html,body,div,span,object,iframe,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{background:transparent;font-size:100%;margin:0;padding:0;vertical-align:baseline}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0}input,select{vertical-align:middle}
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 400;
}
* {
box-sizing: border-box;
}
::selection {
background: #dbdeea;
color: #fff;
}
::-moz-selection {
background: #dbdeea;
color: #fff;
}
::-moz-focus-inner {
border: 0;
margin: 0;
padding: 0;
}
@font-face {
font-family: 'Mona Sans';
src:
url('../fonts/Mona-Sans.woff2') format('woff2 supports variations'),
url('../fonts/Mona-Sans.woff2') format('woff2-variations');
font-weight: 200 900;
font-stretch: 75% 125%;
}
a,a:visited {
color: #2e2e2e;
outline: none;
text-decoration: none;
transition: background-color 0.5s ease, color 0.5s ease;
}
a:hover {
color: #666;
outline: none;
text-decoration: none;
}
button {
transition: background 0.5s ease;
font-family: 'Inter', sans-serif;
}
input, textarea, .redactor-editor {
transition: border 0.5s ease, color 0.5s ease;
}
h1,h2,h3 {
-webkit-font-smoothing:antialiased;
border: 0;
margin: 0;
padding: 0;
font-family: 'Mona Sans', Inter, sans-serif;
}
body {
-webkit-font-smoothing:antialiased;
background-color: #FAFAFA;
color: #2D2D2D;
font-family: 'Inter', sans-serif;
line-height: 1;
word-wrap: break-word;
margin: 0;
padding: 0;
transition: background-color 0.5s ease;
overflow-x: hidden;
}
img {
width: 100%;
height: auto;
}
body.no-scroll {
overflow: hidden;
}
.inner-wrapper {
width: 1102px;
margin-left: auto;
margin-right: auto;
}
.inner-wrapper.col-3 {
width: 1102px;
}
.inner-wrapper.md {
width: 840px;
}
.inner-wrapper.x-sml {
width: 540px;
}
main {
float: left;
width: 100%;
}
/* buttons */
a.button, button.button {
background: #1964FF;
box-shadow: 0px 2px 4px rgba(0, 78, 236, 0.22);
border-radius: 9px;
color: #fff;
font-style: normal;
font-weight: 535;
font-variation-settings: 'wght' 535;
font-size: 15px;
line-height: 18px;
text-align: center;
padding: 14px 18px;
float: left;
text-align: center;
outline: none;
cursor: pointer;
transition: opacity 0.5s ease;
border: 1px solid #1964FF;
}
.button.sml {
font-size: 14px;
line-height: 17px;
padding: 13px 18px;
}
.button.md {
font-size: 15.5px;
line-height: 18px;
padding: 15px 22px;
}
.button.lrg {
font-size: 16.5px;
line-height: 20px;
padding: 15px 21px;
}
.button:hover {
opacity: 0.7;
color: #FFF;
}
.button.white {
background: #FFFFFF;
border: 1px solid #ECECF4;
box-shadow: 0px 7px 12px rgba(0, 0, 0, 0.03);
color: #4B617A;
}
.button.grey {
background: #F0F0F0;
border: 1px solid #F0F0F0;
box-shadow: 0px 2px 4px #F3F3F3;
color: #4F586D;
}
.button.full-width {
width: 100%;
}
.button.pink {
background: #FE0496;
box-shadow: 0px 2px 4px rgba(254, 4, 150, 0.22);
border: 1px solid #FE0496;
color: #fff;
}
a.button-pastel, button.button-pastel {
background: #FFFFFF;
border: 1px solid #ECECF4;
box-shadow: 0px 7px 12px rgba(0, 0, 0, 0.03);
border-radius: 9px;
color: #000;
font-style: normal;
font-weight: 535;
font-variation-settings: 'wght' 535;
font-size: 14.5px;
line-height: 18px;
text-align: center;
padding: 11px 15px;
float: left;
text-align: center;
outline: none;
cursor: pointer;
transition: opacity 0.5s ease;
}
.button-pastel.black {
background: #000;
border: 1px solid #000;
color: #fff;
}
.button-pastel.red {
background: #FDF2F2;
border: 1px solid #F1D4D4;
color: #ff313e;
}
.button-pastel.grey {
background: #F9F9F9;
border: 1px solid #DCDCDC;
color: #2A2E33;
}
.button-pastel.full-width {
width: 100%;
}
.button-pastel:hover {
opacity: 0.7;
}
.button-pastel.no-shadow {
box-shadow: none;
}
.button-pastel.md {
font-size: 14px;
line-height: 16px;
padding: 12.5px 15px 12.5px 15px;
}
.button-pastel.lrg {
font-size: 15.5px;
padding: 15px 25px;
}
.button.no-shadow {
box-shadow: none;
}
.button.disabled {
opacity: 0.7;
}
a.button-alt.outline {
float: left;
background-color: #FFFFFF;
border: 1px solid #E5E5E5;
box-shadow: 0px 2px 5px rgb(0 0 0 / 5%);
border-radius: 7px;
padding: 6px 10px 6px 10px;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: #1A1919;
}
/* layout */
.main-left-column {
float: left;
width: 280px;
position: fixed;
background: #FFFFFF;
border-right: 1px solid #ECECF4;
left: 0px;
top: 0px;
height: 100%;
}
.main-left-column .left-nav-top {
float: left;
width: 100%;
}
.main-left-column .left-nav-top .left-nav-logo {
float: left;
width: 100%;
padding: 40px 30px 35px 30px;
}
.main-left-column .left-nav-top .left-nav-logo p.icon {
float: left;
}
.main-left-column .left-nav-top .left-nav-logo p.icon svg {
float: left;
}
.main-left-column .left-nav-top .left-nav-logo p.text {
float: left;
font-style: normal;
font-weight: 600;
font-size: 17px;
line-height: 22px;
letter-spacing: -0.264px;
color: #000000;
padding: 8px 0px 0px 12px;
}
.main-left-column .left-nav-top .left-nav-logo a {
float: left;
transition: opacity 0.5s ease;
}
.main-left-column .left-nav-top .left-nav-logo a:hover {
float: left;
opacity: 0.7;
}
.main-left-column .left-nav-top .left-nav-links {
float: left;
width: 100%;
padding: 0px 16px 30px 16px;
border-bottom: solid 1px #ECECF4;
}
.main-left-column .left-nav-top .left-nav-links a {
float: left;
width: 100%;
padding: 10px 14px;
border-radius: 8px;
margin-bottom: 7px;
transition: background-color 0.5s ease;
}
.main-left-column .left-nav-top .left-nav-links a p.icon {
float: left;
margin-right: 14px;
}
.main-left-column .left-nav-top .left-nav-links a p.icon svg {
float: left;
}
.main-left-column .left-nav-top .left-nav-links a p.text {
float: left;
font-style: normal;
font-weight: 535;
font-size: 15.5px;
line-height: 20px;
letter-spacing: -0.264px;
color: #959595;
font-variation-settings: 'wght' 535;
padding: 0px;
transition: color 0.5s ease;
}
.main-left-column .left-nav-top .left-nav-links a:last-child {
margin-bottom: 0px;
}
.main-left-column.home .left-nav-links a.home-nav-link {
background-color: #F5F5F5;
}
.main-left-column.home a.home-nav-link p.icon svg g {
fill: #000;
stroke: #000;
}
.main-left-column.home a.home-nav-link p.text {
color: #000;
}
.main-left-column.new .left-nav-links a.new-nav-link {
background-color: #F5F5F5;
}
.main-left-column.new a.new-nav-link p.icon svg path {
fill: #000;
}
.main-left-column.new a.new-nav-link p.text {
color: #000;
}
.main-left-column.popular .left-nav-links a.popular-nav-link {
background-color: #F5F5F5;
}
.main-left-column.popular a.popular-nav-link p.icon svg path {
fill: #000;
stroke: #000;
}
.main-left-column.popular a.popular-nav-link p.text {
color: #000;
}
.main-left-column .left-nav-links a:hover {
background-color: #F5F5F5;
}
.main-left-column .left-nav-links a:hover p.text {
color: #000;
}
.main-left-column .left-nav-links a:hover p.icon svg, .main-left-column .left-nav-links a p.icon path, .main-left-column .left-nav-links a p.icon g {
transition: stroke 0.5s ease, fill 0.5s ease;
}
.main-left-column .left-nav-links a.home-nav-link:hover p.icon svg g {
fill: #000;
stroke: #000;
}
.main-left-column .left-nav-links a.new-nav-link:hover p.icon svg path {
fill: #000;
}
.main-left-column .left-nav-links a.popular-nav-link:hover p.icon svg path {
fill: #000;
stroke: #000;
}
.main-left-column .left-nav-categories-wrapper {
float: left;
width: 100%;
padding: 35px 30px;
overflow: scroll;
height: calc(100vh - 502px);
}
.main-left-column .left-nav-categories-wrapper .left-nav-categories-title {
font-style: normal;
font-weight: 535;
font-size: 13.5px;
line-height: 16px;
letter-spacing: -0.264px;
color: #B4B4B4;
font-variation-settings: 'wght' 535;
margin-bottom: 12px;
}
.main-left-column .left-nav-categories-wrapper .left-nav-categories {
float: left;
width: 100%;
}
.left-nav-categories-overflow {
float: left;
width: 100%;
height: 327px;
overflow: hidden;
transition: height 0.5s ease;
}
.left-nav-categories-overflow.open {
max-height: initial;
overflow: visible;
}
.main-left-column .left-nav-categories-wrapper .left-nav-categories .left-nav-categories-overflow a {
float: left;
width: 100%;
margin-bottom: 6px;
}
.main-left-column .left-nav-categories-wrapper .left-nav-categories .left-nav-categories-overflow a:hover p.category {
color: #000;
}
.main-left-column .left-nav-categories-wrapper .left-nav-categories .left-nav-categories-overflow a:hover p.count {
color: #000;
}
.main-left-column .left-nav-categories-wrapper .left-nav-categories .left-nav-categories-overflow a p.category {
float: left;
font-style: normal;
font-weight: 535;
font-size: 13.5px;
letter-spacing: -0.264px;
color: #959595;
font-variation-settings: 'wght' 535;
padding: 5.5px 0px;
line-height: 14px;
transition: color 0.5s ease;
}
.main-left-column .left-nav-categories-wrapper .left-nav-categories .left-nav-categories-overflow a p.count {
float: right;
font-style: normal;
font-weight: 535;
font-size: 12px;
line-height: 15px;
text-align: center;
letter-spacing: -0.264px;
color: #959595;
font-variation-settings: 'wght' 535;
background: #F0F0F0;
border-radius: 6px;
padding: 2px 6px;
margin-top: 3px;
transition: color 0.5s ease;
}
.main-left-column .left-nav-categories-wrapper .categories-show-more {
float: left;
width: 100%;
margin-top: 5px;
position: relative;
}
.main-left-column .left-nav-categories-wrapper .categories-show-more:before {
content: "";
position: absolute;
height: 60px;
width: 100%;
background-color: #000;
top: -59px;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.main-left-column .left-nav-categories-wrapper .categories-show-more a {
float: left;
width: 100%;
background: #F5F5F5;
border-radius: 8px;
font-style: normal;
font-weight: 600;
font-size: 13.5px;
line-height: 16px;
text-align: center;
letter-spacing: -0.264px;
color: #5F5F5F;
padding: 12px 10px;
}
.main-left-column .left-nav-bottom {
float: left;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
border-top: solid 1px #ECECF4;
background-color: #FFF;
}
.main-left-column .left-nav-bottom a {
float: left;
transition: opacity 0.5s ease;
}
.main-left-column .left-nav-bottom a:hover {
opacity: 0.7;
}
.main-left-column .left-nav-bottom .left-nav-sponsored-ad-wrapper {
float: left;
width: 100%;
padding: 25px 36px;
}
.main-left-column .left-nav-bottom .left-nav-sponsored-ad-wrapper p.nav-sponsored-ad-img {
width: 150px;
margin-left: auto;
margin-right: auto;
}
.main-left-column .left-nav-bottom .left-nav-sponsored-ad-wrapper p.nav-sponsored-ad-img img {
float: left;
border-radius: 15px;
}
.main-left-column .left-nav-bottom .left-nav-sponsored-ad-wrapper p.nav-sponsored-ad-text {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 12.5px;
line-height: 18px;
text-align: center;
letter-spacing: -0.264px;
color: #5E6469;
padding: 14px 0px 0px 0px;
}
.main-left-column .left-nav-bottom .left-nav-sponsored-ad-wrapper p.nav-sponsored-ad-notice {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 11px;
line-height: 18px;
text-align: center;
letter-spacing: -0.264px;
color: #BDBDBD;
padding-top: 5px;
}
.main-right-column {
float: right;
width: calc(100% - 280px);
position: relative;
}
.main-right-column .top-nav {
right: 0px;
float: left;
width: 100%;
position: fixed;
background: #FFFFFF;
border-bottom: 1px solid #ECECF4;
padding: 14px 25px;
top: 0px;
width: calc(100% - 280px);
z-index: 500;
}
.main-right-column .top-nav .left {
float: left;
width: calc(100% - 280px);
}
/* hamburger */
.main-right-column .top-nav .left a.hamburger {
position: relative;
float: left;
width: 25px;
height: 30px;
padding: 8px 0px;
margin-top: 4px;
display: none;
}
.main-right-column .top-nav .left a.hamburger .hamburger-inner {
height: 3px;
background-color: #000;
width: 100%;
border-radius: 20px;
position: relative;
transition: background-color 0.5s ease;
}
.main-right-column .top-nav .left a.hamburger .hamburger-inner::before {
height: 3px;
background-color: #000;
width: 100%;
position: absolute;
border-radius: 20px;
margin-top: 7px;
content: "";
transition: background-color 0.5s ease;
}
.main-right-column .top-nav .left a.hamburger .hamburger-inner::after{
height: 3px;
background-color: #000;
width: 100%;
position: absolute;
border-radius: 20px;
margin-top: 14px;
content: "";
transition: background-color 0.5s ease;
}
.main-right-column .top-nav .left a.hamburger.is-active .hamburger-inner, .main-right-column .top-nav .left a.hamburger.is-active .hamburger-inner::before, .main-right-column .top-nav .left a.hamburger.is-active .hamburger-inner::after {
background-color: #6a6a6a;
}
.main-right-column .top-nav .mid a.mobile-icon {
float: left;
display: none;
transition: opacity 0.5s ease;
}
.main-right-column .top-nav .mid a.mobile-icon:hover {
float: left;
opacity: 0.7;
}
.main-right-column .top-nav .right {
float: right;
}
.main-right-column .top-nav .right .right-inner {
float: left;
}
.main-right-column .top-nav .right .right-inner a.more-menu-link {
float: left;
}
.main-right-column .top-nav .right .right-inner a.more-menu-link svg {
float: left;
}
.main-right-column .top-nav .right .right-inner a.button-pastel.white {
margin-left: 7px;
}
.main-right-column .top-nav .right .right-inner a.button-pastel.black {
margin-left: 14px;
}
.main-right-column .top-nav .right .right-inner .more-menu-wrapper {
float: left;
position: relative;
}
.main-right-column .top-nav .right .right-inner .more-menu-wrapper .dropdown-menu {
top: 40px;
right: 0px;
}
.main-right-column .top-nav .right .right-inner .user-menu {
float: left;
margin-left: 15px;
position: relative;
}
.main-right-column .top-nav .right .right-inner .user-menu img {
width: 42px;
height: 42px;
border-radius: 50px;
}
.main-right-column .top-nav .right .right-inner .user-menu .dropdown-menu {
right: -5px;
top: 50px;
width: 170px;
}
.main-right-column .right-column-body {
float: left;
width: 100%;
padding: 130px 60px 50px 60px;
}
.main-right-column .right-column-body .default-grid-body-wrapper {
float: left;
width: 100%;
}
.main-right-column .right-column-body .default-grid-body-wrapper .default-title {
float: left;
width: 100%;
margin-bottom: 30px;
}
.main-right-column .right-column-body .default-grid-body-wrapper .default-title h1 {
float: left;
width: 100%;
font-style: normal;
font-weight: 700;
font-size: 46px;
line-height: 44px;
letter-spacing: -0.264px;
color: #000000;
}
.main-right-column .right-column-body .default-grid-body-wrapper .default-title h2 {
float: left;
width: 100%;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: #999999;
margin-top: 7px;
}
.main-right-column .right-column-body .default-grid-body-wrapper .card-grid {
float: left;
width: 100%;
}
.card-grid .card {
float: left;
width: 350px;
margin-right: 26px;
margin-bottom: 26px;
background: #FFFFFF;
border: 1px solid #ECECF4;
box-shadow: 0px 7px 12px rgba(0, 0, 0, 0.03);
border-radius: 15px;
position: relative;
}
.card-grid .card:nth-child(3n) {
margin-right: 0px;
}
.card-grid a.card-inner {
float: left;
padding: 25px 25px 85px 25px;
}
.card-grid a.card-inner .title {
float: left;
width: 100%;
margin-bottom: 15px;
}
.card-grid a.card-inner .title .left {
float: left;
width: 100%;
}
.card-grid a.card-inner .title .left p.icon {
float: left;
width: 42px;
}
.card-grid a.card-inner .title .left p.icon img {
float: left;
width: 42px;
height: 42px;
border-radius: 15px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
}
.card-grid a.card-inner .title .left h3.name {
float: left;
width: calc(100% - 42px);
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 17.5px;
line-height: 20px;
letter-spacing: -0.264px;
color: #000000;
padding: 11px 0px 11px 15px;
}
.card-grid .card a.card-inner .title .right {
float: right;
position: absolute;
right: 15px;
top: 15px;
}
.card-grid .card p.badge {
float: left;
background: #ccc;
border-radius: 6px;
padding: 4px 7px;
font-style: normal;
font-weight: 560;
font-size: 11px;
line-height: 13px;
text-transform: uppercase;
color: #000;
font-variation-settings: 'wght' 560;
opacity: 0;
transition: opacity 0.5s ease;
}
.card-grid .card:hover p.badge {
opacity: 1;
}
.card-grid .card p.badge.orange {
background: #FFF5EC;
color: #FF7A00;
}
.card-grid .card p.badge.purple {
background: #F3EFFF;
color: #6E41E2;
}
.card-grid .card p.badge.blue {
background: #E8EFFF;
color: #1964FF;
}
.card-grid .card .description {
float: left;
width: 100%;
}
.card-grid .card .description h4 {
float: left;
width: 100%;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #999999;
height: 65px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
}
.card-grid .card .buttons {
float: left;
width: calc(100% - 50px);
left: 25px;
position: absolute;
bottom: 25px;
}
.card-grid .card .buttons a.button-pastel.white {
width: calc(100% - 80px);
}
.card-grid .card .buttons a.button-pastel.pink.card-like-button {
position: relative;
width: 70px;
height: 42px;
background: #FFF8FC;
border: 1px solid #F2E5ED;
box-shadow: 0px 7px 12px rgba(254, 4, 150, 0.03);
border-radius: 9px;
margin-left: 10px;
}
.card-grid .card .buttons a.button-pastel.pink.card-like-button svg {
margin-top: -3px;
}
.card-grid .card .buttons a.button-pastel.pink.card-like-button.liked path.fill {
fill: #fe0496;
}
.card-grid .card .buttons a.button-pastel.pink.card-like-button.liked.animate svg {
animation: bounceIn;
animation-duration: 0.4s;
}
.post-wrapper .post-header .right .right-inner a.button-pastel.button-pastel.pink.liked path.fill {
fill: #fe0496;
}
.post-wrapper .post-header .right .right-inner a.button-pastel.button-pastel.pink.liked.animate svg {
animation: bounceIn;
animation-duration: 0.4s;
}
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.pagination-no-results {
float: left;
width: 100%;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: #999999;
margin-top: 7px;
}
/* pagination */
.pagination {
float: left;
width: 100%;
padding-top: 0px;
}
.pagination ul {
float: left;
}
.pagination ul li {
float: left;
margin-right: 10px;
list-style: none;
}
.pagination ul li a {
float: left;
padding: 10px 14px;
background: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0px 2px 4px rgb(189 189 189 / 15%);
border-radius: 10px;
font-weight: 600;
font-size: 15.5px;
line-height: 18px;
transition: opacity 0.5s ease;
color: #000;
}
.pagination ul li a:hover {
opacity: 0.6;
}
.pagination ul li a svg {
width: 7px;
}
.pagination ul li a.active {
color: #949494;
}
/* dropdown */
.dropdown-menu {
background: #FFFFFF;
border: 1px solid #ECECF4;
box-shadow: 0px 0px 14px rgb(0 0 0 / 5%);
border-radius: 8px;
float: left;
position: absolute;
width: 200px;
display: none;
animation: fadeInUp;
animation-duration: 0.4s;
z-index: 500;
}
.dropdown-menu-divide {
float: left;
width: 100%;
height: 1px;
background: #EBEBEB;
}
.dropdown-menu .dropdown-padding {
float: left;
width: 100%;
}
.dropdown-menu.company-toggle {
width: 239px;
bottom: 90px;
}
.dropdown-menu a, nav .mid ul li .dropdown-menu a {
float: left;
font-style: normal;
padding: 4px 0px;
text-align: left;
clear: both;
margin: 1px 0px 0px 0px;
width: 100%;
font-weight: 500;
font-size: 14.5px;
line-height: 24px;
color: #1A1919;
}
.dropdown-menu a:hover, nav .mid ul li .dropdown-menu a:hover {
color: #959595;
}
.dropdown-menu .dropdown-menu-links {
float: left;
width: 100%;
padding: 10px 20px;
max-height: 308px;
overflow: scroll;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 10%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
animation-name: fadeInUp;
}
.dropdown-menu a.red {
color: #FF4D4D;
}
.dropdown-menu a.red:hover {
color: #ff8585;
}
.dropdown-menu a.blue {
color: #4199FF;
}
.dropdown-menu a.blue:hover {
color: #82bcff;
}
.dropdown-menu-footer {
float: left;
width: 100%;
padding: 14px 20px;
}
.dropdown-menu-footer .title {
float: left;
width: 100%;
font-weight: 500;
font-size: 11px;
line-height: 13px;
color: #ADADAD;
}
.dropdown-menu-footer .subtitle {
float: left;
width: 100%;
font-weight: 500;
font-size: 10px;
line-height: 11px;
color: #CDCDCD;
padding-top: 4px;
}
/* notice states */
.notice {
color: #fd228c;
background-color: #ffeff7;
padding: 14px 18px 13px 18px;
border-radius: 9px;
font-weight: 500;
font-size: 14px;
line-height: 20px;
float: left;
width: 100%;
}
.notice.no-corners {
border-radius: 0px;
}
.notice.green {
color: #007632;
background-color: #D6FFE7;
}
.notice.blue {
color: #205381;
background-color: #D9EDFF;
}
.notice.yellow {
color: #534B00;
background-color: #FFFACE;
}
.notice.orange {
color: #8A2900;
background-color: #FFDDCE;
}
.notice.orange a {
color: #ff4900;
}
.notice.orange a:hover {
color: #ce876b;
}
.notice.red {
color: #B00000;
background-color: #FFCECE;
}
.notice.red a {
color: #480000;
}
.notice.small {
padding: 17px;
font-size: 15px;
}
.notice.purple {
color: #6E41E2;
background-color: #F4EFFF;
}
.notice.purple a {
color: #3B1897;
}
.notice.purple a:hover {
color: #7d61c8;
}
.notice.m-b-0 {
margin-bottom: 0px;
}
.notice.m-b-20 {
margin-bottom: 20px;
}
/* cookie banner */
.cookie-notice-wrapper {
position: fixed;
bottom: 0px;
width: 100%;
padding-bottom: 20px;
text-align: center;
z-index: 500000;
}
.cookie-notice {
background: #FFFFFF;
border: 1px solid #EAEAEA;
box-sizing: border-box;
box-shadow: 0px 10px 30px rgb(0 0 0 / 5%);
border-radius: 10px;
display: inline-block;
padding: 14px 16px 14px 15px;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: #888888;
}
.cookie-notice .left {
float: left;
margin-right: 10px;
}
.cookie-notice .left a {
color: #1964FF;
}
.cookie-notice .left a:hover {
color: #6c9cff;
}
.cookie-notice a.close-icon {
cursor: pointer;
background-image: url('../img/icon-close-modal.svg');
background-repeat: no-repeat;
background-position: center;
opacity: 0.6;
background-size: 100%;
float: left;
height: 19px;
width: 19px;
transition: opacity 0.5s ease;
}
.cookie-notice a.close-icon:hover {
opacity: 1;
}
.cookie-notice a.button.grey {
display: none;
}
.cookie-notice a.button.grey {
background-color: #f2f2f2;
}
/* session pages */
.white-bg {
background-color: #FFF;
}
.session-page-wrapper {
float: left;
width: 100%;
height: 100vh;
}
.session-page-wrapper .session-page-inner {
float: left;
width: 100%;
padding: 120px 0px;
}
.session-page-wrapper .session-page-inner .session-page-form {
width: 340px;
margin-left: auto;
margin-right: auto;
}
.session-page-wrapper .session-page-inner .session-page-form .session-page-form-header {
float: left;
width: 100%;
}
.session-page-wrapper .session-page-inner .session-page-form .session-page-form-header a.logo {
width: 40px;
float: left;
}
.session-page-wrapper .session-page-inner .session-page-form .session-page-form-header h1 {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 24px;
color: #1A1919;
padding: 20px 0px 25px 0px;
}
.session-page-wrapper .session-page-inner .session-page-form .session-page-form-header p {
float: left;
width: 100%;
font-size: 14px;
color: #afafaf;
margin-top: -20px;
margin-bottom: 20px;
}
.session-page-wrapper .session-page-inner .form-bottom-link {
float: left;
width: 100%;
padding-top: 50px;
font-style: normal;
font-weight: 500;
font-size: 12.5px;
line-height: 15px;
text-align: center;
color: #9A9DAB;
}
.session-page-wrapper .session-page-inner .form-bottom-link a {
color: #000;
}
.session-page-wrapper .session-page-inner .form-bottom-link a:hover {
color: #555;
}
.session-page-wrapper .session-page-inner .session-page-form .input-wrapper {
margin-bottom: 20px;
}
.session-page-wrapper .session-page-inner .session-page-form .notice.m-b-20 {
text-align: center;
margin-bottom: 20px;
}
.session-page-wrapper .session-page-inner .session-page-form label {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #1A1919;
}
.session-page-wrapper .session-page-inner .session-page-form .session-page-form-header .join-plus-icon {
float: left;
width: 16px;
margin: 12px 12px 12px 12px;
}
.session-page-wrapper .session-page-inner .session-page-form .session-page-form-header .join-company-icon {
float: left;
width: 40px;
}
.session-page-wrapper .session-page-inner .session-page-form .session-page-form-header .join-company-icon img {
float: left;
width: 40px;
height: 40px;
border-radius: 100px;
}
.session-page-wrapper .twitter-session a.button-pastel.white {
float: left;
width: 100%;
padding: 13px 15px;
}
.session-page-wrapper .twitter-session a.button-pastel.white p.icon svg {
height: 20px;
margin-bottom: -5px;
margin-right: 7px;
}
.session-page-wrapper .twitter-session a.button-pastel.white p {
display: inline-block;
}
.session-page-wrapper .or-divide {
float: left;
width: 100%;
border-top: solid 1px #E1E1E1;
}
.session-page-wrapper .or-divide p {
width: 70px;
background-color: #fff;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: -13px;
padding: 4px 0px;
font-style: normal;
font-weight: 535;
font-size: 13px;
line-height: 16px;
text-align: center;
color: #ADADAD;
font-variation-settings: 'wght' 535;
}
.twitter-session.standalone-form {
float: left;
width: 100%;
margin-bottom: 35px;
}
.or-divide.standalone-form {
margin-bottom: 25px;
}
.or-divide.standalone-form {
margin-bottom: 25px;
margin-top: 45px;
border-top: solid 1px #ededed;
}
/* onboarding */
.onboarding-page-outer {
float: left;
width: 100%;
}
.onboarding-page-outer .onboarding-top-nav {
float: left;
width: 100%;
padding: 25px;
}
.onboarding-icon {
float: left;
width: 100%;
margin-bottom: 20px;
}
.onboarding-page-outer .onboarding-top-nav a.button-pastel.white {
float: right;
}
.onboarding-page-outer .onboarding-top-nav .right-links {
float: right;
padding: 12px;
text-align: right;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 18px;
text-align: right;
letter-spacing: -0.2145px;
color: #939FAD;
}
.onboarding-page-outer .onboarding-top-nav .right-links a {
font-weight: bold;
font-size: 15.5px;
line-height: 18px;
letter-spacing: -0.2145px;
color: #FF008D;
}
.onboarding-page-outer .onboarding-page {
float: left;
width: 100%;
padding: 40px 0px 150px 0px;
}
.onboarding-page-outer .onboarding-page .copy {
float: left;
width: 100%;
}
.onboarding-page-outer .onboarding-page .copy h1 {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 26px;
line-height: 31px;
letter-spacing: -0.264px;
color: #000000;
}
.onboarding-page-outer .onboarding-page .copy p {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 24px;
letter-spacing: -0.264px;
color: #9A9DAB;
padding: 10px 0px 35px 0px;
}
.onboarding-page-outer .onboarding-page .onboarding-footer-copyright {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 13px;
color: #C9C9C9;
padding: 40px 0px 0px 0px;
}
.upload-area-wrapper {
float: left;
width: 100%;
padding-top: 10px;
}
.upload-area-wrapper .upload-area {
float: left;
width: 60px;
height: 60px;
background-color: #F0F0F0;
border-radius: 80px;
background-image: url('../img/icon-avatar-upload.svg');
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.upload-area-wrapper .upload-area.image-icon {
background-image: url('../img/icon-company-upload.svg');
}
.slim {
background-image: url('../img/icon-avatar-upload.svg');
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
-webkit-transition: background-color .25s;
transition: background-color .25s;
padding-bottom: .025px;
height: 60px;
border-radius: 90px;
color: transparent;
background-size: 60px;
}
.upload-area-wrapper .upload-area.image-icon .slim {
background-image: url('../img/icon-company-upload.svg');
}
.upload-area-wrapper .upload-area .slim-btn {
background-color: rgb(253 34 140);
position: absolute;
right: -4px;
top: 10px;
width: 24px;
height: 24px;
}
.upload-area-wrapper .upload-area .avatar-wrapper .slim .slim-btn-group {
top: -10px;
bottom: auto;
padding: 0px 0px 4px 0px;
height: 24px;
overflow: visible;
}
.upload-area-wrapper .upload-area .avatar-wrapper button.slim-btn.slim-btn-remove {
display: none;
}
.upload-area-wrapper .upload-area .slim .slim-area {
height: auto;
}
.upload-area-wrapper .upload-area .slim .slim-area [data-state="success"] {
display: none;
}
.upload-area img {
border-radius: 100px;
}
.upload-link {
float: left;
padding: 12px 20px 0px 20px;
width: calc(100% - 80px);
}
.upload-link p {
float: left;
width: 100%;
letter-spacing: -0.264px;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 18px;
display: flex;
align-items: center;
color: #19385D;
}
.upload-link span {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
letter-spacing: -0.264px;
color: #A4A4A4;
}
.onboarding-summary {
float: left;
width: 100%;
padding-top: 35px;
}
.onboarding-summary .summary-item {
float: left;
width: 100%;
margin-bottom: 40px;
}
.onboarding-summary .summary-item .icon {
float: left;
width: 42px;
margin-right: 25px;
}
.onboarding-summary .summary-item .copy {
float: left;
width: calc(100% - 67px);
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 22px;
letter-spacing: -0.264px;
color: #9A9DAB;
}
.input-wrapper.reserve-url-field input {
padding-right: 100px;
}
.fixed-url-suffix {
position: absolute;
right: 0px;
width: 140px;
top: 22px;
text-align: right;
padding: 13px 19px 12px 19px;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 18px;
color: #8E98A4;
}
.copy-join-url-wrapper .input-gradient-overlay-right {
position: absolute;
height: 96%;
width: 190px;
right: 1px;
top: 1px;
border-radius: 0px 10px 10px 0px;
background: linear-gradient(270deg, #ffffff 60%, rgb(255 255 255 / 30%) 100%);
}
.copy-join-url-wrapper a.copy-link {
position: absolute;
right: 12px;
top: 8.5px;
height: 26px;
width: 26px;
background-image: url(../img/icon-copy-url.svg);
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.5s ease;
}
.copy-join-url-wrapper a.copy-link:hover {
opacity: 0.4;
}
.copy-join-url-wrapper {
float: left;
width: 100%;
position: relative;
}
.copy-join-url-wrapper.disabled {
opacity: 0.5;
}
.onboarding-page-outer .onboarding-page .buttons-wrapper {
float: left;
width: 100%;
}
.onboarding-page-outer .onboarding-page .buttons-wrapper a.button.grey.md.no-shadow.m-l-15 {
margin-left: 15px;
}
.onboarding-page.signup-flow {
padding-top: 120px;
}
/* tooltip - compressed */
.tooltipster-fall,.tooltipster-grow.tooltipster-show{-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1);-moz-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-ms-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-o-transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-base{display:flex;pointer-events:none;position:absolute}.tooltipster-box{flex:1 1 auto}.tooltipster-content{box-sizing:border-box;max-height:100%;max-width:100%;overflow:auto}.tooltipster-ruler{bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;visibility:hidden}.tooltipster-fade{opacity:0;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;-ms-transition-property:opacity;transition-property:opacity}.tooltipster-fade.tooltipster-show{opacity:1}.tooltipster-grow{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-backface-visibility:hidden}.tooltipster-grow.tooltipster-show{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-swing{opacity:0;-webkit-transform:rotateZ(4deg);-moz-transform:rotateZ(4deg);-o-transform:rotateZ(4deg);-ms-transform:rotateZ(4deg);transform:rotateZ(4deg);-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform}.tooltipster-swing.tooltipster-show{opacity:1;-webkit-transform:rotateZ(0);-moz-transform:rotateZ(0);-o-transform:rotateZ(0);-ms-transform:rotateZ(0);transform:rotateZ(0);-webkit-transition-timing-function:cubic-bezier(.23,.635,.495,1);-webkit-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-moz-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-ms-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-o-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);transition-timing-function:cubic-bezier(.23,.635,.495,2.4)}.tooltipster-fall{-webkit-transition-property:top;-moz-transition-property:top;-o-transition-property:top;-ms-transition-property:top;transition-property:top;-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-fall.tooltipster-initial{top:0!important}.tooltipster-fall.tooltipster-dying{-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;-ms-transition-property:all;transition-property:all;top:0!important;opacity:0}.tooltipster-slide{-webkit-transition-property:left;-moz-transition-property:left;-o-transition-property:left;-ms-transition-property:left;transition-property:left;-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-moz-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-ms-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-o-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-slide.tooltipster-initial{left:-40px!important}.tooltipster-slide.tooltipster-dying{-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;-ms-transition-property:all;transition-property:all;left:0!important;opacity:0}@keyframes tooltipster-fading{0%{opacity:0}100%{opacity:1}}.tooltipster-update-fade{animation:tooltipster-fading .4s}@keyframes tooltipster-rotating{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}100%{transform:rotate(0)}}.tooltipster-update-rotate{animation:tooltipster-rotating .6s}@keyframes tooltipster-scaling{50%{transform:scale(1.1)}100%{transform:scale(1)}}.tooltipster-update-scale{animation:tooltipster-scaling .6s}.tooltipster-sidetip .tooltipster-box{background:#565656;border:2px solid #000;border-radius:4px}.tooltipster-sidetip.tooltipster-bottom .tooltipster-box{margin-top:8px}.tooltipster-sidetip.tooltipster-left .tooltipster-box{margin-right:8px}.tooltipster-sidetip.tooltipster-right .tooltipster-box{margin-left:8px}.tooltipster-sidetip.tooltipster-top .tooltipster-box{margin-bottom:8px}.tooltipster-sidetip .tooltipster-content{color:#fff;line-height:18px;padding:6px 14px}.tooltipster-sidetip .tooltipster-arrow{overflow:hidden;position:absolute}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow{height:10px;margin-left:-10px;top:0;width:20px}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow{height:20px;margin-top:-10px;right:0;top:0;width:10px}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow{height:20px;margin-top:-10px;left:0;top:0;width:10px}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow{bottom:0;height:10px;margin-left:-10px;width:20px}.tooltipster-sidetip .tooltipster-arrow-background,.tooltipster-sidetip .tooltipster-arrow-border{height:0;position:absolute;width:0}.tooltipster-sidetip .tooltipster-arrow-background{border:10px solid transparent}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background{border-bottom-color:#565656;left:0;top:3px}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background{border-left-color:#565656;left:-3px;top:0}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background{border-right-color:#565656;left:3px;top:0}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background{border-top-color:#565656;left:0;top:-3px}.tooltipster-sidetip .tooltipster-arrow-border{border:10px solid transparent;left:0;top:0}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color:#000}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border{border-left-color:#000}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border{border-right-color:#000}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border{border-top-color:#000}.tooltipster-sidetip .tooltipster-arrow-uncropped{position:relative}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped{top:-10px}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped{left:-10px}.tooltipster-sidetip .tooltipster-box{background:#FFF;border:2px solid #FFF;border-radius:2px}.tooltipster-sidetip.tooltipster-bottom .tooltipster-box{margin-top:8px}.tooltipster-sidetip.tooltipster-left .tooltipster-box{margin-right:8px}.tooltipster-sidetip.tooltipster-right .tooltipster-box{margin-left:8px}.tooltipster-sidetip.tooltipster-top .tooltipster-box{margin-bottom:8px}.tooltipster-sidetip .tooltipster-content{font-size:15px;text-align:center;font-family:"proxima-soft",helvetica neue;-webkit-font-smoothing:antialiased;color:#000;line-height:18px;padding:6px 14px}.tooltipster-sidetip .tooltipster-arrow{overflow:hidden;position:absolute}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow{height:10px;margin-left:-10px;top:0;width:20px}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow{height:20px;margin-top:-10px;right:0;top:0;width:10px}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow{height:20px;margin-top:-10px;left:0;top:0;width:10px}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow{bottom:0;height:10px;margin-left:-10px;width:20px}.tooltipster-sidetip .tooltipster-arrow-background,.tooltipster-sidetip .tooltipster-arrow-border{height:0;position:absolute;width:0}.tooltipster-sidetip .tooltipster-arrow-background{border:10px solid transparent}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background{border-bottom-color:#FFF;left:0;top:3px}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background{border-left-color:#FFF;left:-3px;top:0}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background{border-right-color:#FFF;left:3px;top:0}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background{border-top-color:#FFF;left:0;top:-3px}.tooltipster-sidetip .tooltipster-arrow-border{border:10px solid transparent;left:0;top:0}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color:#FFF}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border{border-left-color:#FFF}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border{border-right-color:#FFF}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border{border-top-color:#FFF}.tooltipster-sidetip .tooltipster-arrow-uncropped{position:relative}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped{top:-10px}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped{left:-10px}
.tooltipster-sidetip.tooltip-small .tooltipster-box{border:none;background:#30303F;background:#30303F;border-radius:10px}.tooltipster-sidetip.tooltip-small.tooltipster-bottom .tooltipster-box{margin-top:8px}.tooltipster-sidetip.tooltip-small.tooltipster-left .tooltipster-box{margin-right:8px}.tooltipster-sidetip.tooltip-small.tooltipster-right .tooltipster-box{margin-left:8px}.tooltipster-sidetip.tooltip-small.tooltipster-top .tooltipster-box{margin-bottom:8px}.tooltipster-sidetip.tooltip-small .tooltipster-arrow{height:8px;margin-left:-8px;width:16px}.tooltipster-sidetip.tooltip-small.tooltipster-left .tooltipster-arrow,.tooltipster-sidetip.tooltip-small.tooltipster-right .tooltipster-arrow{height:16px;margin-left:0;margin-top:-8px;width:8px}.tooltipster-sidetip.tooltip-small .tooltipster-arrow-background{display:none}.tooltipster-sidetip.tooltip-small .tooltipster-arrow-border{border:8px solid transparent}.tooltipster-sidetip.tooltip-small.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color:#1b1b1b;border-bottom-color:#30303F}.tooltipster-sidetip.tooltip-small.tooltipster-left .tooltipster-arrow-border{border-left-color:#1b1b1b;border-left-color:#30303F}.tooltipster-sidetip.tooltip-small.tooltipster-right .tooltipster-arrow-border{border-right-color:#1b1b1b;border-right-color:#30303F}.tooltipster-sidetip.tooltip-small.tooltipster-top .tooltipster-arrow-border{border-top-color:#1b1b1b;border-top-color:#30303F}.tooltipster-sidetip.tooltip-small.tooltipster-bottom .tooltipster-arrow-uncropped{top:-8px}.tooltipster-sidetip.tooltip-small.tooltipster-right .tooltipster-arrow-uncropped{left:-8px}.tooltipster-sidetip.tooltip-small .tooltipster-content{font-size:13.5px;text-align:center;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;font-weight:600;color:#fff;line-height:20px;padding:8px 14px;border-radius:4px}.tooltipster-base.tooltip-small.offset{margin-left:-15px}
.tooltipster-sidetip.tooltip-medium .tooltipster-box{border:none;background:#1b1b1b;background:#30303F;border-radius:5px}.tooltipster-sidetip.tooltip-medium.tooltipster-bottom .tooltipster-box{margin-top:8px}.tooltipster-sidetip.tooltip-medium.tooltipster-left .tooltipster-box{margin-right:8px}.tooltipster-sidetip.tooltip-medium.tooltipster-right .tooltipster-box{margin-left:8px}.tooltipster-sidetip.tooltip-medium.tooltipster-top .tooltipster-box{margin-bottom:8px}.tooltipster-sidetip.tooltip-medium .tooltipster-arrow{height:8px;margin-left:-8px;width:16px}.tooltipster-sidetip.tooltip-medium.tooltipster-left .tooltipster-arrow,.tooltipster-sidetip.tooltip-medium.tooltipster-right .tooltipster-arrow{height:16px;margin-left:0;margin-top:-8px;width:8px}.tooltipster-sidetip.tooltip-medium .tooltipster-arrow-background{display:none}.tooltipster-sidetip.tooltip-medium .tooltipster-arrow-border{border:8px solid transparent}.tooltipster-sidetip.tooltip-medium.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color:#1b1b1b;border-bottom-color:#30303F}.tooltipster-sidetip.tooltip-medium.tooltipster-left .tooltipster-arrow-border{border-left-color:#1b1b1b;border-left-color:#30303F}.tooltipster-sidetip.tooltip-medium.tooltipster-right .tooltipster-arrow-border{border-right-color:#1b1b1b;border-right-color:#30303F}.tooltipster-sidetip.tooltip-medium.tooltipster-top .tooltipster-arrow-border{border-top-color:#1b1b1b;border-top-color:#30303F}.tooltipster-sidetip.tooltip-medium.tooltipster-bottom .tooltipster-arrow-uncropped{top:-8px}.tooltipster-sidetip.tooltip-medium.tooltipster-right .tooltipster-arrow-uncropped{left:-8px}.tooltipster-sidetip.tooltip-medium .tooltipster-content{font-size:14px;text-align:center;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;font-weight:600;color:#fff;line-height:20px;padding:12px;border-radius:4px}.tooltipster-base.tooltip-medium.offset{margin-left:-15px}
/* reveal */
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
z-index: 500;
display: none;
top: 0;
left: 0;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(37px);
background-color: rgba(255, 255, 255, 0.1);
}
.reveal-modal-bg-inner {
float: left;
width: 100%;
position: absolute;
height: 100%;
top: 0px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(37px);
background-color: rgba(255, 255, 255, 0.1);
}
.reveal-modal {
visibility: hidden;
left: 50%;
top: 140px;
margin-left: -275px;
width: 550px;
background: #FFFFFF;
box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.05);
border-radius: 7px;
position: absolute;
z-index: 501;
padding: 40px 50px 50px 50px;
animation-duration: 0.4s;
}
.reveal-modal {
width: 440px;
margin-left: -220px;
}
.reveal-modal .close-reveal-modal-button {
position: absolute;
height: 22px;
width: 22px;
top: 15px;
right: 15px;
cursor: pointer;
background-image: url('../img/icon-close-modal.svg');
background-repeat: no-repeat;
background-position: center;
opacity: 0.6;
background-size: 100%;
transition: opacity 0.5s ease;
}
.reveal-modal.padding-0 {
padding: 0px;
}
.reveal-modal .close-reveal-modal-button:hover {
opacity: 1;
}
.modal-session {
float: left;
width: 100%;
}
.modal-session .modal-header {
float: left;
width: 100%;
}
.modal-session .modal-header .icon {
margin-left: auto;
margin-right: auto;
width: 38px;
}
.modal-session .modal-header .title {
float: left;
width: 100%;
text-align: center;
padding: 15px 0px 10px 0px;
font-family: 'Mona-Sans';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 17px;
text-align: center;
color: #000000;
}
.modal-session .modal-header .subtitle {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 13px;
line-height: 16px;
text-align: center;
color: #A7A7A7;
}
.modal-session .session-options {
float: left;
width: 100%;
padding-top: 25px;
}
.modal-session .session-options .twitter-session {
float: left;
width: 100%;
padding-bottom: 35px;
}
.modal-session .session-options .twitter-session a.button-pastel.white {
float: left;
width: 100%;
padding: 13px 15px;
}
.modal-session .session-options .twitter-session a.button-pastel.white p.icon svg {
height: 20px;
margin-bottom: -5px;
margin-right: 7px;
}
.modal-session .session-options .twitter-session a.button-pastel.white p {
display: inline-block;
}
.modal-session .session-options .or-divide {
float: left;
width: 100%;
border-top: solid 1px #E1E1E1;
}
.modal-session .session-options .or-divide p {
width: 40px;
background-color: #fff;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: -13px;
padding: 4px 0px;
font-style: normal;
font-weight: 535;
font-size: 13px;
line-height: 16px;
text-align: center;
color: #ADADAD;
font-variation-settings: 'wght' 535;
}
.modal-session .session-options .form-wrapper {
float: left;
width: 100%;
padding-top: 25px;
}
.modal-session-form-bottom-link {
position: absolute;
bottom: -40px;
left: 0px;
width: 100%;
text-align: center;
left: 0px;
width: 100%;
text-align: center;
font-style: normal;
font-weight: 500;
font-size: 13px;
line-height: 16px;
color: #A7A7A7;
}
/* forms */
.form-wrapper {
float: left;
width: 100%;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
-webkit-text-fill-color: #19385D !important;
border: 1px solid #D2D2D2 !important;
color: #19385D !important;
background-color: #FFF !important;
font-family: 'Inter', sans-serif !important;
filter:none;
}
.input-wrapper {
float: left;
width: 100%;
margin-bottom: 25px;
position: relative;
}
.input-wrapper label {
float: left;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
letter-spacing: -0.264px;
color: #1A1919;
margin-bottom: 6px;
}
.input-wrapper input {
font-family: 'Inter', sans-serif;
background: #FFFFFF;
border: 1px solid #D2D2D2;
box-shadow: 0px 3px 4px rgb(0 0 0 / 6%);
border-radius: 9px;
width: 100%;
float: left;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 20px;
padding: 11px 15px 11px 15px;
outline: none;
-webkit-appearance: none;
transition: border 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
height: 43px;
color: #19385D;
}
.input-wrapper input:focus {
border: 1px solid #000000;
box-shadow: inset 0px 0px 0px 1px #000000, 0px 4px 8px rgb(0 0 0 / 15%);
color: #000000;
background-color: #FFF;
}
.input-wrapper input[disabled], .input-wrapper input[readonly] {
color: #b1b1b1;
}
.input-wrapper input#join-url[disabled], .input-wrapper input#join-url[readonly] {
color: #19385D;
-webkit-text-fill-color: #19385D;
opacity: 1;
}
.input-wrapper input[disabled]:focus, .input-wrapper input[readonly]:focus {
border: 1px solid #D2D2D2;
box-shadow: none;
transition: border 0.5s ease, color 0.5s ease;
color: #b1b1b1;
background-color: #FFFFFF;
}
.input-wrapper input::-webkit-input-placeholder {
color: #BEBEBE;
}
.input-wrapper input[type="password"]:placeholder-shown {
padding-top: 16px;
}
.input-wrapper input.default-placeholder[type="password"] {
padding-top: 11px;
}
.input-wrapper textarea {
font-family: 'Inter', sans-serif;
background: #FFFFFF;
border: 1px solid #D2D2D2;
box-shadow: 0px 3px 4px rgb(0 0 0 / 6%);
border-radius: 9px;
width: 100%;
float: left;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 20px;
padding: 11px 15px 11px 15px;
outline: none;
transition: border 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
resize: none;
height: 150px;
-webkit-appearance: none;
color: #19385D;
}
.input-wrapper textarea:focus {
border: 1px solid #000000;
box-shadow: inset 0px 0px 0px 1px #000000, 0px 4px 8px rgb(0 0 0 / 15%);
color: #000000;
background-color: #FFF;
}
.input-wrapper textarea::-webkit-input-placeholder {
color: #BEBEBE;
}
.input-label-link {
float: right;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 17px;
text-align: right;
color: #8C8C8C;
}
.input-label-link a {
float: left;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #b6b6b6;
}
.input-label-link a:hover {
color: #555;
}
.input-wrapper.m-b-10 {
margin-bottom: 10px;
}
.split-fields {
float: left;
width: 100%;
}
.split-fields .input-wrapper {
float: left;
width: 48%;
margin-right: 2%;
}
.split-fields .input-wrapper:last-child {
width: 48%;
margin-right: 0;
margin-left: 2%;
}
.split-fields-65-35 {
float: left;
width: 100%;
}
.split-fields-65-35 .input-wrapper {
float: left;
width: 60%;
margin-right: 2%;
}
.split-fields-65-35 .input-wrapper:last-child {
width: 36%;
margin-right: 0;
margin-left: 2%;
}
.split-fields-3 {
float: left;
width: 100%;
}
.split-fields-3 .input-wrapper {
float: left;
width: 31%;
margin-right: 3%;
}
.split-fields-3 .input-wrapper:last-child {
width: 31%;
margin-right: 0;
margin-left: 0;
}
.multi-field-label {
float: left;
width: 100%;
}
.multi-field-label label {
float: left;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
letter-spacing: -0.264px;
color: #757575;
margin-bottom: 6px;
}
label.error {
color: #ff2e2e;
font-size: 13.5px;
font-style: normal;
font-weight: 535;
font-variation-settings: 'wght' 535;
float: left;
width: 100%;
margin-top: 10px;
}
.session-page-wrapper .session-page-inner .session-page-form label.error {
color: #ff2e2e;
font-size: 13.5px;
font-style: normal;
font-weight: 535;
font-variation-settings: 'wght' 535;
float: left;
width: 100%;
margin-top: 10px;
}
.split-fields .input-wrapper label.error {
color: #ff2e2e;
font-size: 13.5px;
font-style: normal;
font-weight: 535;
font-variation-settings: 'wght' 535;
}
.input-wrapper [type="checkbox"]:checked,
.input-wrapper [type="checkbox"]:not(:checked) {
position: absolute;
left: -9999px;
}
.input-wrapper [type="checkbox"]:checked + label,
.input-wrapper [type="checkbox"]:not(:checked) + label {
position: relative;
cursor: pointer;
display: inline-block;
height: 28px;
padding: 2px 0px 0px 32px;
margin-top: 0px;
margin-bottom: 0px;
background-color: transparent;
-webkit-transition: all 0.5s ease;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #2B425C;
}
.input-wrapper [type="checkbox"]:checked + label:before,
.input-wrapper [type="checkbox"]:not(:checked) + label:before {
content: '';
position: absolute;
left: -4px;
top: 1px;
width: 28px;
height: 28px;
background-repeat: no-repeat;
background-position: left center;
background-image: url('../img/form-checkbox.svg');
}
.input-wrapper [type="checkbox"]:checked + label:after,
.input-wrapper [type="checkbox"]:not(:checked) + label:after {
content: '';
position: absolute;
left: 0px;
top: -2px;
width: 28px;
height: 28px;
-webkit-transition: all 0.5s ease;
transition: all 0.3s ease;
background-repeat: no-repeat;
background-position: left center;
background-image: url('../img/form-checkbox-active.svg');
}
.input-wrapper [type="checkbox"]:not(:checked) + label:after {
opacity: 0;
}
.input-wrapper [type="checkbox"]:checked + label:after {
opacity: 1;
}
.input-wrapper [type="radio"]:checked,
.input-wrapper [type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
.input-wrapper [type="radio"]:checked + label,
.input-wrapper [type="radio"]:not(:checked) + label {
position: relative;
cursor: pointer;
display: inline-block;
height: 28px;
padding: 2px 0px 0px 32px;
margin-top: 0px;
margin-bottom: 0px;
background-color: transparent;
-webkit-transition: all 0.5s ease;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #2B425C;
}
.input-wrapper [type="radio"]:checked + label:before,
.input-wrapper [type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: -4px;
top: 1px;
width: 28px;
height: 28px;
background-repeat: no-repeat;
background-position: left center;
background-image: url('../img/form-radio-button.svg');
}
.input-wrapper [type="radio"]:checked + label:after,
.input-wrapper [type="radio"]:not(:checked) + label:after {
content: '';
position: absolute;
left: -4px;
top: 1px;
width: 28px;
height: 28px;
-webkit-transition: all 0.5s ease;
transition: all 0.3s ease;
background-repeat: no-repeat;
background-position: left center;
background-image: url('../img/form-radio-button-active.svg');
}
.input-wrapper [type="radio"]:not(:checked) + label:after {
opacity: 0;
}
.input-wrapper [type="radio"]:checked + label:after {
opacity: 1;
}
.input-wrapper label a {
color: #1964FF;
}
.input-wrapper label a:hover {
color: #6c9cff;
}
.input-wrapper.reserve-url-field.w-form-hint {
margin-bottom: 10px;
}
.input-wrapper.w-form-hint {
margin-bottom: 10px;
}
.form-wrapper .form-hint {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 12.5px;
line-height: 18px;
color: #9A9DAB;
margin-bottom: 25px;
}
.form-wrapper .form-hint.hidden {
display: none;
}
.form-wrapper .form-hint strong {
font-weight: 500;
}
.form-wrapper .form-hint span{
color: #19385D;
}
/* post */
.post-wrapper {
float: left;
width: 100%;
}
.post-wrapper .post-header {
float: left;
width: 100%;
margin-bottom: 20px;
}
.post-wrapper .post-header .left {
float: left;
width: calc(100% - 300px);
}
.post-wrapper .post-header .left .icon {
float: left;
width: 52px;
}
.post-wrapper .post-header .left .icon img {
float: left;
width: 52px;
height: auto;
border-radius: 15px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
}
.post-wrapper .post-header .left .copy {
float: left;
width: calc(100% - 52px);
padding-left: 20px;
}
.post-wrapper .post-header .left .copy h1 {
float: left;
width: 100%;
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 29px;
letter-spacing: -0.264px;
color: #000000;
margin-bottom: 1px;
}
.post-wrapper .post-header .left .copy p {
float: left;
width: 100%;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #999999;
}
.post-wrapper .post-header .right {
float: left;
width: 300px;
padding-top: 8px;
}
.post-wrapper .post-header .right .right-inner {
float: right;
}
.post-wrapper .post-header .right .right-inner a.button-pastel.button-pastel.pink {
float: left;
position: relative;
height: 43px;
background: #FFF8FC;
border: 1px solid #F2E5ED;
box-shadow: 0px 7px 12px rgba(254, 4, 150, 0.03);
border-radius: 9px;
margin-right: 14px;
font-weight: 600;
font-variation-settings: 'wght' 600;
}
.post-wrapper .post-header .right .right-inner a.button-pastel.button-pastel.pink p.like-icon {
float: left;
margin-top: -3px;
}
.post-wrapper .post-header .right .right-inner a.button-pastel.button-pastel.pink p.like-icon {
float: left;
margin-top: -3px;
}
.post-wrapper .post-header .right .right-inner a.button-pastel.button-pastel.pink p.count {
float: left;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 17px;
color: #FE0496;
padding: 1px 0px 0px 5px;
font-variant-numeric: tabular-nums;
}
.post-wrapper .post-header .right .right-inner a.button-pastel.black.md p.text {
float: left;
font-size: 15px;
}
.post-wrapper .post-header .right .right-inner a.button-pastel.black.md p.icon {
float: left;
height: 10px;
margin-top: -2px;
margin-left: 10px;
}
.post-wrapper .post-body {
float: left;
width: 100%;
background: #FFFFFF;
border: 1px solid #ECECF4;
box-shadow: 0px 7px 12px rgba(0, 0, 0, 0.03);
border-radius: 15px;
}
.post-wrapper .post-body .post-body-display {
float: left;
width: 100%;
padding: 40px;
border-bottom: solid 1px #ECECF4;
}
.post-wrapper .post-body .post-body-display img {
float: left;
width: 100%;
border-radius: 15px;
}
.post-wrapper .post-body .post-body-content {
float: left;
width: 100%;
position: relative;
}
.post-body-display-images .product-image-loading {
float: left;
width: 100%;
min-height: 360px;
position: relative;
}
.post-body-display-images .product-image-loading p.loading-icon {
-webkit-animation: rotating 1s linear infinite;
width: 30px;
height: 30px;
top: 50%;
position: absolute;
left: 50%;
margin-top: -15px;
margin-left: -15px;
}
.post-body-display-images {
float: left;
width: 100%;
}
.post-body-display-images .images {
float: left;
width: 100%;
min-height: 500px;
}
.post-body-display-images .images {
opacity: 0;
visibility: hidden;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.post-body-display-images .images.slick-initialized {
visibility: visible;
opacity: 1;
}
.post-body-display-images .slider-dots {
float: left;
width: 100%;
text-align: center;
margin-top: -50px;
position: relative;
z-index: 50;
}
.post-body-display-images .slider-dots ul.slick-dots {
list-style: none;
background-color: #000;
padding: 8px 12px;
border-radius: 50px;
display: inline-block;
}
.post-body-display-images .slider-dots ul.slick-dots li {
background-color: #000;
float: left;
margin: 0px 3px;
}
.post-body-display-images .slider-dots ul.slick-dots li.slick-active button {
opacity: 1;
}
.post-body-display-images .slider-dots ul.slick-dots li button {
border: none;
overflow: hidden;
text-indent: -200px;
width: 12px;
height: 12px;
border-radius: 20px;
opacity: 0.4;
cursor: pointer;
transition: opacity 0.4s ease;
}
.post-body-display-images .slider-dots ul.slick-dots li button:hover {
opacity: 0.7;
}
.post-wrapper .post-body .post-body-content .post-body-content-left {
float: left;
width: calc(100% - 360px);
padding: 40px;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 24px;
letter-spacing: -0.264px;
color: #000000;
}
.post-wrapper .post-body .post-body-content .post-body-content-left-divide {
width: 1px;
height: 100%;
position: absolute;
right: 360px;
background-color: #ECECF4;
}
.post-wrapper .post-body .post-body-content .post-body-content-left p {
float: left;
width: 100%;
margin-bottom: 20px;
}
.post-wrapper .post-body .post-body-content .post-body-content-left p:last-child {
margin-bottom: 0px;
}
.post-wrapper .post-body .post-body-content .post-body-content-left ul, .post-wrapper .post-body .post-body-content .post-body-content-left ol {
float: left;
width: 100%;
padding-left: 15px;
}
.post-wrapper .post-body .post-body-content .post-body-content-left ul li, .post-wrapper .post-body .post-body-content .post-body-content-left ol li {
float: left;
width: 100%;
}
.post-wrapper .post-body .post-body-content .post-body-content-left a {
color: #1964ff;
}
.post-wrapper .post-body .post-body-content .post-body-content-left a:hover {
color: #5783de;
}
.post-wrapper .post-body .post-body-content .post-body-content-right {
float: right;
width: 360px;
padding: 40px;
}
.post-wrapper .post-body .post-body-content .post-body-content-right .row {
float: left;
width: 100%;
margin-bottom: 20px;
}
.post-wrapper .post-body .post-body-content .post-body-content-right .row p.subtitle {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 13px;
line-height: 24px;
color: #9D9D9D;
}
.post-wrapper .post-body .post-body-content .post-body-content-right .row p.title {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 21px;
color: #000000;
}
.post-wrapper .post-body .post-body-content .post-body-content-right .row.split .block {
float: left;
width: 50%;
}
.post-wrapper .post-body .post-body-content .post-body-content-right .row.split .block a.twitter {
color: #1964FF;
}
.post-wrapper .post-body .post-body-content .post-body-content-right .row.split .block a.twitter:hover {
color: #5c91ff;
}
.post-wrapper .post-body .post-body-content .post-body-content-right .likes-avatar-list {
float: left;
width: 100%;
}
.post-wrapper .post-body .post-body-content .post-body-content-right .likes-avatar-list .avatars {
float: left;
max-width: calc(100% - 90px);
padding-left: 12px;
padding-right: 10px;
}
.post-wrapper .post-body .post-body-content .post-body-content-right .likes-avatar-list .avatars img {
float: left;
width: 34px;
height: 34px;
border-radius: 50px;
margin-left: -12px;
}
.post-wrapper .post-body .post-body-content .post-body-content-right .likes-avatar-list .likes-total {
float: left;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #000000;
padding: 9px 0px 9px 0px;
}
.related-tools-wrapper {
float: left;
width: 100%;
margin-top: 70px;
}
.related-tools-wrapper .related-title {
float: left;
width: 100%;
margin-bottom: 15px;
}
.related-tools-wrapper .related-title h4 {
float: left;
width: 100%;
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 23px;
letter-spacing: -0.264px;
color: #000000;
}
/* sumbit form */
.input-wrapper.m-b-100 {
margin-bottom: 100px;
}
.product-icon-wrapper .slim {
background-repeat: no-repeat;
background-position: center;
background-image: url('../img/icon-product-upload.svg');
}
.upload-product-image-area {
float: left;
width: 100%;
background: #FFFFFF;
border: 1px solid #D2D2D2;
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.06);
border-radius: 9px;
padding: 80px 20px;
text-align: center;
cursor: pointer;
}
.upload-product-image-area .icon {
width: 42px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
.upload-product-image-area .icon img {
border-radius: 0px;
}
.upload-product-image-area p.title {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 18px;
text-align: center;
color: #000000;
margin-bottom: 4px;
}
.upload-area p.subtitle {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 13px;
line-height: 16px;
text-align: center;
letter-spacing: -0.264px;
color: #A4A4A4;
}
.product-image-result {
float: left;
width: 100%;
margin-bottom: 20px;
padding-top: 5px;
}
.upload-area-wrapper.product-image .slim {
height: auto;
background-image: none;
background-color: #fff;
border-radius: 0px;
}
.upload-area-wrapper.product-image .slim[data-state*=error] {
background-color: #fff!important;
color: #702010;
}
.upload-area-wrapper.product-image .upload-area {
float: left;
width: 100%;
height: auto;
background-color: #FFF;
border-radius: 0px;
background-image: none;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.upload-area-wrapper.product-image .slim>img, .upload-area-wrapper.product-image .slim>input[type=file] {
margin-bottom: 0px !important;
}
.upload-area-wrapper.product-image .slim .slim-btn-group {
display: none;
}
.input-wrapper.m-b-0 {
margin-bottom: 0px;
}
.upload-other-images-cta {
display: none;
float: left;
width: 100%;
margin-bottom: 25px;
}
.product-image-result .new-image-block {
float: left;
width: 100%;
margin-bottom: 30px;
position: relative;
}
.product-image-result .new-image-block:last-child {
margin-bottom: 0px;
}
.product-image-result .new-image-block img {
float: left;
width: 100%;
box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.05);
border-radius: 15px;
}
.product-image-result .new-image-block a.remove-image {
position: absolute;
right: 15px;
top: 15px;
height: 28px;
width: 28px;
background-repeat: no-repeat;
background-position: center;
background-image: url('../img/icon-remove-image.svg');
opacity: 0;
transition: opacity 0.5s ease;
}
.product-image-result .new-image-block:hover a.remove-image {
opacity: 1;
}
.upload-product-image-outer-wrapper .product-image-uploading {
float: left;
width: 100%;
display: none;
position: absolute;
height: 100%;
background-color: rgb(255 255 255 / 80%);
}
.upload-product-image-outer-wrapper {
float: left;
width: 100%;
position: relative;
}
.upload-product-image-outer-wrapper .product-image-uploading p.loading-icon {
-webkit-animation: rotating 1s linear infinite;
width: 22px;
height: 22px;
top: 50%;
position: absolute;
left: 50%;
margin-top: -11px;
margin-left: -11px;
}
@-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.upload-product-image-outer-wrapper .slim[data-state*=error] .slim-error, .upload-product-image-outer-wrapper .slim[data-state*=error] .slim-label, .upload-product-image-outer-wrapper .slim[data-state*=error] .slim-label-loading {
max-width: 100%;
width: 100%;
max-width: inherit;
padding-top: 0;
padding-left: 0;
position: inherit;
left: 0px;
text-align: left;
color: #f00;
font-size: 14px;
padding-bottom: 20px;
}
.upload-area-wrapper.product-image .slim[data-state*=error] {
background-color: #fff!important;
color: #702010;
padding-top: 20px;
}
.upload-area-wrapper.product-icon-outer .upload-area .slim-btn {
background-color: rgb(253 34 140);
position: absolute;
right: -4px;
top: 0px;
width: 24px;
height: 24px;
}
.upload-area-wrapper.product-icon-outer .slim-btn-group {
padding: 0px;
text-align: center;
height: 60px;
width: 60px;
}
.upload-area-wrapper.product-image {
padding-top: 0px;
}
/* basic pages */
.basic-page {
float: left;
width: 100%;
padding: 0px;
}
.basic-page h1 {
float: left;
width: 100%;
font-style: normal;
font-weight: 800;
font-size: 42px;
line-height: 50px;
color: #000000;
margin-bottom: 15px;
}
.basic-page h3 {
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 34px;
color: #000;
}
.basic-page p {
float: left;
width: 100%;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 34px;
color: #777;
margin-bottom: 40px;
}
.basic-page p.subtitle {
font-size: 16px;
line-height: 24px;
color: #9A9DAB;
}
.basic-page a.link {
color: #000;
font-weight: 600;
}
.basic-page a.link:hover {
color: #555;
}
.basic-page p:last-child {
margin-bottom: 0px;
}
.basic-page .copy-block {
float: left;
width: 100%;
margin-bottom: 30px;
}
.basic-page .copy-block h3 {
float: left;
width: 100%;
}
.basic-page ul {
float: left;
width: 100%;
margin-bottom: 40px;
}
.basic-page ul li {
float: left;
width: calc(100% - 20px);
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 34px;
color: #4B617A;
margin-top: 10px;
list-style-position: outside;
margin-left: 20px;
}
.basic-page .nice-select ul li {
width: calc(100% - 0px);
margin-top: 0px;
margin-left: 0px;
}
.basic-page .copy-block p:last-child {
margin-bottom: 0px;
}
.basic-page [data-custom-class='link'], .basic-page [data-custom-class='link'] * {
color: #000 !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
}
.img-block {
float: left;
width: 100%;
margin-bottom: 40px;
}
.img-block img {
background: #C4C4C4;
border-radius: 10px;
}
/* error page */
.error-page {
float: left;
width: 100%;
}
.error-page .inner-wrapper.xx-sml {
width: 400px;
}
.error-page-inner {
float: left;
width: 100%;
padding: 120px 0px;
}
.error-page-inner .icon {
float: left;
width: 34px;
}
.error-page-inner .copy {
float: left;
width: 100%;
margin: 15px 0px 0px 0px;
}
.error-page-inner .copy h3 {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 26px;
color: #1A1919;
margin-bottom: 5px;
}
.error-page-inner .copy p {
float: left;
width: 100%;
font-style: normal;
font-weight: 500;
font-size: 16.5px;
line-height: 18px;
color: #AFAFAF;
}
.error-page-inner .copy .button-pastel {
margin-top: 15px;
}
.dropdown-menu-links.mobile-only {
display: none;
}
.dropdown-menu-divide.mobile-only {
display: none;
}
.dropdown-menu-links a.submit-tool {
color: #8504fe;
}
.dropdown-menu-links a.submit-tool:hover {
color: #b36bf6;
}
.main-left-column.open {
left: 0px;
z-index: 50;
padding-top: 100px;
width: 100%;
border-right: none;
display: none;
}
@media screen and (max-width: 1500px) {
.inner-wrapper.col-3 {
width: 100%;
}
.card-grid .card {
width: 32%;
margin-right: 2%;
}
}
@media screen and (max-width: 1220px) {
.card-grid .card {
width: 49%;
margin-right: 2%;
}
.card-grid .card:nth-child(3n) {
margin-right: 2%;
}
.card-grid .card:nth-child(2n) {
margin-right: 0;
}
.inner-wrapper.md {
width: 94%;
}
}
@media screen and (max-width: 1100px) {
.post-body-display-images .images {
min-height: 300px;
}
.post-wrapper .post-header .left .copy p {
display: none;
}
.post-wrapper .post-header .left .copy h1 {
padding-top: 10px;
}
.post-wrapper .post-body .post-body-content .post-body-content-left-divide {
display: none;
}
.post-wrapper .post-body .post-body-content .post-body-content-left {
width: 100%;
padding: 30px;
}
.post-wrapper .post-body .post-body-content .post-body-content-right {
width: 100%;
border-top: solid 1px #ECECF4;
padding-bottom: 15px;
}
}
@media screen and (max-width: 940px) {
.main-left-column {
left: -280px;
}
.main-right-column {
width: calc(100% - 0px);
}
.main-right-column {
width: 100%;
}
.main-right-column .top-nav {
width: 100%;
padding: 14px 20px;
}
.main-right-column .right-column-body {
padding: 120px 30px 50px 30px;
}
.main-right-column .top-nav .mid a.mobile-icon {
float: left;
display: block;
width: 34px;
margin-top: 2px;
}
.main-right-column .top-nav .mid a.mobile-icon svg {
float: left;
width: 100%;
}
.main-right-column .top-nav .left a.hamburger {
display: block;
}
.main-right-column .top-nav .left {
float: left;
width: 26px;
}
.main-right-column .top-nav .mid {
width: 34px;
margin-left: auto;
margin-right: auto;
}
.main-right-column .top-nav .right .right-inner a.button-pastel.black {
margin-left: 14px;
display: none;
}
.card-grid .card .description h4 {
height: 45px;
-webkit-line-clamp: 2;
}
.dropdown-menu-links.mobile-only {
display: block;
}
.dropdown-menu-divide.mobile-only {
display: block;
}
.dropdown-menu a.login {
display: none;
}
.main-left-column .left-nav-top .left-nav-logo {
display: none;
}
.main-left-column .left-nav-bottom {
display: none;
}
.main-left-column .left-nav-categories-wrapper {
overflow: visible;
height: auto;
}
.main-left-column .left-nav-categories-wrapper .categories-show-more {
display: none;
}
.left-nav-categories-overflow {
height: auto;
overflow: hidden;
}
.main-left-column .left-nav-categories-wrapper {
padding: 35px 30px;
overflow: scroll;
height: calc(100vh - 148px);
}
.post-wrapper .post-header .right {
float: left;
width: 300px;
padding-top: 8px;
}
.post-wrapper .post-header .left {
float: left;
width: calc(100% - 300px);
}
}
@media screen and (max-width: 800px) {
.main-right-column .right-column-body .default-grid-body-wrapper .default-title h1 {
font-size: 34px;
line-height: 38px;
}
.basic-page h1 {
margin-bottom: 10px;
font-size: 34px;
line-height: 38px;
}
.basic-page p {
font-size: 18px;
line-height: 23px;
margin-bottom: 20px;
}
}
@media screen and (max-width: 640px) {
.card-grid a.card-inner {
padding: 25px 25px 125px 25px;
}
.card-grid a.card-inner {
float: left;
padding: 25px 25px 135px 25px;
}
.card-grid .card .buttons a.button-pastel.white {
width: calc(100% - 60px);
padding-right: 0px;
padding-left: 0px;
}
.card-grid .card .buttons a.button-pastel.pink.card-like-button {
width: 50px;
}
.card-grid .card .buttons a.button-pastel.pink.card-like-button {
width: 50px;
padding: 11px 0px;
}
.card-grid a.card-inner {
float: left;
padding: 25px 25px 78px 25px;
}
.post-wrapper .post-header .left {
width: 100%;
}
.post-wrapper .post-header .left .icon {
margin-bottom: 15px;
}
.post-wrapper .post-header .left .copy {
float: left;
width: 100%;
padding-left: 0px;
}
.post-wrapper .post-header .right {
width: 100%;
padding-top: 12px;
}
.post-wrapper .post-body .post-body-display {
padding: 20px;
}
.post-wrapper .post-body .post-body-content .post-body-content-right {
width: 100%;
padding: 30px;
}
.post-wrapper .post-body .post-body-content .post-body-content-left {
width: 100%;
padding: 30px;
}
.post-wrapper .post-header .left .copy h1 {
font-size: 24px;
line-height: 28px;
}
.post-wrapper .post-header .left .icon img {
width: 40px;
border-radius: 12px;
}
.post-body-display-images .images {
float: left;
width: 100%;
min-height: 200px;
}
.post-wrapper .post-header .right .right-inner {
float: right;
display: flex;
width: 100%;
}
.post-wrapper .post-header .right .right-inner a.button-pastel.black.md {
flex-grow: 1;
}
.post-wrapper .post-header .right .right-inner a.button-pastel.black.md p.text {
float: none;
font-size: 15px;
display: inline-block;
max-width: calc(100% - 28px);
}
.post-wrapper .post-header .right .right-inner a.button-pastel.black.md p.icon {
float: none;
height: 16px;
margin-top: -8px;
margin-bottom: -1px;
overflow: hidden;
display: inline-block;
}
.post-body-display-images .slider-dots ul.slick-dots {
padding: 5px 8px;
}
.post-wrapper .post-body .post-body-content .post-body-content-left {
padding: 25px;
font-weight: 500;
font-size: 14px;
line-height: 20px;
}
.post-wrapper .post-header .left .copy p {
display: block;
}
.post-wrapper .post-header .left .copy h1 {
padding-top: 0px;
}
.card-grid .card p.badge {
opacity: 1;
}
}
@media screen and (max-width: 580px) {
.inner-wrapper.x-sml {
width: 92%;
}
.onboarding-page-outer .onboarding-top-nav {
padding: 12px;
}
}
@media screen and (max-width: 540px) {
.card-grid .card {
width: 100%;
margin-right: 0%;
}
.card-grid .card .buttons a.button-pastel.white {
width: calc(100% - 80px);
}
.card-grid .card .buttons a.button-pastel.pink.card-like-button {
margin-left: 10px;
width: 70px;
margin-top: 0px;
}
.card-grid a.card-inner {
float: left;
padding: 25px 25px 80px 25px;
}
.card-grid .card .description h4 {
height: 46px;
-webkit-line-clamp: 2;
}
.main-right-column .right-column-body .default-grid-body-wrapper .default-title h1 {
font-size: 26px;
line-height: 32px;
}
.main-right-column .right-column-body .default-grid-body-wrapper .default-title h2 {
font-size: 15px;
line-height: 17px;
margin-top: 4px;
}
.basic-page h1 {
margin-bottom: 10px;
font-size: 26px;
line-height: 32px;
}
.basic-page p {
font-size: 15px;
line-height: 20px;
margin-bottom: 15px;
}
.reveal-modal {
width: 90%;
margin-left: 0;
left: 5%;
padding: 35px 30px 40px 30px;
}
.main-right-column .right-column-body {
padding: 120px 20px 50px 20px;
}
.onboarding-page-outer .onboarding-page .copy h1 {
font-size: 22px;
line-height: 22px;
}
.onboarding-page-outer .onboarding-page .copy p {
padding: 5px 0px 35px 0px;
}
}
@media screen and (max-width: 425px) {
.main-right-column .top-nav .right .right-inner a.button-pastel.white {
display: none;
}
.main-right-column .top-nav .right .right-inner a.more-menu-link {
float: left;
margin-right: -12px;
}
.dropdown-menu a.login {
display: block;
}
.session-page-wrapper .session-page-inner .session-page-form {
width: 90%;
}
}
/* */