@charset "utf-8"; @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600"); @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap"); html {
    background: #181227;
    color: #fff;
    font-weight: 300;
    font-family: "Open Sans";
    letter-spacing: .5px
}

p {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: .5px;
    padding-bottom: 25px
}

#big-screen.bg-light p,#sources.bg-light p {
    margin: auto
}

body {
    background-size: 100% auto;
    background-size: cover;
    background-color: #f2f2f2
}

html,body,p,h1,h2,h3,h4,h5,h6,div,a,span,strong,input,em,ul,li,select,option,textarea {
    font-family: "Plus Jakarta Sans"
}

a {
    text-decoration: none;
    opacity: .85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=85);
    color: inherit
}

a:hover,a.selected {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

a.selected {
    color: #fff
}

main {
    overflow-x: hidden
}

main,section,nav {
    display: block;
    position: relative
}

nav,nav a {
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 300;
    margin: 25px auto;
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased
}

h1 {
    font-size: 3.5em;
    line-height: 1.2em
}

h2 {
    font-size: 2.1em;
    line-height: 1.2em
}

h4 {
    font-size: 22px
}

hr {
    border: 1px solid #9665b2;
    border-bottom: 0;
    margin: 32px 25px
}

.cc-floating {
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important
}

.white-wrap {
    background-color: rgba(255,255,255,0.08);
    overflow: hidden
}

.dark-wrap {
    background-color: rgba(0,0,0,0.3);
    overflow: hidden
}

.container {
    max-width: 1280px;
    padding-left: 40px;
    padding-right: 40px;
    margin: auto
}

.container.small {
    max-width: 820px
}

.container.smaller {
    max-width: 680px
}

section .container {
    margin: 100px auto;
    overflow: visible
}

section .container.no-v-margin {
    margin: 0 auto
}

section .container.half-v-margin {
    margin-top: 50px;
    margin-bottom: 100px
}

.section-header {
    margin-bottom: 40px
}

.section-header.small {
    font-size: .9em;
    argin-bottom: 40px
}

.holder-1 {
    max-width: 1280px;
    margin: auto;
    padding-left: 40px;
    padding-right: 40px
}

.holder-2 {
    max-width: 680px;
    margin: auto
}

section .holder-1,section .holder-2 {
    margin: 148px auto;
    overflow: visible
}

section .holder-1.no-v-margin,section .holder-2.no-v-margin {
    margin: 0 auto
}

.icon,.thumb,.logo {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

nav {
    position: fixed;
    padding: 20px 0;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    text-align: right;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background: rgba(24,18,39,0);
    margin-right: -10px
}

nav .container {
    margin: 0 auto;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

nav .logo-container {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

nav .nav {
    -webkit-transition: all 0.5s ease-in-;
    -moz-transition: all 0.5s ease-in-;
    -o-transition: all 0.5s ease-in-;
    -ms-transition: all 0.5s ease-in-;
    transition: all 0.5s ease-in-
}

nav label {
    display: none
}

nav.background {
    background: #111111;
    margin-top: 0 !important;
    padding: 15px 0
}

nav.background .logo-p {
    max-height: 35px
}

nav.background .logo-t {
    max-height: 14px
}

nav.background .logo-s {
    max-height: 14px;
    margin-top: 14px
}

nav a {
    font: normal normal 600 15px/15px Plus Jakarta Sans;
    letter-spacing: .4px;
    color: #fff;
    color: $nav-color;
    font-weight: 500;
    margin: 0 15px 0 0
}

nav a.active {
    text-decoration: underline
}

nav a.nav-link:after {
    content: "\00a0\00a0"
}

nav a.nav-link.green {
    color: #6dbb00
}

nav a.nav-link.active {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 3px
}

nav #sign-in,nav #my-account {
    display: none;
    border: 2px solid #fff;
    padding: 9px 15px;
    border-radius: 20px
}

nav #sign-in .label,nav #my-account .label {
    margin: 0 30px 0 15px;
    line-height: 40px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    color: rgba(255,255,255,0.85);
    cursor: pointer
}

nav #sign-in .label:hover,nav #my-account .label:hover {
    color: #fff
}

nav #sign-in:hover,nav #my-account:hover {
    background: #fff;
    color: #000 !important;
    -webkit-transition: all 0.1s ease-in !important;
    -moz-transition: all 0.1s ease-in !important;
    -o-transition: all 0.1s ease-in !important;
    -ms-transition: all 0.1s ease-in !important;
    transition: all 0.1s ease-in !important
}

nav #my-account {
    margin: 0 15px 0 0;
    line-height: normal
}

nav #my-account:hover .label {
    color: #000
}

nav #my-account .label {
    margin: 0;
    line-height: unset;
    font-size: 15px;
    font-weight: 500;
    display: inline-block !important
}

nav #my-account #account-area {
    width: 250px;
    display: none;
    position: absolute;
    z-index: 100;
    margin-top: 11px;
    margin-left: -5.6em
}

nav #my-account #account-area .nipple {
    margin-left: 8em;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff
}

nav #my-account #account-area .account-info {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.3);
    border-top: 0;
    border-radius: 9px
}

nav #my-account #account-area .account-info .user-container {
    padding: 14px
}

nav #my-account #account-area .account-info .user-container .user-info {
    margin-bottom: 14px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

nav #my-account #account-area .account-info .user-container .user-info .avatar {
    margin-right: 1em;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

nav #my-account #account-area .account-info .user-container .user-info .email-container {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: start
}

nav #my-account #account-area .account-info .user-container .user-info .email-container .header {
    font-size: 13px;
    color: #a8a8a8
}

nav #my-account #account-area .account-info .user-container .user-info .email-container .email {
    font-size: 14px;
    word-break: break-all;
    color: #000
}

nav #my-account #account-area .account-info .user-container .user-info .email {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 14px;
    text-align: start;
    word-break: break-word;
    color: #000
}

nav #my-account #account-area .account-info .user-container .account-settings {
    border-radius: 20px;
    margin: 0;
    padding: 12px;
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #6dbb00;
    cursor: pointer
}

nav #my-account #account-area .account-info .user-container .account-settings:hover {
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80)
}

nav #my-account #account-area .account-info .sign-out-button {
    margin: 0;
    padding: 14px;
    display: block;
    font-size: 14px;
    line-height: normal;
    text-align: start;
    text-transform: none;
    border-top: 1px solid rgba(138,90,171,0.5);
    color: #a8a8a8;
    cursor: pointer
}

nav .langs {
    display: inline-block
}

nav .langs a {
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60)
}

nav .langs a.active {
    text-decoration: none;
    opacity: 1;
    -ms-filter: none;
    filter: none
}

nav .logo-p {
    max-height: 35px;
    float: left;
    margin-right: 12px;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out
}

nav .logo-t {
    max-height: 14px;
    float: left;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out
}

nav .logo-s {
    margin-top: 28px;
    margin-left: 5px;
    max-height: 20px;
    float: left;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out
}

nav#navigation input {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 32px;
    display: block;
    cursor: pointer;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 2;
    -webkit-touch-callout: none
}

nav#navigation input:checked ~ label span {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: rotate(-45deg) translate(1px,-4px);
    -moz-transform: rotate(-45deg) translate(1px,-4px);
    -o-transform: rotate(-45deg) translate(1px,-4px);
    -ms-transform: rotate(-45deg) translate(1px,-4px);
    transform: rotate(-45deg) translate(1px,-4px)
}

nav#navigation input:checked ~ label span:nth-child(2) {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: rotate(0) scale(.1,.1);
    -moz-transform: rotate(0) scale(.1,.1);
    -o-transform: rotate(0) scale(.1,.1);
    -ms-transform: rotate(0) scale(.1,.1);
    transform: rotate(0) scale(.1,.1)
}

nav#navigation input:checked ~ label span:nth-child(3) {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: rotate(405deg) translate(-2px,2px);
    -moz-transform: rotate(405deg) translate(-2px,2px);
    -o-transform: rotate(405deg) translate(-2px,2px);
    -ms-transform: rotate(405deg) translate(-2px,2px);
    transform: rotate(405deg) translate(-2px,2px)
}

nav#navigation label {
    cursor: pointer;
    float: right
}

nav#navigation label span.menu-line {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #efefef;
    border-radius: 3px;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease-in-out;
    -moz-transition: -moz-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease-in-out;
    -o-transition: -o-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease-in-out;
    -ms-transition: -ms-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease-in-out;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease-in-out
}

nav#navigation label span.menu-line:first-child {
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%
}

nav#navigation label span.menu-line:nth-child(3) {
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

.darker-nav ~ nav {
    background: #181227
}

.pure-g .grid-item {
    padding-left: 20px;
    margin-top: 20px
}

.pure-g .grid-item.small {
    padding: 60px;
    margin: 0
}

@media screen and (max-width: 990px) {
    section .container {
        margin:50px auto
    }

    .container {
        padding-left: 20px;
        padding-right: 20px
    }

    .pure-g .grid-item {
        padding-left: 12px;
        padding-right: 12px;
        margin-top: 12px
    }

    .pure-g .grid-item.small {
        padding: 20px;
        margin: 0
    }

    nav#navigation {
        width: 100%
    }

    nav#navigation .container {
        margin: 0 auto !important
    }

    nav#navigation input:checked ~ .nav {
        left: 0
    }

    nav#navigation label {
        margin-top: 5px;
        display: block
    }

    nav#navigation .logo-t,nav#navigation .logo-s {
        display: block
    }

    nav#navigation .nav {
        text-align: left;
        background: #060846;
        background: -webkit-linear-gradient(270deg, #060846 0%, #281d51 100%);
        background: -moz-linear-gradient(270deg, #060846 0%, #281d51 100%);
        background: -o-linear-gradient(270deg, #060846 0%, #281d51 100%);
        background: -ms-linear-gradient(270deg, #060846 0%, #281d51 100%);
        background: linear-gradient(180deg, #060846 0%, #281d51 100%);
        position: absolute;
        padding: 20px;
        top: -20px;
        left: calc(101%);
        right: 0;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        text-align: center;
        width: calc(100% - 40px)
    }

    nav#navigation .nav #my-account {
        margin-right: 0;
        padding: 12px 27px;
        border-radius: 25px
    }

    nav#navigation .nav #my-account #account-area {
        margin-left: -4.2em
    }

    nav#navigation .nav #my-account #account-area .nipple {
        margin-left: 7.5em;
        margin-top: 3px
    }

    nav#navigation .nav #my-account .label {
        font-size: 20px;
        font-weight: 600;
        line-height: 16px
    }

    nav#navigation .nav a {
        font: normal normal 600 16px/16px Plus Jakarta Sans;
        letter-spacing: .4px;
        color: #fff
    }

    nav#navigation .nav a.nav-link {
        display: block
    }

    nav#navigation .nav a.nav-link {
        font-size: 20px;
        line-height: 60px;
        display: inline-block;
        width: calc(100% - 100px);
        margin-right: 0;
        font-weight: normal
    }

    nav#navigation .nav a.nav-link:before {
        content: "\00a0\00a0"
    }

    nav#navigation .nav a.nav-link.green {
        color: #6dbb00
    }

    nav#navigation .nav span.nav-link-container {
        display: block;
        line-height: 70px
    }

    nav#navigation .nav #sign-in {
        font-size: 20px;
        padding: 12px 27px;
        border-radius: 25px;
        margin-right: 0
    }

    nav#navigation .nav .media-screen-form {
        display: block
    }

    nav#navigation .nav .media-screen-form .label {
        margin-left: 0
    }

    nav#navigation .nav .media-screen-form .icon-ic_x {
        text-align: right
    }

    nav#navigation .nav .langs {
        margin-top: 20px;
        margin-bottom: 20px;
        display: inline-block
    }

    nav#navigation .nav .langs a {
        display: inline-block;
        font-size: 20px;
        font-weight: normal
    }

    nav#navigation .nav .langs a:first-child {
        padding-left: 0;
        border-left: 0;
        margin-right: 50px
    }

    nav#navigation .nav .langs a:nth-child(2) {
        margin-right: 0
    }
}

.title-subtitle {
    margin-bottom: 30px;
    text-align: center;
    color: #000
}

.title-subtitle h2 {
    color: #1155d9;
    font-weight: bold
}

.title-subtitle h2.purple-title {
    color: #7b5bf5
}

.title-subtitle h3 {
    color: #000;
    font-weight: bold;
    font-size: 1.5em
}

.title-subtitle p {
    max-width: 546px;
    display: inline-block;
    margin-left: 40px;
    margin-right: 40px;
    font-size: 16px
}

.title-subtitle p.last-p {
    padding-bottom: 0;
    margin-bottom: 22px
}

.title-subtitle a {
    color: #1155d9;
    font-weight: 400
}

.title-subtitle a:after {
    content: "\00A0\00A0\003E"
}

.hero-area {
    -webkit-clip-path: polygon(0 0,100% 0,100% 86%,0 100%);
    clip-path: polygon(0 0,100% 0,100% 86%,0 100%)
}

.hero-area .blobs-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-image: url("/website/header-mask.png");
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.hero-area h2 {
    max-width: 100% !important;
    font-size: 1em !important
}

.hero-mascot {
    z-index: 1;
    text-align: center;
    height: 100px
}

.hero-mascot .hero-mascot-container {
    position: relative
}

.hero-mascot .hero-mascot-container img {
    -webkit-transform: translate(0%,-70%);
    -moz-transform: translate(0%,-70%);
    -o-transform: translate(0%,-70%);
    -ms-transform: translate(0%,-70%);
    transform: translate(0%,-70%);
    max-width: 100%
}

.hero-mascot.builder-mascot {
    height: 117px
}

.hero-mascot.builder-mascot .hero-mascot-container img {
    -webkit-transform: translate(0%,-80%);
    -moz-transform: translate(0%,-80%);
    -o-transform: translate(0%,-80%);
    -ms-transform: translate(0%,-80%);
    transform: translate(0%,-80%)
}

.big-builder-mascot {
    display: none
}

@media screen and (max-width: 1200px) {
    nav .logo-t,nav .logo-s {
        display:none
    }
}

@media screen and (max-width: 1100px) {
    .hero-mascot .hero-mascot-container img {
        -webkit-transform:translate(0%,-80%);
        -moz-transform: translate(0%,-80%);
        -o-transform: translate(0%,-80%);
        -ms-transform: translate(0%,-80%);
        transform: translate(0%,-80%)
    }

    .hero-mascot.builder-mascot .hero-mascot-container img {
        -webkit-transform: translate(0%,-70%);
        -moz-transform: translate(0%,-70%);
        -o-transform: translate(0%,-70%);
        -ms-transform: translate(0%,-70%);
        transform: translate(0%,-70%)
    }
}

@media screen and (max-width: 990px) {
    .hero-mascot .hero-mascot-container img {
        -webkit-transform:translate(0%,-90%);
        -moz-transform: translate(0%,-90%);
        -o-transform: translate(0%,-90%);
        -ms-transform: translate(0%,-90%);
        transform: translate(0%,-90%)
    }

    .hero-mascot.builder-mascot .hero-mascot-container img {
        -webkit-transform: translate(0%,-80%);
        -moz-transform: translate(0%,-80%);
        -o-transform: translate(0%,-80%);
        -ms-transform: translate(0%,-80%);
        transform: translate(0%,-80%);
        max-width: 70%
    }
}

@media screen and (max-width: 800px) {
    .hero-mascot .hero-mascot-container img {
        -webkit-transform:translate(0%,-100%);
        -moz-transform: translate(0%,-100%);
        -o-transform: translate(0%,-100%);
        -ms-transform: translate(0%,-100%);
        transform: translate(0%,-100%)
    }

    .hero-mascot.builder-mascot .hero-mascot-container img {
        -webkit-transform: translate(0%,-80%);
        -moz-transform: translate(0%,-80%);
        -o-transform: translate(0%,-80%);
        -ms-transform: translate(0%,-80%);
        transform: translate(0%,-80%)
    }
}

@media screen and (max-width: 540px) {
    .title-subtitle h2 {
        font-size:1.9rem
    }

    .title-subtitle h3 {
        font-size: 1.25em
    }
}

@media screen and (max-width: 360px) {
    nav#navigation .logo-t,nav#navigation .logo-s {
        display:none
    }
}

.notification {
    padding: 20px;
    text-align: center;
    font-size: 18px;
    background-color: #feb006;
    color: #f00;
    font-weight: 400;
    z-index: 99999;
    position: absolute;
    left: 0;
    right: 0
}

.notification + nav {
    margin-top: 60px
}

.notification.large + nav {
    margin-top: 85px
}

main section {
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden
}

.section-sep {
    border-bottom: 1px solid #333858;
    width: 100%
}

.button {
    background: #353535;
    padding: 25px 45px;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    display: inline-block;
    cursor: pointer;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90)
}

.button.darker {
    background: #8a5aab
}

.button:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.button.invert {
    background: #fff;
    color: #6dbb00
}

.new-buttons {
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.new-buttons.download-icon-for-button:before {
    content: "";
    background-image: url("/website/ic_downloads_white.png");
    display: inline-block;
    left: 0;
    top: .19em;
    position: relative;
    height: 17px;
    width: 18px;
    background-size: 18px 17px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(9%) saturate(7472%) hue-rotate(285deg) brightness(117%) contrast(116%);
    margin-right: .6em
}

.new-buttons.external-icon-for-button:before {
    content: "";
    background-image: url("/website/ic_external_white.png");
    display: inline-block;
    left: 0;
    top: .06em;
    position: relative;
    height: 17px;
    width: 18px;
    background-size: 18px 17px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(9%) saturate(7472%) hue-rotate(285deg) brightness(117%) contrast(116%);
    margin-right: .6em
}

.new-buttons.long-button {
    width: 147px;
    text-align: center
}

.new-buttons:hover {
    opacity: .85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=85)
}

.new-buttons:hover.download-icon-for-button:before {
    filter: brightness(0) saturate(100%)
}

.new-buttons:hover.external-icon-for-button:before {
    filter: brightness(0) saturate(100%)
}

.new-buttons.green-white {
    background-color: #6dbb00;
    color: #fff
}

.new-buttons.green-white.invert-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #fff;
    color: #6dbb00 !important
}

.new-buttons.green-white.outline-hover {
    border: 3px solid #b3b3b3;
    padding: 11px 29px;
    background-image: url(./xxx2.png);
}

#windw.new-buttons.green-white.outline-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: transparent;
    color: #000 !important;
    background-image: url(./dw3344.png);
}
.new-buttons.green-white.outline-hover:hover {background-image: url(./1xbutton.png); background-color: #04c0c9;}


.new-buttons.white-black {
    background-color: #fff;
    color: #000
}

.new-buttons.white-black.invert-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #000;
    color: #fff !important
}

.new-buttons.white-black.outline-hover {
    border: 3px solid #fff;
    padding: 11px 29px
}

.new-buttons.white-black.outline-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: transparent;
    color: #fff !important
}

.new-buttons.black-white {
    background-color: #000;
    color: #fff
}

.new-buttons.black-white.invert-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #fff;
    color: #000 !important
}

.new-buttons.black-white.outline-hover {
    border: 3px solid #000;
    padding: 11px 29px
}

.new-buttons.black-white.outline-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: transparent;
    color: #000 !important
}

.new-buttons.white-purple {
    background-color: #fff;
    color: #7b5bf5
}

.new-buttons.white-purple.invert-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #7b5bf5;
    color: #fff !important
}

.new-buttons.white-purple.outline-hover {
    border: 3px solid #fff;
    padding: 11px 29px
}

.new-buttons.white-purple.outline-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: transparent;
    color: #fff !important
}

.new-buttons.purple-white {
    background-color: #7b5bf5;
    color: #fff
}

.new-buttons.purple-white.invert-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #fff;
    color: #7b5bf5 !important
}

.new-buttons.purple-white.outline-hover {
    border: 3px solid #7b5bf5;
    padding: 11px 29px
}

.new-buttons.purple-white.outline-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: transparent;
    color: #000 !important
}

.new-buttons.blue-white {
    background-color: #1155d9;
    color: #fff
}

.new-buttons.blue-white.invert-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #fff;
    color: #1155d9 !important
}

.new-buttons.blue-white.outline-hover {
    border: 3px solid #1155d9;
    padding: 11px 29px
}

.new-buttons.blue-white.outline-hover:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: transparent;
    color: #000 !important
}

.new-buttons.outline-black {
    background-color: none;
    color: #000;
    border: 3px solid #000;
    font-size: 16px;
    font-weight: 400
}

.new-buttons.outline-black:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #000;
    color: #fff
}

.new-buttons.outline-white {
    background-color: none;
    color: #fff;
    border: 3px solid #fff;
    font-size: 16px;
    font-weight: 400
}

.new-buttons.outline-white:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #fff;
    color: #000
}

.new-buttons.bolder-text {
    font-weight: 500
}

.new-buttons.even-bolder-text {
    font-weight: 600
}

.new-buttons.bigger {
    padding: 23px 43px;
    border-radius: 33px;
    background-image: url(./xbutton.png);
}

.new-buttons.bigger.outline-black {
    padding: 20px 40px
}

.new-buttons.bigger.outline-white {
    padding: 20px 40px
}

.new-buttons.bigger.outline-hover {
    padding: 20px 40px
}

.new-buttons.bottom-1em {
    margin-bottom: 1em
}

ul,li {
    list-style: none;
    padding: 0
}

li {
    padding-left: 33px;
    line-height: 120%;
    background-size: 22px 16px;
    background-repeat: no-repeat;
    background-position: left 5px;
    margin: 0 0 14px
}

.romb {
    width: 85px;
    height: 85px;
    margin: 30px auto;
    position: relative;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0)
}

.romb .icon,.romb .number {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in
}

.romb .icon {
    opacity: .9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    width: 56%;
    height: 56%
}

.romb .number {
    width: 20px;
    height: 15px
}

.romb::before {
    content: "";
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: rgba(255,255,255,0.2)
}

.right {
    float: right
}

.cc_container .cc_btn,.cc_container .cc_btn:visited {
    background-color: #7d4f9e !important;
    background-color: rgba(125,79,158,0.9) !important;
    color: #fff !important
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.upper {
    text-transform: uppercase
}

.lower {
    text-transform: lowercase
}

.cptlz {
    text-transform: capitalize
}

.nott {
    text-transform: none
}

.cptlz-first {
    text-transform: lowercase
}

.cptlz-first:first-letter {
    text-transform: uppercase
}

.error {
    color: #fb5e19
}

.success {
    color: #19fbb8
}

.info {
    color: #b174d7
}

.warning {
    color: #fbb919
}

.dark-ribbon {
    background: transparent -webkit--webkit-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit--moz-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit--o-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit--ms-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit-linear-gradient(315deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz--webkit-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz--moz-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz--o-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz--ms-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(315deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -o--webkit-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -o--moz-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -o--o-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -o--ms-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(315deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms--webkit-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms--moz-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms--o-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms--ms-linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(315deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit-linear-gradient(315deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(315deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(315deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(315deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(135deg, #272458 0%, #272458 0%, #100e0d 100%) 0% 0% no-repeat padding-box;
    -webkit-transform: skewY(-4deg);
    -moz-transform: skewY(-4deg);
    -o-transform: skewY(-4deg);
    -ms-transform: skewY(-4deg);
    transform: skewY(-4deg);
    padding: 30px 0;
    color: #fff
}

.dark-ribbon .container {
    -webkit-transform: skewY(4deg);
    -moz-transform: skewY(4deg);
    -o-transform: skewY(4deg);
    -ms-transform: skewY(4deg);
    transform: skewY(4deg);
    margin-top: 0;
    margin-bottom: 0
}

.purple-ribbon {
    background: transparent -webkit-linear-gradient(81deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(81deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(81deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(81deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(9deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit-linear-gradient(81deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(81deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(81deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(81deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(9deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    z-index: 3;
    -webkit-transform: skewY(-4deg);
    -moz-transform: skewY(-4deg);
    -o-transform: skewY(-4deg);
    -ms-transform: skewY(-4deg);
    transform: skewY(-4deg)
}

.purple-ribbon .container {
    -webkit-transform: skewY(4deg);
    -moz-transform: skewY(4deg);
    -o-transform: skewY(4deg);
    -ms-transform: skewY(4deg);
    transform: skewY(4deg)
}

.black-ribbon {
    background: #000;
    -webkit-transform: skewY(-4deg);
    -moz-transform: skewY(-4deg);
    -o-transform: skewY(-4deg);
    -ms-transform: skewY(-4deg);
    transform: skewY(-4deg);
    padding: 30px 0
}

.black-ribbon .container {
    -webkit-transform: skewY(4deg);
    -moz-transform: skewY(4deg);
    -o-transform: skewY(4deg);
    -ms-transform: skewY(4deg);
    transform: skewY(4deg);
    margin-top: 0;
    margin-bottom: 0
}

.ribbon-reverse {
    -webkit-transform: skewY(4deg);
    -moz-transform: skewY(4deg);
    -o-transform: skewY(4deg);
    -ms-transform: skewY(4deg);
    transform: skewY(4deg)
}

.ribbon-reverse .container {
    -webkit-transform: skewY(-4deg);
    -moz-transform: skewY(-4deg);
    -o-transform: skewY(-4deg);
    -ms-transform: skewY(-4deg);
    transform: skewY(-4deg)
}

.bg-default {
    background-color: #8a5aab;
    color: #fff
}

.bg-default .section-header,.bg-default .highlight {
    color: #fff
}

.bg-light {
    background-color: #fff;
    color: #000
}

.bg-light .section-header,.bg-light .highlight {
    color: #633f7e
}

.bg-light-darker {
    background-color: #efefef;
    color: #181726
}

.bg-light-darker .section-header,.bg-light-darker .highlight {
    color: #181726
}

.bg-light-semi-darker {
    background-color: #dce3f4;
    color: #181726
}

.bg-light-semi-darker .section-header,.bg-light-semi-darker .highlight {
    color: #633f7e
}

.bg-dark {
    background-color: #2b2c43;
    color: #7a7985
}

.bg-dark .section-header,.bg-dark .highlight {
    color: #8ca3dc
}

.bg-darker {
    background-color: #633f7e;
    color: #fff
}

.bg-darker .section-header,.bg-darker .highlight {
    color: #fff
}

.titlecase,text-transform capitalize,.testimonials-holder {
    position: relative
}

.titlecase .testimonials-slide,text-transform capitalize .testimonials-slide,.testimonials-holder .testimonials-slide {
    display: none
}

.titlecase .testimonials-slide.active,text-transform capitalize .testimonials-slide.active,.testimonials-holder .testimonials-slide.active {
    display: block
}

.titlecase .testimonials-slide .icon,text-transform capitalize .testimonials-slide .icon,.testimonials-holder .testimonials-slide .icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: top;
    margin-right: 15px;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    margin-top: 10px
}

.titlecase .testimonials-slide .message,text-transform capitalize .testimonials-slide .message,.testimonials-holder .testimonials-slide .message {
    position: relative;
    width: calc(100% - 75px);
    display: inline-block;
    color: #633f7e;
    font-size: 2.3em;
    vertical-align: top
}

.titlecase .testimonials-slide .info,text-transform capitalize .testimonials-slide .info,.testimonials-holder .testimonials-slide .info {
    margin-top: 30px
}

.titlecase .testimonials-slide .info img,text-transform capitalize .testimonials-slide .info img,.testimonials-holder .testimonials-slide .info img {
    border-radius: 100%;
    width: 70px;
    height: 70px;
    border: 3px solid #8a5aab;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle
}

.titlecase .testimonials-slide .info .basic,text-transform capitalize .testimonials-slide .info .basic,.testimonials-holder .testimonials-slide .info .basic {
    display: inline-block;
    width: calc(100% - 286px);
    vertical-align: middle;
    color: #181726
}

.titlecase .testimonials-slide .info .basic .name,text-transform capitalize .testimonials-slide .info .basic .name,.testimonials-holder .testimonials-slide .info .basic .name {
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 900
}

.titlecase .testimonials-slide .info .basic .position,text-transform capitalize .testimonials-slide .info .basic .position,.testimonials-holder .testimonials-slide .info .basic .position {
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    font-size: 16px;
    font-weight: 500
}

.titlecase .nav,text-transform capitalize .nav,.testimonials-holder .nav {
    position: absolute;
    bottom: 6px;
    right: 20px
}

.titlecase .nav .icon,text-transform capitalize .nav .icon,.testimonials-holder .nav .icon {
    display: inline-block;
    width: 28px;
    height: 57px
}

.titlecase .nav .icon:first-child,text-transform capitalize .nav .icon:first-child,.testimonials-holder .nav .icon:first-child {
    margin-right: 30px
}

.titlecase .nav .arrow,text-transform capitalize .nav .arrow,.testimonials-holder .nav .arrow {
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    cursor: pointer;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out
}

.titlecase .nav .arrow:hover,text-transform capitalize .nav .arrow:hover,.testimonials-holder .nav .arrow:hover,.titlecase .nav .arrow:focus,text-transform capitalize .nav .arrow:focus,.testimonials-holder .nav .arrow:focus {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: fade;
    -moz-animation-name: fade;
    -o-animation-name: fade;
    -ms-animation-name: fade;
    animation-name: fade;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s
}

.hero {
    margin: 70px auto;
    margin-top: 170px
}

.hero h1 {
    margin-bottom: 15px;
    white-space: pre-line;
    font: normal normal 600 2.7rem/3rem Plus Jakarta Sans;
    letter-spacing: 1.35px;
    text-align: left;
    color: #fff;
    opacity: .87;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=87)";
    filter: alpha(opacity=87)
}

.hero h2 {
    font-size: 1.2em;
    margin-bottom: 40px;
    margin-top: 5px;
    color: #bbb;
    text-align: left;
    font: normal normal 300 1.2rem/1.7rem Plus Jakarta Sans;
    letter-spacing: .6px;
    color: #fff;
    opacity: .87;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=87)";
    filter: alpha(opacity=87);
    max-width: 50%;
    display: inline-block
}

.header-container {
    max-width: 525px
}

.header-container h1 {
    margin-bottom: 40px !important;
    font-weight: 600;
    font-size: 2.7rem
}

.header-container h2 {
    line-height: 1.9rem
}

@-webkit-keyframes fade {
    from {
        opacity: .1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        filter: alpha(opacity=10)
    }

    to {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
}

.half-img img {
    max-height: 400px
}

.half-img img.left {
    float: right
}

.half-img img.right {
    float: none
}

@media screen and (max-width: 768px) {
    .half-img img {
        max-height:none;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        float: none
    }

    .half-img img.right {
        margin-top: 10px;
        float: none
    }

    .half-img img.left {
        margin-bottom: 10px;
        float: none
    }

    .half-img .img-container {
        max-height: 260px;
        overflow: hidden;
        padding-top: 40px
    }
}

nav .download {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    position: absolute;
    top: 0;
    left: 20px
}

nav .download-btn {
    font-size: 14px;
    padding: 18px 20px;
    font-weight: 300
}

body.pin-download #home .download {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0)
}

body.pin-download nav .download {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

body .android-announce {
    display: block
}

body.mobile .mobile-buttons {
    display: block !important
}

body.mobile .download {
    display: none !important
}

body.mobile.ios .mobile-buttons .ios {
    display: block !important;
    background-position: right !important;
    margin-right: 55px !important
}

body.mobile.android .mobile-buttons .android {
    display: block !important;
    background-position: right !important;
    margin-right: 55px !important
}

.mobile-buttons {
    margin-left: 50px
}

.mobile-buttons .icon {
    height: 60px;
    width: 223px;
    margin: auto;
    display: block
}

a.get-gplay {
    display: inline-block;
    margin-top: 20px;
    opacity: 1;
    -ms-filter: none;
    filter: none
}

a.get-gplay:hover {
    opacity: .85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=85)
}

a.get-gplay img {
    width: 233px;
    border-radius: 40px
}

.overlay {
    position: relative;
    background-color: rgba(32,31,50,0.7);
    background-blend-mode: multiply
}

.overlay.dark {
    background-color: rgba(10,10,23,0.8)
}

.overlay.light {
    background-color: rgba(255,255,255,0.9)
}

.hero {
    margin: 70px auto;
    margin-top: 170px
}

.hero h2 {
    font-size: .9em
}

.form-msg {
    display: none
}

#art-contest-banner {
    background-color: #633f7d;
    padding: 0;
    width: 100%;
    text-align: center
}

#art-contest-banner a {
    margin: 0;
    padding: 0;
    border: none;
    opacity: 1;
    -ms-filter: none;
    filter: none
}

#art-contest-banner a img {
    max-width: 80%;
    display: block
}

#art-gallery-banner {
    background-color: #633f7d;
    padding: 0;
    width: 100%;
    text-align: center
}

#art-gallery-banner a {
    margin: 0;
    padding: 0;
    border: none;
    opacity: 1;
    -ms-filter: none;
    filter: none
}

#art-gallery-banner a img {
    max-width: 80%;
    display: block
}

.resp-table {
    width: 100%;
    display: table;
    color: #000
}

.resp-table-header {
    display: table-header-group;
    font-weight: bold;
    font-size: 25px
}

.table-header-cell {
    display: table-cell;
    text-align: justify;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    color: #000;
    font-size: 12px
}

.resp-table-body {
    display: table-row-group
}

.resp-table-body .resp-table-row {
    display: table-row
}

.resp-table-body .resp-table-row .table-body-cell {
    display: table-cell;
    padding: 40px 0;
    border-bottom: 1px solid #7b5bf5
}

.resp-table-body .resp-table-row .table-body-cell.table-padding-right {
    padding-right: 10px
}

.resp-table-body .resp-table-row:last-of-type .table-body-cell {
    border-bottom: none
}

#competition {
    background-color: #634179;
    padding: 0 40px
}

#competition h1 {
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
    font-weight: 600;
    font-size: 45px;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 126px;
    display: inline-block;
    vertical-align: middle
}

#competition h1 .yellow {
    color: #ffb82d
}

#competition h1 .blue {
    color: #8ca3dc
}

#competition h1 .white {
    color: #fff
}

#competition .caption {
    text-align: left
}

#competition img {
    margin: 1em .6em;
    vertical-align: middle
}

#competition .cup {
    height: 4em
}

#competition .bold {
    font-weight: bold
}

#competition .container {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0
}

#competition .clarify {
    padding-top: .5em;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5em;
    padding-bottom: 0
}

#competition .prize-banner {
    text-align: right;
    color: #fff
}

#competition .prize-banner h1 {
    color: #fec844;
    margin-right: 7px;
    font-size: 57px
}

@media screen and (max-width: 1280px) {
    #competition .caption,#competition .prize-banner {
        text-align:center
    }
}

@media screen and (max-width: 620px) {
    #competition h1 {
        font-size:36px
    }

    #competition .prize-banner h1 {
        font-size: 31px
    }
}

@media screen and (max-width: 520px) {
    #competition h1.addon-competiton-title {
        font-size:28px !important;
        line-height: 90px !important
    }

    #competition .prize-banner {
        line-height: 90px !important
    }

    #competition .prize-banner h1 {
        font-size: 25px false;
        line-height: 90px !important
    }

    #competition .prize-banner p.bold.clarify.text-left {
        font-size: 12px !important
    }
}

@media screen and (max-width: 510px) {
    #competition {
        padding:0 20px
    }
}

@media screen and (max-width: 650px) {
    #competition {
        font-size:12px
    }
}

@media screen and (max-width: 780px) {
    .purple-ribbon-image {
        display:none
    }

    .purple-ribbon .container .pure-g > div {
        display: block;
        width: 100%
    }

    .dark-ribbon .pure-g > div {
        display: block;
        width: 100%
    }

    .black-ribbon .pure-g > div {
        display: block;
        width: 100%
    }

    #career-da .container,#downloads .container {
        margin-top: 17px !important;
        margin-bottom: 117px
    }

    #career-da .resp-table,#downloads .resp-table {
        width: calc(100% - 40px);
        padding-left: 20px;
        padding-right: 20px
    }

    #career-da .resp-table-row,#downloads .resp-table-row {
        display: block !important;
        border-bottom: 1px solid #7b5bf5;
        padding-bottom: 40px
    }

    #career-da .resp-table-row:last-of-type,#downloads .resp-table-row:last-of-type {
        border-bottom: none !important
    }

    #career-da .resp-table-row .table-body-cell,#downloads .resp-table-row .table-body-cell {
        display: block !important;
        width: 100% !important;
        border-bottom: 0 !important;
        min-width: auto !important;
        max-width: none !important;
        padding-bottom: 0 !important
    }

    #career-da .resp-table-row .table-body-cell.cell-remove-on-phone,#downloads .resp-table-row .table-body-cell.cell-remove-on-phone {
        display: none !important
    }

    #career-da .resp-table-header,#downloads .resp-table-header {
        display: block !important
    }

    #career-da .resp-table-header .table-header-cell,#downloads .resp-table-header .table-header-cell {
        display: none !important
    }

    #career-da .resp-table-header .table-header-cell:first-of-type,#downloads .resp-table-header .table-header-cell:first-of-type {
        display: block !important;
        width: 100%
    }

    #stremio-on-tv .stremio-on-tv-left > div {
        position: relative !important;
        width: calc(100% - 40px) !important;
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    #stremio-on-tv .img-stremio.tv-mockup {
        display: none
    }

    .builder-mascot {
        display: none
    }

    .big-builder-mascot {
        display: block;
        margin-bottom: 90px
    }

    .big-builder-mascot .hero-mascot-container {
        text-align: center
    }

    .big-builder-mascot .hero-mascot-container img {
        max-width: 70%
    }

    #stremio-on-tv .stremio-on-tv-left {
        display: block;
        width: 100%
    }

    #stremio-on-tv .stremio-on-tv-left > div {
        width: auto;
        padding: 0 40px
    }
}

@media screen and (max-width: 900px) {
    #art-contest-banner img {
        max-width:100% !important
    }
}

@media screen and (max-width: 990px) {
    body.mobile.ios .mobile-buttons .ios {
        margin-right:32px !important
    }

    body.mobile.android .mobile-buttons .android {
        margin-right: 32px !important
    }
}

.dialog-container {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5)
}

.dialog-container .dialog {
    margin: auto;
    color: #000;
    background-color: #fff;
    border-radius: 10px
}

.dialog-container .dialog button {
    border-radius: 10px;
    font-weight: 600
}

.cc-color-override-1332973529 .cc-btn {
    background-color: #1155d9 !important
}

.cc-color-override-1332973529.cc-window {
    min-height: 60px
}

@-moz-keyframes fade {
    from {
        opacity: .1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        filter: alpha(opacity=10)
    }

    to {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
}

@-webkit-keyframes fade {
    from {
        opacity: .1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        filter: alpha(opacity=10)
    }

    to {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
}

@-o-keyframes fade {
    from {
        opacity: .1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        filter: alpha(opacity=10)
    }

    to {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
}

@keyframes fade {
    from {
        opacity: .1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        filter: alpha(opacity=10)
    }

    to {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
}

.footer-ribbon-container {
    margin-top: -830px;
    z-index: -1
}

.footer-ribbon-container .footer-ribbon-start-left {
    clip-path: polygon(0% 0%,87% 100%,87% 100%,0% 100%);
    height: 950px;
    background: rgba(0,0,0,0.02);
    margin-bottom: -600px
}

.footer-ribbon-container .footer-ribbon-start-right {
    clip-path: polygon(100% 17%,-4% 100%,100% 100%);
    height: 600px;
    background: rgba(0,0,0,0.02)
}

.bg-purple-footer {
    background: transparent -webkit-linear-gradient(81deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(81deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(81deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(81deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(9deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit-linear-gradient(81deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(81deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(81deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(81deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(9deg, #000000 0%, #2b2b2b 100%) 0% 0% no-repeat padding-box;
    -webkit-transform: skewY(-4deg);
    -moz-transform: skewY(-4deg);
    -o-transform: skewY(-4deg);
    -ms-transform: skewY(-4deg);
    transform: skewY(-4deg);
    margin-top: -290px;
    z-index: 2;
    background-image:url(xxx2.png);
}

.bg-purple-footer .container {
    -webkit-transform: skewY(4deg);
    -moz-transform: skewY(4deg);
    -o-transform: skewY(4deg);
    -ms-transform: skewY(4deg);
    transform: skewY(4deg);
    margin: 0 auto;
    padding: 80px 0;
    padding-top: 105px
}

.bg-purple-footer .container .rating-container {
    text-align: center
}

.bg-purple-footer .container .rating-container .rating {
    display: inline-block;
    text-align: left
}

.bg-purple-footer .container .rating-container .rating .rating-app {
    font-size: 16px;
    opacity: .44;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=44)";
    filter: alpha(opacity=44);
    display: block
}

.bg-purple-footer .container .rating-container .rating .rating-score {
    font-size: 79px;
    font-weight: bold;
    display: block;
    margin-top: 15px
}

.bg-purple-footer .container .rating-container .rating .rating-stars {
    display: block
}

.bg-purple-footer .container .rating-container .rating .rating-stars img {
    width: 29px;
    height: 29px;
    margin-right: 5px
}

.bg-purple-footer .container .rating-container .rating .rating-count {
    opacity: .44;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=44)";
    filter: alpha(opacity=44);
    font-size: 19px;
    font-weight: 500;
    margin-top: 15px;
    display: inline-block
}

.bg-purple-footer .container .review {
    padding: 0 13%
}

.bg-purple-footer .container .review .review-name {
    display: block;
    font-size: 14px;
    margin-bottom: 5px
}

.bg-purple-footer .container .review .review-date {
    display: block;
    font-size: 12px;
    opacity: .4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    margin-bottom: 10px
}

.bg-purple-footer .container .review .review-details {
    display: block;
    font-size: 14px;
    line-height: 26px;
    opacity: .87;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=87)";
    filter: alpha(opacity=87)
}

.bg-purple-footer .container .get-stremio-container {
    text-align: center
}

.bg-purple-footer .container .get-stremio-container .get-stremio {
    display: inline-block;
    text-align: left
}

.bg-purple-footer .container .get-stremio-container .get-stremio h3.join-party {
    opacity: .4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    font-weight: bold;
    text-align: left;
    margin-top: 0
}

.bg-purple-footer .container .get-stremio-container .get-stremio .new-buttons.white-purple {
    display: block;
    width: 169px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 60px;
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.bg-purple-footer .container .get-stremio-container .get-stremio .new-buttons.white-purple:hover {
    opacity: .85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=85)
}

footer {
    position: relative;
    background: transparent -webkit-linear-gradient(286deg, #060846 0%, #061146 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(286deg, #060846 0%, #061146 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(286deg, #060846 0%, #061146 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(286deg, #060846 0%, #061146 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(164deg, #060846 0%, #021051 0%, #000000 100%) 0% 0% no-repeat padding-box;
    overflow: visible;
    clip-path: polygon(0 0,100% 15%,100% 100%,0% 100%);
    font-size: .9em;
    padding-top: 504px;
    margin-top: -536px;
    padding-bottom: 80px;
    margin-bottom: -60px
}

footer .pure-g {
    position: relative
}

footer .pure-g > div {
    margin-bottom: 15px
}

footer .pure-g .tvdb-attribution {
    letter-spacing: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: 1em
}

footer .pure-g .tvdb-attribution img {
    float: right;
    height: 25px;
    margin-left: 10px;
    margin-right: 15px
}

footer .pure-g .tvdb-attribution span {
    line-height: 25px;
    color: rgba(255,255,255,0.5);
    font-size: .85em
}

footer .pure-g .grid-item.community {
    text-align: right;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0
}

footer .pure-g .grid-item .group-title {
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 35px;
    letter-spacing: .01em;
    font-weight: 600
}

footer .pure-g .grid-item .group-title.community {
    margin-right: 15px
}

footer .pure-g .grid-item .community {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    margin-bottom: 25px
}

footer .pure-g .grid-item ul li {
    padding-left: 0
}

footer .pure-g .grid-item ul li a {
    margin: 0;
    color: rgba(255,255,255,0.8);
    font-weight: 400
}

footer .pure-g .grid-item ul li a:hover,footer .pure-g .grid-item ul li a:focus {
    color: #fff
}

footer .pure-g .grid-item ul.community {
    margin-top: -9px
}

footer .pure-g .grid-item ul.community li {
    display: inline-block;
    border-radius: 100%;
    width: 58px;
    height: 58px;
    margin-bottom: 0;
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    cursor: pointer
}

footer .pure-g .grid-item ul.community li:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

footer .pure-g .grid-item ul.community li .icon {
    display: block;
    -webkit-transform: translate(50%,50%);
    -moz-transform: translate(50%,50%);
    -o-transform: translate(50%,50%);
    -ms-transform: translate(50%,50%);
    transform: translate(50%,50%);
    width: 50%;
    height: 50%;
    background-position: center
}

.footer-bottom {
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    position: sticky;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0)
}

.footer-bottom .container {
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative
}

.footer-bottom .bottom-left span {
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    font-size: 13px
}

.footer-bottom a:hover,.footer-bottom a:focus {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.footer-bottom .grid-item {
    padding-left: 15px;
    padding-right: 15px
}

.footer-bottom .dl-btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden
}

.footer-bottom .dl-btn .download.download-options .button {
    padding: 0 1.5em;
    height: 46px;
    line-height: 46px;
    margin-top: 5px;
    margin-right: 50px;
    font-size: 14px
}

.footer-bottom .dl-btn .download.download-options .icon {
    display: inline-block;
    height: 24px;
    width: 24px;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: 0
}

.footer-bottom .dl-btn .download.download-options .icon.icon-apple-white {
    margin-top: -1px
}

.footer-bottom .dl-btn .mobile-buttons {
    display: none
}

.footer-bottom .dl-btn .mobile-buttons .ios,.footer-bottom .dl-btn .mobile-buttons .android {
    display: none
}

.visible-footer {
    visibility: visible !important;
    opacity: 1 !important;
    -ms-filter: none !important;
    filter: none !important;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    transition: opacity 0.5s
}

@media screen and (max-width: 900px) {
    #faq-home .stremur-head {
        max-width:10% !important
    }
}

@media screen and (max-width: 768px) {
    footer .pure-g .grid-item.community {
        display:none
    }

    footer .tvdb-attribution {
        display: none
    }
}

@media screen and (max-width: 658px) {
    .bg-purple-footer {
        height:900px
    }

    .bg-purple-footer .container .pure-g .rating-container {
        display: block;
        width: 100%;
        text-align: left;
        padding-left: 60px;
        margin-bottom: 40px
    }

    .bg-purple-footer .container .pure-g .rating-container .rating {
        padding: 0 13%
    }

    .bg-purple-footer .container .pure-g .review-container {
        display: block;
        width: 100%;
        text-align: left;
        padding-left: 60px;
        margin-bottom: 40px
    }

    .bg-purple-footer .container .pure-g .get-stremio-container {
        display: block;
        width: 100%;
        text-align: left;
        padding-left: 60px;
        margin-bottom: 40px
    }

    .bg-purple-footer .container .pure-g .get-stremio-container .get-stremio {
        padding: 0 13%
    }

    footer {
        padding-top: 998px;
        margin-top: -936px
    }

    #faq-home .container .pure-u-1 {
        padding: 0 20px;
        max-width: none;
        width: auto
    }
}

footer .pure-g > div {
    margin-bottom: 15px
}

@media screen and (max-width: 990px) {
    footer .pure-g .grid-item ul.community {
        margin-right:-6px
    }
}

@media screen and (max-width: 768px) {
    footer .pure-g .grid-item ul.community {
        margin-right:0
    }
}

@media screen and (max-width: 568px) {
    footer {
        padding-top:950px;
        padding-bottom: 100px
    }

    footer .container {
        padding-left: 29px;
        padding-right: 29px
    }

    footer .grid-item.community {
        width: 100%;
        text-align: left !important;
        margin-left: -21px;
        display: inline-block !important;
        position: initial !important
    }

    footer .pure-g > div {
        margin-top: 15px
    }

    footer .pure-g > div:first-of-type {
        margin-top: 70px
    }

    footer .pure-g > div group-title {
        margin-bottom: 25px
    }

    footer .pure-g > div:last-of-type {
        margin-top: 15px;
        margin-bottom: 50px
    }

    footer .pure-g .grid-item.community {
        display: block;
        margin-bottom: 0
    }

    footer .tvdb-attribution {
        display: block;
        margin-bottom: -23px !important;
        right: auto;
        left: 0;
        margin-left: 12px;
        width: fit-content
    }

    .footer-bottom {
        position: relative;
        background-color: #110f26
    }

    .footer-bottom .grid-item {
        padding-left: 20px;
        padding-right: 20px
    }

    .footer-bottom .bottom-left {
        display: block;
        position: static
    }

    .footer-bottom .dl-btn {
        display: none
    }
}

@media screen and (max-width: 540px) {
    #faq-home .stremur-head {
        max-width:12% !important
    }

    .bg-purple-footer .container .rating-container {
        padding-left: 40px !important;
        padding-right: 40px
    }

    .bg-purple-footer .container .rating-container .rating {
        padding: 0 !important
    }

    .bg-purple-footer .container .review-container {
        padding-left: 40px !important;
        padding-right: 40px
    }

    .bg-purple-footer .container .review-container .review {
        padding: 0 !important
    }

    .bg-purple-footer .container .get-stremio-container {
        padding-left: 40px !important;
        padding-right: 40px
    }

    .bg-purple-footer .container .get-stremio-container .get-stremio {
        padding: 0 !important
    }
}

@media screen and (max-width: 380px) {
    footer .container {
        padding-left:40px;
        padding-right: 40px
    }
}

@media screen and (max-width: 340px) {
    footer .container {
        padding-left:20px;
        padding-right: 20px
    }
}

#home {
    z-index: 2;
    padding-bottom: 200px
}

#home.hero-area h1 {
    margin-top: 56px !important
}

#home.hero-area h2 {
    font-size: 1.2em !important
}

#home .blobs-mask {
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70)
}

.blobs-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    background: #000;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: hidden;
    position: absolute
}

.blobs-container .blob {
    width: 50%;
    height: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    border-radius: 30% 80% 75% 40%/40% 40% 70% 50%;
    -webkit-animation-name: animate-blob;
    -moz-animation-name: animate-blob;
    -o-animation-name: animate-blob;
    -ms-animation-name: animate-blob;
    animation-name: animate-blob;
    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    -o-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -o-animation-direction: alternate;
    -ms-animation-direction: alternate;
    animation-direction: alternate
}

.blobs-container .blob:nth-child(1) {
    background-color: #211048;
    -webkit-animation-direction: backwards;
    -moz-animation-direction: backwards;
    -o-animation-direction: backwards;
    -ms-animation-direction: backwards;
    animation-direction: backwards
}

.blobs-container .blob:nth-child(2) {
    background-color: #232691
}

.blobs-container .blob:nth-child(3) {
    background-color: #17222c;
    -webkit-animation-direction: backwards;
    -moz-animation-direction: backwards;
    -o-animation-direction: backwards;
    -ms-animation-direction: backwards;
    animation-direction: backwards
}

.blobs-container .blob:nth-child(4) {
    background-color: #314f22
}

.blobs-container .blob:nth-child(5) {
    background-color: #2a1c1a;
    -webkit-animation-direction: backwards;
    -moz-animation-direction: backwards;
    -o-animation-direction: backwards;
    -ms-animation-direction: backwards;
    animation-direction: backwards
}

.blobs-container .blob-backdrop {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    backdrop-filter: blur(120px)
}

.purple-ribbon .available-on {
    text-transform: uppercase;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    font-weight: 600 !important;
    font-size: 14px;
    margin-bottom: 0;
    padding-bottom: 0
}

.above {
    z-index: 4
}

.img-header {
    position: absolute;
    top: 52px;
    max-width: 50%;
    overflow: hidden
}

.img-header img {
    max-width: 160%;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.img-mobile-header {
    display: none
}

.desktop-app-mockup {
    position: relative;
    margin-top: -573px;
    margin-right: 50px;
    max-width: 100%
}

.ribbons-footer {
    height: 371px;
    background: transparent -webkit--webkit-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit--moz-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit--o-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit--ms-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit-linear-gradient(315deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz--webkit-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz--moz-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz--o-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz--ms-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(315deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -o--webkit-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -o--moz-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -o--o-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -o--ms-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(315deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms--webkit-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms--moz-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms--o-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms--ms-linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(315deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit-linear-gradient(315deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(315deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(315deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(315deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(135deg, #061c46 0%, #061c46 0%, #281d51 100%) 0% 0% no-repeat padding-box;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -ms-filter: none;
    filter: none;
    z-index: -2;
    -webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0 70%);
    clip-path: polygon(0% 0%,100% 0%,100% 100%,0 70%);
    margin-top: -310px;
    position: relative;
    margin-bottom: 20px
}

.hero .download-title {
    font: normal normal 300 16px/16px Plus Jakarta Sans;
    letter-spacing: .45px;
    color: #fff;
    opacity: .87;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=87)";
    filter: alpha(opacity=87);
    display: block;
    margin-bottom: 25px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30)
}

#logos h4 {
    font-size: 1em;
    margin-bottom: 10px;
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70)
}

#logos .container {
    margin: 0 auto
}

#logos .logos {
    background: rgba(193,178,203,0.3);
    padding-top: 25px;
    padding-bottom: 25px
}

#logos .logo {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 34px;
    background-position: center;
    background-size: auto 100%;
    background-size: contain
}

.mobile-buttons {
    margin-left: 0;
    display: none
}

.mobile-buttons .ios,.mobile-buttons .android {
    display: none
}

.mobile-buttons b {
    font-weight: 600
}

.mobile-buttons .mobile-downloads-button {
    padding: 16px 32px;
    border: 2px solid #fff;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    display: inline-block
}

.mobile-buttons .mobile-downloads-button:hover {
    background: #fff;
    color: #000
}

.download {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    text-align: left;
    position: relative
}

.download .hero_download_link .download-os-name {
    height: 20px;
    width: 20px;
    margin: 0;
    margin-right: 10px
}

.download .hero_download_link .txt {
    top: -1px;
    position: relative;
    display: inline-block
}

.download .hero_download_link .icon {
    margin-bottom: -1px
}

.download .nipple {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #6dbb00;
    opacity: .9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90)
}

.download .version {
    color: #a0a0a0;
    font-size: 14px;
    margin-top: 2px
}

.download .download-btn:hover ~ .nipple {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.download .icon {
    display: inline-block;
    margin: 5px 10px;
    padding: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50)
}

.download .icon.selected {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.download .button {
    border-radius: 30px;
    text-transform: none;
    padding: 14px 32px;
    text-align: center;
    font-size: 16px;
    letter-spacing: .4px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    border: 2px solid #121212;
    height: 24px
}

.download .button:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: transparent
}

.download .button .icon {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.download .other-button {
    padding: 16px 32px;
    border: 2px solid #fff;
    border-radius: 30px;
    margin-left: 20px;
    font-size: 16px;
    font-weight: 500
}

.download .other-button:hover {
    background: #fff;
    color: #000
}

.mobile-devices-container {
    display: none
}

.mobile-devices-space-top {
    display: none
}

#stremio p {
    max-width: 560px
}

#stremio .img-stremio {
    max-height: 450px
}

#stremio .button {
    margin-bottom: 40px;
    padding: 30px
}

#stremio .container {
    margin: 104px auto;
    overflow: hidden
}

#stremio .pure-g .grid-item {
    margin-left: 50px;
    padding: 0
}

#stremio .text-left {
    margin-top: -32px
}

#stremio .text-left h2 {
    font-weight: 500
}

#stremio .text-left p {
    font-weight: 400
}

#stremio .grid-item .platform-link {
    margin-right: 23px;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    display: inline-block;
    line-height: 40px
}

#stremio .grid-item .platform-link:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

#stremio .grid-item .platform-link span {
    vertical-align: middle
}

#stremio .grid-item .platform-link span.platform-name:hover {
    text-decoration: underline
}

#stremio .grid-item .platform-link .icon {
    margin-right: 7px;
    display: inline-block
}

#stremio .grid-item .platform-link .icon-android-home {
    width: 20px;
    height: 24px
}

#stremio .grid-item .platform-link .icon-win-home {
    width: 23px;
    height: 23px
}

#stremio .grid-item .platform-link .icon-macos-home {
    width: 19px;
    height: 23px
}

#stremio .grid-item .platform-link .icon-linux-home {
    width: 21px;
    height: 24px
}

#stremio .grid-item .platform-link .icon-lg {
    width: 21px;
    height: 24px
}

#stremio .grid-item .platform-link .logo-samsung {
    width: 95px;
    height: 15px;
    filter: invert(1)
}

#devices {
    overflow: visible
}

#devices .header .container {
    margin-top: 0 !important;
    margin-bottom: 0
}

#devices .header .container h2 {
    text-align: left;
    max-width: 500px;
    margin-left: 50px
}

#devices .img-holder {
    overflow: visible;
    margin-top: 50px;
    margin-bottom: 0;
    padding-bottom: 100px
}

#devices .img-holder .img-u {
    position: relative
}

#devices .img-holder .img-devices {
    position: absolute;
    bottom: 0;
    right: 15px;
    max-height: 450px
}

#devices .img-holder ul {
    margin-bottom: 50px;
    margin-left: 50px
}

#devices .img-holder ul li {
    position: relative;
    font-size: 1.5em;
    text-transform: uppercase;
    letter-spacing: .03em
}

#devices .img-holder ul li:after {
    content: ' ';
    height: .6em;
    width: .6em;
    background: #fff;
    display: block;
    position: absolute;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: .4em;
    left: 0
}

#devices .img-holder .icon {
    height: 70px;
    width: 223px;
    display: inline-block;
    margin-right: 15px
}

@media screen and (max-width: 768px) {
    #devices .img-holder .img-u {
        position:relative
    }

    #devices .img-holder .img-devices {
        position: static
    }
}

#testimonials {
    position: relative;
    height: 650px;
    background-size: cover;
    background-position: center;
    background-image: url("/website/home-testimonials.jpg")
}

#faq-home {
    background-color: transparent;
    position: relative;
    margin-bottom: 55px
}

#faq-home .container {
    z-index: 2;
    margin-top: 70px
}

#faq-home .stremur-head {
    position: absolute;
    top: 45%;
    right: 0;
    max-width: 7%
}

#faq-home .pure-u-1 {
    max-width: 600px
}

#faq-home h2 {
    color: #000
}

#faq-home h3 {
    text-align: left;
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
    font-weight: 300;
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 20px
}

#faq-home h4 {
    margin-bottom: 23px;
    color: #1155d9;
    text-align: left;
    margin-top: 30px;
    font-weight: bold;
    font-size: 18px
}

#faq-home p {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #000
}

#faq-home a {
    color: #7b5bf5;
    font-weight: 600
}

#watch-and-enjoy-details {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 60px
}

#watch-and-enjoy-details h2 {
    color: #000;
    font-weight: bold;
    font-size: 1.6em;
    text-align: left
}

#watch-and-enjoy-details p {
    max-width: 75%;
    color: #000;
    text-align: left;
    font-size: 16px;
    font-weight: 400
}

#watch-and-enjoy-details .screencapture-mobile-app {
    margin-top: -21px
}

#watch-and-enjoy-details .new-buttons {
    padding: 16px 32px
}

#stremio-on-tv {
    overflow: visible
}

#stremio-on-tv .stremio-on-tv-left {
    text-align: right;
    position: relative
}

#stremio-on-tv .stremio-on-tv-left > div {
    display: inline-block;
    padding: 3% 0;
    position: absolute;
    margin: auto;
    top: 0;
    right: 20%;
    bottom: 0;
    height: fit-content;
    width: 70%
}

#stremio-on-tv .white-google-play-icon {
    display: block;
    text-align: left
}

#stremio-on-tv .white-google-play-icon a {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

#stremio-on-tv .white-google-play-icon a:hover {
    opacity: .85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=85)
}

#stremio-on-tv .white-google-play-icon a img {
    max-width: 233px;
    border-radius: 40px
}

#stremio-on-tv .tv-mockup {
    max-width: 180%;
    margin-left: -11%;
    margin-top: -5%
}

#stremio-on-tv h2 {
    text-align: left;
    font-size: 1.9em;
    font-weight: 600;
    max-width: 77%;
    margin-left: 0
}

#stremio-on-tv p {
    text-align: left;
    display: inline-block
}

.stremur-mouse-remote-small {
    display: none;
    position: absolute;
    max-width: 60%;
    right: 0;
    -webkit-transform: translate(38%,-60%);
    -moz-transform: translate(38%,-60%);
    -o-transform: translate(38%,-60%);
    -ms-transform: translate(38%,-60%);
    transform: translate(38%,-60%)
}

#stremio-on-tv-mascot {
    overflow: visible
}

#stremio-on-tv-mascot .container {
    margin-top: 0;
    margin-bottom: 0
}

#stremio-on-tv-mascot .container .stremio-on-tv-right {
    position: relative;
    z-index: 1;
    top: -339px
}

#stremio-on-tv-mascot .container .stremio-on-tv-right .stremur-mouse-remote {
    position: absolute;
    left: 10%;
    max-width: 75%
}

@media screen and (max-width: 1300px) {
    #stremio-on-tv .stremio-on-tv-left h2 {
        max-width:100%
    }

    #stremio-on-tv .stremio-on-tv-left > div {
        width: 84%
    }
}

@media screen and (max-width: 1100px) {
    #stremio .pure-g .grid-item {
        margin-left:30px
    }

    .desktop-app-mockup {
        margin-right: 30px
    }
}

@media screen and (max-width: 1050px) {
    #home .hero h2.cptlz-first {
        max-width:100%
    }
}

@media screen and (max-width: 1028px) {
    #stremio-on-tv-mascot .container .stremio-on-tv-right {
        top:-319px
    }
}

@media screen and (max-width: 958px) {
    #stremio-on-tv-mascot .container .stremio-on-tv-right {
        top:-306px
    }
}

@media screen and (max-width: 990px) {
    #home .hero {
        padding-left:40px;
        padding-right: 40px
    }

    #stremio-on-tv .container {
        padding-left: 40px;
        padding-right: 40px
    }
}

@media screen and (max-width: 975px) {
    #home .hero .other-button {
        display:none
    }

    #stremio .pure-g .grid-item {
        margin-left: 20px
    }

    .desktop-app-mockup {
        margin-right: 20px
    }
}

@media screen and (max-width: 898px) {
    #stremio-on-tv-mascot .container .stremio-on-tv-right {
        top:-288px
    }
}

@media screen and (max-width: 868px) {
    #stremio-on-tv-mascot .container .stremio-on-tv-right {
        top:-288px
    }
}

@media screen and (max-width: 838px) {
    #stremio-on-tv-mascot .container .stremio-on-tv-right {
        top:-270px
    }
}

@media screen and (max-width: 808px) {
    #stremio-on-tv-mascot .container .stremio-on-tv-right {
        top:-261px
    }
}

@media screen and (max-width: 780px) {
    #stremio-on-tv .container {
        padding-left:20px;
        padding-right: 20px
    }

    #home .container {
        padding: 0 40px
    }

    #home .hero > div {
        display: block;
        width: 100%
    }

    .img-header-container {
        display: none
    }

    #stremio-on-tv-mascot .container .stremio-on-tv-right {
        display: block !important;
        top: -395px
    }

    #stremio-on-tv-mascot .container .stremio-on-tv-right .stremur-mouse-remote {
        left: 25px !important;
        top: 211px;
        max-width: 300px !important
    }

    #stremio p {
        max-width: none
    }

    #stremio .pure-g .grid-item {
        margin-right: 20px
    }

    #stremio.purple-ribbon .container {
        margin: 63px auto
    }

    #stremio.purple-ribbon .text-left {
        margin-top: 0 !important
    }

    #stremio.purple-ribbon h1 {
        margin-top: 0
    }

    #watch-and-enjoy-details .screencapture-mobile-app {
        display: none
    }

    #watch-and-enjoy-details .left {
        display: block;
        width: 100%;
        padding: 0 20px
    }

    #watch-and-enjoy-details .left p {
        max-width: 100%
    }

    #watch-and-enjoy-details .tv-mockup {
        display: none
    }

    #stremio-on-tv-mascot .stremio-on-tv-right {
        display: none
    }
}

#stremio.purple-ribbon {
    margin-top: -239px
}

@media screen and (max-width: 550px) {
    #stremio-on-tv .pure-u-1-2:nth-child(1) {
        z-index:2
    }

    #stremio-on-tv .pure-u-1-2:nth-child(2) {
        z-index: 1
    }

    .stremur-mouse-remote-small {
        display: block
    }

    .stremur-mouse-remote {
        display: none
    }

    .mobile-devices-container {
        display: block !important;
        position: relative
    }

    .mobile-devices-container img.mobile-devices {
        position: absolute;
        max-width: 100%;
        -webkit-transform: translate(0%,-59%);
        -moz-transform: translate(0%,-59%);
        -o-transform: translate(0%,-59%);
        -ms-transform: translate(0%,-59%);
        transform: translate(0%,-59%);
        z-index: 3
    }

    .mobile-devices-space-top {
        display: block;
        height: 90px
    }

    .mobile-devices-space-bottom {
        margin-top: 60px
    }

    .img-mobile-header {
        display: block
    }

    .img-mobile-header img {
        left: -6%;
        margin-top: -14%;
        margin-bottom: -8%
    }

    #stremio.purple-ribbon .container {
        margin-bottom: 104px
    }

    .img-mobile-header {
        display: block
    }

    .img-mobile-header img {
        max-width: 240%;
        position: relative;
        left: 0;
        margin-top: -15%;
        margin-bottom: -8%;
        -moz-user-select: none;
        -webkit-user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .desktop-buttons {
        display: none !important
    }

    .mobile-buttons {
        display: block !important
    }

    .mobile-buttons .mobile-downloads-button {
        display: inline-block !important
    }
}

@media screen and (max-width: 540px) {
    .hero h1 {
        font-size:1.9rem
    }

    #stremio.purple-ribbon h2 {
        font-size: 1.9rem
    }

    #stremio-on-tv h2 {
        font-size: 1.9rem
    }

    #faq-home h2 {
        font-size: 1.9rem
    }
}

#discover p,#all-content p,#library p,#calendar p {
    max-width: 560px;
    font-size: 16px;
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    font-weight: 400
}

#discover .description,#all-content .description,#library .description,#calendar .description {
    display: table
}

#discover .description .content,#all-content .description .content,#library .description .content,#calendar .description .content {
    display: table-cell;
    vertical-align: middle
}

#all-content,#calendar {
    min-height: 550px
}

#all-content .description,#calendar .description {
    min-height: 550px
}

#all-content .img-stremio,#calendar .img-stremio {
    max-height: 550px
}

#discover .description,#library .description {
    min-height: 350px
}

#features .header-container {
    max-width: 525px
}

#features .hero {
    margin-top: 120px;
    margin-bottom: 120px;
    text-align: left
}

#features .hero h1 {
    font-size: 2.8em;
    margin-bottom: 15px;
    white-space: pre-line;
    font: normal normal 600 2.7rem/3rem Plus Jakarta Sans;
    letter-spacing: 1.35px;
    text-align: left;
    color: #fff;
    opacity: .87;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=87)";
    filter: alpha(opacity=87)
}

#features .hero h2 {
    font-size: 1.2em;
    margin-bottom: 40px;
    margin-top: 5px;
    text-align: left;
    max-width: 100%;
    font: normal normal 300 1.2rem/1.7rem Plus Jakarta Sans;
    letter-spacing: .6px;
    color: #fff;
    opacity: .87;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=87)";
    filter: alpha(opacity=87);
    display: inline-block;
    line-height: 1.9rem
}

#watch-and-enjoy-details {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 60px
}

#watch-and-enjoy-details h2 {
    color: #000;
    font-weight: bold;
    font-size: 1.6em;
    text-align: left
}

#watch-and-enjoy-details p {
    max-width: 75%;
    color: #000;
    text-align: left;
    font-size: 16px
}

#watch-and-enjoy-details .screencapture-mobile-app {
    margin-top: -21px
}

#secure-streaming {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 90px
}

#secure-streaming h2 {
    color: #000;
    font-weight: bold;
    font-size: 2.3em;
    text-align: left;
    margin-bottom: 10px
}

#secure-streaming h3 {
    color: #000;
    text-align: left;
    font-size: 2.3em;
    margin-top: 0
}

#secure-streaming p {
    max-width: 100%;
    color: #000;
    text-align: left;
    font-size: 16px;
    font-weight: 400
}

#secure-streaming .knight-container {
    position: relative
}

#secure-streaming .knight-container img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%
}

#secure-streaming .txt-box .txt-container {
    padding-left: 20px;
    padding-right: 40px;
    padding-top: 70px;
    padding-bottom: 45px
}

#knight-small {
    display: none;
    text-align: center
}

#knight-small img {
    max-width: 70%;
    margin-top: 30px
}

#discover-front {
    text-align: center
}

#discover-front img {
    max-width: 90%
}

#hd-video-support {
    background: #000;
    color: #fff;
    text-align: right
}

#hd-video-support .container {
    margin-top: 0;
    margin-bottom: 0
}

#hd-video-support .container .hd-video-support-tab {
    position: relative
}

#hd-video-support .container .hd-video-support-tab.hd-video-support-container {
    padding-top: 20px;
    padding-bottom: 45px
}

#hd-video-support .container .hd-video-support-tab .hd-video-support-left {
    padding-right: 50px;
    padding-top: 50px
}

#hd-video-support .container .hd-video-support-tab .ultra-hd-icon {
    position: absolute;
    top: 10px;
    left: 5px
}

#hd-video-support .container .hd-video-support-tab .white-google-play-icon {
    display: block;
    text-align: right
}

#hd-video-support .container .hd-video-support-tab .white-google-play-icon a {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

#hd-video-support .container .hd-video-support-tab .white-google-play-icon a:hover {
    opacity: .85 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)" !important;
    filter: alpha(opacity=85) !important
}

#hd-video-support .container .hd-video-support-tab .white-google-play-icon a img {
    max-width: 233px
}

#hd-video-support .container .hd-video-support-tab h2 {
    text-align: right;
    font-size: 1.6em;
    font-weight: bold
}

#hd-video-support .container .hd-video-support-tab p {
    text-align: right;
    max-width: 70%;
    display: inline-block
}

#hd-video-support .container .hd-video-support-tab .player-demo {
    float: left;
    padding-left: 50px;
    max-width: 110%
}

#diverse-content-library {
    overflow: visible;
    background: transparent -webkit-linear-gradient(59deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(59deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(59deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(59deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(31deg, var(--unnamed-color-1155d9) 0%, var(--unnamed-color-7b5bf5) 100%) 0% 0% no-repeat padding-box;
    background: transparent -webkit-linear-gradient(59deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent -moz-linear-gradient(59deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent -o-linear-gradient(59deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent -ms-linear-gradient(59deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(31deg, #1155d9 0%, #7b5bf5 100%) 0% 0% no-repeat padding-box
}

#diverse-content-library .container {
    margin-top: 0;
    margin-bottom: 0
}

#diverse-content-library .container .streaming-platforms-img {
    text-align: center;
    z-index: 2;
    max-width: 100%;
    position: relative
}

#diverse-content-library .container .streaming-platforms-img img {
    height: 110%;
    position: absolute;
    top: -10%;
    right: 20px
}

#diverse-content-library .container .diverse-content-left {
    text-align: left;
    padding-bottom: 25px;
    padding-left: 40px;
    padding-right: 40px
}

#diverse-content-library .container .diverse-content-left h2 {
    text-align: left;
    font-size: 26px;
    font-weight: bold
}

#diverse-content-library .container .diverse-content-left p {
    font-size: 16px
}

#diverse-content-library .container .diverse-content-container {
    padding: 20px 0
}

#discover-more {
    margin-top: 70px
}

#big-screen {
    background-size: cover;
    background-position: 0 150px;
    background-image: url("/website/features-big-screen.jpg");
    position: relative;
    height: 800px
}

#big-screen .section-header {
    margin-bottom: 20px
}

#big-screen p {
    max-width: 560px
}

#big-screen .fade-header {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: -webkit-linear-gradient(top, #fff 0%, #fff 20%, rgba(255,255,255,0) 100%);
    background: -moz-linear-gradient(top, #fff 0%, #fff 20%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, #fff 0%, #fff 20%, rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, #fff 0%, #fff 20%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, #fff 0%, #fff 20%, rgba(255,255,255,0) 100%)
}

#big-screen .fade-header .container {
    margin-top: 60px
}

#sources .section-header {
    margin-bottom: 20px
}

#sources .container {
    margin-bottom: 200px
}

#sources p {
    max-width: 560px
}

#sources .logos {
    margin-top: 30px;
    margin-bottom: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30)
}

#sources .logos .logo {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 34px;
    background-position: center;
    background-size: contain
}

#sources .button {
    color: #fff
}

#footer-gap {
    height: 170px
}

.stremio-tv-features h2 {
    font-size: 3rem !important;
    font-weight: 400 !important
}

@media screen and (max-width: 1300px) {
    #stremio-on-tv .stremio-on-tv-left h2 {
        max-width:100%
    }

    #stremio-on-tv .stremio-on-tv-left > div {
        width: 84%;
        margin-right: 0;
        right: auto;
        left: 0
    }
}

@media screen and (max-width: 1175px) {
    #hd-video-support .container .hd-video-support-tab h2 {
        margin-top:-18px
    }

    #hd-video-support .container .hd-video-support-tab .player-demo {
        height: 100%;
        max-width: none !important
    }
}

@media screen and (max-width: 990px) {
    .features-mascot {
        -webkit-transform:translate(0%,-80%);
        -moz-transform: translate(0%,-80%);
        -o-transform: translate(0%,-80%);
        -ms-transform: translate(0%,-80%);
        transform: translate(0%,-80%)
    }

    #features .hero {
        padding-left: 40px;
        padding-right: 40px
    }

    #features .hero h1 {
        margin-top: 25px
    }
}

@media screen and (max-width: 780px) {
    #features .hero {
        padding-left:20px;
        padding-right: 20px
    }

    .features-mascot {
        width: 80%;
        -webkit-transform: translate(0%,-60%) !important;
        -moz-transform: translate(0%,-60%) !important;
        -o-transform: translate(0%,-60%) !important;
        -ms-transform: translate(0%,-60%) !important;
        transform: translate(0%,-60%) !important
    }

    .header-container {
        padding: 0 20px
    }

    #watch-and-enjoy-details .screencapture-mobile-app {
        display: none
    }

    #watch-and-enjoy-details .left {
        display: block;
        width: 100%;
        padding: 0 20px
    }

    #watch-and-enjoy-details .left p {
        max-width: 100%
    }

    #hd-video-support .ultra-hd-icon {
        display: none
    }

    #hd-video-support .player-demo {
        display: none
    }

    #hd-video-support .hd-video-support-container {
        display: block;
        width: 100%
    }

    #hd-video-support .hd-video-support-left {
        padding-right: 20px !important;
        padding-left: 20px
    }

    #hd-video-support .black-right p {
        max-width: 100%
    }

    #hd-video-support .hd-video-support-tab {
        text-align: left
    }

    #hd-video-support .hd-video-support-tab h2 {
        margin-top: -25px !important;
        text-align: left !important
    }

    #hd-video-support .hd-video-support-tab p {
        text-align: left !important
    }

    #hd-video-support .hd-video-support-tab .white-google-play-icon {
        text-align: left !important
    }

    #diverse-content-library .diverse-content-container {
        display: block;
        width: 100%
    }

    #diverse-content-library .streaming-platforms-img {
        display: none
    }

    #diverse-content-library .container .diverse-content-left {
        padding-right: 20px;
        padding-left: 20px
    }

    #secure-streaming .txt-box {
        display: block;
        width: 100%
    }

    #secure-streaming .txt-box .txt-container {
        padding-left: 20px;
        padding-right: 20px
    }

    #secure-streaming .knight-container {
        display: none
    }

    #knight-small {
        display: block
    }

    #knight-small img {
        margin-top: 70px;
        margin-bottom: -40px
    }

    #footer-gap {
        height: 200px
    }
}

@media screen and (max-width: 640px) {
    .features-mascot {
        width:90%
    }
}

@media screen and (max-width: 580px) {
    .header-container {
        display:block;
        width: 100%
    }

    .features-mascot {
        width: 100%
    }
}

@media screen and (max-width: 410px) {
    .features-mascot {
        width:125%;
        max-width: 125% !important;
        -webkit-transform: translate(-12%,-75%) !important;
        -moz-transform: translate(-12%,-75%) !important;
        -o-transform: translate(-12%,-75%) !important;
        -ms-transform: translate(-12%,-75%) !important;
        transform: translate(-12%,-75%) !important
    }
}

#about {
    background-size: cover;
    background-position: center;
    background-image: url("/website/about-hero.jpg")
}

#about .hero {
    margin-top: 220px;
    margin-bottom: 220px
}

#about h2 {
    text-transform: none
}

#how p {
    max-width: 560px;
    font-size: 16px;
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    font-weight: 400;
    padding-top: 20px
}

#how .img-stremio {
    max-height: 455px
}

#team .container {
    margin-bottom: 25px
}

#team p {
    max-width: 750px;
    margin: auto
}

#team img {
    margin-bottom: -5px
}

#team-grid {
    background-size: cover;
    background-position: center;
    background-image: url("/website/about-team.jpg")
}

#team-grid .container {
    margin-top: 60px
}

#team-grid .member {
    margin: auto;
    padding: 40px
}

#team-grid .member .description {
    line-height: 24px;
    font-size: 16px;
    font-weight: ligter;
    width: 235px;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80)
}

#team-grid .member .info {
    display: block;
    margin-bottom: 25px
}

#team-grid .member .info img {
    width: 158px;
    height: 158px;
    display: inline-block;
    margin-right: 25px;
    vertical-align: bottom
}

#team-grid .member .info .basic {
    margin-top: 10px;
    position: relative;
    display: block;
    vertical-align: bottom
}

#team-grid .member .info .basic .name {
    font-size: 1em;
    color: #fff
}

#team-grid .member .info .basic .position {
    font-size: .7em;
    text-transform: uppercase;
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    color: #fff;
    letter-spacing: .08em
}

#team-grid .member .info .basic .member-links ul {
    padding: 0;
    list-style-type: none;
    max-width: 137px;
    margin-bottom: 0
}

#team-grid .member .info .basic .member-links ul li {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    margin-bottom: 0;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    padding: 0
}

#team-grid .member .info .basic .member-links ul li:hover {
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70)
}

#team-grid .member .info .basic .member-links ul li a {
    display: block;
    width: 100%;
    height: 100%
}

#team-grid .member .info .basic .member-links ul li a .icon {
    width: 100%;
    height: 100%
}

@media screen and (max-width: 568px) {
    #team-grid .member {
        padding-left:0;
        padding-right: 0
    }
}

#testimonials {
    position: relative;
    height: 650px
}

.stremio-web-notif-container {
    position: relative;
    z-index: 3;
    color: #000;
    top: -29px
}

.stremio-web-notif-container .icon-bell {
    width: 20px;
    height: 25px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 6px
}

.stremio-web-notif-container b {
    margin-right: 10px
}

.stremio-web-notif-container a {
    text-decoration: none
}

.stremio-web-notif-container a:hover {
    text-decoration: underline
}

#downloads .container {
    margin-top: 0;
    z-index: 2;
    position: relative;
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 217px
}

#downloads .download-title {
    font-weight: bold;
    font-size: 16px;
    min-width: 300px;
    vertical-align: top
}

#downloads .downloads-row {
    font-size: 18px;
    font-weight: 400;
    padding: 5em 0
}

#downloads .downloads-row:first-child {
    padding-top: 30px
}

#downloads .downloads-row:last-child {
    padding-bottom: 30px
}

#downloads .downloads-row:not(:last-child) {
    border-bottom: 2px solid rgba(99,63,126,0.3)
}

#downloads .icon {
    width: 31px;
    height: 31px;
    display: inline-block;
    margin-right: 28px
}

#downloads .icon.icon-one-line {
    display: block;
    max-width: 92px
}

#downloads .download-label {
    margin-top: 12px;
    width: 233px;
    text-align: center;
    font-size: 12px;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    font-weight: 500
}

#downloads .other-download-links {
    font-size: 14px
}

#downloads .other-download-links a {
    display: inline-block;
    margin-bottom: 34px;
    opacity: 1;
    -ms-filter: none;
    filter: none
}

#downloads .other-download-links a:hover {
    text-decoration: underline;
    opacity: 1;
    -ms-filter: none;
    filter: none
}

#downloads .other-download-links a:last-of-type {
    margin-bottom: 0
}

#downloads .other-download-links a.blue-bold {
    color: #1155d9;
    font-weight: bold
}

#downloads .other-download-links a:not(.blue-bold):after {
    content: "";
    background-image: url("/website/ic_downloads.png");
    display: inline-block;
    left: .6em;
    top: .29em;
    position: relative;
    height: 17px;
    width: 18px;
    background-size: 18px 17px
}

#downloads .logo-androidtv {
    width: 180px
}

#downloads .logo-samsung {
    width: 150px;
    max-width: 110px !important
}

#downloads .logo-sony {
    width: 150px;
    max-width: 110px !important
}

#downloads .logo-philips {
    width: 150px;
    max-width: 110px !important
}

#downloads .logo-meta-quest {
    width: 150px;
    max-width: 110px !important
}

#downloads .logo-lg {
    width: 60px;
    max-width: 52px !important
}

#downloads .logo-steamdeck {
    width: 180px
}

#downloads .platform-container,#downloads .dl-container,#downloads .dls-container {
    display: inline-block;
    margin-right: 15px;
    vertical-align: top
}

#downloads .platform-container {
    width: 260px;
    margin-right: 40px
}

#downloads .px45-top-bottom {
    margin: 45px 0
}

#downloads .stremio-web-notif {
    margin: 0;
    padding: 0
}

#downloads .stremio-web-notif .stremio-web-link {
    margin-left: 15px;
    text-decoration: underline
}

#downloads .stremio-web-notif .stremio-web-link:hover {
    text-decoration: none
}

#downloads .dls-container {
    width: calc(100% - 330px);
    text-align: left
}

#downloads .dl-container {
    width: 200px;
    height: 200px;
    background-color: #efefef;
    color: #633f7e;
    margin-bottom: 5px
}

#downloads .dl-container.external {
    width: auto;
    height: auto;
    background: transparent;
    vertical-align: middle
}

#downloads .dl-container .icon {
    display: none;
    margin-top: 15px;
    width: 36px;
    height: 37px
}

#downloads .dl-container .icon.btn-mobile-store {
    margin-top: 53px;
    height: 56px;
    width: 200px;
    display: block;
    padding-bottom: 10px
}

#downloads .dl-container .dl-btn {
    position: relative;
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out
}

#downloads .dl-container .dl-btn.recommended:before {
    content: "Recommended download";
    padding: .3em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    color: #a4b0d6;
    border: 3px solid
}

#downloads .dl-container .dl-btn.recommended:hover:before {
    display: none
}

#downloads .dl-container .dl-btn span:first-child {
    display: block;
    padding: 10px
}

#downloads .dl-container .dl-btn:hover,#downloads .dl-container .dl-btn:focus {
    background-color: #8a5aab;
    color: #fff
}

#downloads .dl-container .dl-btn:hover .icon,#downloads .dl-container .dl-btn:focus .icon {
    margin-top: 10px;
    display: block;
    margin: auto;
    width: 36px;
    height: 37px
}

#downloads .dl-container .dl-btn:hover .icon:hover,#downloads .dl-container .dl-btn:focus .icon:hover {
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    -o-transition: -o-transform 0.2s ease-in-out;
    -ms-transition: -ms-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

#downloads .more-button-holder {
    width: 100%;
    text-align: left;
    border-top: 1px solid #7b5bf5
}

#downloads .more-button-holder .more-downloads-options {
    letter-spacing: normal;
    margin-top: 40px;
    margin-right: 20px
}

#downloads #downloads-table .resp-table-body .resp-table-row .table-body-cell {
    vertical-align: middle
}

#downloads #downloads-table .resp-table-body .resp-table-row .table-body-cell .icon {
    vertical-align: middle
}

#downloads #downloads-table .resp-table-body .resp-table-row .table-body-cell .platform {
    font-size: 16px;
    display: inline-block;
    line-height: 31px;
    height: 31px;
    vertical-align: middle
}

#downloads #downloads-table .resp-table-body .resp-table-row .table-body-cell.text-small {
    font-size: 14px
}

@media screen and (max-width: 768px) {
    #downloads .dls-container {
        width:100%
    }

    #downloads .downloads-row {
        text-align: left
    }

    #downloads .platform-container {
        margin-right: 15px
    }
}

@media screen and (max-width: 568px) {
    #downloads .downloads-row,#downloads .dls-container {
        text-align:center
    }
}

.mascot-downloads img {
    -webkit-transform: translate(0%,-85%) !important;
    -moz-transform: translate(0%,-85%) !important;
    -o-transform: translate(0%,-85%) !important;
    -ms-transform: translate(0%,-85%) !important;
    transform: translate(0%,-85%) !important
}

@media screen and (max-width: 990px) {
    .mascot-downloads img {
        -webkit-transform:translate(0%,-75%) !important;
        -moz-transform: translate(0%,-75%) !important;
        -o-transform: translate(0%,-75%) !important;
        -ms-transform: translate(0%,-75%) !important;
        transform: translate(0%,-75%) !important;
        width: 70%
    }

    #downloads-hero .hero {
        padding-left: 40px;
        padding-right: 40px
    }
}

@media screen and (max-width: 780px) {
    #downloads .container {
        padding-left:20px;
        padding-right: 20px
    }

    .mascot-downloads img {
        -webkit-transform: translate(17%,-75%) !important;
        -moz-transform: translate(17%,-75%) !important;
        -o-transform: translate(17%,-75%) !important;
        -ms-transform: translate(17%,-75%) !important;
        transform: translate(17%,-75%) !important
    }

    .stremio-web-notif-container {
        text-align: left;
        padding-left: 40px;
        padding-right: 40px;
        line-height: 30px
    }

    #downloads-hero .hero {
        padding-left: 20px;
        padding-right: 20px
    }

    .more-button-holder {
        margin: 0 20px
    }
}

@media screen and (max-width: 720px) {
    .mascot-downloads img {
        -webkit-transform:translate(26%,-75%) !important;
        -moz-transform: translate(26%,-75%) !important;
        -o-transform: translate(26%,-75%) !important;
        -ms-transform: translate(26%,-75%) !important;
        transform: translate(26%,-75%) !important
    }
}

@media screen and (max-width: 690px) {
    .downloads-header-container {
        max-width:455px
    }
}

@media screen and (max-width: 590px) {
    .downloads-header-container {
        max-width:400px
    }
}

@media screen and (max-width: 540px) {
    .mascot-downloads img {
        -webkit-transform:translate(26%,-85%) !important;
        -moz-transform: translate(26%,-85%) !important;
        -o-transform: translate(26%,-85%) !important;
        -ms-transform: translate(26%,-85%) !important;
        transform: translate(26%,-85%) !important
    }

    .downloads-header-container {
        max-width: 350px
    }
}

@media screen and (max-width: 470px) {
    .mascot-downloads img {
        width:83%
    }
}

@media screen and (max-width: 460px) {
    .mascot-downloads img {
        -webkit-transform:translate(16%,-95%) !important;
        -moz-transform: translate(16%,-95%) !important;
        -o-transform: translate(16%,-95%) !important;
        -ms-transform: translate(16%,-95%) !important;
        transform: translate(16%,-95%) !important
    }

    .downloads-header-container {
        max-width: 300px
    }
}

@media screen and (max-width: 440px) {
    .mascot-downloads img {
        width:98%;
        -webkit-transform: translate(6%,-61%) !important;
        -moz-transform: translate(6%,-61%) !important;
        -o-transform: translate(6%,-61%) !important;
        -ms-transform: translate(6%,-61%) !important;
        transform: translate(6%,-61%) !important
    }
}

html {
    background-color: #f2f2f2
}

.cc-window {
    position: fixed !important
}

#warning {
    padding: 0 2em 2em;
    max-width: 900px;
    margin: 0 auto;
    overflow: visible;
    line-height: 2.5em;
    background-color: transparent;
    color: #000
}

#warning input[type="checkbox"],#warning input[type="radio"] {
    width: auto
}

#warning .image-container {
    margin-top: 100px;
    display: inline-block;
    vertical-align: top;
    margin-right: 2em;
    text-align: center
}

#warning .info-container {
    display: inline-block;
    max-width: 480px
}

#warning .info-container .section-header {
    margin-top: 100px;
    margin-bottom: 0;
    color: #000;
    font-size: 2.1em;
    line-height: 1.2em;
    text-align: left
}

#warning .info-container .subheader {
    margin-bottom: 20px;
    margin-top: 15px;
    font-size: 22px;
    line-height: normal
}

#warning .info-container .site-statement {
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px
}

#warning .info-container .info {
    font-size: 14px;
    line-height: normal;
    margin-bottom: 20px;
    color: #000
}

#warning .info-container .external-url {
    display: block;
    padding: 0 .5em;
    margin-bottom: 2em;
    background-color: rgba(0,0,0,0.1)
}

#warning .info-container .trust-container {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

#warning .info-container .trust-container #trust {
    margin-right: .5em
}

#warning .info-container .redirect-button {
    display: inline-block;
    cursor: pointer;
    padding: .8em;
    font-size: 17px;
    font-weight: 600;
    outline: none;
    color: #fff;
    border-radius: 45px;
    background-color: #6dbb00;
    margin-top: 15px;
    padding-left: 25px;
    padding-right: 25px
}

@media screen and (max-width: 947px) {
    #warning .image-container {
        max-width:24%;
        margin-right: 20px;
        margin-top: 32px;
        text-align: center
    }

    #warning .image-container img {
        max-width: 60%;
        display: inline-block
    }

    #warning h1 {
        margin-top: 25px !important
    }

    #warning .redirect-button {
        margin-bottom: 30px
    }
}

@media screen and (max-width: 580px) {
    #warning .image-container {
        margin-right:0;
        max-width: 100%;
        width: 100%
    }
}

#login {
    padding-top: 80px;
    margin-bottom: 60px
}

#login .section-header {
    margin-top: 70px;
    color: #000;
    font-size: 2.1em;
    line-height: 1.2em
}

#login #login-form {
    width: 18em;
    margin: 60px auto 100px auto;
    z-index: 2;
    position: relative
}

#login #login-form .blue-white {
    width: 100%
}

#login #login-form .blue-white .icon-ic_facebook {
    display: inline-block;
    margin-right: 18px
}

#login #login-form .blue-white .facebook-label {
    display: inline-block
}

#login #login-form .black-white {
    width: 100%
}

#login #login-form .black-white .icon-ic_apple {
    display: inline-block;
    margin-right: 18px
}

#login #login-form .black-white .apple-label {
    display: inline-block
}

#login #login-form .facebook-statement {
    margin: 7px 0 15px 0;
    font-size: 13px;
    text-align: center;
    opacity: .4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40)
}

#login #login-form .login-space-between {
    display: block;
    height: 20px
}

#login #login-form .or {
    margin: 0 0 1em 0;
    text-align: center
}

#login #login-form input {
    all: unset;
    height: 32px;
    margin-bottom: .5em;
    width: 100%;
    border-bottom: 1px solid #000
}

#login #login-form input::placeholder {
    font-weight: 400;
    letter-spacing: normal;
    color: rgba(0,0,0,0.3)
}

#login #login-form input#sign-in-button {
    padding: 20px 40px;
    margin-bottom: 0;
    border-radius: 33px;
    height: auto;
    width: calc(100% - 86px);
    margin-top: 21px
}

#login #login-form .error {
    font-size: 13px;
    text-align: center
}

#login #login-form .pass-error {
    display: none
}

#login #login-form .pass-error .click-here {
    all: unset;
    text-decoration: underline;
    cursor: pointer
}

#login #login-form #sign-in-button {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: transparent;
    color: #000;
    border: 3px solid #6dbb00;
    cursor: pointer;
    text-align: center
}

#login #login-form #sign-in-button:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #6dbb00;
    color: #fff !important
}

#login #login-form .sign-up-link {
    width: 100%;
    display: block;
    text-align: center;
    font-weight: bold;
    margin-top: 2.7em;
    color: rgba(0,0,0,0.4)
}

#login #login-form .sign-up-link:hover {
    color: #000
}

#register {
    padding-top: 80px;
    margin-bottom: 60px
}

#register .section-header {
    margin-top: 70px;
    color: #000;
    font-size: 2.1em;
    line-height: 1.2em
}

#register label {
    margin-top: .5em;
    display: inline-block;
    color: rgba(0,0,0,0.65)
}

#register h1 {
    font-size: 2.5em
}

#register #register-form {
    width: 18em;
    margin: 60px auto 100px auto;
    z-index: 2;
    position: relative
}

#register #register-form .facebook-statement {
    margin: 7px 0 15px 0;
    font-size: 13px;
    text-align: center
}

#register #register-form .or {
    margin: 0 0 1em 0;
    text-align: center
}

#register #register-form input {
    all: unset;
    height: 32px;
    margin-bottom: .5em;
    width: 100%;
    border-bottom: 1px solid #000
}

#register #register-form input::placeholder {
    font-weight: 400;
    letter-spacing: normal;
    color: rgba(0,0,0,0.3)
}

#register #register-form input#register-button {
    padding: 20px 40px;
    margin-bottom: 0;
    border-radius: 33px;
    height: auto;
    width: calc(100% - 86px);
    margin-top: 21px
}

#register #register-form .error {
    font-size: 13px;
    text-align: center
}

#register #register-form .pass-error {
    display: none
}

#register #register-form .pass-error .click-here {
    all: unset;
    text-decoration: underline;
    cursor: pointer
}

#register #register-form #register-button {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: transparent;
    color: #000;
    border: 3px solid #6dbb00;
    cursor: pointer;
    text-align: center
}

#register #register-form #register-button:hover {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background-color: #6dbb00;
    color: #fff !important
}

#register #register-form input[type="checkbox"] {
    all: revert !important
}

#register #register-form .consent-link {
    text-decoration: none;
    color: #000
}

#register #register-form .consent-link:hover {
    text-decoration: underline
}

#register #register-form .log-in-link {
    width: 100%;
    display: block;
    text-align: center;
    font-weight: bold;
    margin-top: 2.7em;
    color: rgba(0,0,0,0.4)
}

#register #register-form .log-in-link:hover {
    color: #000
}

.dialog {
    padding: 1.5em;
    width: auto
}

.dialog >:not(:first-child) {
    margin-top: 1.4em
}

.dialog .text {
    text-align: center
}

.dialog .text.header {
    padding-bottom: 1em;
    font-weight: 400;
    border-bottom: 1px solid rgba(0,0,0,0.1)
}

.dialog .text.question {
    font-size: 15px
}

.dialog input {
    all: unset;
    padding: .5em 0;
    width: 100%;
    font-weight: 400;
    letter-spacing: 2px;
    border-bottom: 1px solid #000
}

.dialog input::placeholder {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    color: rgba(0,0,0,0.3)
}

.dialog .account-pass-error {
    display: none;
    margin: 8px 8px 0 8px;
    font-size: 13px
}

.dialog .buttons {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: .6em -.6em -.6em
}

.dialog .buttons button {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: .9em 1.3em;
    border-radius: 25px !important;
    margin: .6em;
    border: none;
    outline: none;
    color: #fff
}

.dialog .buttons button.cancel-button {
    color: #000;
    background-color: rgba(0,0,0,0.1)
}

.dialog .buttons button.delete-button,.dialog .buttons button.ok-button {
    background-color: #6dbb00
}

#acc-settings {
    padding-top: 80px;
    z-index: 2;
    background-color: transparent
}

#acc-settings .section-header {
    margin-top: 100px;
    margin-bottom: 0;
    color: #000;
    font-size: 2.1em;
    line-height: 1.2em
}

#acc-settings .user-panel-container {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 50px 50px 50px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-top: -40px
}

#acc-settings .user-panel-container .side-menu {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -o-box-flex: 0;
    box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    margin-top: 8em;
    width: 224px
}

#acc-settings .user-panel-container .side-menu div {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 224px
}

#acc-settings .user-panel-container .side-menu div a {
    margin: .2em;
    padding: 1em 6em 1em .7em;
    outline: none;
    border-left: .3em solid rgba(0,0,0,0);
    font-size: 16px;
    font-weight: bold;
    border-radius: 35px;
    padding-left: 41px
}

#acc-settings .user-panel-container .side-menu div a:hover {
    background-color: rgba(0,0,0,0.1)
}

#acc-settings .user-panel-container .side-menu div a.active {
    color: #1155d9;
    background-color: #fff
}

#acc-settings .user-panel-container .user-panel {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    max-width: 45rem;
    padding: 0 3em;
    overflow-y: auto
}

#acc-settings .user-panel-container .user-panel section {
    padding: 8em 0;
    min-height: 300px;
    overflow-x: auto
}

#acc-settings .user-panel-container .user-panel section .subsection {
    padding: 3em 0
}

#acc-settings .user-panel-container .user-panel section .subsection:first-child {
    padding-top: 0
}

#acc-settings .user-panel-container .user-panel section .subsection:not(:last-child) {
    border-bottom: 1px solid rgba(138,90,171,0.5)
}

#acc-settings .user-panel-container .user-panel section .section-label {
    margin-bottom: 2em;
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    color: #000;
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70)
}

#acc-settings .user-panel-container .user-panel section .password-label {
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    color: rgba(0,0,0,0.3)
}

#acc-settings .user-panel-container .user-panel section #change-pass-error {
    width: 320px
}

#acc-settings .user-panel-container .user-panel section .error {
    font-size: 14px;
    text-align: center
}

#acc-settings .user-panel-container .user-panel section .notice {
    margin-bottom: 2em
}

#acc-settings .user-panel-container .user-panel section .integrations-subcontainer {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: start;
    -moz-box-align: start;
    -o-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start !important;
    align-items: flex-start !important;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -o-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem
}

#acc-settings .user-panel-container .user-panel section .integrations-subcontainer .info {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

#acc-settings .user-panel-container .user-panel section .integrations-subcontainer .info .label {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 1rem;
    color: #000;
    word-break: break-word
}

#acc-settings .user-panel-container .user-panel section .integrations-subcontainer .buttons {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -o-box-flex: 0;
    box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: .5rem
}

#acc-settings .user-panel-container .user-panel section a {
    outline: none;
    text-decoration: underline;
    color: #6dbb00
}

#acc-settings .user-panel-container .user-panel section button {
    font-size: 16px;
    font-weight: 600;
    border: none;
    outline: none;
    text-transform: capitalize;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    color: #fff;
    background-color: #6dbb00;
    border: 2px solid #6dbb00;
    padding: 14px 22px
}

#acc-settings .user-panel-container .user-panel section button:hover {
    background-color: transparent;
    color: #6dbb00
}

#acc-settings .user-panel-container .user-panel section button#change-password-button {
    margin-top: 1em;
    display: inline-block;
    border-radius: 30px
}

#acc-settings .user-panel-container .user-panel section button.account-button {
    display: block;
    min-width: 20rem;
    border-radius: 30px
}

#acc-settings .user-panel-container .user-panel section button.subscribe-button {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: #1155d9;
    border: 2px solid #1155d9
}

#acc-settings .user-panel-container .user-panel section button.subscribe-button .label {
    text-transform: none
}

#acc-settings .user-panel-container .user-panel section button.subscribe-button:hover {
    background-color: transparent;
    color: #1155d9
}

#acc-settings .user-panel-container .user-panel section button#delete-account-button {
    background-color: #000;
    border: 2px solid #000
}

#acc-settings .user-panel-container .user-panel section button#delete-account-button:hover {
    background-color: transparent;
    color: #f00
}

#acc-settings .user-panel-container .user-panel section button.integrations-button {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -o-box-flex: 0;
    box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    border-radius: 30px
}

#acc-settings .user-panel-container .user-panel section button.integrations-button.trakt-disconnect-button {
    display: none
}

#acc-settings .user-panel-container .user-panel section button.integrations-button.trakt-sync-button {
    display: none
}

#acc-settings .user-panel-container .user-panel section button#delete-sessions-button {
    float: right;
    border-radius: 30px;
    padding: 14px 22px;
    height: auto;
    background-color: #000;
    border: 2px solid #000
}

#acc-settings .user-panel-container .user-panel section button#delete-sessions-button:hover {
    background-color: transparent;
    color: #f00
}

#acc-settings .user-panel-container .user-panel section button.delete-session-button {
    width: 110px;
    height: 45px;
    display: none;
    background-color: #000;
    border: 2px solid #000;
    padding: 0;
    font-size: 12px;
    border-radius: 25px
}

#acc-settings .user-panel-container .user-panel section button.delete-session-button:hover {
    background-color: transparent;
    color: #f00
}

#acc-settings .user-panel-container .user-panel section button.export-button {
    background-color: #7b5bf5;
    border: 2px solid #7b5bf5
}

#acc-settings .user-panel-container .user-panel section button.export-button:hover {
    background-color: transparent;
    color: #7b5bf5
}

#acc-settings .user-panel-container .user-panel section table {
    width: 100%
}

#acc-settings .user-panel-container .user-panel section table tbody >:nth-child(odd) {
    background-color: rgba(0,0,0,0.1)
}

#acc-settings .user-panel-container .user-panel section table tr {
    height: 45px
}

#acc-settings .user-panel-container .user-panel section table tr th {
    font-size: 14px;
    text-align: left;
    color: rgba(0,0,0,0.3)
}

#acc-settings .user-panel-container .user-panel section table tr td:first-child {
    font-weight: 600
}

#acc-settings .user-panel-container .user-panel section table tr td:last-child {
    width: 110px
}

#acc-settings .user-panel-container .user-panel section table tr td:not(:last-child) {
    padding: 0 10px
}

#acc-settings .user-panel-container .user-panel section table tr:hover button {
    display: block
}

#acc-settings .user-panel-container .user-panel section input {
    all: unset;
    margin-bottom: 2em;
    padding: .5em 0;
    width: 20rem;
    display: block;
    font-weight: 400;
    letter-spacing: 2px;
    border-bottom: 1px solid #000
}

#acc-settings .user-panel-container .user-panel section input::placeholder {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    color: rgba(0,0,0,0.3)
}

#acc-settings .user-panel-container .user-panel section input#confirm-new-password {
    margin-bottom: 1em
}

#acc-settings .user-panel-container .user-panel section .icon-ic_calendar {
    margin-right: .6em;
    font-size: 18px
}

#acc-settings .user-panel-container .user-panel section .icon-ic_facebook {
    margin-right: 1em;
    width: 3em;
    height: 3em;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background-color: #334685
}

#acc-settings .user-panel-container .user-panel section .icon-ic_facebook:before {
    font-size: 20px
}

#acc-settings .user-panel-container .user-panel section .icon-ic_trackt {
    margin-right: 1em;
    color: #f00
}

#acc-settings .user-panel-container .user-panel section .icon-ic_trackt:before {
    font-size: 48px
}

#acc-settings .user-panel-container .user-panel section .flex-column-container {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

#acc-settings .user-panel-container .user-panel section .flex-column-container label {
    margin-bottom: 0
}

#acc-settings .user-panel-container .user-panel section .flex-column-container .baseline-container {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -o-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch
}

#acc-settings .user-panel-container .user-panel section .flex-column-container .label {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 1em;
    font-size: 14px;
    word-break: break-word
}

#acc-settings .user-panel-container .user-panel section .flex-column-container .checkbox-label {
    margin-right: .5em;
    font-size: 13px
}

#acc-settings .user-panel-container .user-panel section .flex-column-container.account-subcontainer {
    width: 20em
}

#acc-settings .user-panel-container .user-panel section .flex-column-container.notifications-subcontainer {
    width: 20em;
    margin-bottom: 1.5em
}

#acc-settings .user-panel-container .user-panel section .flex-column-container.notifications-subcontainer .notifications-icon {
    width: 2em;
    font-size: 20px;
    color: #a4b0d6
}

#acc-settings .user-panel-container .user-panel section .flex-row-container {
    margin-bottom: 1em;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

#acc-settings .user-panel-container .user-panel section .flex-row-container label {
    margin-bottom: 0
}

#acc-settings .user-panel-container .user-panel section .flex-row-container .baseline-container {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: baseline;
    -moz-box-align: baseline;
    -o-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline
}

#acc-settings .user-panel-container .user-panel section .flex-row-container .label {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 1em;
    font-size: 14px;
    word-break: break-word
}

#acc-settings .user-panel-container .user-panel section .flex-row-container .checkbox-label {
    margin-right: .5em;
    font-size: 13px
}

#acc-settings .user-panel-container .user-panel section .flex-row-container.account-subcontainer {
    width: 20em
}

#acc-settings .user-panel-container .user-panel section .flex-row-container.notifications-subcontainer {
    width: 20em;
    margin-bottom: 1.5em
}

#acc-settings .user-panel-container .user-panel section .flex-row-container.notifications-subcontainer .notifications-icon {
    width: 2em;
    font-size: 20px;
    color: #a4b0d6
}

#acc-settings .user-panel-container .user-panel section:not(:last-child) {
    border-bottom: 1px solid rgba(138,90,171,0.5)
}

#acc-settings .user-panel-container .user-panel section input[type="checkbox"] {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    width: 1.2em;
    height: .6em;
    margin: .2em .7em;
    padding: 0;
    font-size: 17px;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border-radius: 1em;
    background-color: rgba(0,0,0,0.2)
}

#acc-settings .user-panel-container .user-panel section input[type=checkbox]:after {
    width: 1em;
    height: 1em;
    margin: -.5em
}

#acc-settings .user-panel-container .user-panel section input[type=checkbox]:checked:after {
    left: 90%;
    background-color: #22b467
}

#acc-settings .user-panel-container .user-panel section input[type=checkbox]:not(:checked):after {
    left: 10%
}

#acc-settings .user-panel-container .user-panel section input[type=checkbox]:after {
    content: '';
    display: block;
    position: absolute;
    top: .3em;
    border-radius: 50%;
    background-color: #a8a8a8;
    -webkit-transition: left 0.2s;
    -moz-transition: left 0.2s;
    -o-transition: left 0.2s;
    -ms-transition: left 0.2s;
    transition: left 0.2s
}

@media only screen and (max-width: 850px) {
    section#acc-settings div.user-panel #integrations-settings div.integrations-subcontainer {
        width:100% !important;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }

    section#acc-settings div.user-panel #integrations-settings div.integrations-subcontainer .buttons {
        width: 100%;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }

    section#acc-settings div.user-panel #integrations-settings div.integrations-subcontainer div.label {
        margin: 16px 0 !important
    }
}

@media only screen and (max-width: 739px) {
    section#acc-settings div.user-panel-container {
        display:block !important;
        padding: 0 2rem 2rem 2rem
    }

    section#acc-settings div.user-panel-container div.side-menu {
        width: 100% !important
    }

    section#acc-settings div.user-panel-container div.side-menu div#scrollspy {
        position: unset !important;
        width: 100% !important
    }

    section#acc-settings div.user-panel-container div.user-panel {
        padding: 0 !important
    }

    section#acc-settings div.user-panel-container div.user-panel .account-button,section#acc-settings div.user-panel-container div.user-panel .integrations-button,section#acc-settings div.user-panel-container div.user-panel input {
        width: 100% !important
    }
}

#contribute {
    background-size: cover;
    background-position: center;
    background-image: url("/website/contribute-hero.jpg?cat=cat")
}

#contribute .hero {
    margin-top: 220px;
    margin-bottom: 220px
}

#contribute-all .img-holder {
    position: relative;
    min-height: 300px
}

#contribute-all .img-holder img {
    position: absolute;
    right: 0;
    bottom: 0
}

#contribute-all .grid-item {
    margin-top: 20px;
    margin-bottom: 20px
}

#contribute-why h2 {
    text-transform: none
}

#contribute-why .half-img img.right {
    margin-top: 120px
}

#contribute-why p,#monetize p,#contribute-all p {
    max-width: 620px
}

#contribute-why h3,#monetize h3,#contribute-all h3 {
    font-size: 24px;
    font-weight: 700;
    text-align: left;
    margin: 60px 0;
    line-height: 1.6em
}

#monetize .half-img img {
    margin-top: 50px
}

#monetize .button {
    margin-top: 60px;
    color: #633f7e
}

#translate h2 {
    text-transform: none
}

#translate .button.darker {
    margin-bottom: 50px
}

#community h1 {
    margin-bottom: 40px
}

#mascot-community {
    height: 117px
}

#mascot-community .hero-mascot-container img {
    -webkit-transform: translate(0%,-80%);
    -moz-transform: translate(0%,-80%);
    -o-transform: translate(0%,-80%);
    -ms-transform: translate(0%,-80%);
    transform: translate(0%,-80%)
}

#ways-to-get-involved .grid-item {
    margin-top: 0
}

#ways-to-get-involved .grid-item h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2.3em
}

#ways-to-get-involved .grid-item h3 {
    margin-top: 10px
}

#community-intro {
    color: #000;
    padding-left: 40px;
    padding-right: 40px
}

#community-intro .go-left {
    z-index: 2;
    text-align: left
}

#community-intro .go-left h2 {
    text-align: left;
    font-size: 20px;
    font-weight: bold
}

#community-intro .go-left p {
    font-size: 16px;
    font-weight: 400
}

#community-intro .go-left h3 {
    font-size: 12px;
    color: #000;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    text-transform: uppercase;
    font-weight: bold;
    text-align: left;
    letter-spacing: .3px
}

#community-intro .go-left .left-block {
    max-width: 490px;
    padding-right: 20px
}

#community-intro .go-left .left-block a {
    color: #1155d9;
    text-decoration: underline
}

#community-intro .go-left .left-block a:hover {
    text-decoration: none
}

#community-intro .go-left .right-block {
    padding-left: 20px
}

#community-intro .go-left .button-container {
    display: inline-block;
    vertical-align: top
}

#community-intro .go-left .button-container .button-box {
    background: var(#fff) 0% 0% no-repeat padding-box;
    background: #fff 0% 0% no-repeat padding-box;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.161);
    box-shadow: 0 3px 6px rgba(0,0,0,0.161);
    border-radius: 9px;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    width: 81px;
    height: 81px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    margin-bottom: 0
}

#community-intro .go-left .button-container .button-box:first-of-type {
    margin-bottom: 25px
}

#community-intro .go-left .button-container .button-box .icon {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    height: 38px;
    filter: brightness(0) saturate(100%) invert(25%) sepia(97%) saturate(2012%) hue-rotate(210deg) brightness(87%) contrast(94%)
}

#community-intro .go-left .button-container .button-box.no-filter .icon {
    filter: none
}

#community-intro .go-left .button-container .button-box.awesome-logo .icon {
    height: 26px
}

#community-intro .go-left .button-container .button-box.community-logo .icon {
    height: 52px
}

#community-intro .go-left .button-container .button-box.art-gallery-logo .icon {
    height: 44px
}

#community-intro .go-left .button-container .button-label {
    display: none
}

#community-intro .go-left .button-container:hover .button-box {
    background: #0061d8
}

#community-intro .go-left .button-container:hover .button-box.no-filter {
    background: #7461ec
}

#community-intro .go-left .button-container:hover .icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(210deg) brightness(100%) contrast(103%) !important
}

#community-intro .go-left .button-container:hover .button-label {
    position: relative;
    display: block
}

#community-intro .go-left .button-container:hover .button-label span {
    display: block;
    position: absolute;
    top: -20px;
    width: 81px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    color: #2058d1
}

#community-intro .go-left .button-container:hover .button-label span.purple-text {
    color: #7b5bf5 !important
}

#partners {
    position: relative;
    top: -200px
}

.translate-button:after {
    content: "" !important
}

.stremio-feathers-container {
    position: relative;
    z-index: 3
}

.stremio-feathers-container > img {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: translate(24%,-65%);
    -moz-transform: translate(24%,-65%);
    -o-transform: translate(24%,-65%);
    -ms-transform: translate(24%,-65%);
    transform: translate(24%,-65%)
}

.stremio-feathers-container-small {
    display: none;
    position: absolute;
    right: 0;
    -webkit-transform: translate(28%,-10%);
    -moz-transform: translate(28%,-10%);
    -o-transform: translate(28%,-10%);
    -ms-transform: translate(28%,-10%);
    transform: translate(28%,-10%);
    z-index: 1
}

#artists-intern-button {
    z-index: 2;
    position: relative
}

.contrib-translations {
    position: relative;
    z-index: 2
}

.contrib-translations h2.purple-title {
    font-size: 2.3em;
    margin-bottom: 10px
}

.contrib-translations h3 {
    margin-top: 10px
}

.volunteer-megaphone-container {
    z-index: 1;
    position: relative
}

.volunteer-megaphone-container > img {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate(-18%,-100%);
    -moz-transform: translate(-18%,-100%);
    -o-transform: translate(-18%,-100%);
    -ms-transform: translate(-18%,-100%);
    transform: translate(-18%,-100%)
}

#community-developer {
    margin-top: 117px
}

#community-developer .pure-u-1-2:nth-of-type(1) > div {
    padding-right: 20px;
    max-width: 520px
}

#community-developer .pure-u-1-2:nth-of-type(2) > div {
    padding-left: 20px;
    max-width: 520px
}

#community-developer .container {
    margin-top: 117px;
    margin-bottom: 117px;
    position: relative;
    top: -10px
}

#community-developer .container h2 {
    text-align: left;
    margin-top: 0
}

#community-developer .container p {
    margin-bottom: 0;
    padding-bottom: 30px;
    font-size: 16px;
    font-weight: 400
}

#community-developer .container #community-dev-extra .grid-item {
    margin-top: 0
}

#community-developer .container #community-dev-extra .grid-item p:last-of-type {
    margin-top: 40px
}

#community-art {
    padding: 0;
    margin-top: -1px;
    margin-bottom: 117px;
    overflow: visible
}

#community-art .pure-u-1-2:nth-of-type(1) > div {
    padding-right: 20px;
    max-width: 520px
}

#community-art .pure-u-1-2:nth-of-type(2) > div {
    padding-left: 20px;
    max-width: 520px
}

#community-art .container {
    position: relative;
    top: 90px;
    margin-top: 0;
    padding-bottom: 250px
}

#community-art .container h2 {
    text-align: left;
    margin-top: 0
}

#community-art .container p {
    font-size: 16px
}

#pd-movies {
    background-image: image-set(url("/website/public-domain-featured.png") 1x,url("/website/public-domain-featured@2x.png") 2x);
    background-repeat: no-repeat;
    background-position: top;
    background-size: auto;
    padding-top: 360px;
    margin-top: 117px;
    padding-bottom: 0;
    margin-bottom: 220px
}

#pd-movies .pure-u-1-2:nth-of-type(1) > div {
    padding-right: 20px;
    max-width: 520px
}

#pd-movies .pure-u-1-2:nth-of-type(2) > div {
    padding-left: 20px;
    max-width: 320px
}

#pd-movies .container {
    margin-bottom: 117px
}

#pd-movies .container h2 {
    text-align: left;
    margin-top: 0;
    font-size: 20px;
    font-weight: 500
}

#pd-movies .container p {
    font-size: 16px
}

#communities-partners {
    margin-bottom: 260px;
    background: none;
    z-index: 2
}

#communities-partners > .container {
    margin-top: 0
}

#communities-partners > .container .grid-item {
    margin-top: 0
}

#communities-partners > .container .grid-item h2 {
    margin-top: 0
}

#communities-partners a {
    display: block;
    margin-top: 25px
}

#communities-partners a span {
    font-size: 16px;
    color: #1155d9;
    font-weight: bold
}

#communities-partners h2 {
    font-size: 24px;
    color: #000
}

#communities-partners .pure-u-md-1-3:last-of-type {
    width: 100%
}

@media screen and (min-width: 3841px) {
    .stremio-feathers-container > img {
        display:none !important
    }
}

@media screen and (max-width: 3840px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-46%);
        -moz-transform: translate(24%,-46%);
        -o-transform: translate(24%,-46%);
        -ms-transform: translate(24%,-46%);
        transform: translate(24%,-46%)
    }
}

@media screen and (max-width: 3780px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-47%);
        -moz-transform: translate(24%,-47%);
        -o-transform: translate(24%,-47%);
        -ms-transform: translate(24%,-47%);
        transform: translate(24%,-47%)
    }
}

@media screen and (max-width: 3700px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-48%);
        -moz-transform: translate(24%,-48%);
        -o-transform: translate(24%,-48%);
        -ms-transform: translate(24%,-48%);
        transform: translate(24%,-48%)
    }
}

@media screen and (max-width: 3550px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-49%);
        -moz-transform: translate(24%,-49%);
        -o-transform: translate(24%,-49%);
        -ms-transform: translate(24%,-49%);
        transform: translate(24%,-49%)
    }
}

@media screen and (max-width: 3550px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-49%);
        -moz-transform: translate(24%,-49%);
        -o-transform: translate(24%,-49%);
        -ms-transform: translate(24%,-49%);
        transform: translate(24%,-49%)
    }
}

@media screen and (max-width: 3430px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-50%);
        -moz-transform: translate(24%,-50%);
        -o-transform: translate(24%,-50%);
        -ms-transform: translate(24%,-50%);
        transform: translate(24%,-50%)
    }
}

@media screen and (max-width: 3250px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-51%);
        -moz-transform: translate(24%,-51%);
        -o-transform: translate(24%,-51%);
        -ms-transform: translate(24%,-51%);
        transform: translate(24%,-51%)
    }
}

@media screen and (max-width: 3150px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-52%);
        -moz-transform: translate(24%,-52%);
        -o-transform: translate(24%,-52%);
        -ms-transform: translate(24%,-52%);
        transform: translate(24%,-52%)
    }
}

@media screen and (max-width: 3000px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-53%);
        -moz-transform: translate(24%,-53%);
        -o-transform: translate(24%,-53%);
        -ms-transform: translate(24%,-53%);
        transform: translate(24%,-53%)
    }
}

@media screen and (max-width: 2850px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-54%);
        -moz-transform: translate(24%,-54%);
        -o-transform: translate(24%,-54%);
        -ms-transform: translate(24%,-54%);
        transform: translate(24%,-54%)
    }
}

@media screen and (max-width: 2700px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-55%);
        -moz-transform: translate(24%,-55%);
        -o-transform: translate(24%,-55%);
        -ms-transform: translate(24%,-55%);
        transform: translate(24%,-55%)
    }
}

@media screen and (max-width: 2550px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-56%);
        -moz-transform: translate(24%,-56%);
        -o-transform: translate(24%,-56%);
        -ms-transform: translate(24%,-56%);
        transform: translate(24%,-56%)
    }
}

@media screen and (max-width: 2400px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-57%);
        -moz-transform: translate(24%,-57%);
        -o-transform: translate(24%,-57%);
        -ms-transform: translate(24%,-57%);
        transform: translate(24%,-57%)
    }
}

@media screen and (max-width: 2250px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-58%);
        -moz-transform: translate(24%,-58%);
        -o-transform: translate(24%,-58%);
        -ms-transform: translate(24%,-58%);
        transform: translate(24%,-58%)
    }
}

@media screen and (max-width: 2100px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-59%);
        -moz-transform: translate(24%,-59%);
        -o-transform: translate(24%,-59%);
        -ms-transform: translate(24%,-59%);
        transform: translate(24%,-59%)
    }
}

@media screen and (max-width: 1950px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-60%);
        -moz-transform: translate(24%,-60%);
        -o-transform: translate(24%,-60%);
        -ms-transform: translate(24%,-60%);
        transform: translate(24%,-60%)
    }
}

@media screen and (max-width: 1800px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-61%);
        -moz-transform: translate(24%,-61%);
        -o-transform: translate(24%,-61%);
        -ms-transform: translate(24%,-61%);
        transform: translate(24%,-61%)
    }
}

@media screen and (max-width: 1650px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-62%);
        -moz-transform: translate(24%,-62%);
        -o-transform: translate(24%,-62%);
        -ms-transform: translate(24%,-62%);
        transform: translate(24%,-62%)
    }
}

@media screen and (max-width: 1500px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-63%);
        -moz-transform: translate(24%,-63%);
        -o-transform: translate(24%,-63%);
        -ms-transform: translate(24%,-63%);
        transform: translate(24%,-63%)
    }
}

@media screen and (max-width: 1350px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-64%);
        -moz-transform: translate(24%,-64%);
        -o-transform: translate(24%,-64%);
        -ms-transform: translate(24%,-64%);
        transform: translate(24%,-64%)
    }
}

@media screen and (max-width: 1200px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-65%);
        -moz-transform: translate(24%,-65%);
        -o-transform: translate(24%,-65%);
        -ms-transform: translate(24%,-65%);
        transform: translate(24%,-65%)
    }
}

@media screen and (max-width: 1050px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-66%);
        -moz-transform: translate(24%,-66%);
        -o-transform: translate(24%,-66%);
        -ms-transform: translate(24%,-66%);
        transform: translate(24%,-66%)
    }
}

@media screen and (max-width: 900px) {
    .stremio-feathers-container > img {
        -webkit-transform:translate(24%,-67%);
        -moz-transform: translate(24%,-67%);
        -o-transform: translate(24%,-67%);
        -ms-transform: translate(24%,-67%);
        transform: translate(24%,-67%)
    }
}

@media screen and (max-width: 780px) {
    .stremio-feathers-container-small {
        -webkit-transform:translate(28%,2%);
        -moz-transform: translate(28%,2%);
        -o-transform: translate(28%,2%);
        -ms-transform: translate(28%,2%);
        transform: translate(28%,2%)
    }
}

@media screen and (max-width: 700px) {
    .stremio-feathers-container-small {
        -webkit-transform:translate(28%,1%);
        -moz-transform: translate(28%,1%);
        -o-transform: translate(28%,1%);
        -ms-transform: translate(28%,1%);
        transform: translate(28%,1%)
    }
}

@media screen and (max-width: 650px) {
    .stremio-feathers-container-small {
        -webkit-transform:translate(28%,0%);
        -moz-transform: translate(28%,0%);
        -o-transform: translate(28%,0%);
        -ms-transform: translate(28%,0%);
        transform: translate(28%,0%)
    }
}

@media screen and (max-width: 767px) {
    #communities-partners .pure-u-md-1-3:last-of-type {
        width:50%
    }
}

@media screen and (max-width: 567px) {
    #communities-partners .pure-u-md-1-3:last-of-type {
        width:100%
    }
}

@media screen and (max-width: 1150px) {
    .volunteer-megaphone-container {
        display:none
    }
}

@media screen and (max-width: 990px) {
    #community-art .pure-u-1-2:nth-of-type(1) > div {
        padding-left:20px
    }

    #community-art .pure-u-1-2:nth-of-type(2) > div {
        padding-right: 20px
    }

    #community-developer .pure-u-1-2:nth-of-type(1) > div {
        padding-left: 20px
    }

    #community-developer .pure-u-1-2:nth-of-type(2) > div {
        padding-right: 20px
    }

    #pd-movies .pure-u-1-2:nth-of-type(1) > div {
        padding-left: 20px
    }

    #pd-movies .pure-u-1-2:nth-of-type(2) > div {
        padding-right: 20px
    }

    #community .hero {
        padding-left: 40px;
        padding-right: 40px
    }
}

@media screen and (max-width: 780px) {
    #community .hero {
        padding-left:20px;
        padding-right: 20px
    }

    .stremio-feathers-container {
        display: none
    }

    .stremio-feathers-container-small {
        display: block
    }

    #community-art .container {
        position: relative
    }

    .header-container {
        display: block;
        width: 100%
    }

    .big-builder-mascot {
        display: block;
        margin-top: 10px;
        margin-bottom: 50px
    }

    .big-builder-mascot .hero-mascot-container {
        text-align: center
    }

    .big-builder-mascot .hero-mascot-container img {
        max-width: 70%
    }

    #career-da .container {
        margin-top: 0 !important
    }
}

@media screen and (max-width: 540px) {
    #community-intro .pure-u-1-2 {
        width:100%;
        display: block
    }

    #community-intro .right-block {
        padding-left: 0 !important
    }

    #community-intro .left-block {
        padding-right: 0 !important
    }
}

#contact p {
    max-width: 750px
}

#contact .button {
    margin-bottom: 50px;
    margin-top: 25px
}

#contact-hero {
    background-size: cover;
    background-position: center;
    background-image: url("/website/contact-hero.jpg")
}

#contact-hero .hero {
    margin-top: 220px;
    margin-bottom: 220px
}

input,textarea {
    border: 2px solid rgba(0,0,0,0.2);
    padding: 21px;
    max-width: 610px;
    background: rgba(255,255,255,0.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%
}

input[type="submit"] {
    width: auto;
    min-width: 240px;
    border: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #6dbb00;
    text-transform: uppercase;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out
}

textarea {
    min-height: 140px
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0
}

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

.select-custom {
    overflow: hidden;
    width: 100%;
    max-width: 608px;
    position: relative;
    border: 2px solid rgba(0,0,0,0.2)
}

.select-custom .icon {
    position: absolute;
    top: calc(50% - 8px);
    right: 15px;
    width: 16px;
    height: 16px;
    z-index: -1
}

.select-custom select {
    background: transparent;
    border: none;
    height: 100%;
    padding: 21px;
    padding-right: 40px;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

#technology .hero {
    margin-top: 120px;
    margin-bottom: 120px;
    text-align: left
}

#technology .hero h1 {
    font-size: 2.8em;
    margin-bottom: 40px;
    white-space: pre-line;
    font: normal normal 600 2.7rem/3rem Plus Jakarta Sans;
    letter-spacing: 1.35px;
    text-align: left;
    color: #fff;
    opacity: .87;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=87)";
    filter: alpha(opacity=87)
}

#technology .hero h2 {
    font-size: 1.2em;
    margin-bottom: 40px;
    margin-top: 5px;
    text-align: left;
    max-width: 100%;
    font: normal normal 300 1.2rem/1.9rem Plus Jakarta Sans;
    letter-spacing: .6px;
    color: #fff;
    opacity: .87;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=87)";
    filter: alpha(opacity=87);
    display: inline-block
}

#technology-mobile {
    padding-top: 150px;
    padding-bottom: 80px;
    color: #fff
}

#technology-mobile .desc {
    width: calc(100% - 100px)
}

#technology-mobile .desc p {
    font-size: 16px;
    margin-top: 0
}

#technology-desktop {
    color: #000
}

#technology-desktop .container {
    margin-top: 40px
}

#technology-desktop .desc {
    width: auto
}

#technology-desktop .logo,#technology-mobile .logo,#technology-desktop .desc,#technology-mobile .desc {
    display: inline-block !important;
    vertical-align: top;
    margin-bottom: 20px
}

#technology-desktop .logo h3,#technology-mobile .logo h3,#technology-desktop .desc h3,#technology-mobile .desc h3 {
    font-size: 44px;
    text-align: left;
    margin: 5px auto
}

#technology-desktop .logo h4,#technology-mobile .logo h4,#technology-desktop .desc h4,#technology-mobile .desc h4 {
    font-size: 34px;
    text-align: left
}

#technology-desktop .logo p,#technology-mobile .logo p,#technology-desktop .desc p,#technology-mobile .desc p {
    margin-top: 0;
    font-weight: 400
}

#technology-desktop .logo .icon,#technology-mobile .logo .icon,#technology-desktop .desc .icon,#technology-mobile .desc .icon {
    width: 110px;
    height: 110px
}

#technology-desktop .logo .icon.small,#technology-mobile .logo .icon.small,#technology-desktop .desc .icon.small,#technology-mobile .desc .icon.small {
    width: 70px;
    height: 70px
}

#technology-desktop .logo .icon ~ .desc,#technology-mobile .logo .icon ~ .desc,#technology-desktop .desc .icon ~ .desc,#technology-mobile .desc .icon ~ .desc {
    width: calc(100% - 100px)
}

#technology-desktop .logo,#technology-mobile .logo {
    margin-right: 20px
}

#technology-desktop .desc h4,#technology-mobile .desc h4 {
    margin-top: 5px
}

#technology-contribute {
    z-index: 2;
    background-color: transparent;
    color: #000
}

#technology-contribute .new-buttons {
    margin-bottom: 150px
}

#technology-contribute .icon {
    display: block;
    margin: auto;
    width: 80px;
    height: 80px;
    margin-bottom: 20px
}

#technology-contribute .or {
    margin-top: 150px;
    font-size: 2.5em;
    color: #1155d9;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    font-weight: bold
}

#technology-contribute h2 {
    color: #1155d9;
    font-weight: bold;
    font-size: 2.3em;
    margin-bottom: 0
}

#technology-contribute h3 {
    color: #000;
    font-weight: bold;
    font-size: 1.5em
}

#technology-contribute p.italic-txt {
    font-size: 16px;
    font-style: italic
}

@media screen and (max-width: 767px) {
    #technology-contribute .or {
        margin-top:40px;
        margin-bottom: 40px
    }
}

@media screen and (max-width: 990px) {
    #technology .hero {
        padding-left:40px;
        padding-right: 40px
    }

    #technology .hero h1 {
        margin-top: 25px
    }
}

@media screen and (max-width: 780px) {
    .technology-mascot img {
        -webkit-transform:translate(0%,-50%) !important;
        -moz-transform: translate(0%,-50%) !important;
        -o-transform: translate(0%,-50%) !important;
        -ms-transform: translate(0%,-50%) !important;
        transform: translate(0%,-50%) !important
    }

    #technology .hero {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media screen and (max-width: 768px) {
    #technology-contribute .first-button {
        margin-bottom:0
    }
}

@media screen and (max-width: 610px) {
    .technology-mascot img {
        -webkit-transform:translate(0%,-60%) !important;
        -moz-transform: translate(0%,-60%) !important;
        -o-transform: translate(0%,-60%) !important;
        -ms-transform: translate(0%,-60%) !important;
        transform: translate(0%,-60%) !important
    }
}

@media screen and (max-width: 540px) {
    .technology-mascot img {
        -webkit-transform:translate(0%,-70%) !important;
        -moz-transform: translate(0%,-70%) !important;
        -o-transform: translate(0%,-70%) !important;
        -ms-transform: translate(0%,-70%) !important;
        transform: translate(0%,-70%) !important
    }
}

#not-found {
    z-index: 2;
    position: relative;
    color: #000
}

#not-found .hero-mascot {
    margin-top: 250px;
    height: auto;
    margin-bottom: 20px;
    padding-left: 40px;
    padding-right: 40px
}

#not-found .hero-mascot .pure-u-1-2:first-of-type {
    text-align: left
}

#not-found .hero-mascot .pure-u-1-2:first-of-type h2 {
    text-align: left
}

#not-found .hero-mascot .pure-u-1-2:first-of-type h3 {
    text-align: left
}

#not-found .hero-mascot .hero-mascot-container img {
    -webkit-transform: translate(0%,-40%);
    -moz-transform: translate(0%,-40%);
    -o-transform: translate(0%,-40%);
    -ms-transform: translate(0%,-40%);
    transform: translate(0%,-40%);
    margin-top: 70px;
    margin-bottom: 70px
}

#not-found .overfow-container {
    width: 100%;
    overflow: hidden
}

#not-found .top {
    padding-top: 180px
}

#not-found .top h1 {
    margin: 0;
    margin-bottom: 100px;
    line-height: 220px;
    font-size: 220px;
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70)
}

#not-found .top .msg {
    background: url("/website/404-msg.png");
    width: 40%;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    color: #8a5aab;
    position: relative;
    display: table
}

#not-found .top .msg .txt {
    display: table-cell;
    vertical-align: middle;
    padding: 30px;
    padding-top: 15px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8em;
    text-align: center
}

#not-found .bot {
    padding-top: 40px;
    padding-bottom: 250px;
    background: #fff;
    color: #8a5aab
}

#not-found .bot .kurec-container {
    margin-top: 140px;
    position: relative
}

#not-found .bot .kurec-container .kurec-cat {
    position: absolute;
    bottom: 0;
    left: 20%
}

#not-found .sm {
    display: none
}

#not-found .big-error-mascot {
    display: none
}

@media screen and (max-width: 660px) {
    #not-found .hero-mascot {
        margin-top:200px;
        margin-bottom: 120px
    }
}

@media screen and (max-width: 767px) {
    #not-found .top h1 {
        font-size:80px;
        line-height: 80px;
        margin-bottom: 40px
    }

    #not-found .top .msg {
        width: 100%;
        background: 0;
        color: #fff;
        margin-bottom: 40px
    }

    #not-found .top .msg .txt {
        text-align: left
    }

    #not-found .btns {
        margin-top: 140px
    }

    #not-found .big {
        display: none
    }

    #not-found .sm {
        margin-top: 40px;
        display: block;
        text-align: center
    }
}

@media screen and (max-width: 780px) {
    #not-found .big-error-mascot {
        display:block;
        margin-top: 100px;
        margin-bottom: 0
    }

    #not-found .big-error-mascot .hero-mascot-container {
        text-align: center
    }

    #not-found .big-error-mascot .hero-mascot-container img {
        max-width: 70%
    }

    #not-found .hero-mascot {
        margin-top: 0;
        margin-bottom: 175px
    }

    #not-found .hero-mascot .pure-u-1-2:nth-child(1) {
        width: 100%
    }

    #not-found .hero-mascot .pure-u-1-2:nth-child(2) {
        display: none
    }
}

#faq,#tos,#cookies {
    max-width: 700px;
    margin: auto;
    padding: 3em;
    background-color: rgba(0,0,0,0.5)
}

#faq .logo,#tos .logo,#cookies .logo {
    max-width: 500px;
    width: 100%;
    display: block;
    margin: 30px auto
}

#faq h2,#tos h2,#cookies h2,#faq h3,#tos h3,#cookies h3 {
    font-size: 2em;
    text-align: left
}

#faq > div,#tos > div,#cookies > div {
    margin: 4em auto
}

#faq p,#tos p,#cookies p {
    font-size: 1.2em;
    line-height: 1.5em;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: justify
}

#faq a,#tos a,#cookies a {
    color: #8ca3dc
}

#tos,#cookies {
    max-width: 1200px
}

#tos .press .menu,#cookies .press .menu {
    text-align: right;
    display: block
}

#tos .press .menu > div,#cookies .press .menu > div {
    font-weight: bold;
    display: inline-block;
    padding: 15px;
    font-size: 19px;
    border: 1px solid rgba(255,255,255,0.9);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: none;
    margin: 0
}

#tos .press .menu > div.selected,#cookies .press .menu > div.selected {
    background-color: rgba(255,255,255,0.9);
    color: #2b2c43
}

.tos-wide {
    width: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
    padding: 0 !important
}

#tos {
    font-family: "Plus Jakarta Sans" !important;
    background-color: #f2f2f2 !important;
    color: #000 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    text-align: center !important;
    padding-bottom: 50px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important
}

#tos #tos-logo {
    width: 100%;
    text-align: center
}

#tos #tos-logo img {
    width: 45px;
    height: 45px;
    display: inline-block
}

#tos ul {
    list-style: none;
    padding-left: 2px
}

#tos ul li {
    margin-bottom: 15px;
    padding-left: 7px
}

#tos ul li:before {
    content: "";
    display: inline-block;
    left: -.5em;
    top: .05em;
    position: relative;
    height: 12px;
    width: 11px;
    background-size: 11px 12px
}

#tos ul li:nth-child(odd):before {
    background-image: url("/website/purple-bullet.png")
}

#tos ul li:nth-child(even):before {
    background-image: url("/website/blue-bullet.png")
}

#tos p {
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 22px !important
}

#tos #tos-container {
    max-width: 75%;
    display: inline-block;
    text-align: left;
    text-align: justify;
    text-justify: inter-word
}

#tos h1 {
    color: #000 !important;
    text-transform: uppercase !important;
    font-size: 2.43em !important;
    line-height: 1.2em !important;
    margin-bottom: 40px !important !important
}

#tos h1 strong {
    font-weight: 300 !important;
    margin-bottom: 35px !important;
    display: inline-block !important
}

#tos h1,#tos h2,#tos h3,#tos h4,#tos h5,#tos h6 {
    font-weight: 300 !important;
    margin: 35px auto !important;
    text-align: center !important;
    -webkit-font-smoothing: subpixel-antialiased !important
}

#tos h2,#tos h3,#tos h4,#tos h5,#tos h6 {
    text-align: left !important;
    margin-bottom: -2px !important;
    color: #000 !important;
    text-align: left !important;
    margin-top: 30px !important;
    font-weight: bold !important;
    font-size: 18px !important
}

#tos h3,#tos h4,#tos h5,#tos h6 {
    font-size: 16px !important
}

#tos h2 {
    display: inline-block !important;
    margin-bottom: 15px !important
}

#tos div#container {
    max-width: 75% !important;
    display: inline-block !important;
    text-align: left !important;
    text-align: justify !important;
    text-justify: inter-word !important
}

#tos a {
    color: #1155d9 !important;
    text-decoration: none !important;
    opacity: .85 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)" !important;
    filter: alpha(opacity=85) !important
}

#tos a:hover {
    opacity: 1 !important;
    -ms-filter: none !important;
    filter: none !important;
    -ms-filter: none !important;
    filter: none !important
}

body.mobile p {
    font-size: 16px
}

.job-title {
    font-weight: bold;
    font-size: 16px;
    min-width: 200px;
    vertical-align: top
}

.job-desc {
    max-width: 350px;
    vertical-align: top;
    font-weight: 400;
    line-height: 1.8rem
}

.job-button {
    min-width: 250px;
    text-align: right
}

#career-qa h2,#career-da h2 {
    text-transform: none;
    color: #633f7e
}

#career-qa p,#career-da p {
    max-width: 620px
}

#career-qa a,#career-da a {
    color: #fff;
    font-weight: 900
}

#builder-mascot-careers {
    margin-top: 20px;
    margin-bottom: 55px
}

#mascot-careers-img {
    -webkit-transform: translate(0%,-70%);
    -moz-transform: translate(0%,-70%);
    -o-transform: translate(0%,-70%);
    -ms-transform: translate(0%,-70%);
    transform: translate(0%,-70%)
}

#career-da {
    z-index: 2;
    margin-bottom: 100px
}

#career-da .container {
    margin-top: 60px
}

#career-da .container .half-img img.right {
    max-height: 350px
}

@media screen and (max-width: 990px) {
    #careers .container,#career-da .container {
        padding-left:40px;
        padding-right: 40px
    }

    .header-container h1 {
        margin-top: 50px
    }
}

@media screen and (max-width: 780px) {
    .job-button {
        text-align:left
    }

    #careers .container,#career-da .container {
        padding-left: 20px;
        padding-right: 20px
    }
}