@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;900&display=swap');
*,:after,:before {
    box-sizing: border-box
}
a {
    text-decoration: none;
}
html {
    background: #222527;
    overflow-x: hidden;
}
form {
    margin: 0;
}
.sumo-page p {
    font-size: 20px;
    padding: 10px;
    max-width: 800px;
    margin: auto;
}
.logo-small {
    font-size: 30px;
}
.logo-medium {
    font-size: 50px;
}
strong {
    font-weight: 700;
}
.f200 {
    font-weight: 200;
    line-height: 1.4;
}
.font-w200 {
    font-weight: 200 !important;
}
.f300 {
    font-weight: 300;
}
.f400 {
    font-weight: 400;
}
.max-600 {
    max-width: 600px;
}
.shad {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
}
.text-sumo {
    color: #3f9ce8 !important;
}
.fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
a.btn-google {
    background-color: #efefef;
}
a.btn-google:hover {
    background-color: #e0e0e0;
}
.text-paint {
    color: #2daace !important;
}
.text-photo {
    color: #30baaa !important;
}
.text-tunes {
    color: #e5ab42 !important;
}
.text-audio {
    color: #673ab7 !important;
}
.text-video {
    color: #c82f2e !important;
}
.text-code {
    color: #20cc71 !important;
}
.text-3d {
    color: #3389c9 !important;
}
.text-pixel {
    color: #d960cf !important;
}
.invert {
    filter: invert(100%);
}
.mt-40 {
    margin-top: 40px;
}
.mb-40 {
    margin-bottom: 40px;
}
.my-40 {
    margin-top: 40px;
    margin-bottom: 40px;
}
.mt-60 {
    margin-top: 60px;
}
.mb-60 {
    margin-bottom: 60px;
}
.my-60 {
    margin-top: 60px;
    margin-bottom: 60px;
}
.mt-70 {
    margin-top: 70px;
}
.mb-70 {
    margin-bottom: 70px;
}
.my-70 {
    margin-top: 70px;
    margin-bottom: 70px;
}
.mt-80 {
    margin-top: 80px;
}
.mb-80 {
    margin-bottom: 80px;
}
.my-80 {
    margin-top: 80px;
    margin-bottom: 80px;
}
.pt-40 {
    padding-top: 40px;
}
.pb-40 {
    padding-bottom: 40px;
}
.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}
.pt-60 {
    padding-top: 60px;
}
.pb-60 {
    padding-bottom: 60px;
}
.py-60 {
    padding-top: 60px;
    padding-bottom: 60px;
}
.pt-70 {
    padding-top: 70px;
}
.pb-70 {
    padding-bottom: 70px;
}
.py-70 {
    padding-top: 70px;
    padding-bottom: 70px;
}
.pt-80 {
    padding-top: 80px;
}
.pb-80 {
    padding-bottom: 80px;
}
.py-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.bg-dark {
    background: linear-gradient(
        0deg,
        rgba(0, 20, 40, 1) 0%,
        rgba(0, 20, 40, 0.8) 100%
    ) !important;
}
.bg-dark h2 {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
}
.bg-dark p {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
}
.bg-sumo {
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(0, 0, 0, 0.2) 100%
    ) !important;
}
.bg-sumo h2 {
    color: rgba(0, 0, 0, 0.8);
}
.bg-sumo p {
    color: rgba(0, 0, 0, 0.8);
}
.app-page-container #main-container {
    padding: 0;
}
/* .sumo-app {
    position: absolute;
    left: 0px;
    top: 50px;
    right: 0px;
    bottom: 0px;
    height: auto !important;
} */
.sumo-icon {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

.btn-sumo {
    color: #fff;
    background-color: #3e96df;
    border-color: #3e96df;
}
.btn-sumo:not(label):hover {
    color: #fff;
    background-color: #4fa6ed;
    border-color: #4fa6ed;
}
.out-sumo {
    color: #26c6da;
    background-color: transparent;
    border-color: #26c6da;
}
.out-sumo:not(label):hover {
    color: white;
    background-color: #06a6ba;
}
.sumo-btn-sumo {
    background-color: #549ce2;
    border-color: #549ce2;
  }

.btn-paint {
    color: #fff;
    background-color: #2daace;
    border-color: #1d9abe;
}
.btn-paint:not(label):hover {
    color: #fff;
    background-color: #1d9abe;
    border-color: #0d8aae;
}
.out-paint {
    color: #2daace;
    background-color: transparent;
    border-color: #2daace;
}
.out-paint:not(label):hover {
    color: white;
    background-color: #0d8aae;
}

.btn-photo {
    color: #fff;
    background-color: #30baaa;
    border-color: #20aa9a;
}
.btn-photo:not(label):hover {
    color: #fff;
    background-color: #20aa9a;
    border-color: #109a8a;
}
.out-photo {
    color: #30baaa;
    background-color: transparent;
    border-color: #30baaa;
}
.out-photo:not(label):hover {
    color: white;
    background-color: #109a8a;
}

.btn-tunes {
    color: #fff;
    background-color: #e5ab42;
    border-color: #d59b32;
}
.btn-tunes:not(label):hover {
    color: #fff;
    background-color: #d59b32;
    border-color: #c58b22;
}
.out-tunes {
    color: #e5ab42;
    background-color: transparent;
    border-color: #e5ab42;
}
.out-tunes:not(label):hover {
    color: white;
    background-color: #c58b22;
}
.btn-audio {
    color: #fff;
    background-color: #673ab7;
    border-color: #7240c7;
}
.btn-audio:not(label):hover {
    color: #fff;
    background-color: #7240c7;
    border-color: #c58b22;
}
.out-audio {
    color: #673ab7;
    background-color: transparent;
    border-color: #673ab7;
}
.out-audio:not(label):hover {
    color: white;
    background-color: #7240c7;
}

.btn-video {
    color: #fff;
    background-color: #c82f2e;
    border-color: #b81f1e;
}
.btn-video:not(label):hover {
    color: #fff;
    background-color: #b81f1e;
    border-color: #a80f0e;
}
.out-video {
    color: #c82f2e;
    background-color: transparent;
    border-color: #c82f2e;
}
.out-video:not(label):hover {
    color: white;
    background-color: #a80f0e;
}

.btn-code {
    color: #fff;
    background-color: #20cc71;
    border-color: #10bc61;
}
.btn-code:not(label):hover {
    color: #fff;
    background-color: #10bc61;
    border-color: #00ac51;
}
.out-code {
    color: #20cc71;
    background-color: transparent;
    border-color: #20cc71;
}
.out-code:not(label):hover {
    color: white;
    background-color: #00ac51;
}

.btn-3d {
    color: #fff;
    background-color: #3389c9;
    border-color: #2379b9;
}
.btn-3d:not(label):hover {
    color: #fff;
    background-color: #2379b9;
    border-color: #1369a9;
}
.out-3d {
    color: #3389c9;
    background-color: transparent;
    border-color: #3389c9;
}
.out-3d:not(label):hover {
    color: white;
    background-color: #1369a9;
}

.btn-pixel {
    color: #fff;
    background-color: #d960cf;
    border-color: #c255b9;
}
.btn-pixel:not(label):hover {
    color: #fff;
    background-color: #c255b9;
    border-color: #c754bd;
}
.out-pixel {
    color: #d960cf;
    background-color: transparent;
    border-color: #d960cf;
}
.out-pixel:not(label):hover {
    color: white;
    background-color: #1369a9;
}

/* ANDREA CHANGES */

* {
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
input,
button,
select,
textarea,
label,
.sumo-btn,
pre,
a {
    font-family: "Quicksand", sans-serif;
    font-display: swap;
}
button {
    cursor: pointer;
    border-style: solid;
}
body {
    margin: 0;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    color: #2F3336
}
.sumo-btn {
    padding: 10px 40px;
    border-radius: 100px;
    margin: 0 15px;
    font-size: 16px;
    /* line-height: 25px; */
    color: white;
    text-transform: uppercase;
    transition: all ease-in-out 0.2s;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    border-color: transparent;
}
.transparent-btn {
    background: none;
    color: white;
    border: 2px solid white;
}
.transparent-btn:hover {
    background: white;
    color: #2F3336;
    border: 2px solid white;
}
.buttons-wrapper .sumo-btn,
.login-btn {
    border: 2px solid #3e96df;
    background: #3e96df;
}
.buttons-wrapper .sumo-btn:hover,
.login-btn:hover {
    filter:brightness(1.1)
}
.buttons-wrapper .sumo-btn:last-child {
    border-color: #ffffff;
    background: none;
}
.buttons-wrapper .sumo-btn:hover {
    color: white;
}
.buttons-wrapper .sumo-btn:last-child:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #2F3336;
}
.buttons-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}
.inner-container {
    max-width: 1280px;
    margin: 0 auto;
}
/* .sumo-bg {
    background-image: url(/images/site/sumo-bg.jpg);
    background-position: center;
    background-size: cover;
} */
h1.hero-title,
p.hero-subtitle {
    color: white;
}
.single-page-hero h1 {
    margin-bottom: 0;
    position: absolute;
    position: absolute;
    top: 0;
    margin: 0;
}

h1.hero-title,
h2.hero-title {
    margin-bottom: 15px;
    margin-top: 0;
    font-size: 48px;
    text-align: left;
    color: white;
}
.hero-home h1.hero-title {
    max-width: 480px;
}
h1.hero-title sup, h2.hero-title sup{
    font-size: 20px;
    font-weight: normal;
}

.inner-wrapper {
    width: 100%;
    /* max-width: 1220px; */
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
    padding: 100px 0;
}
.hero-home .inner-wrapper {
    display: grid;
    grid-template-columns:1fr 1fr;
    padding: 0;
    grid-gap: 50px;
    position: relative;
    align-items: center;
    height: 100%;
}
.hero-home .inner-wrapper .hero-artwork {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
}
.hero-artwork svg {
    width: 100%;
}
.hero-home .inner-wrapper {
    padding: 50px 0 0 0;
}
.hero-bottom {
    position: absolute;
    top: 180px;
}
.sumopaint-flash {
    color: #C3CED7;
    font-size: 14px;
    font-weight: 400;
}

.sumopaint-flash a {
    color: #3f9ce8;
}
.sumopaint-flash a:hover {
    text-decoration: underline;
}
.carousel-single-inner-container .flashback {
    color: white;
    text-align: center;
    padding-bottom: 40px;
}

.carousel-single-inner-container .flashback a {
    text-decoration: underline;
    min-width: 0;
    display: inline;
    border-radius: 0;
    margin: 0;
    color: white;
    border: 0;
    text-align: center;
}

.carousel-single-inner-container .flashback a:hover {
    text-decoration: none;
    background: none;
    color: white;
    border-color: transparent;
}

.carousel-single-inner-container .carousel-paint {
    margin: 30px auto;
}


/* Pricing */

.single-plan {
    border-radius: 10px;
}
.plan-header {
    padding: 20px;
}

.plan-name {
    font-size: 22px;
    position: relative;
    margin: 0;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.basic .plan-name {
    color: #c3ced7;
}
.pro .plan-name {
    color: #559ce1;
}
.edu .plan-name {
    color: #2e7f8d;
}
p.plan-period {
    font-weight: bold;
    font-size: 14px;
    color: #888;
}

p.plan-price {
    color: #2F3336;
    font-size: 48px;
    margin: 0;
    font-weight: 500;
}
.period {
    font-size: 14px;
    color: #888;
    font-weight: 500;
}
.plan-details p {
    margin-bottom: 15px;
    text-align: left;
    padding-left: 100px;
    color: #888;
    font-size: 14px;
    font-weight: 700;
    position: relative;
}
.plan-details p:before {
    content: "";
    background: url(../images/site/check.svg);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    width: 15px;
    height: 15px;
    position: absolute;
    margin-left: -30px;
    top: 0;
}
.plan-signup {
    padding: 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-position: bottom;
    height: 125px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-repeat: no-repeat;
    filter: saturate(1.5);
}
.single-plan .sumo-btn {
    background: white;
    text-transform: capitalize;
    color: #666;
    margin-bottom: 0;
}
.single-plan .sumo-btn:hover {
    background: #f8f8f8;
    transform: translateY(-5px);
}


.single-plan {
    background: white;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    background-size: cover;
    border: 1px solid #ddd;
}
.basic .plan-price {
    font-size: 40px;
}
.single-plan.basic {
    background-image: url(/images/site/pricing-basic.svg);
}
.single-plan.pro {
    background-image: url(/images/site/pricing-pro.svg);
}
.single-plan.edu {
    background-image: url(/images/site/pricing-edu.svg);
}
.single-plan.basic .btn-pricing {
    background: #49cf66 !important;
    color: white;
}
.single-plan.pro .btn-pricing {
    background: #373574 !important;
    color: white;
}
.single-plan.edu .btn-pricing {
    background: #32c8d7 !important;
    color: white;
}
.block-title {
    font-size: 18px !important;
    font-weight: bold !important;
}
a.block.block-link-pop.block-rounded.block-bordered.text-center.single-pricing {
    border: none;
    border-radius: 0;
}
/* .most-popular {
    position: relative;
    z-index: 100;
    transform: scale(1.05);
} */
/* .most-popular:before {
    content: "Most Popular !";
    position: absolute;
    background: #800080;
    color: white;
    right: -10px;
    top: -10px;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 100px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    transform: rotate(19deg);
} */
.img-mobile {
    display: none;
}
.hero-test,
.hero-pro-ad {
    margin: 0 auto;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 50px 0;
    justify-content: space-between;
    align-items: center;
}
.hero-pro-ad {
    background-color: #fff;
    background-image: url(/images/site/home-unleash-bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
}
.home-features,
.hero-page {
    background: #232527;
}
.home-features {
    background-image: url(/images/site/home-section-1.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}
.home-features .hero-test {
    display: grid;
    grid-template-columns: 40% 60%;
    max-width: 1280px;
}
.hero-pro-ad {
    text-align: center;
    /* background-image: url(/images/site/21.jpg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px;
    display: flex;
    justify-content: center;
}

.hero-test h2,
.hero-pro-ad h2,
#main-container .hero-pro-ad h2 {
    font-size: 48px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    margin: 0;
    color: white;
}
.hero-test p {
    font-size: 20px;
    margin: 20px 0;
    width: 640px;
    text-align: justify;
    color: white;
}
.hero-test .subtitle {
    font-size: 24px;
    margin-top: 0;
    font-weight: bold;
    color: white;
}
p.description {
    font-size: 16px;
    font-weight: 100;
    max-width: 450px;
    color: white;
}
.hero-test a {
    width: 230px;
    border-radius: 0 !important;
    font-weight: bold;
    display: block;
    border-radius: 100px !important;
    background: #3e96df;
    margin: 0 !important;
    color: white;
}
.hero-pro-ad.colored-icons, .pricing-bg {
    image-rendering: -webkit-optimize-contrast;
}
.hero-pro-ad.colored-icons h2,
.hero-pro-ad.colored-icons p {
    color: #fff;
}

.m-auto {
    margin: 0 auto;
}
.hero-test a:hover {
    filter: brightness(125%);
}
.hero-test.sumovideo a {
    background: #9a2e2f;
}
.hero-pro-ad a {
    background: none;
    border: 2px solid white;
    display: inline-block;
}
.hero-pro-ad a:hover {
    background: white;
    color: #2F3336;
    text-shadow: none;
}
#main-container .hero-pro-ad p,
.hero-pro-ad p {
    font-size: 20px;
    font-weight: 100;
    text-align: center;
    margin: 10px auto;
    max-width: 720px;
    color: #fff;
}

.hero-pro-ad .icons img {
    width: 40px;
}
.hero-pro-ad .icons {
    max-width: 460px;
    width: 100%;
    display: flex;
    margin: 30px auto 50px;
    align-items: center;
    justify-content: space-between;
}

.home-single-app {
    width: 100%;
    height: 100%;
    background: white;
}

.home-single-app img {
    width: 100%;
    background: #131224;
    height: 200px;
    object-fit: cover;
}

.home-single-app div {
    text-align: center;
    padding: 20px;
}

.home-single-app h2 {
    font-size: 18px;
    text-align: left;
    margin: 0;
    color: #28295a;
}

.home-single-app p {
    font-size: 15px;
    text-align: left;
    margin: 10px 0 20px 0;
    line-height: 18px;
}

.hero-apps {
    width: 100%;
    padding: 100px;
    background: url(/images/site/blackbg.svg);
    background-position: center center;
}
.hero-apps-grid {
    width: 1280px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
    margin: 0 auto;
}

.btn.try-app {
    width: 80px;
    display: block;
    border-radius: 100px !important;
    border: 2px solid #28295a;
    color: #28295a;
    cursor: pointer;
}
.home-single-app .home-single-app-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.btn.try-app:hover {
    background: #28295a;
    color: white;
}

.carousel-single-inner-container {
    padding: 100px;
    grid-gap: 50px;
    min-height: 1050px;
}
.carousel-single-inner-container video {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    max-width: 960px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

.carousel-single-inner-container h2 {
    font-size: 60px;
    text-transform: uppercase;
    text-align: left;
    font-weight: bold;
    margin: 0;
    color: white;
}
.carousel-single-inner-container .description {
    font-size: 20px;
    margin: 20px 0;
    width: 100%;
    max-width: 640px;
    text-align: justify;
    color: #fff;
}
.carousel-single-inner-container .subtitle {
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    width: 100%;
    text-align: center;
    text-transform: capitalize;
    margin: 10px 0;
}
.carousel-single-inner-container .description {
    font-size: 20px;
    font-weight: 100;
    /* max-width: 450px; */
    color: #ffffff;
    text-align: center;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    font-weight: 500;
}
.carousel-single-inner-container a {
    min-width: 230px;
    font-weight: bold;
    display: block;
    background: none;
    color: white;
    border: 2px solid;
    text-align: center;
    margin: 0;
}
.carousel-single-inner-container a:hover {
    background: white;
    color: #2F3336;
    border-color: white;
}

.carousel-single-inner-container .title {
    font-size: 20px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto;
}

#carousel-container {
    position: relative;
    height: 1050px;
}

@media (max-width: 992px) {
    #carousel-container {
        height: 740px;
    }
    span.nav-submenu{
        position: relative;
        display: block;
        padding: 9px 18px 9px 40px;
        font-size: 14px;
    }
}

.carousel-bg {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: opacity 1.3s ease-out;
}

.single-app-hero {
    /* background: radial-gradient(#fff, #bbb); */
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition: visibility 1.3s linear;
}

.single-app-hero .carousel-single-inner-container {
    opacity: 0;
}

.single-app-hero.show .carousel-single-inner-container {
    opacity: 1;
}

.single-app-hero.show {
    visibility: visible;
}

.single-app-hero.show .carousel-bg {
    opacity: 1;
}

.sumo-bg {
    /* background-image: url(/images/site/11.svg); */
    background-color: #111;
    /* background-image: radial-gradient(#071e30, black); */
    /* background-image: radial-gradient(#333, black); */
    /* background-image: linear-gradient(-153deg, #222,#000); */
    background-position: center;
    background-size: cover;
    display: table;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.pricing-bg {
    background-color: #fff;
    background-image: url(/images/site/pricing-bg.svg);
    display: table;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.single-app-page {
    background-position: center;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 625px;
    background-repeat: no-repeat;
    display: flex;
    background-size: 1440px auto;
    background-position: -90px 0px;
}
.hero-texts {
        flex-direction: column;
        align-self: flex-start;
        justify-self: flex-start;
        display: flex;
        width: 100%;
}

.hero-texts img {
    width: 200px;
}
.home-single-feature h3 {
    color: white;
    font-size: 28px;
    text-align: left;
    margin: 0;
}

p.home-feature-description {
    color: #C3CED7;
    margin: 10px 0;
    width: 100%;
    font-size: 20px;
    text-align: left;
    font-weight: 500;
}
.home-single-feature img {
    width: 40px;
    height: 40px;
    margin: 10px 0px;
}
.home-single-feature {
    margin: 30px 0;
    text-align: left;
    max-width: 400px;
    width: 100%;
}
#div-paint {
    background: radial-gradient(#2daace, hsl(193, 65%, 29%));
}
#div-photo {
    background: radial-gradient(#30baaa, hsl(173, 59%, 26%));
}
#div-tunes {
    background: radial-gradient(#e5ab42, hsl(39, 76%, 38%));
}
#div-audio {
    background: radial-gradient(#673ab7, hsl(262, 52%, 27%));
}
#div-video {
    background: radial-gradient(#c82f2e, hsl(0, 63%, 28%));
}
#div-code {
    background: radial-gradient(#20cc71, hsl(148, 73%, 26%));
}
#div-3d {
    background: radial-gradient(#3389c9, hsl(206, 60%, 29%));
}
#div-pixel {
    background: radial-gradient(#c255b9, hsl(305, 47%, 35%));
}

/* #div-paint .carousel-btn a:first-child {
    background: hsl(193, 65%, 29%);
    border-color: hsl(193, 65%, 29%);
}
#div-photo .carousel-btn a:first-child {
    background: hsl(173, 59%, 26%);
    border-color: hsl(173, 59%, 26%);
}
#div-tunes .carousel-btn a:first-child {
    background: hsl(39, 76%, 38%);
    border-color: hsl(39, 76%, 38%);
}
#div-paint .carousel-btn a:first-child {
    background: hsl(0, 63%, 28%);
    border-color: hsl(0, 63%, 28%);
}
#div-code .carousel-btn a:first-child {
    background: hsl(148, 73%, 26%);
    border-color: hsl(148, 73%, 26%);
}
#div-3d .carousel-btn a:first-child {
    background: hsl(206, 60%, 29%);
    border-color: hsl(206, 60%, 29%);
} */
#arrow-paint {
    border-bottom: 20px solid hsl(193, 65%, 32%);
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    margin: 0 auto;
    position: relative;
    top: 1px;
}

#arrow-container {
    position: absolute;
    height: 20px;
    width: 100%;
    margin-top: 0;
    overflow: hidden;
    float:left;
    white-space: nowrap;
    z-index: 1;
}

.arrow-mask {
    display: inline-block;
    background-color: #111;
    height: 20px;
    margin-left: -20px;
}

#arrow-mask-left {
    width: 50%;
    transition: width 0.7s;
}

#arrow-mask-right {
    width: 100%;
    overflow: hidden;
}

#arrow-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-right: 20px solid #111;
    border-left: 30px solid transparent;
    border-top: 20px solid #111;
    overflow: hidden;
}

#arrow-left {
    display: inline-block;
    margin-left: -20px;
    width: 0;
    height: 0;
    border-right: 30px solid transparent;
    border-left: 20px solid #111;
    border-top: 20px solid #111;
}

.hero-subtitle {
    color: #fff;
    background: #2F3336;
    color: white;
    border-radius: 100px;
    transform: translateX(-50px);
    padding: 10px 30px 10px 50px;
    width: max-content;
    text-transform: uppercase;
    position: relative;
    left: 0;
    transform: translateX(-150px);
    padding-left: 150px;
    font-size: 20px;
}
.single-page-hero .hero-subtitle {
    position: absolute;
    top: 100px;
}
.sumopaint-bg .buttons-wrapper .sumo-btn:first-child,
#div-paint .carousel-btn .sumo-btn:last-child {
    background-color: #32b8df;
    border-color: #32b8df;
}
.sumopaint-bg .buttons-wrapper .sumo-btn:hover:first-child,
#div-paint .carousel-btn .sumo-btn:hover:last-child {
    background-color: #37b9dd;
    border-color: #37b9dd;
    color: white;
}
.sumophoto-bg .buttons-wrapper .sumo-btn:first-child,
#div-photo .carousel-btn .sumo-btn:last-child {
    background-color: #30baaa;
    border-color: #30baaa;
}
.sumophoto-bg .buttons-wrapper .sumo-btn:hover:first-child,
#div-photo .carousel-btn .sumo-btn:hover:last-child {
    background-color: #38c7b6;
    border-color: #38c7b6;
    color: white;
}
.sumotunes-bg .buttons-wrapper .sumo-btn:first-child,
#div-tunes .carousel-btn .sumo-btn:last-child {
    background-color: #e5ab42;
    border-color: #e5ab42;
}
.sumotunes-bg .buttons-wrapper .sumo-btn:hover:first-child,
#div-tunes .carousel-btn .sumo-btn:hover:last-child {
    background-color: #f0b954;
    border-color: #f0b954;
    color: white;
}
.sumoaudio-bg .buttons-wrapper .sumo-btn:first-child,
#div-audio .carousel-btn .sumo-btn:last-child {
    background-color: #673ab7;
    border-color: #673ab7;
}
.sumoaudio-bg .buttons-wrapper .sumo-btn:hover:first-child,
#div-audio .carousel-btn .sumo-btn:hover:last-child {
    background-color: #7240c7;
    border-color: #7240c7;
    color: white;
}
.sumovideo-bg .buttons-wrapper .sumo-btn:first-child,
#div-video .carousel-btn .sumo-btn:last-child {
    background-color: #c82f2e;
    border-color: #c82f2e;
}
.sumovideo-bg .buttons-wrapper .sumo-btn:hover:first-child,
#div-video .carousel-btn .sumo-btn:hover:last-child {
    background-color: #df3c3b;
    border-color: #df3c3b;
    color: white;
}
.sumocode-bg .buttons-wrapper .sumo-btn:first-child,
#div-code .carousel-btn .sumo-btn:last-child {
    background-color: #20cc71;
    border-color: #20cc71;
}
.sumocode-bg .buttons-wrapper .sumo-btn:hover:first-child,
#div-code .carousel-btn .sumo-btn:hover:last-child {
    background-color: #30dc80;
    border-color: #30dc80;
    color: white;
}
.sumo3d-bg .buttons-wrapper .sumo-btn:first-child,
#div-3d .carousel-btn .sumo-btn:last-child {
    background-color: #3389c9;
    border-color: #3389c9;
}
.sumo3d-bg .buttons-wrapper .sumo-btn:hover:first-child,
#div-3d .carousel-btn .sumo-btn:hover:last-child {
    background-color: #4297d8;
    border-color: #4297d8;
    color: white;
}
.sumopixel-bg .buttons-wrapper .sumo-btn:first-child,
#div-pixel .carousel-btn .sumo-btn:last-child {
    background-color: #d960cf;
    border-color: #d960cf;
}
.sumopixel-bg .buttons-wrapper .sumo-btn:hover:first-child,
#div-pixel .carousel-btn .sumo-btn:hover:last-child {
    background-color: #d960cf;
    border-color: #d960cf;
    color: white;
}
.single-page-hero-inner-wrapper .chromebook-background {
    position: relative;
}

.single-page-hero-inner-wrapper .chromebook-background .chromebook-app-ui {
    width: 100%;
    z-index: 9;
    position: relative;
    padding: 45px;
    top: -24px;
    left: -7px;
}
.optimized-for-chromebook {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: flex-end;
}

.optimized-for-chromebook p {
    font-size: 16px;
    font-weight: bold;
    color: #2F3336;
    margin: 0;
}

.optimized-for-chromebook img {
    width: 150px;
    margin-left: 10px;
}
.home-features-texts {
    max-width: 1280px;
    text-align: left;
    margin: 0 auto;
    padding-top: 100px;
}

.home-features-texts p:first-child {
    text-transform: uppercase;
    color: #fff;
    font-size: 24px;
    text-align: left;
    margin: 0;
}
.home-features-texts h2 {
    color: white;
    font-size: 48px;
    text-transform: uppercase;
    text-align: left;
    margin: 0;
}
.home-features-texts p:last-child {
    text-align: center;
    max-width: 920px;
    color: white;
    font-size: 20px;
    line-height: 30px;
    max-width: 720px;
    font-weight: 500;
    text-align: left;
}

.pricing-header h1 {
    color: #2F3336;
    font-size: 48px;
    margin: 0;
}

.pricing-header h2 {
    font-size: 20px;
    font-weight: 100;
    color: #2F3336;
}

.pricing-header {
    margin-bottom: 70px;
}

.nav-main-header li.open:hover .nav-submenu,
header .nav-main-header ul {
    background: #222527 !important;
}

p.hero-description {
    max-width: 480px;
    font-weight: 100;
    color: white;
    font-size: 20px;
    text-align: left;
    margin: 0;
    line-height: 30px;
}
.hero-test.second-section {
    grid-template-columns: 60% 40%;
    margin-top: 100px;
    padding-bottom: 150px;
}
.hero-test.second-section > img {
    max-width: 720px;
    position: relative;
    left: -100px;
}
/* SINGLE APP PAGE */

.single-page-hero-inner-wrapper {
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.hero-artwork {
    position: relative;
    height: auto;
    display: block;
}

.hero-artwork img {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.hero-home .hero-artwork img {
    top: initial;
    height: 100%;
    width: auto;
}
#inner {
    position: relative;
}

.single-page-hero .hero-artwork img {
    width: 100%;
}
.hero-home .hero-texts {
    margin-bottom: 60px;
}
.hero-texts {
    z-index: 1;
    position: relative;
}
.single-app-page .hero-texts {
    text-align: left;
}
.single-app-page .hero-texts .hero-description {
    text-align: left;
    max-width: 450px;
    margin: 0;
    color: #2F3336;
    font-size: 18px;
    margin-top: 40px;
}
.single-app-page .hero-texts .buttons-wrapper {
    justify-content: flex-start;
}

.single-app-page .hero-texts .buttons-wrapper .sumo-btn:first-child {
    margin-left: 0;
}
.single-page-hero svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

/* FAQ */
.faq-page h2 {
    font-size: 36px;
    margin: 50px 0 20px 0;
}
.faq-page .questions p {
    font-size: 20px;
}
.faq-page .questions a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.faq-page .questions > p {
    font-weight: bold;
}
.faq-page .questions:before {
    content:"";
    background-image: url(../images/site/arrow.svg);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    position: absolute;
    top: 25px;
    left: 0px;
    width: 15px;
    height: 15px;
    opacity: 0.7;
    transition: all ease-in-out .2s;
}
.faq-page .questions {
    margin: 0;
    max-height: 65px;
    overflow-y: hidden;
    transition: all ease-in-out .2s;
    position: relative;
    cursor: pointer;
    padding-left: 50px;
}
.faq-page .questions.faq-open {
    max-height: 1000px;
}
.faq-page .questions.faq-open:before {
    transform: rotate(90deg);
    opacity: 1;
}
.faq-page .answer p {
    /* color: #ccc; */
    font-size: 18px;
    margin: 40px 0;
}
.faq-page .answer a:hover {
    text-decoration: underline;
}
.faq-page .answer {
    margin-left: 50px;
}
.faq-page hr  {
    border: none;
    border-top: 1px solid #c3ced7;
}
.hidden-faq {
    height: 0;
    overflow: hidden;
}

.hidden-faq + hr {
    opacity: 0;
    height: 0;
    margin: 0;
}
.clear-search {
    position: absolute;
    right: 15px;
    top: 16px;
    cursor: pointer;
    width: 12px;
}
.svg-container {
    pointer-events: none;
    position: absolute;
    width: 100%;
    /* height: 100%; */
    height: calc(100% + 2px);
    overflow: hidden;
    top: 0;
    left: 0;
    margin: -1px 0;
}

.shape .gradient-bg {
    fill: url(#header-shape-gradient) #fff;
}

.sumopaint-bg #main-gradient {
    --stop-1: hsl(193, 65%, 29%);
    --stop-2: #2daace;
}
.sumophoto-bg #main-gradient {
    --stop-1: hsl(173, 59%, 26%);
    --stop-2: #30baaa;
}
.sumotunes-bg #main-gradient {
    --stop-1: #ab7717;
    --stop-2: #e5ac43;
}
.sumoaudio-bg #main-gradient {
    --stop-1: #512d8f;
    --stop-2: #673ab7;
}
.sumovideo-bg #main-gradient {
    --stop-1: hsl(0, 63%, 28%);
    --stop-2: #c82f2e;
}
.sumocode-bg #main-gradient {
    --stop-1: hsl(148, 73%, 26%);
    --stop-2: #20cc71;
}
.sumo3d-bg #main-gradient {
    --stop-1: hsl(206, 60%, 29%);
    --stop-2: #3389c9;
}
.sumopixel-bg #main-gradient {
    --stop-1: hsl(305, 61%, 41%);
    --stop-2: #d960cf;
}

.single-page-hero {
    padding: 0;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/*
.single-page-hero .buttons-wrapper .sumo-btn:last-child {
    border-color: white;
}
.single-page-hero .buttons-wrapper .sumo-btn:last-child:hover {
    background: white;
    border-color: white;
    color: #111;
} */
#main-container {
    width: 100%;
    /* height: 100%; */
    overflow: hidden;
    padding-top: 50px;
    background: linear-gradient(302.22deg, rgba(195, 206, 215, 0.85) 15.93%,white 62.93%);
    background: white;
    background-size: cover;
}
.enable-page-overlay #main-container {
    padding: 0;
}


.nav-main-header li:hover > #main-navigation {
    display: block;
}
header #main-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 15px 0;
    display: none;
    z-index: 1032;
    width: max-content;
    min-width: 150px;
    border-radius: 5px;
}
header #main-navigation li {
    margin: 0;
    position: relative;
    list-style: none;
}
header #main-navigation li a {
    color: white;
    font-weight: 400;
}
header #main-navigation a.nav-submenu:before
header li.open {
    position: relative;
}
header #main-navigation a {
    display: block;
    font-weight: 300;
    color: #cccccc;
    position: relative;
    padding: 9px 14px;
    line-height: 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
header #main-navigation li a:hover {
    background: #222;
}
div#page-header-user-dropdown {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

div#page-header-user-dropdown i {
    color: white;
    margin: 0 10px;
}

.dropdown-menu.dropdown-menu-right.dropdown-profile-wrapper {
    width: 100%;
    max-width: 240px;
    padding: 20px;
}
.dropdown-menu.dropdown-menu-right.dropdown-profile-wrapper p {
    font-size: 16px;
    color: white;
    text-align: right;
    margin: 0px 0 20px 0;
}
.dropdown-menu.dropdown-menu-right.dropdown-profile-wrapper p:first-child {
    margin: 0px 0 5px 0;
    text-align: left;
}
.dropdown-menu.dropdown-menu-right.dropdown-profile-wrapper p:nth-child(2) {
    margin: 0;
    font-size: 13px;
    opacity: 0.5;
}
.dropdown-menu.dropdown-menu-right.dropdown-profile-wrapper .dropdown-link {
    color: white;
    text-align: right;
    display: block;
    font-size: 14px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
img.header-profile-pic,
.dropdown-menu.dropdown-menu-right.dropdown-profile-wrapper a i {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu.dropdown-menu-right.dropdown-profile-wrapper .dropdown-link:hover {
    color: #ddd;
}

.carousel-title {
    margin: 10px 0;
    font-weight: 300;
    font-size: 14px;
}
.pricing-row {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    gap: 20px;
}
.pricing-column {
    margin: 0;
    padding: 0;
    width: 33.3%;
}
div#are-you-a-teacher {
    margin-top: 50px;
    color: #2F3336;
}

div#are-you-a-teacher a {
    color: #2F3336;
    margin-bottom: 10px;
}
div#are-you-a-teacher a:hover {
    text-decoration: underline;
}
.edu p.plan-name:before {
    content: "";
    background: url(../images/site/graduation.svg);
    position: absolute;
    top: -10px;
    right: 0px;
    width: 80px;
    height: 80px;
}
header a.signin-btn,
button.signin-btn,
header a.signup-btn, 
button.signup-btn {
    background: none;
    color: white;
    border: 1px solid white;
    border-radius: 5px;
    padding: 5px 14px;
    display: flex;
    align-items: center;
    font-size: 14px;
    position: relative;
    right: 10px;
    border-radius: 20px;
    transition: all .1s ease-in-out;
}
header a.signup-btn, button.signup-btn {
    background: #fff;
    color: #333;
    margin: 0 10px;
}
header a.signin-btn:hover,
button.signin-btn:hover {
    background: #2f3336;
    color: #fff;
}
header a.signup-btn:hover,
 button.signup-btn:hover {
    background: #dce2e7;
    color: #333;
}
header .language-btn {
    position: relative;
    flex: 1 1 auto;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: white;
    font-size: 14px;
    line-height: 16px;
    /* outline: none; */
    display: flex;
    align-items: center;
}
header .language-btn img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
header .language-btn span {
    margin-right: 5px;
}
.dropdown-profile-wrapper a.sumo-btn.signin-btn {
    text-transform: capitalize;
    justify-content: center;
    width: auto;
    text-align: center;
    margin: 0 auto;
    display: table;
    position: initial;
}

/* SINGLE APP FEATURES SECTION */

.features {
    width: 100%;
    padding: 100px;
    background: #222527;
}
.features .macbook {
    width: 100%;
}
.features-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.single-page .features h2 {
    font-size: 48px;
    text-align: left;
    color: #ffffff;
    padding: 0 100px 0 0;
    width: 100%;
    max-width: 720px;
    font-weight: 500;
    margin-bottom: 100px;
}
.highlighted-word {
    font-weight: 700;
}
.sumopaint .highlighted-word,
.single-page .sumopaint .single-feature h3 {
    color: #2daace;
}
.sumophoto .highlighted-word,
.single-page .sumophoto .single-feature h3 {
    color: #30baaa;
}
.sumotunes .highlighted-word,
.single-page .sumotunes .single-feature h3 {
    color: #e5ab42;
}
.sumoaudio .highlighted-word,
.single-page .sumoaudio .single-feature h3 {
    color: #673ab7;
}
.sumovideo .highlighted-word,
.single-page .sumovideo .single-feature h3 {
    color: #c82f2e;
}
.sumocode .highlighted-word,
.single-page .sumocode .single-feature h3 {
    color: #20cc71;
}
.sumo3d .highlighted-word,
.single-page .sumo3d .single-feature h3 {
    color: #3389c9;
}
.sumopixel .highlighted-word,
.single-page .sumopixel .single-feature h3 {
    color: #d960cf;
}

.single-page .single-feature {
    text-align: left;
    color: white;
    width: 30%;
}

.single-feature img,
.single-feature svg {
    width: 60px;
    height: 60px;
}

.single-page .single-feature h3 {
    margin: 30px 0 10px 0;
    color: #f1a900;
    font-size: 24px;
}

.single-page .single-feature p {
    color: white;
    font-size: 18px;
    font-weight: 500;
}

.main-app-feature {
    background: #0a0a0a;
    height: 350px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 90% 0%;
}
.main-app-feature.paint,
.main-app-feature.code {
    background-image: url(/images/site/partial-m.svg);
}
.main-app-feature.tunes,
.main-app-feature.video {
    background-image: url(/images/site/partial-s.svg);
}
.main-app-feature.threed,
.main-app-feature.audio {
    background-image: url(/images/site/partial-u.svg);
}
.main-app-feature.photo,
.main-app-feature.pixel {
    background-image: url(/images/site/partial-o.svg);
}

.main-app-feature-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    height: 100%;
    /* grid-gap: 50px; */
}

.main-app-feature .main-app-feature-inner h3 {
    color: #fff;
    font-size: 32px;
    margin: 0;
}

.main-app-feature .main-app-feature-inner p {
    color: white;
    font-size: 20px;
    font-weight: 500;
}

.main-app-feature-inner img,
.main-app-feature-inner svg {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
}
.main-app-feature-inner h3, .main-app-feature-inner p {
    display: flex;
    text-align: left;
}
.main-app-feature-inner .left-side {
    position: relative;
    width: 100%;
    height: 100%;
}
.main-app-feature-inner .left-side img {
    height: 100%;
    width: auto;
    margin: 0;
    transform: translateX(-20%);
    max-width: 120%;
}

.sumopaint .main-app-feature{
    background-color: #2daace;
}
.sumotunes .main-app-feature{
    background-color: #e5ab42;
}
.sumoaudio .main-app-feature{
    background-color: #673ab7;
}
.sumo3d .main-app-feature{
    background-color: #3389c9;
}
.sumocode .main-app-feature{
    background-color: #20cc71;
}
.sumovideo .main-app-feature{
    background-color: #c82f2e;
}
.sumophoto .main-app-feature{
    background-color: #30baaa;
}
.sumopixel .main-app-feature{
    background-color: #d960cf;
}

/* single page */
img.single-page-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-page {
    background: #222527;
    color: #2F3336;
    width: 100%;
    height: 100%;
    text-align: center;
    display: table;
}

.single-page-header {
    position: relative;
    padding: 50px 100px;
    background-color: #fff;
    color: #2F3336;
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-size: cover;
    background-repeat: no-repeat;
}
.single-page-header h1 {
    margin: 0;
    font-size: 48px;
}
.single-page-header h2 {
    font-weight: 400;
    margin: 15px 0 0 0;
    font-size: 18px;
}
.single-page-content {
    padding: 50px 20px;
    color: #2F3336;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: table;
}
.single-page-content h1 {
    font-size: 48px;
}
.single-page h1,
.single-page h2,
.single-page h3,
.single-page p {
    color: #2F3336;
}
.single-page.dark-page .single-page-content {
    color: #fff;
}

.single-page.dark-page h1,
.single-page.dark-page h2,
.single-page.dark-page h3,
.single-page.dark-page p {
    color: #fff;
}

.download-page .download-zip-wrapper .sumo-btn:after {
    content: "";
    position: absolute;
    right: 20px;
    top: 11px;
    background: url(../images/site/download-arrow2.svg);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    background-position: center;
    background-size: 100%;
}
.download-page .download-zip-wrapper .sumo-btn {
    position: relative;
    padding-right: 50px;
}
.download-feature {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    width: 100%;
    max-width: 920px;
    grid-gap: 20px;
}

.download-page .single-page-content .download-feature p {
    text-align: left;
    max-width: none;
}

.download-page .single-page-content .download-feature p:first-child {
    font-weight: bold;
    font-size: 20px;
}
.download-info {
    margin-top: 75px;
}
.community .single-page-header {
    background: url(../images/site/20200606.jpeg) no-repeat;
    background-size: cover;
    background-position: center 60%;
    height: 450px;
}
.community-texts {
    max-width: 1280px;
    margin: 0 auto;
    text-align: left;;
}
.community-texts p {
    font-size: 18px;
}
.community-featured {
    width: 100%;
    padding: 20px 50px;
    height: 300px;
    background: linear-gradient(grey, #111);
    border-radius: 20px;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
}

.banner-btn {
    border-radius: 100px;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    outline: none;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
}

.community-featured label.community-feature-app {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.community-featured-heading {
    display: flex;
    align-items: center;
}
.community-featured label.community-feature-app img {
    width: 40px;
    height: 40px;
    filter: invert(1);
}
.community-featured h2 {
    font-size: 36px;
    text-align: left;
    margin: 0 0 0 20px;
    text-shadow: 0 0 10px rgba(0,0,0,.7);
}

.community .community-featured p {
    font-size: 16px;
    line-height: normal;
    text-align: left;
    margin: 10px 0;
    text-shadow: 0 0 10px rgba(0,0,0,.7);
}
.community-featured-inner {
    max-width: 480px;
    text-align: left;
}

.community-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px
}
.community-nav h1 {
    font-size: 24px;
}
.community-nav input {
    background: #2f3336;
    border: none;
    height: 42px;
    padding: 0 10px;
    border-radius: 10px;
    color: white;
    outline: none;
    width: 200px;
    background-size: 15px 15px;
    background-position: 170px center;
    background-repeat: no-repeat;
    background-image: url(/images/site/search_darker.svg);
}
.community-nav-filters {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}
.community-filters-dropdown {
    margin: 0 0 0 30px;
    display: flex;
    align-items: center;
}
.single-filter-by-app {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin: 0 5px;
    opacity: 0.5;
    cursor: pointer;
}
.single-filter-by-app.selected {
    opacity: 1;
    position: relative;
}
.single-filter-by-app:hover {
    opacity: 0.5;
}
.filter-by-app {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 30px;
    background: #2f3336;
    height: 42px;
    gap: 7px;
    padding: 0 15px;
}

.filter-by-app img {
    width: 20px;
    height: 20px;
}
.community-filters-dropdown select {
    background: #2f3336;
    outline: none;
    color: white;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    border: none;
}

.community-filters-dropdown label {
    font-size: 14px;
    margin-right: 10px;
    color: #fff;
}

.privacy-nav {
    margin-top: 20px;
}
.privacy-nav a,
.privacy-nav span {
    color: #3e96df;
    font-size: 18px;
}
.privacy-nav a:visited,
a.back-to-support:visited {
    color: #3e96df
}
.privacy-nav a:hover {
    color: #4fa6ed
}
.privacy-policy .single-page-content h2 {
    text-align: left;
}
.single-page-content p {
    text-align: left;
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 24px;
}
.email-btn {
    display: block;
    width: max-content;
    background: #3e96df;
    color: white;
    border: 2px solid #3e96df;
    margin: 20px auto;
    font-size: 14px;
    text-transform: lowercase;
}
.email-btn:hover {
    color: white;
    background: #4fa6ed;
    border-color: #4fa6ed
}
.single-page.contact-us .single-page-content, 
.privacy-policy .single-page-content,
.privacy-policy.single-page,
.single-page.download-page, 
.single-page.contact-us, 
.single-page.news, 
.single-page.faq-page,
.support-single-app {
    background: #fff;
}
.features-page h1,
.features-page h2,
.features-page p,
.desktop-page h1,
.desktop-page h2,
.desktop-page p {
    color: #fff;
    margin: 0 auto;
    text-align: center;
}
.features-page .hero-subtitle,
.desktop-page .hero-subtitle{
    padding: 0;
    background: none;
    transform: none;
    margin: 15px auto;
}
.contact-us .single-page-content p,
.download-page .single-page-content p {
    max-width: 480px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.download-zip-wrapper p {
    margin-left: auto;
    margin-right: auto;
}
.this-is-a-pro-feature {
    font-size: 24px;
}
.download-page .download-feature p {
    margin-left: 0;
    margin-right: 0;
}
.social-contact {
    margin: 30px auto;
}
.social-contact .socials-flex {
    width: 200px;
}
.social-contact p {
    text-align: center;
    margin-bottom: 10px;
}
.contact-form {
    padding: 50px 0;
}
.contact-form a {
    display: block;
    margin: 20px auto;
}
.contact-form h2 {
    font-size: 30px;
}

.contact-form a {
    font-size: 16px;
    font-weight: 500;
}
.support-page p,
.help-center p,
.community p,
.dashboard p {
    text-align: center;
}
.error-page .redirect-link,
a.contact-link {
    color: #3e96df;
    font-weight: 700;
}
.error-page .redirect-link:hover,
a.contact-link:hover {
    color: #4fa6ed;
}
.secondary-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 100px;
    align-items: center;
    margin: 150px auto;
}
.secondary-feature h3 {
    color: white;
    font-size: 32px;
    margin: 0 0 10px 0;
    text-align: left;
}

.secondary-feature p {
    color: white;
    font-size: 20px;
    margin: 0;
    text-align: left;
}
.secondary-feature:nth-child(even) {
    direction: rtl;
}
.secondary-feature:nth-child(even) h3,
.secondary-feature:nth-child(even) p {
    direction: initial;
}
.secondary-feature img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
    /* box-shadow: 0 0 50px rgba(0,0,0,0.5); */
}
.carousel-btn {
    margin: 30px auto 50px;
    width: fit-content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}
/* SUPPORT */

.apps-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    grid-gap: 20px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.support-page .apps-wrapper {
    justify-content: center;
}
.support-page .single-page-content {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: none;
}
.single-page.support-page .single-page-header,
.single-page.pro-page .single-page-header {
    background-color: #fff;
    background-image: url(/images/site/support-hero.svg);
    background-size: cover;
}
.single-page.pro-page .single-page-content p {
    text-align: center
}
.support-docs {
    position: relative;
    padding: 50px;
    background-color: #fff;
}
.support-faq {
    background: #559ce1;
    padding: 50px;
}
.support-app-single img {
    width: 30px;
    height: 30px;
    margin-right: 15px;
}
.support-app-single img:hover {
    filter: brightness(1.05)
}

.support-app-single {
    padding: 5px 15px;
    width: max-content;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity:1;
    cursor: pointer;
    border: 2px solid #2F3336;
    border-radius: 50px;
    justify-content: flex-start;
}
.support-app-single p {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}
.search-input-wrapper {
    margin: 30px 0;
    position: relative;
}

.search-input {
    padding: 10px 10px 10px 50px;
    border-radius: 50px;
    border: none;
    background: #222527;
    color: white;
    font-size: 18px;
    background-image: url(../images/site/search_darker.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 15px;
    outline: none;
    min-width: 300px;
    box-shadow: -5px 5px 15px rgba(0,0,0,.1);
}
.support-wrapper {
    height: 100vh;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
}
.support-nav {
    position: sticky;
    top: 0;
    width: 23%
}
.support-content {
    width: 73%;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 100%;
}
.support-nav ul {
    margin: 0;
    padding: 0;
    border-radius: 15px;
    background: #e7ebef;
}

.support-nav ul li {
    list-style: none;
    padding: 15px;
    font-size: 14px;
    text-align: left;
    padding-left: 30px;
    cursor: pointer;
    /* border-radius: 15px; */
}
.support-nav ul li:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.support-nav ul li:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.support-content p {
    margin: 0 0 15px 0;
    text-align: left;
    font-size: 18px;
}
.support-content .video-container {
    width: 100%;
    /* height: 350px; */
    overflow: hidden;
    margin: 30px 0;
    border-radius: 15px;
}
.support-content .video-container img {
    width: 100%;
}
.support-content li {
    text-align: left;
    padding-bottom: 5px;
}

.support-content .image-container {
    max-width: 100%;
    height: auto;
    overflow: hidden;
    margin: 30px 0;
    border-radius: 15px;
    padding: 0 10px;
}
.support-content .image-container img {
    width: 100%;
    border-radius: 10px;
}
.support-content video {
    width: 100%;
}
.support-nav ul li a {
    color: #222527;
    width: 100%;
    height: 100%;
    display: block;
}
.support-nav ul li.has-submenu p > a {
    font-weight: bold;
}
.support-nav ul li:not(.has-submenu a):hover {
    background: #c3ced766;
}
.support-title-app {
    font-size: 48px;
    margin-top: 0;
    text-align: left;
    display: flex;
    align-items: center
}
.support-nav li.support-selected {
    padding: 0
}
.support-nav ul li p {
    margin: 0;
    text-align: left;
    font-size: 14px;
}
.back-to-support {
    margin: 20px 0;
    font-size: 16px;
    display: block;
}
.back-to-support:hover {
    text-decoration: underline;
}
li.support-selected > p {
    padding: 20px 30px;
}
.support-nav ul li.has-submenu:not(.support-selected):hover {
    background: #ffffff66;
}
ul.doc-submenu.open-submenu li a {
    padding: 10px 40px;
}
ul.doc-submenu {
    border-radius: 0;
    padding: 0;
    background: #f1f3f5;
    overflow: hidden;
    max-height: 0;
    /* transition: all ease-in-out .3s; */
}
ul.doc-submenu li {
    border-radius: 0;
    padding: 0px;
}
ul.doc-submenu li:hover {
    border-radius: 0;
    background: red
}
.support-content a.anchor {
    color: #d0d3d6;
}

.support-content a.anchor:hover {
    opacity: 1;
}
.support-nav ul.doc-submenu.open-submenu {
    max-height: 1000px;
}

.support-content h4 {
    font-size: 48px;
    text-align: left;
    margin: 0 0 15px 0;
}
.support-content h5 {
    font-size: 36px;
    margin: 75px 0 15px 0;
    text-align: left;
}
.support-content h6 {
    font-size: 32px;
    margin: 75px 0 15px 0;
    text-align: left;
}
.support-content a,
.support-content a:visited {
    color: #3489c9;
}
.support-content a.anchor:visited {
    color: white;
}
.ticket-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}

.help-ticketing {
    margin: 100px 0;
    width: 100%;
    max-width: 920px;
}

.single-ticket-type {
    background: #444;
    border-radius: 15px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    max-width: 480px;
    transition: all ease-in-out .2s;
}
p.tickets-title {
    font-size: 28px;
    margin: 0 0 15px 0;
    font-weight: 700;
}
.ticketing-inner {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 30px;
    height: 100%;
}
.ticketing-inner p {
    text-align: left;
}
.ticketing-inner .sumo-btn {
    padding: 0;
    position: relative;
    margin: 0;
    background: none !important;
}
.ticketing-inner .sumo-btn:hover {
    margin-left: 5px
}
.ticketing-inner .sumo-btn:after {
    content: "";
    width: 11px;
    height: 12px;
    background-image: url(/images/site/arrow2.svg);
    background-size: 11px 11px;
    background-repeat: no-repeat;
    position: absolute;
    right: -20px;
    top: 7px;
}
.single-ticket-type.add-new-ticket-wrapper {
    background: #3489c9;
}
.ticketing-inner img {
    width: 100%;
    max-width: 120px;
    display: flex;
    align-items: center;
    align-self: center;
    justify-self: center;
}
.ticketing-inner-text {
    position: relative;
    text-align: left;
    display: grid;
    grid-template-rows: 25px auto 30px;
}
h2.support-heading {
    font-size: 36px;
    font-weight: 700;
    margin: 0 auto 50px;
    color: #2F3336;
}
.support-form-wrapper {
    background-color: #edf0f3;
    position: relative;
    padding: 50px;
    background-image: url(/images/site/support-contact-bg.svg);
}
.support-form-wrapper h2 {
    color: #2F3336;
}
.support-youtube-wrapper h2, .support-faq h2, .support-contact h2 {
    color: #fff;
}
.support-faq-wrapper {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    justify-content: space-between;
    flex-direction: column;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px 30px;
    margin-bottom: 30px;
}
.support-youtube-wrapper {
    background: url(/images/site/support-tutorial-bg.png) no-repeat;
    background-color: #373b3e;
    padding: 50px;
    background-size: cover;
    background-position: left;
}
.single-faq-category {
    display: flex;
    transition: all ease-in-out .2s;
    align-items: center;
    background: none;
    border: 2px solid white;
    border-radius: 60px;
    padding: 15px 25px;
    cursor: pointer;
}
.single-faq-category:hover {
    background: #fff;
    color: #2F3336
}
.single-faq-category:hover img,
.single-faq-category:hover p {
    filter: invert();
}

.single-faq-category img {
    width: 30px;
    height: 30px;
    margin-right: 15px;
}
.single-faq-category p {
    margin: 0;
    font-weight: bold;
    color: #fff;
}

.support-contact .support-heading {
    margin: 0;
}
.support-contact {
    background-color: #373b3e;
    background-image: url(/images/site/support-email-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 70px;
}
.support-contact p {
    color: #fff;
}

.support-page hr,
.download-page hr {
    margin: 100px 0;
    border: none;
    border-top: 1px solid #222;
}
.support-single-app hr {
    border: none;
    border-top: 1px solid #c3ced766;
}
.download-page hr {
    margin: 20px 0;
}
.support-title-app img {
    width: 75px;
    height: 75px;
    margin: 0 20px 0 0;
    border-radius: 15px;
}

/* OUR STORY */
.story-content {
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    grid-gap: 50px;
}
.story-section {
    background: #fff;
    padding: 50px;
}
.story-content img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
}

.about-image-mobile {
    display: none
}
.story-image {
    height: 100%;
}
.story-text h1 {
    font-size: 60px;
    text-align: left;
    line-height: normal;
    margin: 0 0 20px 0;
    color: #2F3336;
}
.story-text p {
    margin-top: 0;
    text-align: left;
    font-size: 18px;
    color: #2F3336;
}
.story-section:last-child .inner-container {
    padding-bottom: 100px;
}


.our-story svg {
    width: 100%;
    height: auto;
}
.team-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 50px;
    display: grid;
    margin-top: 100px;
}

img.team-single-image {
    width: 175px;
    height: 175px;
    border-radius: 150px;
    box-shadow: 0 0 15px rgb(0,0,0, .2)
}

.story-wrapper h2 {
    font-size: 48px;
}

p.team-single-name {
    font-size: 24px;
    font-weight: 700;
    margin: 15px 0 0 0;
}

p.team-single-role {
    font-size: 18px;
    color: #3e96df;
    font-weight: 700;
    margin: 10px 0 0 0;
}
.story-wrapper h2,
.story-wrapper p:not(.result-number, .team-single-role) {
    color: #fff;
}
.story-wrapper p.hero-description {
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
}
.results-wrapper {
    grid-template-columns: 1fr 1fr;
    display: grid;
    grid-gap: 50px;
    margin-top: 100px;
}
p.result-number {
    color: #3e96df;
    font-weight: 700;
    font-size: 48px;
    margin: 0;
}
.result-description {
    font-size: 20px;
}

/* FOOTER */

footer {
    background: #373b3e;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    height: 50px;
    align-items: center;
    color: #ffffff;
    padding: 0 10px;
}
.footer-group {
    display: inline-block;

    height: 200px;
    vertical-align: top;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: auto;
}
.footer-group a {
    color: #ccc;
}
.footer-group a:hover {
    color: #ccc;
}

.footer-group a {
    text-align: left;
}
.footer-group a:hover {
    opacity: 0.8;
}
.footer-links-wrapper a {
    font-weight: 500;
}
.footer-titles {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 15px;
    margin-bottom: 20px;
    text-align: left;
    color: #ffffff;
}
.footer-links-wrapper {
    display: grid;
    grid-gap: 15px;
    font-size: 13px;
}

.footer-group {
    height: 100%;
}

.footer-flex {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.footer-separator {
    width: 1px;
    height: 100%;
    background: #dedede;
    display: block;
    height: 250px;
    display: flex;
    align-items: center;
    align-self: center;
}
div#footer-menu {
    background: #222527;
    padding: 50px;
    text-align: center;
}

.footer-inner span,
.footer-inner a {
    font-size: 13px;
}
.footer-inner span {
    color: #ffffff;
}

i.fa.fa-heart.text-pulse {
    color: red;
}
.footer-inner a {
    color: #3e96df;
    font-weight: 700;
}
.single-page-content p a {
    color: #3e96df
}
.single-page-content a:not(.sumo-btn):not(.support-nav a):not(.work-types-nav a):hover {
    color: #4fa6ed
}

/* FORM */



.form-control {
    display: block;
    width: 100%;
    height: calc(1.42857em + .85714rem + 2px);
    padding: .4285714rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.428572;
    color: #575757;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d4dae3;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-control {
        transition: none
    }
}

.form-control::-ms-expand {
    background-color: transparent;
    border: 0
}

.form-control:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #575757
}

.form-control:focus {
    color: #575757;
    background-color: #fff;
    border-color: #97a5ba;
    outline: 0;
    box-shadow: none
}

.form-control::-webkit-input-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control::-moz-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control::-ms-input-placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 1
}

.form-control:disabled,.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1
}

select.form-control:focus::-ms-value {
    color: #575757;
    background-color: #fff
}

.form-control-file,.form-control-range {
    display: block;
    width: 100%
}

.col-form-label {
    padding-top: calc(.42857rem + 1px);
    padding-bottom: calc(.42857rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.428572
}

.col-form-label-lg {
    padding-top: calc(.64286rem + 1px);
    padding-bottom: calc(.64286rem + 1px);
    font-size: 1.14285714rem;
    line-height: 1.25
}

.col-form-label-sm {
    padding-top: calc(.35714rem + 1px);
    padding-bottom: calc(.35714rem + 1px);
    font-size: 1rem;
    line-height: 1.1428572
}

.form-control-plaintext {
    display: block;
    width: 100%;
    padding: .4285714rem 0;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.428572;
    color: #575757;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0
}

.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm {
    padding-right: 0;
    padding-left: 0
}

.form-control-sm {
    height: calc(1.14286em + .71429rem + 2px);
    padding: .3571429rem .6429rem;
    font-size: 1rem;
    line-height: 1.1428572;
    border-radius: .2rem
}

.form-control-lg {
    height: calc(1.25em + 1.28571rem + 2px);
    padding: .64285714rem 1.286rem;
    font-size: 1.14285714rem;
    line-height: 1.25;
    border-radius: .3rem
}

select.form-control[multiple],select.form-control[size],textarea.form-control {
    height: auto
}

.form-group {
    margin-bottom: 16px
}

.form-text {
    display: block;
    margin-top: .25rem
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px
}

.form-row>.col,.form-row>[class*=col-] {
    padding-right: 5px;
    padding-left: 5px
}

.form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem
}

.form-check-input {
    position: absolute;
    margin-top: .3rem;
    margin-left: -1.25rem
}

.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label {
    color: #6c757d
}

.form-check-label {
    margin-bottom: 0
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-right: .75rem
}

.form-check-inline .form-check-input {
    position: static;
    margin-top: 0;
    margin-right: .3125rem;
    margin-left: 0
}

.valid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #9ccc65
}

.valid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 4px 10px;
    margin-top: .1rem;
    font-size: .928571429rem;
    line-height: 1.5;
    color: #fff;
    background-color: rgba(156,204,101,.9);
    border-radius: .25rem
}

.form-control.is-valid,.was-validated .form-control:valid {
    border-color: #9ccc65
}

.form-control.is-valid~.valid-feedback,.form-control.is-valid~.valid-tooltip,.was-validated .form-control:valid~.valid-feedback,.was-validated .form-control:valid~.valid-tooltip {
    display: block
}

.custom-select.is-valid,.was-validated .custom-select:valid {
    border-color: #9ccc65
}

.custom-select.is-valid~.valid-feedback,.custom-select.is-valid~.valid-tooltip,.form-control-file.is-valid~.valid-feedback,.form-control-file.is-valid~.valid-tooltip,.was-validated .custom-select:valid~.valid-feedback,.was-validated .custom-select:valid~.valid-tooltip,.was-validated .form-control-file:valid~.valid-feedback,.was-validated .form-control-file:valid~.valid-tooltip {
    display: block
}

.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label {
    color: #9ccc65
}

.form-check-input.is-valid~.valid-feedback,.form-check-input.is-valid~.valid-tooltip,.was-validated .form-check-input:valid~.valid-feedback,.was-validated .form-check-input:valid~.valid-tooltip {
    display: block
}

.custom-control-input.is-valid~.custom-control-label,.was-validated .custom-control-input:valid~.custom-control-label {
    color: #9ccc65
}

.custom-control-input.is-valid~.custom-control-label:before,.was-validated .custom-control-input:valid~.custom-control-label:before {
    background-color: #daecc5
}

.custom-control-input.is-valid~.valid-feedback,.custom-control-input.is-valid~.valid-tooltip,.was-validated .custom-control-input:valid~.valid-feedback,.was-validated .custom-control-input:valid~.valid-tooltip {
    display: block
}

.custom-control-input.is-valid:checked~.custom-control-label:before,.was-validated .custom-control-input:valid:checked~.custom-control-label:before {
    background-color: #b5d98b
}

.custom-file-input.is-valid~.custom-file-label,.was-validated .custom-file-input:valid~.custom-file-label {
    border-color: #9ccc65
}

.custom-file-input.is-valid~.valid-feedback,.custom-file-input.is-valid~.valid-tooltip,.was-validated .custom-file-input:valid~.valid-feedback,.was-validated .custom-file-input:valid~.valid-tooltip {
    display: block
}

.custom-file-input.is-valid:focus~.custom-file-label,.is-valid .form-control,.was-validated .custom-file-input:valid:focus~.custom-file-label {
    border-color: #9ccc65
}

.is-valid .custom-control-input~.custom-control-label,.is-valid .form-check-input~.form-check-label {
    color: #9ccc65
}

.is-valid .custom-control-input~.custom-control-label:before {
    background-color: rgba(156,204,101,.25)
}

.is-valid .valid-feedback,.is-valid .valid-tooltip {
    display: block
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #ef5350
}

.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 4px 10px;
    margin-top: .1rem;
    font-size: .928571429rem;
    line-height: 1.5;
    color: #fff;
    background-color: rgba(239,83,80,.9);
    border-radius: .25rem
}

.form-control.is-invalid,.was-validated .form-control:invalid {
    border-color: #ef5350
}

.form-control.is-invalid~.invalid-feedback,.form-control.is-invalid~.invalid-tooltip,.was-validated .form-control:invalid~.invalid-feedback,.was-validated .form-control:invalid~.invalid-tooltip {
    display: block
}

.custom-select.is-invalid,.was-validated .custom-select:invalid {
    border-color: #ef5350
}

.custom-select.is-invalid~.invalid-feedback,.custom-select.is-invalid~.invalid-tooltip,.form-control-file.is-invalid~.invalid-feedback,.form-control-file.is-invalid~.invalid-tooltip,.was-validated .custom-select:invalid~.invalid-feedback,.was-validated .custom-select:invalid~.invalid-tooltip,.was-validated .form-control-file:invalid~.invalid-feedback,.was-validated .form-control-file:invalid~.invalid-tooltip {
    display: block
}

.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label {
    color: #ef5350
}

.form-check-input.is-invalid~.invalid-feedback,.form-check-input.is-invalid~.invalid-tooltip,.was-validated .form-check-input:invalid~.invalid-feedback,.was-validated .form-check-input:invalid~.invalid-tooltip {
    display: block
}

.custom-control-input.is-invalid~.custom-control-label,.was-validated .custom-control-input:invalid~.custom-control-label {
    color: #ef5350
}

.custom-control-input.is-invalid~.custom-control-label:before,.was-validated .custom-control-input:invalid~.custom-control-label:before {
    background-color: #fac6c5
}

.custom-control-input.is-invalid~.invalid-feedback,.custom-control-input.is-invalid~.invalid-tooltip,.was-validated .custom-control-input:invalid~.invalid-feedback,.was-validated .custom-control-input:invalid~.invalid-tooltip {
    display: block
}

.custom-control-input.is-invalid:checked~.custom-control-label:before,.was-validated .custom-control-input:invalid:checked~.custom-control-label:before {
    background-color: #f3817f
}

.custom-file-input.is-invalid~.custom-file-label,.was-validated .custom-file-input:invalid~.custom-file-label {
    border-color: #ef5350
}

.custom-file-input.is-invalid~.invalid-feedback,.custom-file-input.is-invalid~.invalid-tooltip,.was-validated .custom-file-input:invalid~.invalid-feedback,.was-validated .custom-file-input:invalid~.invalid-tooltip {
    display: block
}

.custom-file-input.is-invalid:focus~.custom-file-label,.is-invalid .form-control,.was-validated .custom-file-input:invalid:focus~.custom-file-label {
    border-color: #ef5350
}

.is-invalid .custom-control-input~.custom-control-label,.is-invalid .form-check-input~.form-check-label {
    color: #ef5350
}

.is-invalid .custom-control-input~.custom-control-label:before {
    background-color: rgba(239,83,80,.25)
}

.is-invalid .invalid-feedback,.is-invalid .invalid-tooltip {
    display: block
}

.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center
}

.form-inline .form-check {
    width: 100%
}

@media (min-width: 576px) {
    .form-inline label {
        justify-content:center
    }

    .form-inline .form-group,.form-inline label {
        display: flex;
        align-items: center;
        margin-bottom: 0
    }

    .form-inline .form-group {
        flex: 0 0 auto;
        flex-flow: row wrap
    }

    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle
    }

    .form-inline .form-control-plaintext {
        display: inline-block
    }

    .form-inline .custom-select,.form-inline .input-group {
        width: auto
    }

    .form-inline .form-check {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding-left: 0
    }

    .form-inline .form-check-input {
        position: relative;
        flex-shrink: 0;
        margin-top: 0;
        margin-right: .25rem;
        margin-left: 0
    }

    .form-inline .custom-control {
        align-items: center;
        justify-content: center
    }

    .form-inline .custom-control-label {
        margin-bottom: 0
    }
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%
}

.input-group>.custom-file,.input-group>.custom-select,.input-group>.form-control,.input-group>.form-control-plaintext {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    margin-bottom: 0
}

.input-group>.custom-file+.custom-file,.input-group>.custom-file+.custom-select,.input-group>.custom-file+.form-control,.input-group>.custom-select+.custom-file,.input-group>.custom-select+.custom-select,.input-group>.custom-select+.form-control,.input-group>.form-control+.custom-file,.input-group>.form-control+.custom-select,.input-group>.form-control+.form-control,.input-group>.form-control-plaintext+.custom-file,.input-group>.form-control-plaintext+.custom-select,.input-group>.form-control-plaintext+.form-control {
    margin-left: -1px
}

.input-group>.custom-file .custom-file-input:focus~.custom-file-label,.input-group>.custom-select:focus,.input-group>.form-control:focus {
    z-index: 3
}

.input-group>.custom-file .custom-file-input:focus {
    z-index: 4
}

.input-group>.custom-select:not(:last-child),.input-group>.form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.input-group>.custom-select:not(:first-child),.input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.input-group>.custom-file {
    display: flex;
    align-items: center
}

.input-group>.custom-file:not(:last-child) .custom-file-label,.input-group>.custom-file:not(:last-child) .custom-file-label:after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.input-group>.custom-file:not(:first-child) .custom-file-label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.input-group-append,.input-group-prepend {
    display: flex
}

.input-group-append .btn,.input-group-prepend .btn {
    position: relative;
    z-index: 2
}

.input-group-append .btn:focus,.input-group-prepend .btn:focus {
    z-index: 3
}

.input-group-append .btn+.btn,.input-group-append .btn+.input-group-text,.input-group-append .input-group-text+.btn,.input-group-append .input-group-text+.input-group-text,.input-group-prepend .btn+.btn,.input-group-prepend .btn+.input-group-text,.input-group-prepend .input-group-text+.btn,.input-group-prepend .input-group-text+.input-group-text {
    margin-left: -1px
}

.input-group-prepend {
    margin-right: -1px
}

.input-group-append {
    margin-left: -1px
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .4285714rem 1rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.428572;
    color: #575757;
    text-align: center;
    white-space: nowrap;
    background-color: #f6f7f9;
    border: 1px solid #d4dae3;
    border-radius: .25rem
}

.input-group-text input[type=checkbox],.input-group-text input[type=radio] {
    margin-top: 0
}

.input-group-lg>.custom-select,.input-group-lg>.form-control:not(textarea) {
    height: calc(1.25em + 1.28571rem + 2px)
}

.input-group-lg>.custom-select,.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text {
    padding: .64285714rem 1.286rem;
    font-size: 1.14285714rem;
    line-height: 1.25;
    border-radius: .3rem
}

.input-group-sm>.custom-select,.input-group-sm>.form-control:not(textarea) {
    height: calc(1.14286em + .71429rem + 2px)
}

.input-group-sm>.custom-select,.input-group-sm>.form-control,.input-group-sm>.input-group-append>.btn,.input-group-sm>.input-group-append>.input-group-text,.input-group-sm>.input-group-prepend>.btn,.input-group-sm>.input-group-prepend>.input-group-text {
    padding: .3571429rem .6429rem;
    font-size: 1rem;
    line-height: 1.1428572;
    border-radius: .2rem
}

.input-group-lg>.custom-select,.input-group-sm>.custom-select {
    padding-right: 2rem
}

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),.input-group>.input-group-append:not(:last-child)>.btn,.input-group>.input-group-append:not(:last-child)>.input-group-text,.input-group>.input-group-prepend>.btn,.input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.643rem
}

.custom-control-inline {
    display: inline-flex;
    margin-right: 1rem
}

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1.143rem;
    height: 1.3215rem;
    opacity: 0
}

.custom-control-input:checked~.custom-control-label:before {
    color: #fff;
    border-color: #3f9ce8;
    background-color: #3f9ce8
}

.custom-control-input:focus~.custom-control-label:before {
    box-shadow: 0 0 0 1px #f0f2f5,0 0 0 3px #3f9ce8
}

.custom-control-input:focus:not(:checked)~.custom-control-label:before {
    border-color: #97a5ba
}

.custom-control-input:not(:disabled):active~.custom-control-label:before {
    color: #fff;
    background-color: #deeefb;
    border-color: #deeefb
}

.custom-control-input:disabled~.custom-control-label,.custom-control-input[disabled]~.custom-control-label {
    color: #6c757d
}

.custom-control-input:disabled~.custom-control-label:before,.custom-control-input[disabled]~.custom-control-label:before {
    background-color: #e9ecef
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top
}

.custom-control-label:before {
    pointer-events: none;
    background-color: #fff;
    border: 1px solid #adb5bd
}

.custom-control-label:after,.custom-control-label:before {
    position: absolute;
    top: 0;
    left: -1.643rem;
    display: block;
    width: 1.143rem;
    height: 1.143rem;
    content: ""
}

.custom-control-label:after {
    background: no-repeat 50%/50% 50%
}

.custom-checkbox .custom-control-label:before {
    border-radius: .25rem
}

.custom-checkbox .custom-control-input:checked~.custom-control-label:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E")
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label:before {
    border-color: #3f9ce8;
    background-color: #3f9ce8
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E")
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label:before {
    background-color: rgba(63,156,232,.5)
}

.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label:before {
    background-color: rgba(63,156,232,.5)
}

.custom-radio .custom-control-label:before {
    border-radius: 50%
}

.custom-radio .custom-control-input:checked~.custom-control-label:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")
}

.custom-radio .custom-control-input:disabled:checked~.custom-control-label:before {
    background-color: rgba(63,156,232,.5)
}

.custom-switch {
    padding-left: 2.50025rem
}

.custom-switch .custom-control-label:before {
    left: -2.50025rem;
    width: 2.00025rem;
    pointer-events: all;
    border-radius: .5715rem
}

.custom-switch .custom-control-label:after {
    top: calc(.1785rem + 2px);
    left: calc(-2.50025rem + 2px);
    width: calc(1.143rem - 4px);
    height: calc(1.143rem - 4px);
    background-color: #adb5bd;
    border-radius: .5715rem;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .custom-switch .custom-control-label:after {
        transition: none
    }
}

.custom-switch .custom-control-input:checked~.custom-control-label:after {
    background-color: #fff;
    transform: translateX(.85725rem)
}

.custom-switch .custom-control-input:disabled:checked~.custom-control-label:before {
    background-color: rgba(63,156,232,.5)
}

.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.42857em + .85714rem + 2px);
    padding: .4285714rem 2rem .4285714rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.428572;
    color: #575757;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 1rem center/8px 10px;
    border: 1px solid #d4dae3;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.custom-select:focus {
    border-color: #b1d7f6;
    outline: 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(177,215,246,.5)
}

.custom-select:focus::-ms-value {
    color: #575757;
    background-color: #fff
}

.custom-select[multiple],.custom-select[size]:not([size="1"]) {
    height: auto;
    padding-right: 1rem;
    background-image: none
}

.custom-select:disabled {
    color: #6c757d;
    background-color: #e9ecef
}

.custom-select::-ms-expand {
    display: none
}

.custom-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #575757
}

.custom-select-sm {
    height: calc(1.14286em + .71429rem + 2px);
    padding-top: .3571429rem;
    padding-bottom: .3571429rem;
    padding-left: .6429rem;
    font-size: 1rem
}

.custom-select-lg {
    height: calc(1.25em + 1.28571rem + 2px);
    padding-top: .64285714rem;
    padding-bottom: .64285714rem;
    padding-left: 1.286rem;
    font-size: 1.14285714rem
}

.custom-file {
    display: inline-block;
    margin-bottom: 0
}

.custom-file,.custom-file-input {
    position: relative;
    width: 100%;
    height: calc(1.42857em + .85714rem + 2px)
}

.custom-file-input {
    z-index: 2;
    margin: 0;
    opacity: 0
}

.custom-file-input:focus~.custom-file-label {
    border-color: #97a5ba;
    box-shadow: none
}

.custom-file-input:disabled~.custom-file-label,.custom-file-input[disabled]~.custom-file-label {
    background-color: #e9ecef
}

.custom-file-input:lang(en)~.custom-file-label:after {
    content: "Browse"
}

.custom-file-input~.custom-file-label[data-browse]:after {
    content: attr(data-browse)
}

.custom-file-label {
    left: 0;
    z-index: 1;
    height: calc(1.42857em + .85714rem + 2px);
    font-weight: 400;
    background-color: #fff;
    border: 1px solid #d4dae3;
    border-radius: .25rem
}

.custom-file-label,.custom-file-label:after {
    position: absolute;
    top: 0;
    right: 0;
    padding: .4285714rem 1rem;
    line-height: 1.428572;
    color: #575757
}

.custom-file-label:after {
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.42857em + .85714rem);
    content: "Browse";
    background-color: #f6f7f9;
    border-left: inherit;
    border-radius: 0 .25rem .25rem 0
}

.custom-range {
    width: 100%;
    height: 1.4rem;
    padding: 0;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.custom-range:focus {
    outline: none
}

.custom-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #f0f2f5
}

.custom-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #f0f2f5
}

.custom-range:focus::-ms-thumb {
    box-shadow: 0 0 0 1px #f0f2f5
}

.custom-range::-moz-focus-outer {
    border: 0
}

.custom-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -.25rem;
    background-color: #3f9ce8;
    border: 0;
    border-radius: 1rem;
    -webkit-transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    appearance: none
}

@media (prefers-reduced-motion:reduce) {
    .custom-range::-webkit-slider-thumb {
        -webkit-transition: none;
        transition: none
    }
}

.custom-range::-webkit-slider-thumb:active {
    background-color: #deeefb
}

.custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem
}

.custom-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #3f9ce8;
    border: 0;
    border-radius: 1rem;
    -moz-transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -moz-appearance: none;
    appearance: none
}

@media (prefers-reduced-motion:reduce) {
    .custom-range::-moz-range-thumb {
        -moz-transition: none;
        transition: none
    }
}

.custom-range::-moz-range-thumb:active {
    background-color: #deeefb
}

.custom-range::-moz-range-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem
}

.custom-range::-ms-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    margin-right: .2rem;
    margin-left: .2rem;
    background-color: #3f9ce8;
    border: 0;
    border-radius: 1rem;
    -ms-transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    appearance: none
}

@media (prefers-reduced-motion:reduce) {
    .custom-range::-ms-thumb {
        -ms-transition: none;
        transition: none
    }
}

.custom-range::-ms-thumb:active {
    background-color: #deeefb
}

.custom-range::-ms-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
    border-width: .5rem
}

.custom-range::-ms-fill-lower,.custom-range::-ms-fill-upper {
    background-color: #dee2e6;
    border-radius: 1rem
}

.custom-range::-ms-fill-upper {
    margin-right: 15px
}

.custom-range:disabled::-webkit-slider-thumb {
    background-color: #adb5bd
}

.custom-range:disabled::-webkit-slider-runnable-track {
    cursor: default
}

.custom-range:disabled::-moz-range-thumb {
    background-color: #adb5bd
}

.custom-range:disabled::-moz-range-track {
    cursor: default
}

.custom-range:disabled::-ms-thumb {
    background-color: #adb5bd
}

.custom-control-label:before,.custom-file-label,.custom-select {
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .custom-control-label:before,.custom-file-label,.custom-select {
        transition: none
    }
}

.form-material {
    position: relative;
    padding-top: 40px
}

.form-material>label {
    position: absolute;
    top: 6px;
    left: 0;
    margin-bottom: 0
}

.form-material.floating>label {
    font-size: 1.142857143rem;
    font-weight: 400;
    cursor: text;
    z-index: 2;
    transition: all .2s ease-out;
    transform: translateY(25px)
}

.form-material.form-material-sm.floating>label {
    font-size: 1rem;
    transform: translateY(22px)
}

.form-material.form-material-lg.floating>label {
    font-size: 1.285714286rem;
    transform: translateY(27px)
}

.form-material.floating.open>label,.form-material>.form-control:focus+label,.form-material>label {
    font-weight: 600;
    cursor: default;
    transform: translateY(0)
}
/*
.form-material.floating>.form-control:-webkit-autofill+label {
    font-size: 1rem;
    font-weight: 600;
    cursor: default;
    transform: translateY(0)
} */
.profile-info input:-webkit-autofill,
.profile-info input:-webkit-autofill:hover,
.profile-info input:-webkit-autofill:focus {
  background: none !important;
  -webkit-box-shadow: inset 0 0 0px 9999px #111, 0 1px 0 #d4dae3;;
  box-shadow: inset 0 0 0px 9999px #111, 0 1px 0 #d4dae3;
  -webkit-text-fill-color: #fff;
  color: white;
  border: none;
  /* transition: background-color 5000s ease-in-out 0s; */
}
.profile-info .form-control {
    color: white;
}
.form-material.floating>.form-control[disabled]+label,.form-material.floating>.form-control[readonly]+label,fieldset[disabled] .form-material.floating>label {
    cursor: not-allowed
}

.form-material>.form-control {
    /* padding-left: 0;
    padding-right: 0; */
    border-color: transparent;
    border-radius: 0;
    background-color: transparent
}

.form-material>.form-control,.form-material>.form-control~.input-group-append {
    box-shadow: 0 1px 0 #d4dae3;
    transition: box-shadow .3s ease-out
}

.form-material>.form-control:focus {
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 2px 0 #97a5ba
}

.form-material>.form-control:focus+label {
    color: #666666
}

.form-material>.form-control:focus~.input-group-append {
    box-shadow: 0 2px 0 #97a5ba
}

.form-material>select.form-control {
    border-radius: 1px
}

.form-material .form-control[disabled],.form-material .form-control[readonly],.form-material fieldset[disabled] .form-control {
    background-color: #fff;
    border-bottom: 1px dashed #ccc;
    box-shadow: none
}

.form-material.input-group .input-group-text {
    border: none;
    background-color: transparent
}

.form-material.form-material-primary>.form-control:focus {
    box-shadow: 0 2px #3f9ce8
}

.form-material.form-material-primary>.form-control:focus+label {
    color: #3f9ce8
}

.form-material.form-material-primary>.form-control:focus~.input-group-append {
    color: #3f9ce8;
    box-shadow: 0 2px #3f9ce8
}

.form-material.form-material-success>.form-control:focus {
    box-shadow: 0 2px #9ccc65
}

.form-material.form-material-success>.form-control:focus+label {
    color: #9ccc65
}

.form-material.form-material-success>.form-control:focus~.input-group-append {
    color: #9ccc65;
    box-shadow: 0 2px #9ccc65
}

.form-material.form-material-info>.form-control:focus {
    box-shadow: 0 2px #26c6da
}

.form-material.form-material-info>.form-control:focus+label {
    color: #26c6da
}

.form-material.form-material-info>.form-control:focus~.input-group-append {
    color: #26c6da;
    box-shadow: 0 2px #26c6da
}

.form-material.form-material-warning>.form-control:focus {
    box-shadow: 0 2px #ffca28
}

.form-material.form-material-warning>.form-control:focus+label {
    color: #ffca28
}

.form-material.form-material-warning>.form-control:focus~.input-group-append {
    color: #ffca28;
    box-shadow: 0 2px #ffca28
}

.form-material.form-material-danger>.form-control:focus {
    box-shadow: 0 2px #ef5350
}

.form-material.form-material-danger>.form-control:focus+label {
    color: #ef5350
}

.form-material.form-material-danger>.form-control:focus~.input-group-append {
    color: #ef5350;
    box-shadow: 0 2px #ef5350
}

.is-valid .form-material>.form-control {
    box-shadow: 0 1px 0 #9ccc65
}

.is-valid .form-material>.form-control~.input-group-append {
    color: #9ccc65;
    box-shadow: 0 1px 0 #9ccc65
}

.is-valid .form-material>.form-control:focus {
    box-shadow: 0 2px #9ccc65
}

.is-valid .form-material>.form-control:focus+label {
    color: #9ccc65
}

.is-valid .form-material>.form-control:focus~.input-group-append {
    color: #9ccc65;
    box-shadow: 0 2px #9ccc65
}

.is-valid .form-material~.invalid-feedback,.is-valid .form-material~.invalid-tooltip {
    display: block
}

.is-valid .form-material label {
    color: #9ccc65
}

.is-invalid .form-material>.form-control {
    box-shadow: 0 1px 0 #ef5350
}

.is-invalid .form-material>.form-control~.input-group-append {
    color: #ef5350;
    box-shadow: 0 1px 0 #ef5350
}

.is-invalid .form-material>.form-control:focus {
    box-shadow: 0 2px #ef5350
}

.is-invalid .form-material>.form-control:focus+label {
    color: #ef5350
}

.is-invalid .form-material>.form-control:focus~.input-group-append {
    color: #ef5350;
    box-shadow: 0 2px #ef5350
}

.is-invalid .form-material~.invalid-feedback,.is-invalid .form-material~.invalid-tooltip {
    display: block
}

.is-invalid .form-material label {
    color: #ef5350
}

/* HEADER */

header#header {
    background: #222527;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 999999;
    max-width: 100vw;
}
header#header span {
    color: white;
}
.header-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
}

.branding a {
    display: flex;
    align-items: center;
    color: white;
    font-size: 20px;
    font-weight: 400;
}
.branding img {
    margin-right: 5px;
}

.toggle-mobile-menu {
    width: 20px;
    height: 20px;
    position: relative;
    top: 8px;
    margin: 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }

  .toggle-mobile-menu span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #fff;
    border-radius: 0px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }

  /* Icon 4 */

  .toggle-mobile-menu span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .toggle-mobile-menu span:nth-child(2) {
    top: 6px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .toggle-mobile-menu span:nth-child(3) {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .toggle-mobile-menu.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -1px;
    left: 5px;
  }

  .toggle-mobile-menu.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  .toggle-mobile-menu.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 13px;
    left: 5px;
  }
  #sidebar button.toggle-mobile-menu {
    top: 0;
    right: 0;
    position: absolute;
    right: 10px;
    top: 20px;
}
.content-header-item img {
    margin-right: 5px;
}
#header .header-right .btn-group {
    display: flex;
}
#page-header-search, #page-header-loader {
    display: none;
}

ul.nav-main-header {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* width: 150px */
}
button.toggle-mobile-menu {
    background: none;
    border: none;
}
ul.nav-main-header a {
    position: relative;
    display: inline-block;
    padding: 9px 14px;
    font-weight: 600;
    line-height: 16px;
    border-radius: 3px;
    display: flex;
    font-weight: 300;
    color: white;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
ul.nav-main-header li a:hover {
    color: #ccc;
}

ul.nav-main-header li {
    position: relative;
    list-style: none;
}
ul.nav-main-header span.nav-submenu{
    padding: 9px 30px 9px 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

ul.nav-main-header span.nav-submenu{
    padding-right: 28px;
}
ul.nav-main-header a>i {
    margin-right: 8px;
}
.nav-main-header span.nav-submenu:before {
    position: absolute;
    top: 50%;
    right: 6px;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    line-height: 20px;
    font-family: FontAwesome,Font Awesome\ 5 Free,Font Awesome\ 5 Pro;
    content: "\F107";
}
.nav-main-header li {
    cursor: pointer;
}
.dropdown-menu {
    padding: 8px 0;
    padding-right: 8px;
    padding-left: 8px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #575757;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e4e7ed;
    border-radius: 2px;
}
.dropdown-menu.dropdown-menu-right {
    width: 340px;
    background: #222527;
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    border-radius: 15px;
    padding: 20px 10px;
}
.language-dropdown p {
    font-size: 16px;
    text-align: center;
    margin: 0 0 10px 0;
    padding: 5px 0;
    color: #fff;
    text-transform: uppercase;

}
.dropdown-profile img.header-profile-pic {
    width: 50px;
    height: 50px;
}
.dropdown-profile img.header-profile-pic:hover {
    opacity: 0.8;
}
.dropdown-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
}
p.dropdown-profile-name {
    font-weight: 700;
    color: white;
    text-align: center;
}

p.dropdown-profile-email {
    margin-top: 5px;
    font-size: 14px;
}
.dropdown-icon {
    width: 15px;
    height: 15px;
    filter: invert();
    margin-right: 10px;
}
.dropdown-menu.dropdown-menu-right.dropdown-profile-wrapper .dropdown-link {
    justify-content: flex-start;
    margin: 15px 0;
}
.dropdown-menu.dropdown-menu-right.dropdown-profile-wrapper .dropdown-link:hover {
    opacity: 0.8;
}
.dropdown-profile-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.dropdown-profile-inner p {
    margin: 0;
}

.dropdown-separator {
    border: none;
    border-top: 1px solid #444;
    margin: 20px 0;
}
.languages-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px 0;
}
.single-language a {
    display: flex;
    align-items: center;
    vertical-align: middle;
    color: #ffffff;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 15px;
}
.single-language a:hover {
    background: #222;
}

.single-language a img {
    margin-right: 7px;
    width: 20px;
    height: 20px;
}
#page-container.sidebar-inverse #sidebar {
    color: #e4e7ed;
    background-color: #343a40;
    box-shadow: none;
    transition: transform .26s cubic-bezier(.47,0,.745,.715);
}
.toggle-mobile-menu {
    display: none;
}

/* DASHBOARD */
.dashboard .apps-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    display: grid;
    width: 640px;
    margin: 0;
    grid-gap: 0;
}
.dashboard-page h2 {
    color: #fff;
}
.dashboard .single-page-content,
.community .single-page-content {
    width: 100%;
}
.dashboard .apps-wrapper .support-app-single {
    width: 75px;
    height: 75px;
}
.dashboard .apps-wrapper .support-app-single img {
    width: 50px;
    height: 50px;
}
.dashboard .apps-wrapper .support-app-single p {
    margin: 0;
    font-size: 14px;
    background: none;
    padding: 0;
}

.sidebar-mini-visible, .sidebar-mini-visible-b {
    display: none;
}

.dashboard-sidebar .nav-main .nav-main-heading {
    padding: 30px 18px 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .55;
}
#sidebar.dashboard-sidebar .list-no-padding a {
    padding: 9px 0 9px 15px
}
.dashboard-sidebar i.si.si-cup {
    margin-right: 10px;
}
.sidebar-inverse .dashboard-sidebar i.si.si-cup{
    color: #24c6da;
}
.dashboard-sidebar ul.list-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 150px;
    margin: 20px auto;
    padding: 0;
    width: 100px;
    text-align: center;
}

.dashboard-sidebar li.list-inline-item {
    list-style: none;
    color: white;
}

.sidebar-inverse .dashboard-sidebar li.list-inline-item a {
    color: white;
}

.dashboard-sidebar li.list-inline-item a {
    color: #2F3336;
}

a.img-link img {
    width: 50px;
    border-radius: 50px;
    margin: 0 auto;
    display: block;
    text-align: center;
}

/* MODAL */

div#modal-terms {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    outline: none;
}
div#modal-terms a {
    color: #3e96df
}
div#modal-terms.show {
    display: flex !important;
}
div#modal-terms .modal-dialog {
    width: 720px;
    height: 580px;
    color: white;
    padding: 30px;
    margin: 0 auto;
    background: #222527;
    border-radius: 20px;
    position: relative;
}

.modal-dialog .modal-content .block-content {
    overflow: auto;
    height: 100%;
}

.modal-dialog .modal-content {
    height: 100%;
    overflow: auto;
}

.modal-dialog button.btn-block-option {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    position: absolute;
    right: 10px;
    top: 15px;
    cursor: pointer;
}
.modal-dialog button.btn-block-option:hover {
    color: #ddd;
}

/* SIDEBAR CSS FROM CODEBASE */
.mobile-menu-nav i.fa.fa-tag.text-white {
    margin-right: 10px;
}
.mobile-menu-nav {
    display: none;
}

.mobile-menu-logo a {
    display: flex;
    align-items: center;
    color: white;
    padding: 10px;
    max-width: 150px;
}

button.close-mobile-menu {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    position: absolute;
    right: 0;
    top: 10px;
    right: 10px;
}

.mobile-menu-logo img {
    margin-right: 5px;
    /* margin-bottom: 10px; */
}
#sidebar .nav-main {
    margin: 0 -18px;
    padding: 0;
    list-style: none;
}

#sidebar .content-side.content-side-full {
    padding-bottom: 18px;
}

#sidebar .content-side {
    margin: 0 auto;
    padding: 18px 18px 1px;
    width: 100%;
    overflow-x: hidden;
}

#sidebar .content-header.content-header-fullrow {
    flex-direction: column;
    align-items: stretch;
}

#sidebar .bg-black-op-10 {
    background-color: rgba(0,0,0,.1)!important;
}
#sidebar .content-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 17px 18px;
    height: 68px;
}

#sidebar .nav-main a {
    position: relative;
    display: block;
    padding: 9px 18px 9px 40px;
    font-size: 14px;
    color: #2F3336;
}
.sidebar-inverse #sidebar .nav-main a {
    font-weight: 400;
    color: #ffffff;
}
.sidebar-inverse #sidebar .nav-main a:hover {
    background: #1b1b1b;
}
.sidebar-inverse #sidebar .nav-main li.open>ul {
    background-color: #111;
}
#sidebar .nav-main li.open>ul {
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #f6f7f9;
}
#sidebar .nav-main li.open>ul>li {
    opacity: 1;
    transform: translateX(0);
}

#sidebar .nav-main ul>li {
    opacity: 0;
    transition: all .2s cubic-bezier(.25,.46,.45,.94);
    transform: translateY(-15px);
}
#sidebar .nav-main ul {
    margin: 0;
    padding: 0 0 0 40px;
    height: 0;
    list-style: none;
    overflow: hidden;
}

#sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1032;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    transform:translateX(-100%) translateY(0) translateZ(0);
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    max-width: 100vw;
}

.side-trans-enabled #sidebar {
    transition: transform .26s cubic-bezier(.47,0,.745,.715)
}

.sidebar-r #sidebar {
    right: 0;
    left: auto;
    transform: translateX(100%) translateY(0) translateZ(0)
}

@media (max-width: 991.98px) {
    .sidebar-o-xs #sidebar {
        transform:translateX(0) translateY(0) translateZ(0)
    }
    .carousel-single-inner-container {
        min-height: auto;
    }
}

@media (min-width: 992px) {
    #sidebar {
        width:230px;
    }

    .sidebar-o #sidebar {
        transform: translateX(0) translateY(0) translateZ(0)
    }

    .sidebar-o.sidebar-mini #sidebar {
        overflow-x: hidden;
        transform: translateX(-176px) translateY(0) translateZ(0);
        transition: transform .26s cubic-bezier(.47,0,.745,.715)
    }

    .sidebar-r.sidebar-o.sidebar-mini #sidebar {
        transform: translateX(176px) translateY(0) translateZ(0)
    }

    .sidebar-mini.sidebar-o #sidebar .content-header,.sidebar-mini.sidebar-o #sidebar .content-side {
        width: 230px;
        transform: translateX(176px) translateY(0) translateZ(0);
        transition: transform .26s cubic-bezier(.47,0,.745,.715);
        will-change: transform
    }

    .sidebar-mini.sidebar-o #sidebar:hover,.sidebar-mini.sidebar-o #sidebar:hover .content-header,.sidebar-mini.sidebar-o #sidebar:hover .content-side,.sidebar-mini.sidebar-o.sidebar-r #sidebar .content-header,.sidebar-mini.sidebar-o.sidebar-r #sidebar .content-side {
        transform: translateX(0)
    }

    .sidebar-o.sidebar-mini #sidebar .sidebar-mini-hide {
        opacity: 0
    }

    .sidebar-o.sidebar-mini #sidebar .sidebar-mini-show {
        opacity: 1
    }

    .sidebar-o.sidebar-mini #sidebar .sidebar-mini-hidden,.sidebar-o.sidebar-mini #sidebar .sidebar-mini-hidden-b {
        display: none
    }

    .sidebar-o.sidebar-mini #sidebar .sidebar-mini-visible {
        display: inline-block
    }

    .sidebar-o.sidebar-mini #sidebar .sidebar-mini-visible-b {
        display: block
    }

    .sidebar-o.sidebar-mini #sidebar .nav-main>li.open>ul {
        display: none
    }

    .sidebar-o.sidebar-mini #sidebar:hover .sidebar-mini-hide {
        opacity: 1
    }

    .sidebar-o.sidebar-mini #sidebar:hover .sidebar-mini-show {
        opacity: 0
    }

    .sidebar-o.sidebar-mini #sidebar:hover .sidebar-mini-hidden {
        display: inline-block
    }

    .sidebar-o.sidebar-mini #sidebar:hover .sidebar-mini-hidden-b {
        display: block
    }

    .sidebar-o.sidebar-mini #sidebar:hover .sidebar-mini-visible,.sidebar-o.sidebar-mini #sidebar:hover .sidebar-mini-visible-b {
        display: none;
        opacity: 0
    }

    .sidebar-o.sidebar-mini #sidebar:hover .nav-main>li.open>ul {
        display: block
    }
}

#side-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1034;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    transform: translateX(100%) translateY(0) translateZ(0);
    -webkit-overflow-scrolling: touch;
    will-change: transform
}

.side-trans-enabled #side-overlay {
    transition: transform .26s cubic-bezier(.47,0,.745,.715)
}

.sidebar-r #side-overlay {
    right: auto;
    left: 0;
    transform: translateX(-100%) translateY(0) translateZ(0)
}

.side-overlay-o #side-overlay {
    transform: translateX(0) translateY(0) translateZ(0)
}

@media (min-width: 992px) {
    #side-overlay {
        width:320px;
        box-shadow: 0 0 25px rgba(0,0,0,.15);
        transform: translateX(110%) translateY(0) translateZ(0)
    }

    .sidebar-r #side-overlay {
        transform: translateX(-110%) translateY(0) translateZ(0)
    }

    .side-overlay-hover #side-overlay {
        transform: translateX(302px) translateY(0) translateZ(0)
    }

    .sidebar-r.side-overlay-hover #side-overlay {
        transform: translateX(-302px) translateY(0) translateZ(0)
    }

    .side-overlay-hover #side-overlay:hover,.side-overlay-o #side-overlay,.side-overlay-o.side-overlay-hover #side-overlay {
        box-shadow: 0 0 20px rgba(0,0,0,.15);
        transform: translateX(0) translateY(0) translateZ(0)
    }
}

#page-container>#main-container .content,#page-container>#page-footer .content,#page-container>#page-header .content,#page-container>#page-header .content-header {
    max-width: 1690px
}


/* PAGE CONTAINER CSS FROM CODEBASE */

#page-container {
    margin: 0 auto;
    width: 100%;
    min-width: 320px;
    /* min-height: 100vh; */
    position: relative;
}

#page-footer {
    /* position: absolute; */
    bottom: 0;
    width: 100%;
}

#page-container>#main-container .content,#page-container>#page-footer .content,#page-container>#page-header .content,#page-container>#page-header .content-header {
    max-width: 1690px
}

@media (min-width: 1200px) {
    #page-container.main-content-narrow>#main-container .content,#page-container.main-content-narrow>#page-footer .content,#page-container.main-content-narrow>#page-header .content,#page-container.main-content-narrow>#page-header .content-header {
        width:92%
    }
}

#page-container.main-content-boxed>#main-container .content,#page-container.main-content-boxed>#page-footer .content,#page-container.main-content-boxed>#page-header .content,#page-container.main-content-boxed>#page-header .content-header {
    max-width: 1200px
}

@media (min-width: 992px) {
    #page-container.page-header-modern #page-header {
        background-color:#f0f2f5;
        box-shadow: none!important
    }

    #page-container.page-header-modern #page-header>.content-header {
        padding-top: 32px;
        padding-bottom: 2px
    }
}

#page-container.page-header-inverse #page-header {
    color: #cbd2dd;
    background-color: #343a40
}

#page-container.page-header-glass #page-header {
    position: absolute;
    background-color: transparent
}

#page-container.page-header-glass.page-header-fixed #page-header {
    transition: background-color .2s linear;
    will-change: background-color;
    box-shadow: none
}

#page-container.page-header-glass.page-header-fixed.page-header-scroll #page-header {
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,.02)
}

#page-container.page-header-glass.page-header-fixed.page-header-scroll.page-header-inverse #page-header {
    background-color: #343a40;
    box-shadow: none
}

/* #page-container.page-header-glass #main-container,#page-container.page-header-glass.page-header-fixed #main-container {
    padding-top: 0
} */

#page-container.page-header-fixed #page-header {
    position: fixed;
    box-shadow: 0 5px 10px rgba(0,0,0,.02)
}

#page-container.page-header-fixed #page-header>.content-header {
    padding-top: 17px;
    padding-bottom: 17px
}

#page-container.page-header-fixed.page-header-inverse #page-header {
    box-shadow: none
}
/*
#page-container.page-header-fixed #main-container {
    padding-top: 68px
} */

#page-container.page-header-fixed #page-header,#page-container.page-header-glass #page-header {
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    min-width: 320px;
    max-width: 100%;
    width: auto
}

@media (min-width: 992px) {
    #page-container.page-header-fixed.sidebar-o #page-header,#page-container.page-header-glass.sidebar-o #page-header {
        left:230px
    }

    #page-container.page-header-fixed.sidebar-r.sidebar-o #page-header,#page-container.page-header-glass.sidebar-r.sidebar-o #page-header {
        right: 230px;
        left: 0
    }

    #page-container.page-header-fixed.sidebar-o.sidebar-mini #page-header,#page-container.page-header-glass.sidebar-o.sidebar-mini #page-header {
        left: 54px
    }

    #page-container.page-header-fixed.sidebar-r.sidebar-o.sidebar-mini #page-header,#page-container.page-header-glass.sidebar-r.sidebar-o.sidebar-mini #page-header {
        right: 54px;
        left: 0
    }
}

@media (min-width: 992px) {
    #page-container.page-header-modern #sidebar {
        box-shadow:5px 0 10px #e4e7ed
    }

    #page-container.page-header-modern.sidebar-r #sidebar {
        box-shadow: -5px 0 10px #e4e7ed
    }
}

#page-container.sidebar-inverse #sidebar {
    color: #e4e7ed;
    background-color: #222527;
    box-shadow: none
}

#page-container.sidebar-inverse #sidebar .content-side-user {
    background-color: #2d3238
}

#page-container.side-scroll #side-overlay,#page-container.side-scroll #sidebar {
    overflow-y: visible
}

@media (min-width: 992px) {
    #page-container.side-scroll #sidebar .content-header,#page-container.side-scroll #sidebar .content-side {
        width:230px!important
    }

    #page-container.side-scroll #side-overlay .content-header,#page-container.side-scroll #side-overlay .content-side {
        width: 320px!important
    }
}

@media (min-width: 992px) {
    #page-container.sidebar-o {
        padding-left:230px
    }

    #page-container.sidebar-r.sidebar-o {
        padding-right: 230px;
        padding-left: 0
    }

    #page-container.sidebar-mini.sidebar-o {
        padding-left: 54px
    }

    #page-container.sidebar-mini.sidebar-o.sidebar-r {
        padding-right: 54px;
        padding-left: 0
    }
}

@media print {
    #main-container,#page-container {
        padding: 0!important
    }

    #page-footer,#page-header,#page-loader,#side-overlay,#sidebar,.block-options {
        display: none!important
    }
}

/* LOGIN PAGE */

.login-page-inner-wrapper {
    display: grid;
    align-items: center;
    grid-template-columns: 65% 35%;
    height: 100%;
}
.login-page {
    width: 100%;
    height: 100vh;
    background: url(../images/site/sumo.svg) center no-repeat;
    background-color: #111;
    background-position: center center;
    background-size: 100%;
}
.login-left-side {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    padding: 0 0 50px 50px;
    font-size: 14px;
    background: url(/images/site/register-footer-bg.svg) no-repeat;
    background-position: bottom left;
}
.login-right-side {
    background: white;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 50px;
    display: flex;
    align-items: center;
    box-shadow: -20px 0 150px #000;
}
.login-left-side p {
    margin: 15px 0 0;
    color: white;
    font-size: 14px;
}
.login-left-side a {
    font-weight: 700;
    color: white;
}
.login-left-side a img {
    margin-right: 10px;
}
.login-left-side a.login-left-logo {
    display: flex;
    align-items: center;
}

.socials-flex {
    display: flex;
    justify-content: space-between;
    width: 250px;
    align-items: center;
    margin: 0 auto;
}
.btn-social {
    border-radius: 100px;
    border: none;
    margin-bottom: 10px;
    font-size: 14px;
    display: block;
    text-transform: capitalize;
    width: 240px;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.socials-flex .btn-social span {
    border: none;
    position: initial;
}
.sign-in-socials p {
    margin: 20px 0 10px 0;
    text-align: center;
    font-size: 14px;
    color: #666;
}
a.link-effect {
    font-size: 14px;
}
.login-secondary-actions {
    margin: 30px 0;
    font-size: 14px;
}
.login-secondary-actions .link-effect {
    margin-right: 25px;
    color: #55acee;
    font-weight: 700;
}

.login-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-secondary-actions .link-effect:first-child {
    color: #3ab23a;
}
.form-material.floating>label {
    color: grey;
    font-size: 14px;
}
.form-material.floating.open>label, .form-material>.form-control:focus+label, .form-material>label {
    color: #888;
}
.profile-info .form-material.floating.open>label,
.profile-info .form-material>.form-control:focus+label,
.profile-info .form-material>label {
    color: #C3CED7;
}
.login-right-side img {
    width: 150px;
    height: auto;
}
.login-right-side h1 {
    font-size: 24px;
    color: #2F3336;
    margin: 20px 0 10px;
}

.login-right-side .login-subtitle {
    font-size: 16px;
    color: #888;
    font-weight: 400;
    margin: 0 0 10px 0;
}
.login-btn {
    margin: 0 auto;
    display: block;
    text-transform: none;
}
.remember-me {
    font-size: 14px;
    font-weight: 400;
    color: grey;
}
.remember-me-forgot-password {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    color: grey;
}
.remember-me-forgot-password a {
    color: #3e96df;
    font-weight: 800;
}
.create-account {
    margin: 0;
    display: block;
    text-align: center;
}
.create-account .sumo-btn {
    background: #222527;
    text-transform: capitalize;
}
.create-account .sumo-btn {
    padding: 10px 15px;
}
.create-account .sumo-btn:hover {
    background: #373b3e;
    color: white;
}
.login-form-container {
    width: 100%;
    height: inherit;
}
.login-right-side hr {
    margin: 20px 0;
    border: none;
    border-top: 1px solid #eee;
}
.col-12.two-columns {
    display: flex;
    justify-content: space-between;
}
.show {display: block;}

.single-page-content.news-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 100px;
}

.single-news {
    max-width: 480px;
    align-items: center;
    grid-gap: 50px;
    margin: 0 auto;
}
.single-news-thumbnail img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
}
.single-news-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 10px;
}
.single-news-content p,
.single-news-content h2 {
    margin: 5px 0 0 0;
}
h2.news-title {
    text-align: left;
}
p.news-date {
    color: grey;
    font-size: 14px;
    margin: 0;
}
.news-info {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

span.news-category {
    margin-right: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: #3e96df;
}
#page-container.sidebar-o nav#sidebar {
    display: none;
}

#page-container.sidebar-o {
    padding: 0;
}
.pricing-offer-message {
    margin: 50px 0;
    color: #ffffff
}
/* dashboard */

.dashboard h1 {
    margin: 0 0 50px 0;
    font-size: 36px
}
.dashboard h2 {
    text-align: left;
}
.dashboard .community-nav {
    margin-top: 50px;
}
.dashboard-categories {
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.single-page.our-story {
    background: #fff;
}
.api-page .single-page-header ,
.download-page .single-page-header,
.faq-page .single-page-header,
.contact-us .single-page-header  {
    background-color: #C3CED733;
}
.works-page .single-page-header {
    background-color: #222527;
    background-image: url(/images/site/works-hero.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
.single-page.profile .single-page-header {
    background: #222527;
    background-image: url(/images/site/profile-hero.svg);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 50px 0;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}
.api-page .single-page-header,
.contact-us .single-page-header {
    background-image: url(/images/site/api-hero.svg);
}
.download-page .single-page-header, 
.faq-page .single-page-header {
    background-image: url(/images/site/download-hero.svg);
}
.our-story .single-page-header {
    background-image: url(/images/site/about-hero.svg);
}
.edit-profile .single-page-header {
    background-image: url(/images/site/edit-profile-hero.svg);
}
.works-page .single-page-header h1 {
    color: #fff;
}
.work-types-nav {
    color: grey;
    text-align: right;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    gap: 30px;
    border-bottom: 1px solid #2f3336;
    height: 50px;
    display: flex;
    align-items: center;
}
.work-types-nav a {
    color: #fff;
    opacity: 0.5;
}

.work-types-nav a.selected {
    font-weight: bold;
    opacity: 1;
}
.works-page .works-grid,
.works-page .single-page-content  {
    background: #222527;
    max-width: none;
    width: 100%;
    max-width: 1280px;
}

.works-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
}

.single-work .work-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
}
.single-work-footer {
    display: grid;
    align-items: center;;
    grid-template-columns: 30px auto auto;
    grid-gap: 0 10px;
    padding: 10px;
}

.single-work-bottom img {
    width: 15px;
    height: 15px;
    filter: invert(1);
}

.project-preview-views, .single-work-comments, .single-work-likes {
    display: flex;
    align-items: center;
}

.single-work-bottom span {
    font-size: 14px;
    margin-left: 5px;
    margin-right: 5px;
    color: #fff;
}

.single-work label,
.dashboard-categories label {
    color: white;
    font-size: 13px;
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: -3px 3px 5px rgba(0,0,0,.1);
}
.single-work label img,
.dashboard-categories label img {
    margin-right: 5px;
    width: 15px;
    height: 15px;
    display: inline-block;
    filter: invert(1);
}
.dashboard-categories label i {
    margin-right: 5px;
}
.single-work-actions {
    display: flex;
    position: absolute;
    margin: 0;
    display: none;
    padding: 10px;
    background: #222527;
    border-radius: 15px;
    z-index: 9999999999999;
    box-shadow: 0 0 10px rgba(0,0,0,.4)
}
.work-title {
    text-align: left;
    font-weight: bold;
    margin: 0;
    color: white;
    font-size: 14px;
}
.work-title:hover {
    text-decoration: underline;
}
button.edit-work {
    background: #373b3e;
    color: white;
    margin: 0 10px;
}

button.delete-work {
    background: red;
    color: white;
}
.work-image {
    position: relative;
    cursor: pointer;
}
.single-work .work-image img.work-image-app {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 30px;
    height: 30px;
}
.single-work .avatar {
    width: 30px;
    height: 30px;
    border-radius: 30px;
}
.single-work {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
    background: #1a1a1a;
    border-radius: 15px;
    display: block;
    width: auto;
    min-width: 320px;
}
.dashboard-categories label {
    margin: 0 5px;
    cursor: pointer;
}
.dashboard-btn {
    padding: 3px 10px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: -3px 3px 5px rgba(0,0,0,.1);
}
.dashboard-btn .fa {
    margin-right: 5px;
}
.dashboard p.work-date-time {
    font-size: 12px;
    margin: 0;
    color: #ccc;
    display: inline-block;
    text-align: left;
}
.single-work-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dashboard-btn:hover {
    background: #222;
}
.single-work-actions-toggle button {
    border-radius: 40px;
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-family: Quicksand;
    font-size: 15px;
}

.single-work-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.single-work-bottom i {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    font-size: 18px;
    text-align: center;
    margin: 0;
    cursor: pointer;
}
.single-work-bottom .fa.fa-ellipsis-v:hover {
    background: #373b3e;
}
/* .single-work-bottom i:hover + .single-work-actions{
    display: block;
} */

.single-work-actions-toggle {
    /* position: relative;
    z-index: 9999999999999;
    display: block; */
}


/* SINGLE WORK VIEW */

.project-preview-view-wrapper {
    max-width: 1280px;
    background: #373b3e;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    padding: 20px;
    align-items: flex-start;
    margin: 50px auto;
    border-radius: 15px;
    gap: 20px;
}
.single-page.project-preview-view {
    padding: 0 20px;
}
.single-page.project-preview-view #item a {
    color: #777;
}
.single-page.project-preview-view #item a:hover {
    color: #c3ced7;
}
.project-preview-artwork {
    display: flex;
}
p.project-description {
    text-align: left;
}
p.project-date {
    text-align: left;
    margin: 0;
    font-size: 14px;
    color: #888;
}

.project-tags a,
.project-tags span {
    text-decoration: none;
    color: inherit;
    background: #373b3e;
    padding: 5px 8px;
    border-radius: 5px;
    margin: 0 10px 0 0;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.project-tags a:hover,
.project-tags span:hover {
    background: #444;
}
.project-tags {
    display: flex;
    margin: 20px 0;
}

.project-tags a:before {content: "#";}
.project-tags span:before {content: "#";}
.project-preview-activity textarea {
    outline: none;
    text-align: left;
    margin: 0;
    border: 1px solid #444;
    background: #222527;
    color: white;
    border-radius: 15px;
    width: 100%;
    height: 100px;
    font-size: 18px;
    padding: 20px;
}
.project-preview-single-action {
    border: none;
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #222527;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
}
.project-preview-single-action:hover {
    background: #3c4145;
}
.project-preview-single-action p{
    color: #fff;
}
.project-preview-single-action img {
    width: 15px;
    height: 15px;
    filter: invert(1);
    margin-right: 10px;
}

.project-preview-actions {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    grid-gap: 0 10px;
    margin-left: 10px;
}
.project-preview-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    background: #222;
    border-radius: 20px;
    width: 100%;
    max-width: 1024px;
}

.project-preview-author a {
    display: flex;
    align-items: center;
}
.project-preview-author p {
    color: #fff;
}
.project-preview-author img,
.public-profile-author img {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    margin: 0 15px 0 0;
}
.project-preview-author img:hover, .project-preview-author p:hover {
    opacity: 0.7;
}
.project-preview-author button,
.public-profile-author button {
    margin: 0 20px;
}
.project-preview-artwork img {
    object-fit: cover;
    cursor: pointer;
    max-width: 100%;
    max-height: 100%;
    border-radius: 15px;
}

#comment {
    resize: vertical;
    min-height: 80px;
    max-height: 500px;
}

.project-preview-comment-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.project-preview-comment-header img {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin-right: 10px;
}
.project-preview-comment-header p {
    font-weight: bold;
    margin: 0;
    font-size: 14px;
    color: #fff;
}
.project-preview-comment-header span {
    position: absolute;
    right: 0;
    font-size: 12px;
    color: #666
}
.project-preview-single-comment {
    background: #1c1c1c;
    border-radius: 15px;
    padding: 10px;
    margin: 10px auto;
}

.project-preview-comment-text p {
    text-align: left;
    margin: 5px 0;
    font-size: 14px;
    padding-left: 40px;
    color: #fff;
}

.public-profile-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-left: 50px;
    color: #fff;
}
.public-profile-single-detail {
    align-items: center;
    display: flex;
    margin: 0 20px 0 0;
}
p.public-profile-bio {
    color: #fff;
    text-align: left;
    margin: 5px 0;
    max-width: 640px;
}
.public-profile-hr {
    margin: 50px 0;
    border: none;
    border-bottom: 1px solid #444;
}
.public-profile-picture {
    width: 200px;
    height: 200px;
    border-radius: 200px;
    object-fit: cover;
}
.public-profile-header {
    display: grid;
    grid-template-columns: 200px auto;
    align-items: center;
    width: 100%;
}
.public-profile-author h1 {
    font-size: 36px;
    margin: 0;
    font-weight: bold;
    color: #fff;
}
.project-preview-single-detail {
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: #fff;
}
.project-preview-single-detail p {
    color: #fff;
}

.project-preview-single-detail img {
    width: 20px;
    height: 20px;
    filter: invert(1);
    margin-right: 10px;
}

.work-details {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.work-details label {
    font-weight: bold;
    margin-right: 20px;
    padding: 15px 0;
}
p.project-preview-title {
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    margin: 0;
    color: #fff;
}

.project-preview-author,
.public-profile-author {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.project-preview-author button,
.public-profile-author button {
    text-transform: capitalize;
    padding: 5px 20px;
}
.project-preview-details {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.share-modal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.share-modal-header button.btn-block-option {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

div#share-modal {
    width: 100%;
    max-width: 360px;
    height: 320px;
    padding: 30px;
    background: #121212;
    color: #fff;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
    display: none;
    flex-direction: column;
    justify-content: space-between;
}
.close-share-modal {
    outline: none;
}
.share-modal-header h4 {
    color: #fff;
    font-size: 24px;
    margin: 0;
}


.share-modal-form-element label {
    color: #ccc;
    margin-bottom: 20px;
    font-weight: bold;
}

.share-modal-form-element {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 0 20px 0;
}
.share-modal-form-element:last-child {
    margin: 0;
}

.share-modal-form-element input {
    background: none;
    border: 1px solid #ccc;
    color: #fff;
    border-radius: 15px;
    padding: 10px 20px;
    font-size: 16px;
    width: 100%;
    outline: none;
}

.share-modal-form-element .socials-flex {
    margin: 0;
}
#share-modal hr {
    border: none;
    border-top: 1px solid #222;
    margin: 0;
}
.public-profile-single-detail img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    filter: invert()
}

.project-preview-details hr {
        border: none;
        border-top: 1px solid #2F3336;
        margin: 25px 0;
}


/* EDIT PROFILE PAGE */

.edit-profile-profile-wrapper form.edit-profile-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}

.edit-profile-profile-wrapper form.edit-profile-form .form-group:nth-child(5) {
    grid-column: 1/3;
}

.edit-profile-profile-wrapper form.edit-profile-form .form-group:nth-child(5) textarea {
    height: 100px;
    padding: 10px;
}

form.edit-profile-form input,
form.edit-profile-form input:focus,
form.edit-profile-form textarea,
form.edit-profile-form textarea:focus {
    color: white;
}
form.edit-profile-form label {
    color: #C3CED7;
}

.edit-profile .single-page-content {
    display: block;
}
.edit-profile .single-page-header {
    background-color: #232527;
}
.edit-profile .single-page-header h1 {
    color: #fff;
}

.edit-profile-content {
    display: block;
}

.edit-profile-left nav ul {
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    gap: 30px;
    border-bottom: 1px solid #2f3336;
}
.edit-profile-right.edit-profile-subscription-wrapper h3, .edit-profile-right.edit-profile-subscription-wrapper p {
    color: #fff;
    text-align: center;
}

.edit-profile-left nav ul li {
    list-style: none;
    margin: 15px 0;
    text-align: left;
    padding-left: 10px;
    cursor: pointer;
}
.edit-profile-left nav ul li a{
    color: grey;
}
.edit-profile-left nav ul li a:hover {
    color: #eee;
}
.edit-profile-subscription-wrapper h3 {
    text-align: left;
}
.edit-profile-left nav h2 {
    text-align: left;
    margin: 0;
}
.edit-profile form .form-material>.form-control {
    background: #2f3336;
    height: 42px;
    padding: 0 15px;
    border-radius: 10px;
    color: white;
    border: none;
    outline: none;
    box-shadow: none;
    width: 100%;
}
form.edit-profile-form button {
    width: max-content;
    margin: 0 auto;
    grid-column: 1/3;
}
.edit-profile-right h1 {
    margin: 0 0 40px 0;
    grid-column: 1/3;
}
.edit-profile-profile-wrapper{
    display: grid;
    grid-template-columns: 300px auto;
    grid-gap: 0 30px;
}
.edit-profile-password-wrapper {
    display: block
}
.edit-profile-password-wrapper form {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.edit-profile-header {
    display: flex;
    flex-direction: column;
}
.edit-profile-left nav ul li.edit-profile-active-menu-item a{
    font-weight: bold;
    color: white;
}

.edit-social-single-inner {
    display: grid;
    grid-gap: 10px;
    justify-content: center;
}

a.btn-connect-social {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: initial;
}

a.btn-connect-social .fa {
    position: initial;
    width: 50px;
    padding: 0 0 0 10px;
}
a.btn-connect-social p {
    margin: 0;
    padding: 0 10px;
    text-align: left;
    justify-self: flex-start;
}

.import-to-wrapper img {
    width: 25px;
    height: 25px;
    margin: 0 10px 0 0;
}

.import-to-wrapper .sumo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    margin: 5px 0;
}
.edit-profile-header img.public-profile-picture {
    margin: 0 auto 20px auto;
}

.inner-single-work-footer {
    display: flex;
}
.single-work-footer-action{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.single-work-footer-action .sumo-btn{
    width: 40px;
    height: 40px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* */

.hero-home {
    height: calc(100vh - 40px);
    padding: 0 50px;
    min-height: 800px;
}

.hero-home .hero-texts {
    margin: 0;
}

.hero-home .buttons-wrapper {
    text-align: left;
    display: block;
}

.hero-home a.sumo-btn {
    margin: 0;
}
/* .hero-pro-ad a,
.hero-home a.sumo-btn {
    padding: 10px 60px;
} */
div#home-carousel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 20px;
}

/* 404 ERROR PAGE */

body.error-page {
    padding: 0;
    margin: 0;
    background: linear-gradient(-45deg, #b8c2cb, #fff);
    height: 100vh;
}
.error-page .error-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.error-page h1 {
    color: #2F3336;
    text-align: center;
    font-size: 72px;
    margin: 20px 0 0 0;
}
.error-page a.error-link {
    color: #2F3336;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    display: block;
    margin: 0 0 10px 0;
}
.error-page .error-app-single {
    width: 80px;
    height: 80px;
    position: relative;
    border: none;
    flex-direction: column;
}
.error-page .error-app-single:hover {
    background: none;
}
.error-page p.error-page-title {
    font-size: 24px;
    text-align: center;
}
p.inspiration-not-found {
    font-size: 24px;
}
.error-page .apps-wrapper {
    margin-top: 70px;
    margin-bottom: 40px;
    padding: 0 15px;
    justify-content: center;;
}

.error-page .error-app-single img {
    width: 80px;
    height: 80px;
    margin: 0;
}
.error-page p {
    font-size: 20px;
    color: #2F3336;
    margin: 0;
}
.error-page .error-app-single p {
    font-size: 13px;
    background: none;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
}
.error-page .redirect-link {
    color: #3e96df;
    margin: 100px 0 0 0;
}
.support-youtube img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-radius: 15px;
}
a.support-youtube {
    display: flex;
    align-items: center;
    width: max-content;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50px;
    padding: 5px 15px;
    margin: 0 auto;
}

a.support-youtube p {
    color: white;
    font-weight: bold;
    margin: 0 0 0 15px;
}
a.support-youtube:hover {
    background: #444;
}

.support-app-single:hover {
    background: #eee;
}
/* PROFILE SCREEN */

.profile-picture-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.profile-picture-wrapper img {
    border-radius: 100px;
    width: 150px;
    height: 150px;
}
.profile-picture-container {
    position: relative;
}
img.edit-profile-pic {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 10px;
    right: 10px;
    object-fit: cover;
    background: white;
    padding: 4px;
    border-radius: 5px;
    cursor: pointer;
}
img.edit-profile-pic:hover {
    background: #ddd;
}
#profile-section {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    max-width: 920px;
    align-items: center;
    margin: 0 auto;
}
.profile-page .single-page-content {
    display: block;
}

.profile-picture-wrapper p.profile-username {
    font-size: 20px;
    font-weight: 700;
    margin: 20px 0 0 0;
}
.profile-picture-wrapper p.profile-email {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}
.profile-info form {
    max-width: 320px;
    margin: 0 auto;
}
.profile-info button.sumo-btn.signin-btn {
    margin: 0 auto;
}

.single-page-content.news-wrapper {
    max-width: 1024px;
}

.download-app-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    margin-top: 50px;
    grid-gap: 50px;
}

.download-single-app-wrapper.download-sumopaint img {
    background-image: url(/images/site/paintprobg.svg);
}
.download-single-app-wrapper.download-sumotunes img {
    background-image: url(/images/site/tunesprobg.svg);
}
.download-single-app-wrapper.download-sumoaudio img {
    background-image: url(/images/site/audioprobg.svg);
}
.download-single-app-wrapper.download-sumo3d img {
    background-image: url(/images/site/3dprobg.svg);
}
.download-single-app-wrapper.download-sumocode img {
    background-image: url(/images/site/codeprobg.svg);
}
.download-single-app-wrapper.download-sumovideo img {
    background-image: url(/images/site/videoprobg.svg);
}
.colored-shadow-photo {
    background-image: url(/images/site/photoprobg.svg);
}
.colored-shadow-paint {
    box-shadow: -10px 10px 0px #2daace
}
.colored-shadow-tunes {
    box-shadow: -10px 10px 0px #e5ab42;
}
.colored-shadow-audio {
    box-shadow: -10px 10px 0px #673ab7;
}
.colored-shadow-3d {
    box-shadow: -10px 10px 0px #3389c9;
}
.colored-shadow-code {
    box-shadow: -10px 10px 0px #20cc71;
}
.colored-shadow-video {
    box-shadow: -10px 10px 0px #c82f2e;
}
.colored-shadow-photo {
    box-shadow: -10px 10px 0px #30baaa;
}
.colored-shadow-pixel {
    box-shadow: -10px 10px 0px #d960cf;
}
.colored-shadow-paint-right {
    box-shadow: 10px 10px 0px #2daace
}
.colored-shadow-tunes-right {
    box-shadow: 10px 10px 0px #e5ab42;
}
.colored-shadow-audio-right {
    box-shadow: 10px 10px 0px #673ab7;
}
.colored-shadow-3d-right {
    box-shadow: 10px 10px 0px #3389c9;
}
.colored-shadow-code-right {
    box-shadow: 10px 10px 0px #20cc71;
}
.colored-shadow-video-right {
    box-shadow: 10px 10px 0px #c82f2e;
}
.colored-shadow-photo-right {
    box-shadow: 10px 10px 0px #30baaa;
}
.colored-shadow-pixel-right {
    box-shadow: 10px 10px 0px #d960cf;
}
.download-single-app-wrapper img {
    width: 320px;
    height: auto;
    border-radius: 15px;
    margin-bottom: 20px;
}
.download-single-app-wrapper h4 {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    text-align: left;
    margin: 0 auto 0 auto;
    max-width: 320px;
    color: #2F3336;
}
.download-single-app-wrapper p {
    margin: 10px;
    max-width: 320px !important;
    text-align: left !important;
    color: #2F3336;
}
.download-zip-wrapper {
    margin-top: 50px;
    font-weight: bold;
}

.apps-page-single p.hero-subtitle {
    text-align: left;
}
.apps-page-single .single-page-hero svg {
    display: none;
}
.single-page-header.apps-page-header  {
    background: url(/images/site/sumo-tools3.png);
    background-color: #111;
    background-size: cover;
    background-position: inherit;
}
.apps-page-header h1 {
    text-shadow: 0 0 15px #000, 0 0 10px #000;
    font-size: 64px;
}

.apps-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: 100px auto;
    grid-gap: 100px 50px;
}

.apps-page-single {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
}

.single-page.apps-page * {
    color: white;
}

.apps-page-single img {
    height: 300px;
    width: auto;
    margin-bottom: 10px;
}
.apps-page-single p.hero-description {
    min-height: 120px;
}

.apps-page-single .buttons-wrapper .sumo-btn {
    margin: 0 20px 0px 0;
}

div#edu-landing-page {
    background: white;
    height: 100%;
}
table.edu-table {
    border-radius: 15px;
    border-collapse: collapse;
    width: 100%;
    margin: 0;
}

table.edu-table thead {
    background: #EDEFF5;
}

table.edu-table th {
    padding: 7px 30px;;
    height: 100%;
}

table.edu-table tr td {
    padding: 5px 10px;
    text-align: center;
}

table.edu-table tr td:first-child {
    text-align: left;
    padding-left: 20px;
}
table.edu-table th,
table.edu-table td {
    color: #434343;
    text-align: center;
}

table.edu-table, tr, th, td {
    border: 1px solid #ccc;
}
table.edu-table tr td:last-child {
    font-weight: bold;
}
#edu-landing-page h1 {
    font-size: 64px;
    margin: 0;
    color: #434343;
    display: flex;
    align-items: center;
}
.edu-hero-text p,
.edu-column-text p {
    max-width: 500px;
    font-size: 18px;
    color: #434343;
    line-height: 24px;
}
.edu-btn {
    background: #FDA52C;
    border-color: #FDA52C;
    margin: 0;
    border: 2px solid #FDA52C;
    text-align: center;
}
.edu-btn:hover {
    background: #ffb34a;
    border-color: #ffb34a;
    border: 2px solid #ffb34a;
}
.edu-black-btn {
    background: none;
    color: #434343;
    border: 1px solid #434343;
}
.edu-black-btn:hover {
    background: #fafafa;
    color: #434343;
    border: 1px solid #434343;
}
.edu-white-btn{
    background: white;
    border-color: white;
    color: #434343;
}
.edu-white-btn:hover {
    background: #eee;
    border-color: #eee;
}
.edu-amount-given-btn {
    background: none;
    color: orange;
}
.edu-amount-given-btn:hover {
    background: rgb(255 165 0 / 10%);
    color: orange;
}
.edu-hero {
    min-height: calc(100vh - 40px);
    /* max-height: calc(100vh - 40px); */
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    margin: 0 auto;
    background: white;
    padding: 50px;
    align-items: center;
    max-width: 1280px;
    padding: 0;

}
.edu-hero .edu-hero-text {
    margin: 0;
}
.edu-section {
    width: 100%;
    background: #eee;
    padding: 50px;
}
.edu-box-container {
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,.2)
}
.edu-two-columns {
    display: flex;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    height: auto;
    align-items: center;
}

.edu-white-container {
    background: white;
    max-width: 600px;
    height: 100%;
    padding: 50px;
}

.edu-photo-container {
    display: flex;
}
.edu-image {
    border-radius: 20px;
}
.edu-photo-container img {
    width: 100%;
    max-width: 600px;
    align-self: flex-start;
}

.edu-section h3 {
    font-size: 36px;
    padding: 20px;
    text-align: center;
    margin: 0px auto 50px;
    position: relative;
    color: #434343
}
.green-corner-frame {
    background: linear-gradient(to right, #ACDDE8 7px, transparent 7px) 0 0,
    linear-gradient(to right, #ACDDE8 7px, transparent 7px) 0 100%,
    linear-gradient(to left, #ACDDE8 7px, transparent 7px) 100% 0,
    linear-gradient(to left, #ACDDE8 7px, transparent 7px) 100% 100%,
    linear-gradient(to bottom, #ACDDE8 7px, transparent 7px) 0 0,
    linear-gradient(to bottom, #ACDDE8 7px, transparent 7px) 100% 0,
    linear-gradient(to top, #ACDDE8 7px, transparent 7px) 0 100%,
    linear-gradient(to top, #ACDDE8 7px, transparent 7px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

.edu-box-container p,
.edu-second-section-bottom-text {
    font-size: 18px;
    color: #434343;
    line-height: 24px;
}

.edu-section-green {
    background: #2E808D;
    position: relative;
}
.edu-section-darkgreen {
    position: relative;
    background: #3d5664;
}
.edu-section-green .edu-two-columns,
.edu-section-darkgreen .edu-two-columns {
    width: 1170px;
    align-items: flex-start;
    margin: 50px auto;
}
.edu-hero-image img {
    width: 100%;
    transform: scale(1.4) translateX(30px);
    pointer-events: none;
}
.edu-laptop{
    height: 100%;
    max-width: 50%;
}
.edu-column-image {
    max-width: 50%;
}
.edu-column-image img {
    width: 100%;
}
.edu-laptop img {
    max-height: 500px;
}


.edu-section-green .edu-column-text p,
.edu-section-darkgreen .edu-column-text p {
    max-width: 480px;
    font-size: 20px;
    line-height: 28px;
    color: white;
    margin-top: 0;
}
.edu-section-green .edu-column-text p:first-child {
    margin-top: 0;
}
.edu-section-green .edu-column-image img,
.edu-section-darkgreen .edu-column-image img {
    max-width: 1200px;
    height: 100%;
    width: 100%;

}
.edu-section-green .edu-column-image.edu-laptop img {
    max-width: 1200px;
    height: 100%;
    width: auto;
}
.edu-section.edu-section-green h2,
.edu-section.edu-section-darkgreen h2 {
    padding: 20px 10px;
    color: white;
    font-size: 36px;
    text-align: center;
    max-width: 1170px;
    margin: 0 auto;
    margin-top: 50px;
}
.orange-corner-frame {
    background: linear-gradient(to right, #FAD558 7px, transparent 7px) 0 0,
    linear-gradient(to right, #FAD558 7px, transparent 7px) 0 100%,
    linear-gradient(to left, #FAD558 7px, transparent 7px) 100% 0,
    linear-gradient(to left, #FAD558 7px, transparent 7px) 100% 100%,
    linear-gradient(to bottom, #FAD558 7px, transparent 7px) 0 0,
    linear-gradient(to bottom, #FAD558 7px, transparent 7px) 100% 0,
    linear-gradient(to top, #FAD558 7px, transparent 7px) 0 100%,
    linear-gradient(to top, #FAD558 7px, transparent 7px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
}

.edu-two-columns-floating {
    display: flex;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    align-items: center;
}
.edu-floating-column {
    max-width: 600px;
    display: flex;
    flex-direction: column;
}
.edu-floating-column img {
    width: 100%;
}
.edu-white-container.edu-floating-column {
    padding: 0;
}
.edu-floating-text {
    padding: 50px;
}
.edu-second-section h3 {
    max-width: 720px;
    margin: 50px auto;
}
.edu-second-section-bottom-text {
    text-align: center;
    max-width: 1170px;
    margin: 0 auto
}
.edu-second-section-bottom-images img {
    width: 100%;
}
.edu-section.edu-section-darkgreen.edu-third-section h2 {
    max-width: 640px;
}
.edu-section.edu-section-darkgreen.edu-third-section img:not(.edu-separator) {
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.edu-separator {
    box-shadow: none;
    position: absolute;
    width: 120px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -1px;
}
.edu-big-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    max-width: 1280px;
    margin: 0 auto;
}
.edu-big-box-single-element:first-child {
    grid-column: 1/3;
}

.edu-fourth-section {
    background: #eee;
}
.edu-fourth-section .edu-box-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    grid-gap: 150px;
    background: white;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    top: -150px;
}
.edu-section.edu-section-green.edu-apps-free-use {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 100px;
}

.edu-section.edu-section-green.edu-apps-free-use h4 {
    color: #FDA52C;
    font-size: 24px;
    margin: 40px 0 0 0;
}

.edu-section.edu-section-green.edu-apps-free-use p {
    color: white;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.anyone-can-start-using-sumo-wrapper img {
    max-width: 600px;
    height: auto;
}
.anyone-can-start-using-sumo-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1220px;
    margin: 50px auto;
}
.anyone-can-start-using-sumo-texts {
    padding-left: 30px;
}
.edu-section.edu-section-green.edu-apps-free-use .anyone-can-start-using-sumo-texts p {
    text-align: left;
}

.edu-column-text.anyone-can-start-using-sumo-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}
ul.edu-app-list {
    display: flex;
    max-width: 1024px;
    margin: 10px auto 0;
    width: 100%;
}

ul.edu-app-list li a img {
    width: 70px;
    height: 70px;
    margin: 0 auto;
}

ul.edu-app-list li p {
    line-height: 26px;
}
ul.edu-app-list li {
    list-style: none;
    margin: 0 auto;
    text-align: center;
}
ul.edu-app-list li:hover {
    opacity: 0.9;
}
form.edu-form-newsletter input, form.edu-form-newsletter textarea {
    border-radius: 10px;
    border: none;
    background: #b8c2cb;
    color: white;
    outline: none;
}
.edu-hero form.edu-form-newsletter input {
    background: #222527;
}
.support-page form.edu-form-newsletter input {
    color: #222527;
}

form.edu-form-newsletter h4 {
    color: white;
    text-align: center;
    font-size: 20px;
    margin: 0 auto 50px;
}

form.edu-form-newsletter {
    display: grid;
    grid-gap: 20px;
    justify-content: center;
    align-items: center;
}

form.edu-form-newsletter input,
form.edu-form-newsletter textarea {
    padding: 10px !important;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    outline: none;
    border-radius: 10px !important;
}
form.edu-form-newsletter button {
    margin: 0px auto 0;
    max-width: 320px;
    padding-left: 20px;
    padding-right: 20px;
}
.edu-section-newsletter {
    padding-bottom: 100px;
}
.edu-section-newsletter .edu-separator {
    bottom: -1px;
    top: auto;
    transform: rotate(180deg);
}
.edu-section.edu-footer {
    text-align: center;
    padding: 50px 0 0 0;
}
.edu-inner-footer {
    padding: 20px;
}

.edu-section.edu-footer .edu-reach-out-btn {
    display: block;
    margin: 20px 0;
    font-weight: bold;
    color: #434343;
}

.edu-section.edu-footer p {
    color: #434343;
}
.edu-footer-bottom {
    padding: 15px;
    border-top: 1px solid #434343;
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 50px;
}
.edu-footer-bottom p {
    margin: 0;
}

.edu-footer .sumo-btn.edu-black-btn {
    background: white;
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.edu-floating-elements .edu-two-columns {
    position: relative;
    top: -120px;
}
.edu-floating-elements .edu-two-columns:last-child {
    position: relative;
    top: -80px;
}
.edu-column-text.anyone-can-start-using-sumo-wrapper ul li h3 {
    color: white;
    padding: 0;
    margin: 10px 0;
    text-align: left;
    font-size: 18px;
}

.edu-column-text.anyone-can-start-using-sumo-wrapper ul li {
    color: white;
}

p.green-corner-frame {
    font-size: 36px;
    padding: 20px;
    text-align: center;
    margin: 0px auto 50px;
    position: relative;
    color: #434343;
    line-height: normal;
    font-weight: bold;
}

p.orange-corner-frame {
    padding: 20px 10px;
    color: white;
    font-size: 36px;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    font-weight: bold;
    max-width: 640px;
}

.works-grid:after {
    content: '';
    display: block;
    clear: both;
}

/* API PAGE TABLE */
.api-page.single-page {
    background: #fff;
}
#api-table {
    border-collapse: collapse;
    width: 960px;
    max-width: 1024px;
    margin: 0 auto 50px;
  }

#api-table td, #api-table th {
    border: 1px solid #b8c2cb;
    padding: 8px;
}

#api-table tr:nth-child(even){
    background-color: #fefefe;
}

#api-table tr {
    background: #f0f3f4;
}
#api-table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    color: white;
    background: #b8c2cb;
}
.api-content a:hover {
    text-decoration: underline;
}
.api-code-block {
    display: block;
    width: max-content;
    text-align: left;
    background-color: #eee;
    border-radius: 5px;
    padding: 20px;
    margin: 0 auto 40px;
}
.api-examples-images {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: max-content;
    margin: 30px auto;
}
.api-examples-images > div {
    margin: 0 3px;
}
.api-page h3 {
    font-size: 20px
}
.api-page h4 {
    font-size: 18px
}
span.price-per-license {
    margin-left: 5px;
    margin-right: 3px;
}

span.license-final-price {
    font-weight: bold;
    margin-left: 5px;
}
.edu-licences-wrapper {
    color: #888;
}

.edu-licences-wrapper span {
    color: #434343;
}
.licenses-subscribe-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}
.licenses-total-price span {
    font-weight: bold;
    font-size: 24px;
}
.edu-quote-section {
    max-width: 1280px;
    margin: 0 auto;
}
.edu-quote-section h5 {
    color:white;
    font-size:40px;
    color:white;
    width:500px;
    padding:20px;
    padding-left: 0;
    margin: 0;
    font-weight: 500;
}
.edu-quote-section p {
    font-size:20px;
    color:white;
    padding:20px;
    margin: 0;
    padding-left: 0
}
.single-page.charity .single-page-header {
    min-height: 500px;
}
/* SELECT */

.sumo-select select {
    background: #121212;
    border: none;
    outline: none;
    color: #c3ced7;
    font-size: 16px;
    padding: 10px 35px 10px 15px;
    border-radius: 100px;
    -webkit-appearance: none;
    cursor: pointer;
    font-weight: bold;
}
.sumo-select {
    position: relative;
    display: inline-block;
}
.sumo-select:after {
    content: "";
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    border: solid #c3ced7;
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 12px;
}
button.sumo-btn.transparent-btn.following-btn {
    background: white;
    color: #2F3336;
}
button.sumo-btn.transparent-btn.following-btn:hover {
    background: #ddd;
    border-color: #ddd;
    color: #2F3336;
}
.api-content div {
    margin-bottom:30px;
}
.api-content h3 {
    margin-top: 50px;
}
.iframe-link {
    color: #2F3336;
    padding: 20px;
    background: #eee;
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    margin: 0 auto;
}

.features-page {
    padding: 0 10px;
}
.features-page h1 {
    font-size: 48px;
    margin-bottom: 20px;
}
.features-page p {
    font-size: 20px;
    max-width: 640px;
    margin: 0 auto;
}

.features {
    color: white;
}


  /* STYLES */


/* INPUTS */

/* INPUT TEXT */
.sumo-input {
    width: auto;
    display: inline-block;
    background: #222527;
    color: #c3ced7;
    border: none;
    border-radius: 100px;
    height: 24px;
    padding: 0 10px;
    outline: none;
    font-size: 11px;
  }
  .sumo-input::-webkit-input-placeholder {
    /* Edge */
    opacity: 0.4;
  }
  .sumo-input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    opacity: 0.4;
  }
  .sumo-input::placeholder {
    opacity: 0.4;
  }
  
  .sumo-input[type='number']::-webkit-outer-spin-button,
  .sumo-input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
  
  }
  /* SELECT */
  
  .sumo-range input,
  .sumo-select select {
    background: #222527;
    border: none;
    outline: none;
    color: #c3ced7;
    font-size: 11px;
    padding: 0 10px;
    height: 24px;
    border-radius: 100px;
    -webkit-appearance: none;
    cursor: pointer;
    width: 100%;
  }
  .sumo-range {
    max-width: 48px;
  }
  .sumo-range input {
    border-radius: 100px 0 0 100px;
    padding: 0 15px 0 7px;
    text-align: right;
  }
  .sumo-range:after {
    content: attr(data-content);
    position: absolute;
    color: #666;
    background: #222627;
    top: 0;
    bottom: 0;
    margin: auto;
    height: max-content;
    right: 1px;
  }
  
  .sumo-select {
    min-width: 55px;
  }
  .sumo-range,
  .sumo-select {
    position: relative;
    display: inline-block;
  }
  .selectToggle:after ,
  .rangeToggle:after ,
  .sumo-select:after {
    content: "";
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    border: solid #c3ced7;
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 6px;
  }
  /* CHECKBOX */
  .sumo-checkbox {
    position: relative;
    width: 24px;
    height: 24px;
    width: max-content;
  }
  .sumo-checkbox label {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
  }
  .sumo-checkbox.checkbox-right label{
    padding: 0;
  }
  .sumo-checkbox.checkbox-right input,
  .sumo-checkbox.checkbox-right .checkmark {
    left: initial;
    right: -24px;
  }
  /* Hide the browser's default checkbox */
  .sumo-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
  }
  .sumo-checkbox p {
    margin: 0;
    font-size: 11px;
    color: #c3ced7;
    display: inline-block;
  }
  .checkmark:after {
    left: 9px;
    top: 5px;
    width: 4px;
    height: 9px;
    border: solid #c3ced7;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    background: #222527;
    width: 24px;
    height: 24px;
    border-radius: 24px;
    cursor: pointer;
    pointer-events: none;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  /* Show the checkmark when checked */
  .sumo-checkbox input:checked ~ .checkmark:after {
    display: block;
  }
  
  .sumo-radio {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    background: #222527;
  }
  .sumo-radio label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .sumo-radio input {
    width: 12px;
    height: 12px;
    -webkit-appearance: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    margin: 0;
  }
  .sumo-radio input:checked {
    background: #c3ced7;
  }
  /* HOVERS */
  
  .sumo-btn-colored:hover,
  .sumo-square-icon:hover,
  .sumo-rounded-icon:hover {
    filter: brightness(1.1);
}
.sumo-square-toggle:hover {
    filter: none;
}

/* CHROMEBOOK PAGE*/

#chromebook-page {
    background: white;
}
#chromebook-page .chromebook-header-left a.sumo-btn {
    margin: 0;
    width: max-content
}
.chromebook-header {
    background: linear-gradient(304.75deg, rgba(195, 206, 215, 0.6) 30.65%, rgba(195, 206, 215, 0) 77.25%);
    padding: 50px;
    height: 580px;
}
.chromebook-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    max-width: 1280px;
    margin: 0 auto;
}
.chromebook-header-left,.chromebook-header-right {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chromebook-header-left h1 {
    font-size: 48px;
    max-width: 600px;
    width: 100%;
    line-height: 60px;
}

.chromebook-header-left h1 span {
    color: #3f9ce8;
}

.chromebook-header-left button {
    width: max-content;
    margin: 20px 0 0 0;
}
.chromebook-header-left p {
    font-size: 14px;
    color: #999;
}
.chromebook-side-icon {
    width: 100px;
    height: 100px;
    border-radius: 20%;
    display: grid;
    place-items: center;
    margin: 0 auto;
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
}

.chromebook-side-feature {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 20px;
    padding: 20px;
    position: relative;
}
.chromebook-side-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    pointer-events: none;
}
.chromebook-single-app {
    display: grid;
    grid-template-columns: 300px auto;
    grid-gap: 0 70px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 150px;
}

p.chromebook-side-app-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #2F3336;
    text-transform: capitalize;
    margin: 40px 0 20px
}

.chromebook-side-feature h2 {
    margin: 0;
    font-size: 32px;
}

.chromebook-side-feature p {
    color: #2F3336;
    font-size: 18px;
}
.chromebook-single-app img.chromebook-shadow {
    max-width: 100%;
    border-radius: 20px;
}
.chromebook-single-app:nth-child(even) {
    grid-template-columns: auto 300px;
}

.chromebook-single-app:nth-child(even) .chromebook-side-feature {
    grid-column: 2/3;
    grid-row: 1/2;
}

.chromebook-single-app:nth-child(even) .chromebook-shadow {
    grid-column: 1/2;
    grid-row: 1/2;
}

.chromebook-shadow-paint {
    box-shadow: -35px 35px #2daace;
}
.chromebook-shadow-tunes {
    box-shadow: 35px 35px #e5ab42;
}
.chromebook-shadow-3d {
    box-shadow: -35px 35px #3389c9;
}
.chromebook-shadow-code {
    box-shadow: 35px 35px #20cc71;
}
.chromebook-shadow-photo {
    box-shadow: -35px 35px #30baaa;
}
.chromebook-shadow-audio {
    box-shadow: 35px 35px #673ab7;
}
.chromebook-shadow-video {
    box-shadow: -35px 35px #c82f2e;
}
.chromebook-shadow-pixel {
    box-shadow: 35px 35px #d960cf;
}

.chromebook-side-bg-paint {
    background: linear-gradient(180deg, rgba(45, 167, 203, 0.7) 0%, rgba(45, 167, 203, 0) 50%);
}
.chromebook-side-bg-tunes {
    background: linear-gradient(180deg, rgba(227, 177, 85, 0.7) 0%, rgba(227, 177, 85, 0) 50%);
}
.chromebook-side-bg-3d {
    background: linear-gradient(180deg, rgba(51, 137, 201, 0.7) 0%, rgba(51, 137, 201, 0) 50%);
}
.chromebook-side-bg-code {
    background: linear-gradient(180deg, rgba(34, 204, 113, 0.7) 0%, rgba(34, 204, 113, 0) 50%);
}
.chromebook-side-bg-photo {
    background: linear-gradient(180deg, rgba(48, 183, 167, 0.7) 0%, rgba(48, 183, 167, 0) 50%);
}
.chromebook-side-bg-audio {
    background: linear-gradient(180deg, rgba(124, 96, 217, 0.7) 0%, rgba(124, 96, 217, 0) 50%);
}
.chromebook-side-bg-video {
    background: linear-gradient(180deg, rgba(200, 67, 66, 0.7) 0%, rgba(200, 67, 66, 0) 50%);
}
.chromebook-side-bg-pixel {
    background: linear-gradient(180deg, rgba(217, 96, 207, 0.7) 0%, rgba(217, 96, 207, 0) 50%);
}

.chromebook-ad {
    background: #549CE2;
    width: 100%;
    height: 300px;
    padding: 50px;
    text-align: center;
}
.chromebook-ad button {
    color: #549CE2;
}
.chromebook-ad p {
    color: rgba(17, 17, 17, 0.7);
    font-size: 14px;
    font-weight: bold;
}
.chromebook-ad h5 {
    color: white;
    font-size: 32px;
    max-width: 550px;
    text-align: center;
    margin: 0 auto 20px;
}

.chromebook-partnership, .chromebook-titles {
    text-align: center;
    margin: 0px auto 50px;
    display: block;
}

.chromebook-partnership p {
    color: #222527;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    margin: 0;
}

.chromebook-partnership img {
    width: 220px;
    margin-top: 10px;
}

.chromebook-titles p:first-child {
    font-size: 48px;
    font-weight: bold;
    margin: 0 0 20px;
}

.chromebook-titles p:last-child {
    font-size: 20px;
    color: #2F3336;
    max-width: 720px;
    text-align: center;
    margin: 0 auto 0;
}

.chromebook-apps {
    margin-top: 100px;
}

.chromebook-header-left div:first-child p:not(.app-thumb p) {
    display: inline-block;
    font-size: 24px;
    margin: 0;
    color: #2F3336;
    font-weight: bold;
}

.chromebook-header-left div:first-child {
    display: flex;
    align-items: center;
}

.chromebook-header-left div:first-child img {
    margin-right: 15px;
}

.chromebook-header-left div:first-child p span {
    color: #549ce2;
}
#chromebook-content {
    padding: 50px 0;
}
/* END CHROMEBOOK PAGE*/

/* THANKS PAGE */ 
#thanks-canvas {
    position: absolute;
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

/* ENDS THANKS PAGE */ 

/* CLAIM PERK PAGE */ 
.single-page-content.perk-page-container {
    background: #fff;
    color: #2F3336;
    padding: 100px 0;
    width: 100%;
    max-width: none;
}

#perk-subscription-wrapper {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

#perk-subscription-wrapper p {
    text-align: center;
    font-weight: bold;
    margin: 20px 0 10px;
    color: #2F3336;
    font-size: 20px;
}
.single-page-content.perk-page-container h1 {
    color: #2F3336;
    margin: 20px auto;
}
#perk-subscription-wrapper span {
    margin-bottom: 20px;
}

div#perk-subscription-wrapper button {
    width: max-content;
    margin: 0 auto;
}
.dashboard-title  {
    display: flex;
    align-items: center;
    margin: 0;
}
.dashboard-title img {
    filter: invert(0.9);
    margin-right: 10px;
}
.chromebook-header-inner.chromebook-header-inner-latest-work {
    flex-direction: row;
    gap: 70px;
    height: 100%;
    padding: 50px 0;
}
.chromebook-header-inner.chromebook-header-inner-latest-work h1 {
    margin-bottom: 15px;
}
div#latest-work-iframe-container-parent {
    width: 750px;
    height: 450px;
}

div#latest-work-iframe-container {
    width: 1350px;
    height: 900px;
    position: relative;
    transform: scale(0.5);
    transform-origin: 0 0;
    border-radius: 20px;
}

div#latest-work-iframe-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    border: none;
    left: 0;
    margin-left: -2px;
    border-radius: 20px;
}
.suite-your-latest-work-details {
    display: flex;
    margin-top: 40px;   
    align-items: center;
}
.suite-your-latest-work iframe{
    border-radius: 20px;
    margin-bottom: 50px;
}
.suite-your-latest-work-left h3 {
    margin: 0;
    font-size: 16px;
}

.suite-your-latest-work-left {
    display: flex;
    align-items: center;
    color: #2f3336;
}

.suite-your-latest-work-left p {
    margin-left: 8px;
    font-size: 16px;
}

.suite-your-latest-work-left span {
    font-size: 14px;
    opacity: 0.5;
    margin: 0;
}
.suite-your-latest-work-right  {
    margin-left: 20px;
}
.suite-your-latest-work-right a {
    padding: 5px 15px;
    font-size: 12px;
    margin: 0;
}
.iframe-shadow-paint {box-shadow: -35px 35px 0 #2da7cb;}
.iframe-shadow-tunes {box-shadow: -35px 35px 0 #e5ab42;}
.iframe-shadow-3d {box-shadow: -35px 35px 0 #3389c9;}
.iframe-shadow-code {box-shadow: -35px 35px 0 #3ccc71;}
.iframe-shadow-photo {box-shadow: -35px 35px 0 #30b7a7;}
.iframe-shadow-audio {box-shadow: -35px 35px 0 #7c70d9;}
.iframe-shadow-video {box-shadow: -35px 35px 0 #c62e2d;}
.iframe-shadow-pixel {box-shadow: -35px 35px 0 #d960cf;}

.iframe-shadow-blocker {
    position:absolute; height:100%; width:100%; z-index:1;
}


.front-page-header-role {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 40px;
}
.front-page-header-role p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #2f3336;
}
.front-page-header-role a {
    font-size: 12px;
    padding: 6px 20px;
    text-transform: capitalize;
}
ul.pagination .disabled {
    opacity: 0.5;
}
ul.pagination .page-item {
    border: 1px solid white;
    background: none;
    padding: 10px 20px;
    border-radius: 100px;
    margin: 0 10px;
    font-weight: bold;
    cursor: pointer;
}

ul.pagination .page-item:not(.disabled):first-child:hover {
    background: white;
}
ul.pagination .page-item:not(.disabled):first-child:hover a {
    color: #333
}
.page-item { 
    list-style-type:none;
    width:150px;
    display:inline-block;
    text-align:center 
} 
.page-link { 
    color:white;
    width:150px 
}
li.page-item:last-child {
    background: #3e96df;
    border-color: #3e96df;
}
li.page-item:last-child:hover {
    filter: brightness(1.1);
}
.lb-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.project-preview-details form {
    margin: 0;
}
.project-preview-details select {
    background: #222527;
    color: #c3ced7;
    padding: 10px;
    border-radius: 12px;
    border: none;
}
.features-page .apps-page-single h2,
.apps-page .apps-page-single h2,
.desktop-page .apps-page-single h2 {
    font-size: 48px;
    text-align: center;
    margin: 10px 0 0 0;
}

/* FORUM CSS */
.single-page.forum,
.single-page.forum-category, 
.single-page.forum-topic {
	background: white;
}
#forum-wrapper {
	margin-bottom: 50px;
}
.forum-body,
.forum-single-page {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
}
.forum-header {
	background: linear-gradient(rgb(219 227 231),rgb(251 252 252));
	background-repeat: no-repeat;
	background-size: 50%;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	padding: 0 10px;
	position: relative;
}
img.forum-header-bg {
	height: 100%;
	width: 50%;
	position: absolute;
	top: 0;
	right: -10%;
}
.forum-topic .forum-header .forum-breadcrumbs {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
}
.forum-topic .forum-header h1 {
    color: #222527;
}
.forum-header-titles {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.forum-header-with-icon img {
	width: 100px;
	height: 100px;
	border-radius: 100px;
	margin-right: 15px;
}
.forum-header-with-icon {
	display: flex;
	align-items: center;
	max-width: 1024px;
	margin: 0 auto;
	width: 100%;
}
.forum-header h1 {
	color: #549ce2;
	font-size: 36px;
	margin: 0 0 10px;
	text-align: left;
	z-index: 1;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
}
.forum-header h2 {
	color: #2F3336;
	font-size: 16px;
	text-align: left;
	z-index: 1;
	width: 100%;
	max-width: 1280px;
	margin: 10px auto;
	position: relative;
}
.forum-breadcrumbs {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #888;
}

.forum-breadcrumbs a:hover {
    text-decoration: underline;
}

.forum-breadcrumbs span {
    margin: 0 5px;
}
.forum-breadcrumbs a {
    color: #549CE2;
}
.forum-home-filters {
	margin: 20px 0 40px;
	display: flex;
	gap: 20px
}
.forum-home-filters select {
	padding: 10px;
	border-radius: 20px;
	font-family: Quicksand !important;
}
.forum-categories-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}
.forum-home-single-item {
	background: #edf1f3;
	border-radius: 100px;
	height: 100px;
	display: grid;
	grid-template-columns: 100px auto;
	grid-gap: 0 15px;
	align-items: center;
	cursor: pointer;
	width: 100%;
	max-width: 550px;
	text-align: left;
}
.forum-home-single-item:hover {
	opacity: 0.9;
}
.forum-home-single-item img {
	width: 100px;
	height: 100px;
	border-radius: 100px;
}
.forum-home-single-item h3 {
	color: #2F3336;
	font-size: 16px;
	margin: 0 0 5px 0;
}
.forum-home-single-item p {
	font-size: 14px;
	margin: 0;
	color: #646e76;
}
.forum-category-table-header {
	display: grid;
	grid-template-columns: 1fr 150px 80px 80px 80px;
	border: 1px solid #c3ced7;
	border-radius: 100px;
	justify-content: center;
	margin-top: 20px;
}
.forum-category-table-header p {
	padding: 0 10px;
	text-align: center;
	font-weight: bold;
	color: #646e76;
	font-size: 14px;
}
.forum-category-table-header>p:first-child {
	text-align: left;
	padding-left: 30px;
}
a.forum-category-topic-title {
	color: #549ce2;
	font-weight: bold;
	display: flex;
	align-items: center;
	padding: 10px;
	cursor: pointer;
	text-align: left;
}
.forum-category-topic-title:hover {
	text-decoration: underline;
}
.forum-category-topic-title img {
	margin-right: 10px;
}
.forum-category-table-content {
	display: grid;
	grid-template-columns: 1fr 150px 240px;
	justify-content: center;
	text-align: center;
}
.forum-category-table-content .forum-single-stats p {
	font-weight: bold;
	color: #666;
	padding: 10px;
}
.forum-single-replies-wrapper {
	display: flex;
	align-items: center;
}
.forum-single-replies-wrapper img {
	width: 24px;
	height: 24px;
	border-radius: 24px;
	margin: 0 5px;
}
.forum-single-stats {
	display: grid;
	grid-template-columns: 80px 80px 80px;
	align-items: center;
}
.forum-icon:before {
	content: none;
}
.forum-category-topic-title-author {
	display: none;
	width: 24px;
	height: 24px;
	border-radius: 24px;
}
.forum-single-topic-content {
      display: grid;
      grid-template-columns: 64px auto;
      grid-gap: 20px;
      position: relative;
      margin-bottom: 100px;
}
.forum-single-topic-content:before {
    content: "";
    position: absolute;
    left: 32px;
    width: 1px;
    height: 100%;
    background: #c3ced7;
    z-index: 0;
}
.forum-single-topic-content[data-post=answer]:before {
    left: 32px;
}
.forum-single-topic {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    text-align: left;
    padding: 20px;
    background: white;
}
.forum-single-topic a {
    color: #549CE2
}
.forum-single-topic-content[data-post=main] .forum-single-topic-avatar {
    width: 64px;
    height: 64px;
    border-radius: 64px;
    z-index: 1;
}
.forum-single-topic-content[data-post=answer] .forum-single-topic-avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    z-index: 1;
    margin: 0 auto;
}
.forum-single-topic-author {
    font-size: 18px;
    font-weight: bold;
}
p.forum-single-topic-date {
    font-size: 16px;
    color: #646E76;
    margin: 5px 0 0
}
.forum-single-topic-message {
    width: 100%;
    margin-top: 20px;
      
}
.forum-single-topic-message p {
    color: #222527;
    font-size: 18px;
}
.forum-single-topic-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.forum-single-topic-actions-add-comment {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 16px;
}
.forum-single-topic-actions-add-comment p {
    color: grey;
    font-weight: bold;
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
}

.forum-single-topic-actions-add-comment p:hover {
    text-decoration: underline;
}

.forum-separator {
    margin: 0 20px;
    width: 1px;
    height: 20px;
    background: #c3ced7;
}
.forum-single-topic-actions-like {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 15px;
}
.forum-single-topic-actions-like img {
    margin-left: 5px;
    cursor: pointer;
}
.forum-single-topic-actions-like p {
    color: #222527;
    font-weight: bold;
}
.forum-single-topic-recap {
    padding: 20px;
    width: 100%;
    border-radius: 50px;
    border: 1px solid #c3ced7;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
    height: 100px;
    padding: 0 40px;
}
.forum-single-topic-single-recap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.forum-single-topic-single-recap span {
    color: grey;
    font-weight: bold;
    font-size: 16px;
}

.forum-single-topic-single-recap p {
    color: #222527;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 20px;
    font-size: 18px;
    margin: 15px 0 0 0;
}

.forum-single-topic-single-recap p img {
    border-radius: 20px;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    cursor: pointer;

}
.forum-single-topic-single-recap.forum-single-topic-with-separator {
    height: 100px;
    justify-content: center;
}
.forum-single-topic-single-recap.forum-single-topic-with-separator .forum-separator{
    height: 50px;
}

/* END FORUM CSS */

/* BLOG CSS */
.single-page.blog, 
.single-page.blog-single {
    background: linear-gradient(304.75deg, rgba(195, 206, 215, 0.6) 30.65%, rgba(195, 206, 215, 0) 77.25%);
    background-color: white;
}
.blog #blog-wrapper,
#blog-wrapper .blog-single-content,
.blog-single-tags {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto 50px auto;
}
.blog-single #blog-wrapper .blog-single-header {
	width: 100%;
	max-width: 1024px;
	margin: 20px auto;
}

.blog-single-content figure {
    margin: 0;
}
.blog-single-content ol {
    padding: 0 0 0 15px;
    margin: 20px 0 0 0;
}

.blog-single-content figcaption {
    font-size: 13px;
    margin-top: 5px;
    color: grey;
}
.blog-single-featured-image {
	width: 100%;
	object-fit: cover;
    height: 400px;
    object-fit: cover;
}
.blog-single-back-to-blog {
    max-width: 1024px;
    margin: 50px auto 20px;
    color: #549ce2;
    text-align: left;
    display: flex;
    font-weight: bold;
    width: 100%;
}
.blog-single-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	margin: 10px 0 0;
}
.blog-single-info {
	text-transform: uppercase;
    text-align: left;
    justify-content: flex-start;
}
.blog-single-category {
	font-weight: bold;
	color: #3d96df;
	text-align: left;
	margin: 0;
}
p.blog-single-date {
	color: #646e76;
	margin: 0;
    text-align: left;
}
.blog-single-author {
	display: flex;
	align-items: center;
	text-align: right;
}
.blog-single-author p {
	font-weight: bold;
	color: #222527;
	margin: 0;
}
.blog-single-author span {
	color: #646e76;
	margin: 0;
}
.blog-single-author img {
	width: 36px;
	height: 36px;
	border-radius: 36px;
	margin-left: 10px;
}
.blog-single-content {
	text-align: left;
	color: #222527;
}
.blog-single-content h1,
.blog-single-content h2,
.blog-single-content h3,
.blog-single-content p {
	color: #222527;
}
.blog-single-content h1 {
    font-size: 48px;
    margin-top: 0;
}
.read-more.navbutton {
    text-align: right;
}
.read-more.navbutton i {
    display: none;
}
.blog-single-tags {
    margin-top: 50px;
}

.blog-single-tags ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.blog-single-tags ul li {
    list-style: none;
    background: #20b1a8;
    padding: 7px 15px;
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
}
.taxonomy-title {
    font-weight: bold;
    text-align: left;
}
.blog-home-single-article .blog-single-header {
	margin: 10px 0 0;
}
.blog-home-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 50px 50px;
}
.blog-home-list h2 {
	margin: 15px 0 10px;
}
.blog-home-list .blog-single-featured-image {
	height: 250px;
	border-radius: 5px;
}
.blog a, 
.blog-single a {
    color: #3d96df;
    font-weight: bold;
}
.blog a:hover {
    text-decoration: underline;
}
.blog-single-content a:hover {
    text-decoration: underline;
}
.blog-single-content p,
.blog-single-content li {
    font-size: 18px;
    line-height: 30px;
}
.blog-home-list .blog-single-content p {
	margin: 0;
}
h1.blog-home-title {
	color: #222527;
	font-size: 48px;
	text-align: left;;
}
figure.wp-block-table {
    background: #edf0f3;
    padding: 20px 20px;
    margin: 20px auto;
    border-radius: 10px;
}

figure.wp-block-table td {
    border: none;
    font-size: 18px;
    line-height: 30px;
}
@media (max-width: 720px) {
	.blog-single-header {
		flex-direction: column;
		margin-top: 10px;
	}
	.blog-single-info,
	.blog-single-author {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.blog-single-author {
		justify-content: flex-end;
		margin-top: 15px;
		text-align: left;
		flex-direction: row-reverse;
	}
	.blog-single-author img {
		margin: 0 10px 0 0;
	}
}

/* END BLOG CSS */

/* BLACK FRIDAY */

.black-friday-bar {
    height: 50px;
    background: #17191a;
    position: fixed;
    top: 50px;
    width: 100%;
    z-index: 9999;
    display: none;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.black-friday-bar p {
    color: #fff;
    font-family: Poppins, sans-serif;
    text-transform: uppercase;
}
.black-friday-bar p:first-child {
    font-weight: bold;
}
.black-friday-bar a {
    font-size: 14px;
    text-transform: capitalize;
    padding: 7px 20px;
}
.black-friday-bar img {
    position: absolute;
    right: 15px;
    cursor: pointer;
}
.black-friday-bar img:hover {
    opacity: 0.8;
}
.black-friday-modal {
    background: #222527aa;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999999999999999999;
    display: none;
    /* display: flex; */
    align-items: center;
    justify-content: center;
}
.black-friday-modal-wrapper {
    width: 640px;
    height: 480px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgb(0 0 0 / 20%);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    position: relative;
    background-image: url(/images/site/blackfriday-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #222527;
    background-blend-mode: color-dodge;
}
.black-friday-modal-wrapper p {
    color: #fff;
    font-size: 64px;
    margin: 0;
    text-transform: uppercase;
    font-weight: bold;
    font-family: Poppins, sans-serif;
    width: 360px;
    line-height: 60px;
    text-align: center;
}
.black-friday-modal-wrapper span {
    color: #c3ced7;
    font-size: 24px;
    margin: 10px 0 40px;
    padding: 0 20px;
    font-family: Poppins, sans-serif;
}
.black-friday-modal-wrapper div {
    display: flex;
    align-items: center;
    background: #2f3336;
    border-radius: 100px;
    width: 100%;
    justify-content: space-around;
    gap: 10px;
    padding: 5px;
    height: 60px;
    margin-bottom: 20px;
}

.black-friday-modal-wrapper div img {
    width: 32px;
    height: 32px;
}
.close-black-friday-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
.close-black-friday-modal:hover {
    opacity: 0.8;
}
span.ready-to-start-creating {
    font-size: 16px;
    margin: 0 0 20px;
}

.website-pro-feature {
    background: #222527;
    padding: 20px;
}
.single-page .website-pro-feature * {
    color: #fff;
}
.account-yet {
    text-align: center;
}
.account-yet p {
    font-size: 14px;
}
.pro-page {
    text-align: center;
    background: #fff;
}
#pricing-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 30px;
    margin-bottom: 30px;
}
#pricing-nav #toggle-pricing-sumo.selected {
    background: #222527;
    color: #fff;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#pricing-nav #toggle-pricing-paint-x.selected {
    background: linear-gradient(180deg,#3adfc5,#1ab6eb);
    color: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#pricing-nav p {
    font-weight: bold;
    margin: 0;
    padding: 10px;
    border-radius: 30px;
    cursor: pointer;
}

/* RESPONSIVE */

@media (min-width: 1600px){

    .hero-home {
        padding: 0;
    }
    h1.hero-title {
        font-size: 48px;
    }
}
@media (min-width: 1440px){
    .single-app-page {
        background-position: top;
        background-size: auto 100%;
    }
    .hero-texts {
        top: 30px;
    }
}
@media (min-width: 581px){
    .profile-page .single-page-content {
        min-height: calc(100vh - 465px);
    }
}
/* RESPONSIVE 1280 */ 
@media (max-width: 1280px){
    .apps-page-grid {
        padding: 0 20px;
    }
    .optimized-for-chromebook {
        justify-content: flex-start;
    }
    #suite-main-top-area .chromebook-header-inner-latest-work {
        flex-direction: column !important;
    }
    .header-inner {
        padding: 0 10px;
    }
    .hero-test, .hero-pro-ad {
        padding: 50px;
    }
    .support-wrapper {
        grid-template-columns: 1fr 2fr;
    }
    .dashboard-categories label {
        margin: 5px;
    }
    .works-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .login-page-inner-wrapper {
        grid-template-columns: 50% 50%;
    }
    .story-section {
        padding: 20px 20px;
    }
    .hero-test.second-section > img {
        left: -200px;
    }
    .home-features {
        padding-left: 50px;
        padding-right: 50px;
    }
    .hero-bottom {
        top: 220px;
    }
    .single-page-hero {
        padding: 20px 20px 100px 20px;
    }
    .optimized-for-chromebook {
        justify-content: center;
    }
    .single-page-hero .hero-artwork img {
        transform: none;
        width: 160%;
    }
    .hero-home .inner-wrapper {
        padding: 100px 0;
        grid-template-columns: 1fr 1.2fr;
    }
    .project-preview-view-wrapper {
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
    .community-nav h1 {
        align-self: center;
        font-size: 36px;
    }
    .community-nav {
        flex-direction: column;
        align-items: flex-start;
    }
    .community-nav input {
        margin-right: 30px;
    }

    .forum-header {
        padding: 0 20px;
    }
    .forum-body, .forum-single-page {
        padding: 0 20px;
    }
    .chromebook-header-inner.chromebook-header-inner-latest-work {
        padding: 50px
    }

    .chromebook-header-inner.chromebook-header-inner-latest-work .chromebook-header-left {
        width: 100%;
    }
    div#suite-app-list {
        justify-content: flex-start !important;
    }
    .chromebook-header-right.suite-your-latest-work {
        width: 100%;
    }
    img.chromebooks-bg {
        height: 60%
    }
    .edu-hero .edu-hero-text {
        padding: 0 20px;
    }
    .edu-two-columns .edu-box-container {
        width: 50%;
        height: auto;
    }
    .download-app-gallery {
        grid-template-columns: 1fr 1fr;
    }
    .blog-single #blog-wrapper .blog-single-content,
    .blog-single #blog-wrapper .blog-single-header,
    .blog-single-tags {
        padding: 20px;
        margin: 0 auto;        
    }

}

.api-pre-tag {
    display: block;
    unicode-bidi: embed;
    /* font-family: monospace; */
    white-space: pre;
}

/* RESPONSIVE 1024 */
@media (max-width: 1024px){

    .about-image-desktop {
        display: none
    } 
    .about-image-mobile {
        display: block
    } 
    div#latest-work-iframe-container {
        margin-left: 15px;
        width: calc(200% - 30px);
    }
    div#latest-work-iframe-container-parent {
        width: 100%;
    }
    img.chromebooks-bg {
        height: 50%
    }
    .community-texts {
        padding: 0 15px;
    }
    .anyone-can-start-using-sumo-wrapper img {
        max-width: 100%;
        height: auto;
    }
    .edu-section.edu-section-green .anyone-can-start-using-sumo-texts p {
        text-align: center;
    }
    .anyone-can-start-using-sumo-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 20px auto;
    }
    .edu-section.edu-section-green.edu-apps-free-use .anyone-can-start-using-sumo-texts p {
        text-align: left;
        width: 100%;
        margin: 0 0 10px;
        max-width: none;
    }
    .anyone-can-start-using-sumo-texts {
        padding-left: 0;
        margin-top: 50px;
    }
    #api-table {
        width: 100%;
        font-size: 11px;
        word-break: break-all;
    }

    .api-pre-tag {
        unicode-bidi: normal;
        font-family: "Quicksand", sans-serif;
        white-space: normal;
    }

    .api-content {
        font-size: 14px;
        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;
        
        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;
        
        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .iframe-link {
        width: auto;
    }

    .api-code-block {
        width: auto;
    }

    .api-content iframe {
        /* display: none; */
        width: 95%;
    }

    .api-examples-images {
        display: none;
    }

    .main-app-feature-inner .left-side img {
        width: 680px;
    }
    .edu-two-columns .edu-box-container {
        width: auto;
    }
    .edu-two-columns-floating {
        flex-direction: column;
    }
    .edu-floating-column,
    .edu-white-container {
        max-width: 100%;
    }
    .edu-section-green .edu-column-image.edu-laptop img {
        max-width: 100%;
    }
    .edu-white-container.edu-floating-column {
        margin-top: 200px;
    }
    .edu-section-green .edu-two-columns, .edu-section-darkgreen .edu-two-columns {
        width: 100%;
    }
    .edu-two-columns {
        flex-direction: column;
        height: auto;
    }
    .edu-section-green .edu-column-text p, .edu-section-darkgreen .edu-column-text p {
        max-width: 100%;
    }
    .apps-page-grid {
        grid-template-columns: 1fr;
    }
    .apps-page-single h1, .apps-page-single p.hero-subtitle{
        text-align: center;
    }
    .apps-page-single p.hero-description {
        min-height: auto;
    }
    .apps-page-single .buttons-wrapper {
        justify-content: center;
    }

    .apps-page-single .buttons-wrapper .sumo-btn {
        margin: 0 20px 0px 0;
    }
    #profile-section {
        grid-template-columns: 1fr;
        grid-gap: 50px;
    }
    .hero-test.second-section > img {
        left: -300px;
    }
    .team-wrapper {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .hero-home .inner-wrapper {
        grid-template-columns: 1fr;
        grid-gap: 0;
    }
    .hero-home .inner-wrapper .hero-artwork {
        align-items: flex-start;
    }
    .hero-home {
        height: auto;
    }
    p.hero-description {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }
    .hero-home .hero-texts h1,.hero-home .hero-texts .buttons-wrapper {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-home .hero-artwork img {
        width: 100%;
        height: auto;
        position: relative;
    }
    .story-content {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
    }
    .works-grid {
        grid-template-columns: 1fr 1fr;
    }
    .single-work .work-image img {
        height: 275px;
    }
    .edit-profile-profile-wrapper {
        display: block;
    }

    .edit-profile-profile-wrapper form.edit-profile-form {
        margin-top: 20px;
    }
    .edu-hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 50px 0;
        text-align: left;
    }
    .edu-hero p {
        max-width: 100%;
    }
    .edu-hero-image img {
        transform: scale(1.2) translateX(2%);
        margin: 50px auto;
    }
    .chromebook-header-left h1, 
    .chromebook-titles p:first-child {
        font-size: 32px;
        line-height: normal;
    }
    #chromebook-page .chromebook-header-left h1 {
        margin-left: auto;
        margin-right: auto;
    }
    .chromebook-header-inner.chromebook-header-inner-latest-work h1 {
        text-align: left;
    }
    .chromebook-header-inner.chromebook-header-inner-latest-work {
        flex-direction: column;
    }
    .chromebook-side-feature h2 {
        font-size: 24px;
    }
    
    .chromebook-side-feature p {
        font-size: 16px;
    }
    
    div#chromebook-content {
        padding: 50px 20px;
    }
    .suite-public-profile-buttons {
        position: unset;
        margin-top: 25px;
    }
    
    .suite-public-profile-wrapper {
        flex-direction: column;
    }
    
    .suite-public-profile-info {
        text-align: center;
    }
    
    #suite-public-profile h2 {
        text-align: center;
        margin: 0 auto 10px;
        display: inline-flex;
    }
    
    .suite-public-profile-wrapper img.public-profile-picture {
        margin: 0 auto 20px;
    }
    form.edit-profile-form .sumo-btn {
        margin: 30px auto 0;
        display: block;
    }
    .blog-single-content figure img {
        width: 100%;
        height: auto;
    }
    .login-right-side {
        padding: 50px 30px;
    }
}
/* RESPONSIVE 813 */
@media (max-width: 813px){
    #chromebook-page .chromebook-header-left a.sumo-btn {
        margin: 0 auto;
    }
    .secondary-feature img {
        height: auto;
    }
    .features-page .apps-page-single h2,
    .apps-page .apps-page-single h2,
    .desktop-page .apps-page-single h2 {
        text-align: center;
        font-size: 36px;
    }
    #suite-main-top-area .chromebook-header-inner.chromebook-header-inner-latest-work {
        padding: 20px;
        gap: 30px;
    }
    div#latest-work-iframe-container {
        margin-left: 15px;
    }
    .suite-your-latest-work-details {
        justify-content: center;
    }
    .features-page h1 {
        font-size: 36px;
        margin-bottom: 20px;
    }
    .features-page p {
        font-size: 16px;
        max-width: 640px;
        line-height: 24px;
        margin: 0 auto;
    }
    .edu-section.edu-section-green.edu-apps-free-use p {
        margin-top: 0;
    }
    .edu-fourth-section .edu-btn {
        display: table;
        text-align: center;
        margin: 0 auto;
    }
    .download-app-gallery {
        grid-template-columns: 1fr;
    }
    table.edu-table th {
        padding: 7px 15px
    }
    .edu-hero #edu-qty {
        width: 70px !important;
        padding: 12px ​5px;
    }
    ul.edu-app-list {
        padding: 0;
        flex-wrap: wrap;
        gap: 10px;
    }

    ul.edu-app-list li {
        margin-bottom: 20px;
    }
    .main-app-feature .main-app-feature-inner h3 {
        font-size: 28px;
    }
    .main-app-feature .main-app-feature-inner p {
        font-size: 16px;
    }
    .edu-column-image {
        max-width: 100%;
    }
    .edu-laptop img {
        width: 100%;
    }
    .edu-laptop {
        max-width: 100%;
        margin: 50px 0 0 0;
    }
    .edu-photo-container img {
        max-width: 100%;
    }
    .edu-fourth-section .edu-box-container {
        grid-template-columns: 1fr;
        grid-gap: 50px;
    }
    .edu-section h3 {
        font-size: 28px;
        padding: 20px;
    }
    .edu-section.edu-section-green h2, .edu-section.edu-section-darkgreen h2 {
        font-size: 28px;
        padding: 20px;
    }
    .edu-box-container p, .edu-second-section-bottom-text {
        font-size: 16px;
        line-height: 20px;
        text-align: left;
    }
    .edu-section-green .edu-column-text p, .edu-section-darkgreen .edu-column-text p {
        font-size: 18px;
        line-height: 24px;
        margin-top: 20px;
    }
    .edu-floating-elements .edu-two-columns {
        display: grid;
        grid-gap: 50px;
        padding: 0;
    }
    .edu-section-green .edu-column-image.edu-laptop img {
        height: auto;
        margin: 50px auto;
    }
    .edu-white-container.edu-floating-column {
        margin-top: 50px;
    }
    .edu-second-section h3:first-child {
        margin: 0 auto 50px auto;
    }
    .edu-floating-text {
        padding: 50px 25px;
    }
    .edu-two-columns-floating {
        padding: 20px 0;
    }
    .edu-section {
        padding: 50px 20px;
    }
    .edu-section-green .edu-two-columns, .edu-section-darkgreen .edu-two-columns {
        padding: 0;
    }
    .edu-floating-column, .edu-white-container {
        padding: 50px 25px;
    }
    #edu-landing-page h1 {
        font-size: 48px;
    }
    .edu-hero-text p {
        font-size: 16px;
    }
    .edu-hero-text button.sumo-btn {
        padding: 10px 30px;
    }
    .edit-profile-profile-wrapper {
        margin-top: 50px;
    }
    .edit-profile-right {
        padding: 30px;
        margin-top: 30px;
    }
    .edit-profile-content {
        display: block;
    }
    .edit-profile-profile-wrapper form.edit-profile-form {
        display: block;
    }
    .edit-profile-right h1 {
        font-size: 36px;
    }
    .project-preview-view-wrapper {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }
    .project-tags {
        flex-wrap: wrap;
    }
    .project-tags span {
        margin: 0 10px 10px 0;
    }
    p.project-preview-title {
        font-size: 24px;
    }
    .project-preview-author .sumo-btn {
        font-size: 14px;
        padding: 3px 10px;
    }
    .project-preview-activity textarea {
        font-size: 16px;
    }
    .support-content h4 {
        font-size: 36px;
        text-align: left;
        margin: 0 0 15px 0;
    }
    .support-content h5 {
        font-size: 28px;
        margin: 75px 0 15px 0;
        text-align: left;
    }
    .support-content h6 {
        font-size: 20px;
        margin: 75px 0 15px 0;
        text-align: left;
    }
    .mobile-menu-nav {
        display: block;
    }
    .hero-home {
        padding: 0 20px;
    }
    .support-nav,
    .support-content {
        width: 100%;
        position: relative;
    }
    .support-wrapper {
        flex-direction: column;
    }
    .hero-home .inner-wrapper .hero-artwork {
        height: auto;
        margin: 30px 0;
    }
    .hero-home {
        max-height: none;
    }
    .dashboard .apps-wrapper {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 50px;
        width: 100%;
    }
    .support-wrapper {
        grid-template-columns: 1fr;
    }
    h3.support-title-app {
        font-size: 36px;
    }
    .support-content p {
        font-size: 16px;
    }
    .support-title-app img {
        width: 60px;
        height: 60px;
        margin: 0 25px 0 0;
        padding: 10px;
    }
    .works-grid {
        grid-template-columns: 1fr 1fr;
    }
    .story-section {
        padding: 0 20px 50px 20px;
    }
    .story-section:last-child {
        padding-bottom: 0;
    }
    p.result-number {
        font-size: 48px;
    }
    .result-description {
        font-size: 18px;
    }
    .story-wrapper h2 {
        font-size: 36px
    }
    .story-wrapper h2, .story-wrapper p.hero-description {
        text-align: left;
    }
    .story-section .inner-container {
        padding-top: 20px;
    }
    .team-wrapper {
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px 20px;
    }
    p.team-single-name {
        font-size: 20px;
    }

    p.team-single-role {
        font-size: 16px;
    }
    .apps-wrapper {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 50px 30px
    }

    .support-faq-wrapper {
        grid-template-columns: 1fr;
    }
    .ticket-types {
        grid-template-columns: 1fr;
    }
    .single-ticket-type {
        max-width: none
    }

    .sidebar-inverse #sidebar .nav-main li.open>ul {
        padding: 10px 0;
    }
    .login-left-side {
        padding: 50px;
    }
    .pricing-header {
        margin-bottom: 50px;
    }
    .main-app-feature-inner .left-side img {
        width: 1024px;
    }
    .carousel-single-inner-container {
        padding: 75px 50px;
    }
    .hero-test.second-section > img {
        left: -400px;
    }

    .most-popular {
        transform: none;
    }
    .login-form-container {
        padding: 0;
    }
    .login-page-inner-wrapper {
        grid-template-columns: 1fr;
    }
    .toggle-mobile-menu {
        display: block;
        color: white;
    }
    header#header {
        padding: 0 10px;
    }
    .hero-home .inner-wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }
    .nav-menu {
        display: none;
    }
    .hero-test h2, .hero-pro-ad h2 {
        font-size: 48px;
    }
    .hero-pro-ad, .features {
        padding: 75px 50px;
    }
    .features .macbook {
        display: none;
    }
    .features h2 {
        margin-bottom: 50px;
        padding: 0;
        font-size: 48px;
    }
    .secondary-feature {
        grid-template-columns: 1fr;
        grid-gap: 30px;
        align-items: center;
        margin: 75px auto;
    }
    .features-wrapper {
        flex-direction: column;
    }
    .single-page .single-feature {
        width: 100%;
        display: grid;
        grid-template-columns: 75px auto;
        align-items: center;
        grid-gap: 20px 0;
        margin: 20px 0;
    }
    .single-page .single-feature img, .single-page .single-feature svg {
        grid-column: 1/2;
        width: 50px;
        height: 50px;
    }
    .single-page .single-feature h3 {
        grid-column: 2/3;
        font-size: 32px;
        margin: 0;
    }
    .single-page .single-feature p {
        grid-column: 1/4;
        font-size: 16px;
    }

    .plan-details p {
        padding: 0;
        text-align: center;
    }

    .pricing-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .pricing-column {
        width: 100%;
    }
    .sumopaint-flash {
        text-align: center;
        margin-bottom: 50px;
    }
    .inner-wrapper {
        padding: 100px 50px;
    }
    a.single-plan.pro.most-popular {
        transform: none;
    }

    .carousel-title {
        margin: 10px;
    }
    .single-page-hero-inner-wrapper .svg-container {
        width: 200%;
    }
    .single-page-hero .buttons-wrapper .sumo-btn:last-child {
        margin: 0;
    }
    .single-page-hero-inner-wrapper {
        grid-template-columns: 1fr;
        /* padding: 0 20px; */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .single-page-hero .hero-artwork img {
        transform: none;
        width: 100%;
    }
    .hero-texts {
        text-align: center;
        margin: 0 auto;
    }
    .single-app-page {
        min-height: auto;
        height: auto;
        background-size: 1100px auto;
    }
    .single-app-page .hero-texts h1,
    .single-app-page .hero-texts .hero-subtitle,
    .single-app-page .hero-texts .hero-description,
    .single-app-page .buttons-wrapper {
        text-align: center;
        margin-left:  auto;
        margin-right: auto;
    }

    .single-app-page .hero-texts .buttons-wrapper {
        justify-content: center;
    }

    .main-app-feature-inner {
        display: block;
    }
    .main-app-feature-inner .left-side {
        height: 1000px;
    }
    .main-app-feature {
        padding: 100px 50px;
    }
    .hero-pro-ad, .features, .carousel-single-inner-container {
        padding: 50px 50px;
    }
    .home-features {
        padding: 0 50px;
    }
    .hero-test {
        padding: 0;
    }
    .faq-page .questions p {
        font-size: 16px;
        margin: 20px 0;
    }
    .secondary-feature p {
        font-size: 18px;
    }
    .single-page-header {
        padding: 50px 20px;
        min-height: initial;
    }
    .single-page-content.news-wrapper {
        grid-template-columns: 1fr;
    }
    .main-app-feature-inner .left-side {
        display: none;
    }
    .login-left-side {
        display: none;
    }
    .story-text h1 {
        font-size: 48px;
    }
    .story-text h2 {
        font-size: 36px;
    }
    .story-text p {
        font-size: 16px;
    }
    .download-feature {
        grid-template-columns: 1fr;
        grid-gap: 0;
    }

    .download-feature p {
        margin: 10px 0;
    }
    .dashboard .community-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .community-nav-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .community-filters-dropdown, .community-nav input {
        margin: 8px 0;
    }

    .dashboard .apps-wrapper .support-app-single {
        margin: 0 10px 10px 0;
    }

    .dashboard .apps-wrapper {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        grid-gap: 0;
    }
    .public-profile-picture {
        width: 150px;
        height: 150px;
    }

    .public-profile-header {
        grid-template-columns: 150px auto;
        justify-content: center;
    }
    .public-profile-author h1 {
        font-size: 28px;
    }
    .public-profile-info {
        margin-left: 20px;
    }
    .single-work {
        width: 100%;
    }
    div#suite-featured-grid {
        grid-template-columns: 1fr 1fr;
    }
    div#suite-app-list {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .suite-single-app img {
        width: 60px;
        height: 60px;
    }
    .suite .dropdown-profile-name,
    .suite .dropdown-profile-email,
    #suite-header-subtitle {
        display: none;
    }
    #suite-login, #suite-register, #suite-edit-profile, #suite-public-profile, #suite-play-billing, div#suite-play-billing-form {
        padding: 25px;
    }
    #suite-upgrade-to-pro-btn {
        margin: 0;
    }
    .chromebook-header {
        height: auto;
    }
    
    .chromebook-header-inner {
        display: block;
        text-align: center;
        width: 100%;
    }
    
    .chromebook-header-left, .chromebook-header-right {
        width: 100%;
        text-align: center;
    }
    
    .chromebook-header-left button {
        margin: 0 auto;
    }
/*     
    .chromebook-header-left div:first-child {
        text-align: center;
        margin: 0 auto;
    } */
    
    .chromebook-single-app {
        display: block;
        margin: 0 auto 100px;
    }
    .chromebook-ad {
        height: auto;
    }
    .chromebook-ad button {
        margin: 0;
        width: 100%;
        font-size: 14px;
    }
    .chromebook-ad h5 {
        font-size: 24px;
    }
    .forum-categories-list {
        grid-template-columns: 1fr;
      }
      .forum-home-single-item {
        max-width: 100%;
      }
      .forum-home-single-item h3,
      .forum-home-single-item p {
        padding: 0 5px 0 0;
      }
      .forum-category-table-header {
        display: none;
      }
      .forum-single-replies-wrapper {
        display: none;
      }
      .forum-single-stats {
        justify-self: flex-end;
        width: 200px;
        grid-template-columns: 1fr 1fr 1fr;
      }
      .forum-single-stats p {
        text-align: center;
        font-size: 14px;
      }
      .forum-category-table-content {
        grid-template-columns: 1fr;
      }
      .forum-icon {
        position: relative;
      }
      .forum-icon:before {
        content: "";
        position: absolute;
        margin-left: -25px;
        width: 18px;
        height: 18px;
        background-size: 18px;
        background-repeat: no-repeat;
      }
      .forum-icon-comments:before {
        background-image: url(/images/site/forum-comments.svg);
      }
      .forum-icon-views:before {
        background-image: url(/images/site/forum-views.svg);
      }
      .forum-icon-activity:before {
        background-image: url(/images/site/forum-activity.svg);
      }
      .forum-category-topic-title-author {
        display: block;
      }
      a.forum-category-topic-title {
        align-items: flex-start;
      }
      .forum-home-single-item {
        height: auto;
      }
      .forum-header {
        background: linear-gradient(rgba(195, 206, 215, 0.6), rgba(195, 206, 215, 0));
        min-height: 200px;
        padding: 20px;
        height: auto;
      }
      .forum-header > img {
          display: none;
      }
      .forum-header-with-icon img {
          width: 60px;
          height: 60px;
          margin-bottom: 10px;
      }
      .forum-header h1 {
          font-size: 32px;
      }
      .forum-header h2 {
          margin-top: 10px;
      }
      .forum-header-with-icon {
        align-items: flex-start;
          flex-direction: column;
      }
      .forum-single-topic-content {
          grid-gap: 10px;
      }
      .forum-single-topic-recap {
        justify-content: space-between;
        gap: 0;
      }
      .forum-single-topic-single-recap.forum-single-topic-with-separator {
          display: none;
      }
      .forum-single-topic-content[data-post=answer] .forum-single-topic-avatar {
          width: 36px;
          height: 36px;
      }
      .forum-single-topic-content[data-post=main] .forum-single-topic-avatar {
          width: 48px;
          height: 48px;
      }
    .forum-single-topic-content {
        grid-template-columns: 48px auto;
    }
    .forum-single-topic-content:before {
        left: 24px;
    }
    .forum-single-topic-recap {
        padding: 0 20px;
    }
    .main-app-feature {
        height: auto;
    }
    .black-friday-modal-wrapper {
        width: 90%;
        height: auto;
    }
    .single-app-page .hero-texts h1,
    .hero-bottom,
    .single-page-hero .hero-subtitle {
        position: initial;
    }
    .single-app-page .hero-texts h1 {
        text-align: left;
        margin: 30px 0 0 0;
    }
    .single-app-page .hero-texts {
        justify-content: flex-start;
        align-items: flex-start;
    }
    .single-app-page .hero-texts .hero-description {
        text-align: left;
    }
    .single-app-page .hero-texts .buttons-wrapper {
        justify-content: flex-start;
    }
    .single-app-page .hero-texts .hero-subtitle {
        transform: translateX(-50px);
        border-radius: 0 50px 50px 0;
        padding-left: 20px;
        transform: translateX(-20px);
        text-align: left;
        margin-left: 0;
    }
    header a.signup-btn {
        display: none;
    }
}
/* RESPONSIVE 580 */

@media (max-width: 580px){
    .support-youtube-wrapper {
        background-position: center;
    }
    .single-app-page .hero-texts .buttons-wrapper {
        justify-content: center;
    }
    .single-app-page .hero-texts .hero-description {
        text-align: center;
    }
    .login-right-side img {
        width: 100px;
    }
    .black-friday-bar {
        justify-content: flex-start;
        gap: 5px;
        padding: 0 10px;
    }
    .black-friday-bar p {
        font-size: 14px;
    }
    .black-friday-bar a {
        padding: 7px 10px;
    }
    .black-friday-bar a span {
        display: none;
    }
    .black-friday-modal-wrapper p {
        font-size: 48px;
        width: 100%;
    }
    
    .black-friday-modal-wrapper span {
        font-size: 20px;
    }
    
    .black-friday-modal-wrapper div img {
        width: 24px;
    }
    
    .black-friday-modal-wrapper {
        padding: 50px 20px;
    }
    .suite-your-latest-work-details {
        flex-direction: column;
    }
    div#latest-work-iframe-container iframe {
        width: 100%;
    }
    .edu-quote-section {
        max-width: 1280px;
    }
    .edu-quote-section h5 {
        font-size:28px;
        width: 100%;
        padding: 10px;
        margin: 20px 0 0 0
    }
    .edu-quote-section p {
        font-size:16px;
        padding:10px;
    }
    .hero-pro-ad .icons {
        max-width: 460px;
        width: 100%;
    }
    .community-featured {
        padding: 20px;
    }
    .community-featured h2 {
        font-size: 28px;
    }
    .community-featured label.community-feature-app {
        width: 40px;
        height: 40px;
    }
    .community-featured label.community-feature-app img {
        width: 30px;
        height: 30px;
    }
    .public-profile-picture {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
    .public-profile-info {
        margin: 0;
        align-items: center;
    }
    .public-profile-header {
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
    .apps-wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .apps-page-single img {
        height: auto;
        width: 100%;
    }
    .apps-page-grid {
        padding: 0px 10px;
    }
    .apps-page-single .buttons-wrapper {
        flex-direction: column;
    }
    .apps-page-single .buttons-wrapper .sumo-btn {
        margin: 10px auto;
    }
    .home-macbook,
    .home-ipad {
        display: none;
    }
    .img-mobile {
        display: block;
    }
    .faq-page .questions {
        padding-left: 30px;
        width: calc(100% - 30px);
    }
    .faq-page .answer {
        margin-left: 0px;
        width: calc(100% - 20px);
    }
    h3.support-title-app {
        font-size: 28px;
    }
    .support-title-app img {
        margin: 0 10px 0 0;
    }
    .works-grid {
        grid-template-columns: 1fr;
    }
    .single-plan {
        height: auto;
    }
    .plan-details p:before {
        content: none
    }
    .main-app-feature {
        padding: 100px 20px;
    }
    .single-page-hero-inner-wrapper {
        padding: 0;
    }
    .login-left-side,
    .login-right-side {
        padding: 20px;
        align-items: center;
    }
    .toggle-mobile-menu, .header-inner {
        padding: 0;
    }
    header .language-btn {
        padding: 0 10px 0 0;
    }
    .hero-pro-ad, .features, .carousel-single-inner-container  {
        padding: 50px 25px;
    }
    .remember-me-forgot-password {
        flex-direction: column;
        text-align: center;
    }
    .single-feature {
        grid-template-columns: 60px auto;
        grid-gap: 0;
    }
    .single-feature h3,
    .secondary-feature h3, 
    .single-page .single-feature h3 {
        font-size: 28px;
    }
    .home-single-feature:nth-child(even),
    .second-section .home-single-feature:nth-child(even),
    .second-section .home-single-feature:nth-child(odd) {
        float: none;
    }
    .remember-me {
        margin-bottom: 10px;
    }
    h1.hero-title, .single-page-content h1, h1, #edu-landing-page h1, .story-text h1 {
        font-size: 32px;
    }
    .download-page h2 {
        font-size: 20px;
        font-weight: lighter;
    }
    h1.hero-title sup, h2.hero-title sup{
        font-size: 14px;
    }
    p.hero-description {
        font-size: 16px;
    }
    .carousel-title {
        display: none;
    }
    div#home-carousel {
        padding: 0;
    }
    .hero-home .inner-wrapper {
        padding: 50px 0
    }
    .home-features {
        padding: 0 20px 70px 20px;
    }
    div#home-carousel img {
        width: 30px;
        height: 30px;
        margin: 30px 0 10px 0;
    }
    .inner-wrapper {
        padding: 0 20px;
    }
    .carousel-single-inner-container {
        padding: 75px 20px;
        }
    .carousel-single-inner-container .subtitle {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 10px;
    }
    .carousel-single-inner-container .description {
        font-size: 16px;
        line-height: 24px;
    }
    .carousel-single-inner-container a {
        margin: 0 auto;
        margin: 10px auto !important;
    }
    .carousel-single-inner-container p {
        font-size: 16px;
    }
    .carousel-btn {
        grid-template-columns: 1fr;
        grid-gap: 0;
        margin: 20px auto;
    }

    .carousel-single-inner-container .carousel-paint {
        margin: 20px auto 10px;
    }
    .home-features-texts p:first-child {
        font-size: 20px;
    }
    .home-features-texts h2 {
        font-size: 36px;
    }
    .home-features-texts p:last-child {
        font-size: 16px;
        line-height: 24px;
    }

    .home-single-feature h3 {
        text-align: center;
        font-size: 20px;
    }
    p.home-feature-description {
        text-align: center;
        font-size: 16px;
    }
    .home-features .hero-test {
        grid-template-columns: 1fr;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .home-features .hero-test img {
        max-width: 100%;
        width: 100%;
        position: initial;
    }
    .home-single-feature {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }

    .pricing-row {
        grid-gap: 30px;
        grid-template-columns: 1fr;
    }
    .edu p.plan-name:before {
        width: 50px;
        height: 50px;
    }
    .pricing-header h1 {
        font-size: 32px;
    }
    .pricing-header h2 {
        font-size: 16px;
    }
    .footer-flex {
        flex-wrap: wrap;
    }
    .footer-group a {
        text-align: center;
    }

    p.footer-titles {
        text-align: center;
    }

    .footer-group {
        width: 100%;
    }
    .footer-inner {
        padding: 0 20px;
    }
    .hero-test h2,
    .hero-pro-ad h2,
    #main-container .hero-pro-ad h2 {
        font-size: 32px;
    }
    #main-container .hero-pro-ad p, 
    .hero-pro-ad p {
        font-size: 16px;
        margin: 20px 0;
    }
    .pricing-bg .inner-wrapper {
        padding: 75px 20px;
    }
    .secondary-feature:nth-child(even) {
        direction: inherit;
    }
    .footer-group {
        width: 50%;
    }
    div#footer-menu {
        padding: 50px 20px;
        max-width: 100%;
    }
    .features h2,
    .single-page .features h2 {
        font-size: 32px;
        margin: 0 0 20px;
    }
    .secondary-feature {
        margin: 50px auto;
    }
    .footer-links-wrapper {
        font-size: 14px
    }
    .single-page-header h1 {
        font-size: 32px;
    }
    .single-page-content {
        padding: 50px 20px;
    }
    .results-wrapper {
        grid-template-columns: 1fr;
    }
    .hero-pro-ad .icons img {
        width: 30px;
    }
    .single-work {
        margin: 10px 0;
    }
    .project-preview-author, .public-profile-author {
        flex-direction: column;
        width: 100%;
    }
    .public-profile-author h1 {
        margin-bottom: 20px;
    }
    div#suite-featured-grid {
        grid-template-columns: 1fr ;
    }
    .suite-single-featured {
        max-width: 100%;
    }
    .single-page-hero-inner-wrapper .chromebook-background .chromebook-app-ui {
        width: 320px;
        z-index: 99;
        position: relative;
        padding: 25px;
        top: -9px;
        left: -1px;
    }
    .single-page-hero-inner-wrapper .chromebook-background-svg {
        width: 320px;
        height: 240px;
        background-size: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
    }
    .single-page-hero-inner-wrapper .chromebook-background{
        width: 360px;
        height: 240px;
        padding: 0;
        margin: auto;
        background-size: 360px 240px;
    }
    .hero-subtitle {
        transform: none;
        padding: 10px 20px;
        font-size: 18px;
    }
    
}

/* RESPONSIVE 400 */
@media (max-width: 400px){
    .black-friday-bar p {
        font-size: 12px;
    }
    .black-friday-bar a {
        margin: 0 5px;
        padding: 5px 8px;
    }
    .black-friday-bar img {
        width: 20px;
        height: 20px;
    }
    .single-page-hero-inner-wrapper .chromebook-background {
        width: 100%;
    }
    .black-friday-modal-wrapper p {
        font-size: 36px;
        line-height: 40px;
    }
    .black-friday-modal-wrapper div img {
        width: 20px;
        height: 20px;
    }
    
    .black-friday-modal-wrapper div {
        height: 50px;
    }
    #page-header-user-dropdown span {
        display: none;
    }
    #page-header-user-dropdown .header-profile-pic {
        margin: 0;
    }
    .support-app-single {
        margin:0 auto;
    }
    .error-page .apps-wrapper{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 40px 8px;
    }

    .edu-section.edu-section-green .edu-column-text .sumo-btn.edu-btn,
    .edu-section.edu-section-green .edu-column-text .sumo-btn.edu-white-btn {
        display: block;
        margin: 10px auto;
    }
    .team-wrapper {
        grid-template-columns: 1fr;
    }
    .arrow-up {
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
    }
    header#header .branding span {
        font-size: 18px;
    }
    .plan-details p {
        text-align: left;
        padding-left: 80px;
    }
    .plan-details p:before {
        content:""
    }
}
@media (max-width: 360px){

}

/* scrollbar */
.support-content {
    padding-right: 5px;
}
.support-content::-webkit-scrollbar {
    width: 5px;               /* width of the entire scrollbar */
  }
.support-content::-webkit-scrollbar-track {
   background: none;        /* color of the tracking area */
}
.support-content::-webkit-scrollbar-thumb {
    background-color: #2F3336;    /* color of the scroll thumb */
    border-radius: 20px;       /* roundness of the scroll thumb */
}

.js-cookie-consent.cookie-consent button {
    font-size:13px;
    color:white;
    background-color:#444;
    border-radius:5px;
    border:0;
    padding:5px 10px;
}

span.cookie-consent__message {
    color: #c3ced7;
    font-size: 13px;
}
.js-cookie-consent.cookie-consent{
    z-index: 999999999999;
}
.js-cookie-consent.cookie-consent button:hover {
    background: #555;
}
.js-cookie-consent.cookie-consent span {
    font-size: 13px;
}

#sort-order {
    border-radius: 50%;
    transform: translateY(3px);
    margin-left: 5px;
    width: 36px;
    height: 36px;
    background-color: #2f3336;
    border: none;
}

#sort-order-img {
    width: 20px;
    height: 20px;
    transform: translateX(1px);
}

#sort-order-img.desc {
    transform: rotate(-90deg);
}

#sort-order-img.asc {
    transform: rotate(90deg);
}

.documentation {
    width: 100%;
    height: 100%;
    border: 0;
    min-height: 800px;
}

.about-page {
    padding-top:30px;
    padding-bottom:30px;
}

.color-white {
    color: white !important;
}

div#suite-featured-grid {
    grid-template-columns: 1fr 1fr 1fr;
}

div#suite-right-area {
    border-left: none;
    padding-left: 0;
}

div#suite-app-list {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr  1fr 1fr 1fr 1fr 1fr;
    grid-gap: 25px 0;
    transition: bottom 0.4s ease-in-out;
}

.chromebook-header-inner:not(.chromebook-header-inner-latest-work) #suite-app-list.floating {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    width: max-content;
    height: 88px;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    padding: 10px;
    z-index: 999999999;
    background-color: white;
    background: linear-gradient(180deg, rgba(195, 206, 215, 0.5) 0%, rgba(195, 206, 215, 0.125) 100%);
}

#suite-main-top-area .chromebook-header {
    background: linear-gradient(304.75deg, rgba(195, 206, 215, 0.6) 30.65%, rgba(195, 206, 215, 0) 77.25%);
    padding: 0px;
    min-height: 720px;
    height: 100%;
}

#suite-main-top-area .chromebook-header-inner{
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 50px 0;
}
#suite-main-top-area .chromebook-header-inner-latest-work {
    flex-direction: row;
}
.chromebook-header-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    z-index: 1;
}

.chromebook-header-middle {
    width: 744px;
    position: relative;
}

.chromebook-background {
    width: 640px;
    height: 390px;
    padding: 0;
    margin: auto;
    background-size: 640px 390px;
}
#suite-main-top-area .chromebook-background {
    padding: 29px 44px 50px 44px;

}
#suite-main-top-area .chromebook-background-svg {
    width: 1300px;
    height: 1100px;
    background-size: 1300px 1100px;
    position: absolute;
    top: -356px;
    left: -330px;
    pointer-events: none;
}


.chromebook-background-svg {
    width: 640px;
    height: inherit;
    background-size: auto;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
}

.chromebook-screen {
    width: 100%;
    height: 100%;
    background: url('/images/site/sumo_man_transparent.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 128px;
    background-color: #111
}

.chromebook-header-top h1 {
    font-size: 30px;
    max-width: 600px;
    width: 100%;
    margin: 0px 0 30px;
    margin-left: -250px;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
    width: 330px;
    text-align: left;
}

.chromebook-header-top h1 span {
    font-weight: bold;
}

.chromebook-header-middle {
    min-width: 640px;
}

#appText {
    width: 100%;
    height: 37px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#appText span {
    font-size: 16px;
    color: #2F3336;
    margin: 0 10px;
}

#expandButton {
    background-color: #2daace;
    border-color: #2daace;
    padding: 5px 15px;
    font-size: 12px;
    display: inline-block;
    margin: 0;
}

.chromebook-header-top p {
    font-size: 14px;
    color: #999;
}

#suite-app-list {
    height: 100px;
}

.app-thumb {
    position: relative;
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    /* transition: all 0.1s ease-in-out; */
    background: black;
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

.app-thumb:hover {
    filter: brightness(1.05)
}
.app-thumb p {
    margin: 0;
    font-weight: bold;
    text-transform: capitalize;
    color: #646E76;
    font-size: 13px;
    top: calc(100% + 10px);
    position: absolute;
}
.app-thumb.active:after {
    content: '•';
    position: absolute;
    font-size: 32px;
    color: #c3ced7;
    bottom: -60px;
}

.app-thumb.paint {
    background-color: rgb(45, 167, 203);
    background-image: url("/images/icons/paint_filled.svg");
}

.app-thumb.paint .close-button {
    filter: hue-rotate(200deg) brightness(1.6) saturate(0.7);
}

.app-thumb.tunes {
    background-color: rgb(229, 171, 66);
    background-image: url("/images/icons/tunes_filled.svg");
}

.app-thumb.tunes .close-button {
    filter: hue-rotate(40deg) brightness(2.1) saturate(0.7);
}

.app-thumb.threed {
    background-color: rgb(51, 137, 201);
    background-image: url("/images/icons/3d_filled.svg");
}

.app-thumb.threed .close-button {
    filter: hue-rotate(210deg) brightness(1.5) saturate(0.7);
}

.app-thumb.code {
    background-color: rgb(34, 204, 113);
    background-image: url("/images/icons/code_filled.svg");
}

.app-thumb.code .close-button {
    filter: hue-rotate(140deg) brightness(1.8) saturate(0.7);
}

.app-thumb.photo {
    background-color: rgb(48, 183, 167);
    background-image: url("/images/icons/photo_filled.svg");
}

.app-thumb.photo .close-button {
    filter: hue-rotate(170deg) brightness(1.7) saturate(0.7);
}

.app-thumb.audio {
    background-color: rgb(124, 96, 217);
    background-image: url("/images/icons/audio_filled.svg");
}

.app-thumb.audio .close-button {
    filter: hue-rotate(260deg) brightness(1.0) saturate(0.8);
}

.app-thumb.video {
    background-color: rgb(198, 46, 45);
    background-image: url("/images/icons/video_filled.svg");
}

.app-thumb.video .close-button {
    filter: hue-rotate(0deg) brightness(1.2) saturate(0.8);
}

.app-thumb.pixel {
    background-color: rgb(217, 96, 207);
    background-image: url("/images/icons/pixel_filled.svg");
}

.app-thumb.pixel .close-button {
    filter: hue-rotate(-40deg) brightness(1.7) saturate(0.7);
}

.app-thumb .close-button {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    z-index: 10;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNDOTM2MzY7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPjxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjY0IiBjeT0iNjQiIHI9IjY0Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTEwMC4zLDkwLjRMNzMuOSw2NGwyNi4zLTI2LjRjMC40LTAuNCwwLjQtMSwwLTEuNGwtOC41LTguNWMtMC40LTAuNC0xLTAuNC0xLjQsMEw2NCw1NC4xTDM3LjcsMjcuOCAgYy0wLjQtMC40LTEtMC40LTEuNCwwbC04LjUsOC41Yy0wLjQsMC40LTAuNCwxLDAsMS40TDU0LDY0TDI3LjcsOTAuM2MtMC40LDAuNC0wLjQsMSwwLDEuNGw4LjUsOC41YzAuNCwwLjQsMS4xLDAuNCwxLjQsMEw2NCw3My45ICBsMjYuMywyNi4zYzAuNCwwLjQsMS4xLDAuNCwxLjUsMC4xbDguNS04LjVDMTAwLjcsOTEuNCwxMDAuNyw5MC44LDEwMC4zLDkwLjR6Ii8+PC9zdmc+);
    background-size: 22px;
    background-position: center;
    border: 0.1em solid white;
    background-repeat: no-repeat;
}

.app-thumb.passive .close-button {
    filter: grayscale(1) brightness(2);
}

.app-preview.resizing {
    transition: none;
}

.app-preview {
    box-sizing: border-box;
    position: absolute;
    border-radius: 16px;
    border: none;
    transition: all 0.2s ease-in-out;
    background: black;
    background-size: 64px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
}

.app-preview iframe {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    opacity: 1;
    background-image: url('/images/spinner.svg');
    background-position: center;
    background-size: 128px;
    background-repeat: no-repeat;
}

.app-preview.active {
    border-radius: 0px;
    width: 1266px;
    height: 748px;
    transform-origin: top left;
    transform: translate3d(0px, 0px, 0px) scale(.43);
    opacity: 1;
}

.app-preview.passive {
    border-radius: 0px;
    width: 1266px;
    height: 748px;
    transform-origin: top left;
    transform: translate3d(0px, 0px, 0px) scale(.43);
    z-index: -1;
    opacity: 0;
}

.app-preview.passive iframe {
    pointer-events: none;
    display: none;
}

.app-preview.expanded {
    border-radius: 0px;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform-origin: top left;
    transform: translate3d(0px, 0px, 0px) scale(1) !important;
    z-index: 999999999 !important;
}



/* SUITE CSS */

#suite-header {
    height: 43px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0;
    border-left: 5px solid #549ce2;
    background: #2f3336;
    border-bottom: 1px solid #5b6266;
    z-index: 9999999999;
}

#suite-header-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding-left: 10px;
    cursor: pointer;
}
#suite-header-title span {
    font-size: 16px;
    color:#549ce2
}
#suite-header-separator {
    /* font-size: 40px; */
    margin: 0 10px;
    background: #5b6266;
    width: 1px;
    height: 43px;
    border: none;
}
#suite-header-right .language-btn span {
    margin-right: 10px;
}
#suite-header-right .dropdown-menu.dropdown-menu-right {
    background: #222527
}
#suite-dashboard-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
#suite-dashboard-title h2 {
    font-size: 18px;
}
#suite-dashboard-title img {
    margin-right: 15px;
}

#suite-header-subtitle {
    font-size: 16px;
    font-weight: 700;
    color: #5b6266
}

#suite-header-right-area {
    margin-left: auto;
    display: flex;
    align-items: center;
}
#suite-header-right-area .sumo-btn:last-child {
    margin-left: 15px;
}
.suite .dropdown-profile img.header-profile-pic {
    width: 30px;
    height: 30px;
    margin-left: 15px;
}
.suite .dropdown-profile-inner {
    align-items: flex-end
}
.suite .dropdown-menu.dropdown-menu-right {
    background: #222527;
}
.suite .dropdown-profile-email{
    color: #5b6266;
    font-size: 11px;

}
div#suite-app-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.suite-single-app img {
    width: 80px;
    height: 80px;
    margin-bottom: 8px;
}

.suite-single-app {
    text-align: center;
    margin-right: 30px;
    transition: all ease-in-out .1s;
    cursor: pointer;
}
.suite-single-app:hover {
    transform: scale(1.02);
}

.suite-single-app:active {
    transform: scale(0.9);
}

.suite-single-app p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #c3ced7;
}

.suite-single-app:hover >  p  {
    color: #fff;
}
.suite-title {
    font-size: 16px;
    color: white;
    font-weight: 700;
}
div#suite-main-wrapper {
    position: absolute;
    top: 43px;
    /* height: calc(100% - 43px); */
    width: 100%;
    display: block;
    background: white;
}
#suite-main-top-area {
    
}

div#suite-right-area {
    border-left: 2px solid #5b6266;
    padding-left: 30px;
    height: 100%;
}

span.suite-icon {
    font-size: 14px;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    color: #c3ced7;
}

.suite-web-list, .suite-doc-list {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px 0;
}

.suite-web-list a, .suite-doc-list a {
    margin-right: 25px;
    cursor: pointer;
    padding-left: 25px;
    color: #c3ced7;
    font-size: 14px;
}
.suite-web-list a:active, .suite-doc-list a:active {
    transform: scale(0.9)
}

img.suite-single-featured-author {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 2px solid white;
    margin-right: 15px;
}
.suite-single-featured {
    max-width: 320px;
}
.suite-single-featured-image {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 15px;
    min-height: 160px;
}
.suite-single-featured-details {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.suite-single-featured-app {
    width: 40px;
    height: 40px;
    margin-left: auto;
}

div#suite-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    grid-gap: 50px;
    flex-wrap: wrap;
}
.suite-single-featured-texts p {
    margin: 0;
    font-size: 16px;
    margin-bottom: 5px;
    color: white;
}
.suite-single-featured-texts p:last-child {
    color: #5b6266
}
div#suite-featured {
    background: #2f3336;
    padding: 25px;
    width: 100%;
}
.suite .dropdown-profile,
.suite .header-profile-pic {
    cursor: pointer;
}
.suite .dropdown-profile:hover, .suite .header-profile-pic:hover {
    filter: brightness(1.1)
}

.suite-web-list span:before, .suite-doc-list span:before {
    width: 20px;
    height: 20px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}

.suite-icon {
    background-repeat: no-repeat;
}
.suite-icon.suite-doc {
    background-size: 18px 18px;
}
.suite-icon:hover {
    filter: brightness(1.2)
}
.suite-icon.suite-contact {
    background-image: url("../images/suite/comment-text.svg");
}
.suite-icon.suite-faq {
    background-image: url("../images/suite/question.svg");
}
.suite-icon.suite-community {
    background-image: url("../images/suite/community.svg");
}
.suite-doc-paint {
    background-image: url("../images/icons/paint_filled.svg");
}
.suite-doc-tunes {
    background-image: url("../images/icons/tunes_filled.svg");
}
.suite-doc-3d {
    background-image: url("../images/icons/3d_filled.svg");
}
.suite-doc-code {
    background-image: url("../images/icons/code_filled.svg");
}
.suite-doc-photo {
    background-image: url("../images/icons/photo_filled.svg");
}
.suite-doc-audio {
    background-image: url("../images/icons/audio_filled.svg");
}
.suite-doc-video {
    background-image: url("../images/icons/video_filled.svg");
}
.suite-doc-pixel {
    background-image: url("../images/icons/pixel_filled.svg");
}
.iframe-app {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    border: none;
    z-index: 99999999999
}


/* BUTTONS */


  .sumo-btn-sumo {
    background-color: #549ce2;
    border-color: #549ce2;
  }
  #suite-main-top-area .sumo-btn-paint, 
  .chromebook-icon-paint {
    background-color: #2da7cb;
    border-color: #2da7cb;
  }
  #suite-main-top-area .sumo-btn-tunes, 
  .chromebook-icon-tunes {
    background-color: #e5ab42;
    border-color: #e5ab42;
  }
  #suite-main-top-area .sumo-btn-3d, 
  .chromebook-icon-3d {
    background-color: #3389c9;
    border-color: #3389c9;
  }
  #suite-main-top-area .sumo-btn-code, 
  .chromebook-icon-code {
    background-color: #22cc71;
    border-color: #22cc71;
  }
  #suite-main-top-area .sumo-btn-photo, 
  .chromebook-icon-photo {
    background-color: #30b7a7;
    border-color: #30b7a7;
  }
  #suite-main-top-area .sumo-btn-audio, 
  .chromebook-icon-audio {
    background-color: #7c60d9;
    border-color: #7c60d9;
  }
  #suite-main-top-area .sumo-btn-video, 
  .chromebook-icon-video {
    background-color: #c62e2d;
    border-color: #c62e2d;
  }
  #suite-main-top-area .sumo-btn-pixel, 
  .chromebook-icon-pixel {
    background-color: #d960cf;
    border-color: #d960cf;
  }
  #suite-main-top-area .sumo-btn-colored:hover {
    filter: brightness(1.1);
  }
  #suite-main-top-area .sumo-btn-transparent {
    color: #c3ced7;
    background: none;
    border-color: #c3ced7;
    max-height: 30px;
  }
  #suite-main-top-area .sumo-btn-transparent:hover {
    background: #c3ced7;
    border-color: #c3ced7;
    color: #222527;
  }

  .home-works-container {
    background: #2f3336;
    padding: 50px;
    position: relative;

}
.home-line-gradient {
    width: 100%;
    height: 8px;
    background: linear-gradient(45deg, #2ea7cb,#e5aa42,#3588c9,#21cc71,#30b7a7,#7c60d9,#c62e2d,#d960cf);
    background-size: 400% 400%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: gradient-animation 46s ease infinite;
    -moz-animation: gradient-animation 46s ease infinite;
    animation: gradient-animation 46s ease infinite;
}

@-webkit-keyframes gradient-animation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradient-animation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradient-animation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.home-works-container h2 {
    color: #fff;
    font-size: 20px;
    position: relative;
    padding-left: 30px;
    display: flex;
    align-items: center;
    margin-top: 0;
}
.home-works-container h2:before {
    content:"";
    position: absolute;
    background: url(../images/icons/star.svg) no-repeat;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    left: 0;
}
.home-works-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 30px;
}
.home-works-single .home-works-single-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 15px 15px 0 0;
}
.home-works-single .home-works-single-thumb:hover {
    opacity: 0.8
}

.home-works-single-line-color {
    width: 100%;
    height: 5px;
}

.home-works-single-details {
    display: grid;
    grid-template-columns: 25px auto 35px;
    align-items: flex-start;
    grid-gap: 0 10px;
    padding: 10px;
}

.home-works-single-name a{
    margin: 0;
    color: #c3ced7;
    font-size: 14px;
    text-decoration: none;
}
.home-works-single-name a:hover {
    text-decoration: underline;
}


.home-works-single-name .home-works-single-workname {
    font-weight: bold;
}

.home-works-single-name .home-works-single-author {
    /* opacity: 0.5; */
}

.home-works-single-details a img {
    border-radius: 30px;
}

.home-works-single {
    background: #232527;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
}
.home-works-single a {
    display: flex;
}
.home-works-wrapper {
    max-width: 1280px;
    margin: 0 auto;
}
.home-chromebooks-ad-wrapper {
    background: #fff;
    position: relative;
}

.home-chromebooks-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    z-index: 100;
    position: relative;
    padding: 50px 0;
}

.home-chromebooks-left p {
    font-size: 48px;
    max-width: 550px;
    margin: 0 0 30px;
}

.home-chromebooks-left p span {
    color: #549CE2;
    font-weight: bold;
}
p.in-partnership-text {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 15px;
}
.home-chromebooks-left *:not(.chromebooks-bg){
    z-index: 2;
}
.home-chromebooks-left button {
    margin: 0;
}
img.chromebooks-bg {
    position: absolute;
    height: 70%;
    right: 0;
    z-index: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

@media (max-width: 1280px){
    img.chromebooks-bg {
        height: 60%
    }
    .home-chromebooks-left {
        padding: 50px 20px;
    }
    .home-works-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    #suite-main-top-area .chromebook-header-inner{
        padding: 50px 50px;
    }
}
@media (max-width: 1024px){
    .chromebook-header-inner.chromebook-header-inner-latest-work .app-thumb {
        width: 48px;
        height: 48px;
        background-size: 24px;
    }
    img.chromebooks-bg {
        height: 45%
    }
    .home-works-grid {
        grid-template-columns: 1fr 1fr;
    }    
    .app-preview.app-preview.expanded {
        height: 100% !important;
        position: fixed;
        z-index: 99999999999999999999 !important
    }
}
@media (max-width: 813px){
    #chromebook-page .chromebook-header {
        padding: 0;
    }
    .app-thumb {
        width: 48px;
        height: 48px;
        background-size: 24px;
    }
    img.chromebooks-bg {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
    }
    .home-chromebooks-left p {
        font-size: 36px;
    }
    p.in-partnership-text {
        font-size: 14px;
    }
    .chromebook-header-top h1 {
        line-height: normal;
        font-size: 24px;
        margin-top: 0;
    }
    .chromebook-header-inner, .home-works-container,
    #suite-main-top-area .chromebook-header-inner {
        padding: 40px 20px;
    }
}
@media (max-width: 640px){
    .home-works-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px){
    #suite-main-top-area .chromebook-header {
        min-height: auto;
    }
    #suite-main-top-area .chromebook-header-inner-latest-work {
        flex-direction: row;
    }
    #suite-main-top-area .chromebook-background-svg {
        width: 1000px;
        height: 770px;
        background-size: 681px 650px;
        position: absolute;
        top: -217px;
        left: -204px;
    }
    #suite-main-top-area .chromebook-background {
        padding:25px;
    }
    .chromebook-header-inner.chromebook-header-inner-latest-work .app-thumb {
        width: 32px;
        height: 32px;
        background-size: 16px;
    }
    #suite-main-top-area {
        user-select: none;
        -webkit-user-select: none;
    }
    .chromebook-header {
        min-height: unset;
        height: auto;
    }

    .chromebook-header-middle {
        min-width: 320px;
        width: 320px;
    }
    .chromebook-background {
        width: 320px;
        height: 195px;
        background-size: 320px 195px;
        padding: 15px 23px 27px 23px;
    }

    
    .chromebook-screen {
        background-size: 64px;
    }
    #appText span {
        font-size: 12px;
    }
    .app-preview {
        transition: none !important;
    }
    .app-preview.active {
        transform: translate3d(0px, 0px, 0px) scale(.218);
    }
    .app-preview.passive {
        transform: translate3d(0px, 0px, 0px) scale(.218);
    }

    .chromebook-header-top h1 {
        margin-left: -40px;
        max-width: 250px;
    }
    .app-thumb {
        width: 36px;
        height: 36px;
        background-size: 18px;
        margin: 0 4px;
    }
    #appText {
        flex-direction: column;
        gap: 15px;
        margin: 40px 0 10px;
    }
    .chromebook-header-inner.chromebook-header-inner-latest-work .app-thumb {
        width: 30px;
        height: 30px;
        background-size: 15px;
    }
}
@media (max-width: 400px){
    .app-thumb {
        width: 32px;
        height: 32px;
        background-size: 16px;
        margin: 0 4px;
    }
    .app-thumb p {
        font-size: 11px;
    }
    .account-yet, .sign-in-socials {
        flex-direction: column;
    }
    .account-yet {
        gap: 15px;
    }
    
}

/* chromebooks with low height */

@media (max-height: 680px) {
    .sign-in-socials {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 25px;
    }
    .login-brand {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    .login-brand h1 {
        margin: 0;
    }

    
    .account-yet p, .account-yet .create-account {
        margin: 0;
        font-size: 13px
    }
    .login-right-side {
        padding: 30px;
    }
    .login-form-container {
        padding: 0;
        height: 100%;
    }
    .create-account .sumo-btn {
        margin: 0 0 0 10px;
    }
    .login-right-side img {
        width: 120px;
    }
}
@media (max-height: 720px) and (min-width: 813px) {
    .chromebook-header-inner:not(.chromebook-header-inner-latest-work) {
        padding: 30px;
    }
    .chromebook-header-inner:not(.chromebook-header-inner-latest-work) .app-thumb {
        width: 50px;
        height: 50px;
        background-size: 25px;
        margin: 7px;
    }
    .chromebook-header-inner:not(.chromebook-header-inner-latest-work) #suite-app-list.floating {
        height: 75px;
    }
    .chromebook-header-inner:not(.chromebook-header-inner-latest-work) #appText {
        margin: 15px 0;
    }
    #suite-main-top-area .chromebook-header-inner:not(.chromebook-header-inner-latest-work) .chromebook-background {
        width: 600px;
        height: 385px;
        padding: 29px 24px 50px 24px;
        margin: auto;
        background-size: 600px 365px;
    }
    .chromebook-header-inner:not(.chromebook-header-inner-latest-work) .app-preview.active:not(.app-preview.active.expanded) {
        width: 1190px;
        height: 668px;
        margin: -2px;
    }
/* 
    .app-preview.active {
        transform: translate3d(0px, 0px, 0px) scale(.405);
    } */

    div#latest-work-iframe-container-parent {
        width: 700px;
        height: 400px;
    }
    
    div#latest-work-iframe-container {
        width: 1300px;
        height: 800px;
        position: relative;
        transform: scale(0.5);
        transform-origin: 0 0;
        border-radius: 20px;
    }
}
/* END SUITE STYLE */