@font-face {
    font-family: Camphor;
    font-weight: 300;
    src: url(Camphor-thin.woff2) format('woff2')
}

@font-face {
    font-family: Camphor;
    font-weight: 400;
    src: url(Camphor-normal.woff2) format('woff2')
}

@font-face {
    font-family: Camphor;
    font-weight: 500;
    src: url(Camphor-bold.woff2) format('woff2')
}

@font-face {
    font-family: Camphor;
    font-weight: 600;
    src: url(Camphor-bolder.woff2) format('woff2')
}

body {
	
	font-size: 17px;
	font-family: Camphor, Open Sans, Segoe UI, sans-serif;
	-webkit-font-smoothing: antialiased;

}

.contain {
	
	max-width: 1024px;

}

h2, h3 {
	
	text-transform: uppercase;
	color: #24b47e;

}

main h2 {
	
	font-size: 1.33em;

}

.purple h2, .purple h3 {
	
	color: #b76ac4;

}

main {
	
	color: #6b7c93;
	
}

.slider > * {
	
	padding: 0 1em 0 4px;

}

a[href].button {
	
	background: #fff;
	text-transform: uppercase;
	padding: .5em 1em;
	border-radius: 4px;
	box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
	font-weight: bold;
	color: #7795f8;
	font-size: .9em;
    margin: .5em;
	
}

a[href].button:first-child {

	background: #24b47e;
	color: #fff;

}

main a[href].button:first-child {
	
	background: #6772e5;

}

a[href] {
	
	color: #6772e5;
	text-decoration: none;

}

main a[href]:not(.span-relative-parent):after, .sign-in:after {
	
	content: ' →';

}

pre {
	
	text-align: left !important;

}

.header-and-banner {
	
	position: relative;
	color: #fff;
	min-height: 760px;

}

.banner {
	
	color: #d9fcff;

}

.banner h1 {
	
	color: #fff;
	margin: .5em 0;

}

header nav a[href] {
	
	color: #fff;

}

#stripes, #stripes span {
    position: absolute
}

#stripes {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transform: skewY(-12deg);
    transform: skewY(-12deg);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    background: -webkit-linear-gradient(300deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%);
    background: linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%)
}

#stripes span {
    height: 40px
}

#stripes :nth-child(1) {
    width: 50%;
    left: 50%;
    top: 40px;
    background: #4c29ff
}

#stripes :nth-child(2) {
    width: 14%;
    right: 0;
    bottom: 40px;
    background: #2be7ff
}

#stripes :nth-child(3) {
    width: 25%;
    bottom: 0;
    right: 0;
    background: #a1ffc8
}

nav.drop li {
	
	background-color: transparent;

}

@media (min-width:670px) {
    #stripes span {
        height: 150px
    }

    #stripes :nth-child(1) {
        top: 0;
        background: #4750ff
    }

    #stripes :nth-child(2) {
        width: 16.66667%;
        top: 300px;
        bottom: auto;
        background: #0dcfff
    }

    #stripes :nth-child(3) {
        width: 33.33333%;
        right: auto;
        background: #11bdff
    }
}

@media (min-width:880px) {
    #stripes span {
        height: 190px
    }

    #stripes :nth-child(1) {
        width: 33.33333%;
        left: -16.66666%;
        background: #53f
    }

    #stripes :nth-child(2) {
        width: 33.33333%;
        top: 0;
        left: 16.66666%;
        right: auto;
        background: #4553ff
    }

    #stripes :nth-child(3) {
        width: 33.33333%;
        left: 49.99999%;
        bottom: auto;
        background: #4f40ff
    }

    #stripes :nth-child(4) {
        width: 33.33333%;
        top: 380px;
        right: -16.66666%;
        background: #25ddf5
    }

    #stripes :nth-child(5) {
        width: 33.33333%;
        bottom: 0;
        background: #1fa2ff
    }
}

#app-illustrations {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 1287px;
    left: 50%;
    margin-left: -644px;
    -webkit-transform: scale(.5) rotate(-12deg) translateX(50px);
    transform: scale(1) rotate(-12deg) translateX(50px);
    -webkit-transform-origin: 50% 20%;
    transform-origin: 50% 20%
}

#app-illustrations.hidden-preload {
    visibility: hidden
}

#app-illustrations div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 38px;
    background: #fff;
    box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), 0 10px 20px rgba(0, 21, 64, .05)
}

#app-illustrations .tablet-landscape {
    width: 512px;
    height: 352px;
    margin: 115px 50px 0
}

#app-illustrations .phone-big {
    display: none
}

#app-illustrations .phone-small {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
    width: 225px;
    height: 467px
}

#app-illustrations .tablet-portrait {
    width: 450px;
    height: 675px;
    margin-top: 115px
}

@media (min-width:670px) {
    #app-illustrations {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 512px;
        margin-left: -50px;
        top: 215px;
        /* -webkit-transform: rotate(-12deg); */
        /* transform: rotate(-12deg); */
        -webkit-transform-origin: 100% 0;
        /* transform-origin: 100% 0 */
    }

    #app-illustrations.hidden-preload {
        visibility: visible
    }

    #app-illustrations [class^=tablet] {
        margin: 0
    }

    #app-illustrations .tablet-landscape {
        width: 512px;
        height: 352px
    }

    #app-illustrations .phone-small {
        width: 225px;
        height: 467px;
        margin: 0 0 50px 176px
    }

    #app-illustrations .tablet-portrait {
        display: none
    }
}

@media (min-width:880px) {
    #app-illustrations {
        width: 829px;
        margin-left: -10px;
        top: 20px
    }

    #app-illustrations .tablet-landscape {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end;
        margin-right: 50px
    }

    #app-illustrations .phone-big {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 267px;
        height: 553px
    }

    #app-illustrations .phone-small {
        -webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0;
        margin: 50px 50px 0 0
    }

    #app-illustrations .tablet-portrait {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 450px;
        height: 675px;
        margin-top: 50px
    }
}

.banner a[href].new {
	
	display: inline-block;
	margin: 3em 0;
	background: rgba(0, 0, 140, .08);
	border-radius: 1em;
	padding: .25em .5em;
	color: #fff;
	font-size: .8em;
	
}

.banner .new:before {
	
	content: 'NEW';
	border-radius: 1em;
	background: #24b47e;
	padding: .1em .5em;
	color: #fff;
	margin-right: .25em;
	
}

.banner .new:after {
	
	content: ' →';

}

.shadow div {

	box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
	border-radius: 4px;
	padding: 1.25em 2em .25em 6em;
	overflow: hidden;
    position: relative;    background: #fff;
    

}

.shadow div svg {
	
    position: absolute;
    width: 7em;
    left: -2em;
	    
}

.shadow.left div {
	
// 	margin-left: -3em;
	
}

.n-sldr.vertical.tabs>.slider-nav a {
	
	background: none;
    color: #6772e5;
    padding: .5em 1em;
    	
}

.n-sldr.vertical.tabs>.slider-nav a.active {
	
	background: #fff;
    color: #24b47e;
	box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
	
}

.n-sldr.vertical.tabs>.slider-nav.row {
	
	width: 20%;
	
}

.n-sldr.vertical.tabs>.slider {
	
	width: 80%;
	
}

.slider > * > div {
	
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    padding: .5em 1em;
    margin: 0 0 .5em 0;
    background: #fff;
	    
}

.n-sldr.vertical.tabs.right>.slider-nav.row {
	
	padding: 1em 0;
	
}

.globalFooterCTA h3 {
	
	text-transform: none;
	color: #32325d;
	font-size: 30px;
	line-height: 1;
	
}

.globalFooterCTA h3:first-child {
	
	color: #6772e5;
	
}

.globalFooterCTA a[href].button:after {
	
	display: none;

}

footer {
	
	font-size: .8em;

}

footer h5 {
	
	text-transform: uppercase;
	font-size: inherit;
	
}

article {
	
	position: relative;
// 	background: #fff;
	
}

main .row {
	
	padding: 3em 0;
	
}

a.backtotop[href] {
	
	background: #6772e5;
	
}

main ul img {
	
	height: 1.5em;
	display: inline-block;
	margin: 0 1em;
	
}

main ul {
	
	margin: 0;
	
}

.no-touch nav.drop ul ul li, .no-touch nav.drop ul ul li:first-child, nav.drop ul li a {
	
	text-align: left;
		
}

nav.drop ul li li a {

	color: #000;	

}

@media screen and (max-width: 599.9px) {
	
	header.fixed, header.fixed .fold.mobile .content {
		
		background: #000;
		
	}
	
	header nav ul li {
		
		display: inline-block;
		
	}
	
	.banner {
		
		padding-top: 3em;
		
	}
	
	header.fixed a.logo {
		
		display: block;
		text-align: right;
		position: absolute;
		
	}
	
	.row>*>.unpad, .unpad {
		
		padding: 0;
		margin: 0;
		
	}

/*
	header nav a[href] {
		
		color: #000;
	
	}
*/

}

