body {
	font-family: 'Prompt', sans-serif;
	font-weight:300;
	font-style:normal;
	font-size:1rem;
	color:#6f8595;
	background-color:#036ded;
}
h1 {
	font-family: 'Prompt', sans-serif;
	font-weight:300;
	letter-spacing:-0.04em;
}
h2, h3, h4, h5, h6 {
	font-family: 'Prompt', sans-serif;
	font-weight:400;
	letter-spacing:-0.04em;
}
.slider-features {
	position:relative;
	background-image:linear-gradient(to right, #d53a95, #ae41aa, #5e6dff);
	height:658px;
}
.slider-features__wrapper {
	margin-right:auto;
	margin-left:auto;
	width:930px;
	position:relative;
}
.slider-features__background {
	position:absolute;
	top:124px;
	right:50%;
	height:562px;
	width:100%;
	opacity:0;
	-webkit-transform:translate3d(-240px, 0, 0);
	transform:translate3d(-240px, 0, 0);
	-webkit-transition:opacity 2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1);
	transition:opacity 2s cubic-bezier(0.19, 1, 0.22, 1), transform 3s cubic-bezier(0.19, 1, 0.22, 1);
}
.animate-scroll .slider-features__background {
	opacity:1;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
}
.splited-line {
	display:block;
	overflow:hidden;
	-webkit-transform:translate3d(0, 16px, 0);
	transform:translate3d(0, 16px, 0);
	-webkit-transition:opacity 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
	transition:opacity 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.splited-line__wrapper {
	display:block;
	-webkit-transform:translate3d(0, 64px, 0);
	transform:translate3d(0, 64px, 0);
	-webkit-transition:-webkit-transform 2s cubic-bezier(0.19, 1, 0.22, 1);
	transition:transform 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.splited-line:nth-child(2) .splited-line__wrapper {
	-webkit-transition-delay:0.05s;
	transition-delay:0.05s;
}
.splited-line:nth-child(3) .splited-line__wrapper {
	-webkit-transition-delay:0.1s;
	transition-delay:0.1s;
}
.splited-line:nth-child(4) .splited-line__wrapper {
	-webkit-transition-delay:0.15s;
	transition-delay:0.15s;
}
.show .splited-line {
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
}
.show .splited-line .splited-line__wrapper {
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	-webkit-transition:-webkit-transform 2s cubic-bezier(0.19, 1, 0.22, 1);
	transition:transform 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.show.hide .splited-line {
	opacity:0;
}
.show.hide .splited-line .splited-line__wrapper {
	-webkit-transform:translate3d(0, -64px, 0);
	transform:translate3d(0, -64px, 0);
	-webkit-transition-delay:0.1s;
	transition-delay:0.1s;
}
.slider-features__preview {
	position:absolute;
	top:124px;
	left:-10px;
	height:562px;
	width:658px;
	background:url("../img/iphone-white.png") no-repeat right;
	-webkit-transform:translate3d(-80px, 0, 0);
	transform:translate3d(-80px, 0, 0);
	-webkit-transition:-webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1);
	transition:transform 3s cubic-bezier(0.19, 1, 0.22, 1);
}
.animate-scroll .slider-features__preview {
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
}
.slider-features__content {
	margin-left:50%;
	position:relative;
	width:50%;
}
.slider-features__content h2 {
	font-size:3rem;
	line-height:3.8rem;
	margin-bottom:1.02856rem;
	padding-top:0.97144rem;
	color:transparent;
	opacity: 0;
	margin-top: 0;
}
.slider-features__content .show h2 {
	opacity: 1;
}
.slider-features__content h2 strong {
	font-weight:800;
}
.slider-features__content h2 .splited-line {
	color:#fff;
}
.slider-features__content p {
	margin-left:16.66667%;
	font-size:1.1rem;
	line-height:1.5rem;
	margin-bottom:3.38428rem;
	padding-top:0.61572rem;
	color:#ffffff;
	margin-top: 0;
}
.slider-features__content p strong {
	font-weight:900;
	color:#ffffff;
}
.slider-features__content .icon {
	margin-top:24px;
	margin-bottom:12px;
	margin-left:24px;
	height:80px;
	width:80px;
	position:relative;
	display:block;
	border:2px solid #fff;
	border-radius:80px;
	overflow:hidden;
}
.slider-features__content .icon svg {
	position:absolute;
	top:50%;
	left:50%;
	fill:#fff;
	-webkit-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}
#slides {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 387px;
}
#slides ul {
	list-style: none;
	width:100%;
	height:387px;
	margin: 0;
	padding: 0;
	position: relative;
	background: #000;
	-webkit-transform:translate3d(-436px, 0, 0);
	transform:translate3d(-436px, 0, 0);
}
#slides li {
	width:100%;
	height:387px;
	float:right;
	text-align: center;
	position: relative;
	font-family:lato, sans-serif;
}
.slider-features .carousel-background {
	position:absolute;
	top:57px;
	right:16px;
	height:387px;
	width:654px;
	position:relative;
	overflow:hidden;
}
.slider-features .carousel-background__container {
	height:387px;
	width:654px;
	-webkit-transform:translate3d(218px, 0, 0);
	transform:translate3d(218px, 0, 0);
}
.slider-features .carousel-background__item {
	height:387px;
	width:218px;
	position:relative;
	display:block;
	float:right;
	opacity:0.6;
	-webkit-filter:blur(2px);
	filter:blur(2px);
	-webkit-transform:scale(0.9, 0.9);
	-ms-transform:scale(0.9, 0.9);
	transform:scale(0.9, 0.9);
}
.slider-features .carousel-background__item::before {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	display:block;
	content:'';
	background-color:#0f78ff;
	opacity:0.88;
	mix-blend-mode:screen;
	z-index:1;
}
.slider-features .carousel-background__item:nth-child(3) {
	opacity:0.2;
}
.slider-features .carousel-preview {
	margin-top:57px;
	margin-left:217px;
	height:387px;
	width:218px;
	position:relative;
	overflow:hidden;
}
.slider-features .carousel-preview__container {
	height:387px;
	width:654px;
	background:#000;
	-webkit-transform:translate3d(-436px, 0, 0);
	transform:translate3d(-436px, 0, 0);
}
.slider-features .carousel-preview img {
	display:block;
	float:right;
}
.slider-features .carousel-bullets {
	position:absolute;
	top:400px;
	left:116px;
}
.slider-features .carousel-bullets::after {
	clear:both;
	content:'';
	display:table;
}
.slider-features .carousel-bullets i {
	margin-right:12px;
	margin-left:12px;
	height:4px;
	width:4px;
	display:block;
	float:left;
	background:#fff;
	border-radius:4px;
}
.slider-features .carousel-content ul {
	list-style: none;
    margin: 0;
    padding: 0;
}
.slider-features .carousel-content li {
	position:absolute;
	top:196px;
	left:0;
}
.slider-features .carousel-content li p {
	opacity:0;
	-webkit-transform:translate3d(-40px, 0, 0);
	transform:translate3d(-40px, 0, 0);
	-webkit-transition:opacity 1.5s 0.2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1.5s 0.2s cubic-bezier(0.19, 1, 0.22, 1);
	transition:opacity 1.5s 0.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.5s 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.slider-features .carousel-content li .icon {
	display:block;
	opacity:0;
	-webkit-transform:scale(0, 0);
	-ms-transform:scale(0, 0);
	transform:scale(0, 0);
	-webkit-transition:opacity 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
	transition:opacity 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.slider-features .carousel-content li.show p {
	opacity:0.6;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
}
.slider-features .carousel-content li.show .icon {
	opacity:1;
	-webkit-transform:scale(1, 1);
	-ms-transform:scale(1, 1);
	transform:scale(1, 1);
}
.slider-features .carousel-content li.show.hide p {
	opacity:0;
	-webkit-transform:translate3d(40px, 0, 0);
	transform:translate3d(40px, 0, 0);
}
.slider-features .carousel-content li.show.hide .icon {
	opacity:0;
	-webkit-transform:translate3d(70px, 0, 0) scale(0.1, 0.1);
	transform:translate3d(70px, 0, 0) scale(0.1, 0.1);
}
.slider-features .carousel-content.no-transition p, .slider-features .carousel-content.no-transition .icon {
	-webkit-transition:none !important;
	transition:none !important;
}
.slider-features .carousel-content li:nth-child(4) h2 {
	font-size:3.14286rem;
	line-height:3.4rem;
}
.slider-features .carousel-controls {
	position:absolute;
	top:224px;
	left:52px;
	height:100%;
	width:60px;
	opacity:0;
	-webkit-transition:opacity 3s 0.2s cubic-bezier(0.19, 1, 0.22, 1);
	transition:opacity 3s 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.slider-features.animate-scroll .carousel-controls {
	opacity:1;
}
.slider-features .carousel-controls button {
	margin-bottom:16px;
	padding:20px;
	height:60px;
	width:60px;
	position:relative;
	z-index:1;
	border:1px solid #fff;
	border-radius:60px;
	outline:none;
	cursor:pointer;
	display:block;
	background-color:transparent;
	background-image:none;
	line-height:1;
	color:#fff;
}
.slider-features .carousel-controls button svg {
	fill:#fff;
	-webkit-transition:fill 0.4s cubic-bezier(0.19, 1, 0.22, 1);
	transition:fill 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.slider-features .carousel-controls button::before {
	position:absolute;
	top:-1px;
	left:-1px;
	height:60px;
	width:60px;
	z-index:-1;
	border-radius:60px;
	content:'';
	display:block;
	background-color:#fff;
	-webkit-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
	-webkit-transition:-webkit-transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
	transition:transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.slider-features .carousel-controls button:hover svg {
	fill:#036ded;
}
.slider-features .carousel-controls button:hover::before {
	-webkit-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
	-webkit-transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.is-animating .carousel-controls button {
	cursor: default;
}
 @media (max-width: 61.24em) {
.slider-features__wrapper {
	width:85%;
}
.slider-features__wrapper {
	height:100%;
}
.slider-features__background, .slider-features__preview, .slider-features .carousel-bullets, .slider-features .carousel-content li .icon{
	/*display:none;*/
	margin:0px;
}
.slider-features__content {
	/*<!--margin-left:0;
	width:100%;-->*/
	display: none;
}
.slider-features__content p {
	margin-left:0;
}
.slider-features .carousel-content li.show {
	top:auto;
}
.slider-features .carousel-content li:nth-child(4) h2 {
	font-size:2.85714rem;
	line-height:3rem;
}
.lang-fr .slider-features .carousel-content li:nth-child(4) h2 {
	font-size:1.71429rem;
	line-height:2.4rem;
}
.slider-features .carousel-content li {
	top:40px;
}
.slider-features .carousel-content li h2 {
	font-size:2.57143rem;
	line-height:3rem;
}
.slider-features .carousel-controls {
	position:absolute;
	top:auto;
	left:0;
	bottom:10px;
	width:100%;
	height:auto;
}
.slider-features .carousel-controls button {
	margin-right:12px;
    margin-bottom: 0;
	display:inline-block;
	margin-top:100px;
}
	 .carousel-background__container{
		 display:none;
	 }
	 .slider-features__preview {
		 left:-170px!important;
	 }
}
@media (max-width: 46.24em) {
.slider-features__wrapper {
	padding-top:0;
	padding-bottom:0;
}
.slider-features .carousel-controls {
	bottom:10px;
}
.slider-features .carousel-controls button{
    margin-bottom: 0;
}
	 .carousel-background__container{
		 display:none;
	 }	
	 .slider-features__preview {
		 left:-170px!important;
	 }
}
.slider-features{
	height:725px;
}

.hidden {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    pointer-events: none;
}
.playground-header{
    position: relative;
    z-index: 80;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-items: center;
    align-self: start;
    justify-self: start;
}
/*Playground buttons*/
.playground-links {
    position: relative;
    display: flex;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}
.playground-icons {
    display: inline-block;
    margin: 0.15em;
    padding: 0.25em;
    color:#fff;
}
.playground-icons:hover{
    color:#fdfd08;
}
.playground-header h1{
    font-size: 16px;
    margin: 0 0 0 0.5em;
    color:#fff;
}
.icon {
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
    fill: currentColor;
}
.no-js {
	background-image: linear-gradient(to right, #d53a95, #ae41aa, #5e6dff, #4b8be5);
}