.brand-gradient {
    background-image: linear-gradient(135deg, #BEF002 0%, #00DCFF 100%)
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {
    display: block
}

*[hidden] {
    display: none
}

body {
    line-height: 1
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.u-clearfix::before,.u-clearfix::after {
    display: table !important;
    content: ' ' !important
}

.u-clearfix::after {
    clear: both !important
}

.u-indicator-tablet {
    display: none
}

@media (min-width: 46.25em) {
    .u-indicator-tablet {
        display: block
    }
}

.u-indicator-desktop {
    display: none
}

@media (min-width: 61.25em) {
    .u-indicator-desktop {
        display: block
    }
}

.u-indicator-wide {
    display: none
}

@media (min-width: 81.25em) {
    .u-indicator-wide {
        display: block
    }
}

.wy-icon {
    display: inline-block;
    width: 1.75em;
    height: 1.75em;
    background-color: red;
    vertical-align: middle;
    margin-right: 0.5em
}

.wy-icon-mail {
    background: url(/_extra_res/icons/mail.svg) center center no-repeat;
    background-size: 100% auto
}

.wy-icon-phone {
    background: url(/_extra_res/icons/phone.svg) center center no-repeat;
    background-size: 100% auto
}

.wy-icon-web {
    background: url(/_extra_res/icons/web.svg) center center no-repeat;
    background-size: 100% auto
}

.block--gray {
    background-color: #f4f5f6
}

body {
    font-family: sans-serif;
    color: #21384f
}

.button {
    transition: all 0.2s;
    background-image: linear-gradient(135deg, #BEF002 0%, #00DCFF 100%);
    color: #fff;
    border-radius: 7px;
    font-size: 1em;
    padding: 10px 25px;
    border: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    margin: 0.5em 0
}

.button.action {
    background-image: linear-gradient(159deg, #ffe000 0%, #ff2bb1 100%);
}

@media (min-width: 61.25em) {
    .button,.ce-hero a {
        display: inline-block;
        float: none;
        margin: 0.25em 1em
    }

    .button:first-of-type,.ce-hero a:first-of-type {
        margin-left: 0
    }

    .button:last-of-type,.ce-hero a:last-of-type {
        margin-right: 0
    }
}

.button:hover,.ce-hero a:hover {
    transform: scale(1.05)
}

.content-hero p a:hover {
    transform: none;
}

.copy a.button,.copy .ce-hero a,.ce-hero .copy a {
}
.copy a.button {
    color: #fff;
    font-weight: bold;
    text-shadow: 0px -1px 0px #656;
}
.copy a.button:hover {
    color: #fff;
}

.container {
    max-width: 1300px;
    margin: 0 auto
}

.copy {
    line-height: 1.5em;
    font-size: 0.95em
}

.copy h1,.copy h2,.copy h3,.copy h4,.copy h5 {
    text-transform: uppercase;
    font-size: 2.5em;
    line-height: 1.25em;
    font-family: sans-serif;
    margin-top: 2em;
}

.copy h1:first-child,.copy h2:first-child,.copy h3:first-child,.copy h4:first-child,.copy h5:first-child {
    margin-top: 0
}

.copy h2 {
    font-size: 1.5em
}

.copy h3 {
    font-size: 1.2em
}

.copy p,.copy h1,.copy h2,.copy h3,.copy h4,.copy h5,.copy ul,.copy ol {
    margin-bottom: 16px;
    vertical-align: middle
}

.copy img {
    max-width: 100%;
    height: auto
}

.copy img.alignright {
    float: right
}

.copy img.alignleft {
    float: left
}

.copy img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.copy .highlight {
    color: #00DCFF
}

.copy .r-margin {
    margin-right: 1em
}

.copy a {
    transition: all 0.2s;
    color: #3f6b97
}

.copy a:hover {
    color: #21384f
}


.copy ul {
    list-style-type: disc;
    padding-left: 2em
}

.copy ol {
    list-style-type: decimal
}

.copy strong,.copy b {
    font-weight: 700
}

.copy em,.copy i {
    font-style: italic
}

.ce-columns::before,.ce-columns::after {
    display: table !important;
    content: ' ' !important
}

.ce-columns::after {
    clear: both !important
}

.ce-columns--inner {
    padding: 32px 16px
}

@media (min-width: 61.25em) {
    .ce-columns--inner {
        padding: 64px 16px;
        padding-bottom: 80px
    }
}

.ce-columns .column {
    margin-bottom: 64px
}

@media (max-width: 61.24em) {
    .ce-columns .column {
        width: 100% !important
    }
}

@media (min-width: 61.25em) {
    .ce-columns .column {
        float: left;
        vertical-align: middle;
        line-height: 100%
    }
}

@media (min-width: 61.25em) {
    .ce-columns.vertical-align .ce-columns--inner {
        display: flex;
        flex-direction: row;
        align-items: center
    }
}

@media (min-width: 61.25em) {
    .ce-columns.vertical-align .column {
        float: none
    }
}

.ce-floating-list::before,.ce-floating-list::after {
    display: table !important;
    content: ' ' !important
}

.ce-floating-list::after {
    clear: both !important
}

.ce-floating-list--inner {
    padding: 16px
}

.ce-floating-list figure::before,.ce-floating-list figure::after {
    display: table !important;
    content: ' ' !important
}

.ce-floating-list figure::after {
    clear: both !important
}

.ce-floating-list figure img {
    width: 33%;
    display: inline-block;
    margin-right: 16px;
    vertical-align: middle
}

@media (min-width: 61.25em) {
    .ce-floating-list figure img {
        max-width: 200px;
        max-height: 100px
    }
}

.ce-floating-list figure figcaption {
    width: 60%;
    display: inline-block;
    vertical-align: middle
}

@media (min-width: 61.25em) {
    .ce-floating-list figure figcaption {
        display: block;
        float: right
    }
}

.ce-floating-list .copy p:last-child {
    margin-bottom: 0
}

.ce-floating-list .item {
    margin-bottom: 64px
}

@media (min-width: 61.25em) {
    .ce-floating-list .item {
        width: 50%;
        float: left
    }
}

.ce-floating-list .item:last-child {
    margin-bottom: 32px
}

.ce-generic-copy::before,.ce-generic-copy::after {
    display: table !important;
    content: ' ' !important
}

.ce-generic-copy::after {
    clear: both !important
}

.ce-generic-copy .ce-generic-copy--inner {
    padding: 16px
}

@media (min-width: 61.25em) {
    .ce-generic-copy .ce-generic-copy--inner {
        width: 75%
    }
}

.ce-hero {
    margin-bottom: 32px
}

.ce-hero::before,.ce-hero::after {
    display: table !important;
    content: ' ' !important
}

.ce-hero::after {
    clear: both !important
}

.ce-hero .ce-hero--inner {
    padding: 16px;
    position: relative
}

.ce-hero img {
    max-width: 100%;
    height: auto
}

@media (min-width: 61.25em) {
    .ce-hero .content {
        width: 50%;
        position: absolute;
        top: 16px;
        left: 16px
    }
}

.ce-left-right::before,.ce-left-right::after {
    display: table !important;
    content: ' ' !important
}

.ce-left-right::after {
    clear: both !important
}

.ce-left-right .ce-left-right--inner {
    padding: 16px
}

@media (min-width: 61.25em) {
    .ce-left-right .ce-left-right--inner {
        padding: 30px 0
    }
}

.ce-left-right .left,.ce-left-right .right {
    margin-bottom: 32px
}

@media (min-width: 61.25em) {
    .ce-left-right .left,.ce-left-right .right {
        padding: 16px;
        width: 50%;
        float: left;
        box-sizing: border-box;
        margin-bottom: 0
    }
}

.ce-quote {
    background-color: #bef000;
    font-size: 1.5em
}

.ce-quote::before,.ce-quote::after {
    display: table !important;
    content: ' ' !important
}

.ce-quote::after {
    clear: both !important
}

@media (min-width: 61.25em) {
    .ce-quote {
        background-color: transparent
    }
}

.ce-quote .ce-quote--inner {
    padding: 16px
}

@media (min-width: 61.25em) {
    .ce-quote .ce-quote--inner {
        padding: 64px 0
    }
}

@media (min-width: 61.25em) {
    .ce-quote figure {
        background-color: #bef000
    }

    .ce-quote figure::before,.ce-quote figure::after {
        display: table !important;
        content: ' ' !important
    }

    .ce-quote figure::after {
        clear: both !important
    }
}

.ce-quote figure img {
    max-width: 100%;
    height: auto;
    margin-bottom: 16px
}

@media (min-width: 61.25em) {
    .ce-quote figure img {
        max-width: 25%;
        float: left;
        margin-right: 32px;
        margin-bottom: 0
    }
}

@media (min-width: 61.25em) {
    .ce-quote figure figcaption {
        padding-right: 32px;
        margin-top: 48px
    }
}

.ce-quote small {
    font-size: 0.75em;
    line-height: 0.75em
}

.header {
    padding: 8px 18px;
    position: relative;
    z-index: 100;
}

.header .header-inner {
    position: relative;
}

@media (min-width: 61.25em) {
    .header {
        border-bottom: none;
        margin-bottom: 0px;
    }

    .page-ix-api .header {
        margin-bottom: 50px;
    }
}

.header .brandline {
    width: 33vw;
}

@media (min-width: 61.25em) {
    .header .brandline {
        float: right;
        width: 360px
    }
}

.header .main-nav-container {
    display: none
}

@media (min-width: 61.25em) {
    .header .main-nav-container {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }
}




/*
.header .main-nav li.active > a {
        background-image: linear-gradient(135deg, #BEF002 0%, #00DCFF 100%);
        color: #fff
    }
}

.header .main-nav li > a {
    display: flex;
    flex-direction: column;
    color: #21384f;
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
}

.header .main-nav li > a span {
    display: flex;
    flex: 1;
    border: 1px solid red;
}

@media (min-width: 61.25em) {
    .header .main-nav a {
        padding: 16px 16px;
        display: inline-block;
        margin-top: -0.5em
    }
}

@media (min-width: 61.25em) {
    .header .main-nav li:hover > a,
    .header .main-nav a:hover {
        background-image: linear-gradient(135deg, #BEF002 0%, #00DCFF 100%);
        color: #fff
    }
    .header .main-nav li:hover .sub-menu {
      display: block;
    }
}

.header .main-nav .sub-menu {
    padding-top: 8px;
    margin-left: 16px
}

@media (min-width: 61.25em) {
    .header .main-nav .sub-menu {
        display: none;
        position: absolute;
        margin-left: 5px;
        width: 360px;
        background: white;
    }
}

@media (min-width: 61.25em) {
    .header .main-nav .sub-menu li {
        border: none;
        display: block;
        background-color: #f3fccf;
        margin-bottom: 1px
    }

    .header .main-nav .sub-menu li:hover {
        background-color: #e7f99f
    }
}

@media (min-width: 61.25em) {
    .header .main-nav .sub-menu a {
        display: inline-block;
        width: 100%
    }
}

@media (min-width: 61.25em) {
    .header .main-nav .sub-menu a:hover {
        background: none;
        color: #21384f
    }
}

.header .menu-accessor {
    border: none;
    background: transparent;
    font-size: 2em;
    color: #21384f;
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
}

.header .menu-accessor:focus {
    outline: none
}

@media (min-width: 61.25em) {
    .header .menu-accessor {
        display: none
    }
}
*/

.footer {
    background-color: #21384f;
    color: #fff;
    padding: 16px;
    position: relative
}

@media (min-width: 61.25em) {
    .footer {
        font-size: 0.9em;
        padding-bottom: 48px
    }
}

.footer .footer-inner {
    margin-top: -20px
}

@media (min-width: 61.25em) {
    .footer .footer-inner {
        margin-top: -100px
    }
}

.footer a {
    transition: all 0.2s;
    color: #fff;
    text-decoration: none
}

.footer a:hover {
    opacity: 0.8
}

.footer .footer-widget {
    margin-bottom: 16px
}

.footer .footer-widget img {
    width: 33%
}

@media (min-width: 61.25em) {
    .footer .footer-widget img {
        width: 200px
    }
}

.footer nav {
    margin-bottom: 16px;
    line-height: 1.25em
}

@media (min-width: 61.25em) {
    .footer nav {
        margin-bottom: 30px
    }

    .footer nav li {
        display: inline-block;
        border-right: 1px solid #fff;
        padding: 0 10px
    }

    .footer nav li:last-child {
        border: none
    }
}

@media (min-width: 61.25em) {
    .footer .left {
        width: 25%;
        display: inline-block;
        vertical-align: middle
    }
}

@media (min-width: 61.25em) {
    .footer .right {
        width: 50%;
        display: inline-block;
        padding-left: 32px;
        vertical-align: middle
    }
}

.footer-decoration {
    width: 100%;
    height: 15vw;
    position: relative;
    overflow: hidden;
    padding-top: 5vw;
    background-color: #fff;
}

.block--gray+.footer-decoration {
    background-color: #f4f5f6;
}

.footer-decoration:after {
    width: 200%;
    height: 50vw;
    content: '';
    background-color: #21384f;
    position: absolute;
    top: 1vw;
    left: 0;
    transform: rotate(-5deg);
}

.breadcrumb-element {
    display: none;
    font-size: 0.8em;
    margin-left: 10px;
}

.breadcrumb-element a,
.breadcrumb-element span {
    color: #21384f;
    padding: 0 5px;
    text-decoration: none;
}

.breadcrumb-element span {
    color: #21385f;
}

@media (min-width: 61.25em) {
    .breadcrumb-element {
        display: block;
    }
}

.page-title {
    padding: 8px 16px;
    padding-top: 32px;
    font-size: 2.25em;
    text-transform: uppercase;
}

.ix-api-sandbox-signup {
    width: 100%;
    height: 225px;
}