input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    padding: 1px 6px;
}

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
}

input, textarea, keygen, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
   /* font: 13.3333px ;*/
}

input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}

button {
    -webkit-appearance: button;
}


.wrapper {
    position: relative;
    width: 100%;
    z-index: 1;
}
b, strong {
    font-weight: 700;
}
.main {
    overflow: hidden;
}

.homepage-features {
    position: relative;
    background-color: #036ded;
    height: 800px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

.u-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.homepage-features {
    position: relative;
    background-color: #036ded;
    height: 740px;
}

@media (max-width: 61.24em) {
    .homepage-features {
        height:550px
    }
}

@media (max-width: 46.24em) {
    .homepage-features {
        height:620px
    }
}

.homepage-features__wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 930px;
    position: relative
}

@media (max-width: 61.24em) {
    .homepage-features__wrapper {
        width:85%
    }
}

@media (max-width: 61.24em) {
    .homepage-features__wrapper {
        height:100%;
        padding-top: 40px;
        padding-bottom: 80px
    }
}

@media (max-width: 46.24em) {
    .homepage-features__wrapper {
        padding-top:30px;
        padding-bottom: 0
    }
}

.homepage-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)
}

.homepage-features__background.animate-scroll {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

@media (max-width: 61.24em) {
    .homepage-features__background {
        display:none
    }
}

.homepage-features__preview {
    position: absolute;
    top: 124px;
    left: -24px;
    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)
}

.homepage-features__preview.animate-scroll {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

@media (max-width: 61.24em) {
    .homepage-features__preview {
        display:none
    }
}

.homepage-features__content {
    margin-left: 50%;
    position: relative;
    width: 50%
}

.homepage-features__content h2 {
    font-size: 3.57143rem;
    line-height: 3.8rem;
    margin-bottom: 1.02856rem;
    padding-top: .97144rem;
    color: transparent
}

.homepage-features__content h2 strong {
    font-weight: 800
}

.homepage-features__content h2 .splited-line {
    color: #fff
}

.homepage-features__content p {
    margin-left: 16.66667%;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 3.38428rem;
    padding-top: .61572rem;
    color: #aad4ff;
}

.homepage-features__content p strong {
    font-weight: 900
}

.homepage-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
}

.homepage-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%)
}

@media (max-width: 61.24em) {
    .homepage-features__content {
        margin-left:0;
        width: 100%
    }

    .homepage-features__content p {
        margin-left: 0
    }
}

.homepage-features .carousel-background {
    position: absolute;
    top: 57px;
    right: 16px;
    height: 387px;
    width: 654px;
    position: relative;
    overflow: hidden
}

.homepage-features .carousel-background__canister {
    height: 387px;
    width: 654px;
    -webkit-transform: translate3d(218px, 0, 0);
    transform: translate3d(218px, 0, 0)
}

.homepage-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)
}

.homepage-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
}

.homepage-features .carousel-background__item:nth-child(3) {
    opacity: 0.2
}

.homepage-features .carousel-preview {
    margin-top: 57px;
    margin-left: 217px;
    height: 387px;
    width: 218px;
    position: relative;
    overflow: hidden
}

.homepage-features .carousel-preview__canister {
    height: 387px;
    width: 654px;
    background: #000;
    -webkit-transform: translate3d(-436px, 0, 0);
    transform: translate3d(-436px, 0, 0)
}

.homepage-features .carousel-preview img {
    display: block;
    float: right
}

.homepage-features .carousel-bullets {
    position: absolute;
    top: 378px;
    left: 116px;
    display: none;
}

.homepage-features .carousel-bullets::after {
    clear: both;
    content: '';
    display: table
}

.homepage-features .carousel-bullets i {
    margin-right: 12px;
    margin-left: 12px;
    height: 4px;
    width: 4px;
    display: block;
    float: left;
    background: #fff;
    border-radius: 4px
}

@media (max-width: 61.24em) {
    .homepage-features .carousel-bullets {
        display:none
    }
}

.homepage-features .carousel-content {
    position: absolute;
    top: 96px;
    left: 0;
    display: none;
}

.homepage-features .carousel-content 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)
}

.homepage-features .carousel-content .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)
}

.homepage-features .carousel-content.show {
    top: 96px;
    display: block;
}

.homepage-features .carousel-content.show p {
    opacity: 0.9;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.homepage-features .carousel-content.show .icon {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1)
}

.homepage-features .carousel-content.show.hide p {
    opacity: 0;
    -webkit-transform: translate3d(40px, 0, 0);
    transform: translate3d(40px, 0, 0)
}

.homepage-features .carousel-content.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)
}

.homepage-features .carousel-content.no-transition p,.homepage-features .carousel-content.no-transition .icon {
    -webkit-transition: none !important;
    transition: none !important
}

.homepage-features .carousel-content:nth-child(4) h2 {
    font-size: 3.14286rem;
    line-height: 3.4rem
}

@media (max-width: 61.24em) {
    .homepage-features .carousel-content:nth-child(4) h2 {
        font-size:2.85714rem;
        line-height: 3rem
    }

    .lang-fr .homepage-features .carousel-content:nth-child(4) h2 {
        font-size: 1.71429rem;
        line-height: 2.4rem
    }
}

@media (max-width: 61.24em) {
    .homepage-features .carousel-content {
        top:40px
    }

    .homepage-features .carousel-content h2 {
        font-size: 2.57143rem;
        line-height: 3rem
    }

    .homepage-features .carousel-content .icon {
        display: none
    }
}

.homepage-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)
}

.homepage-features .carousel-controls.animate-scroll {
    opacity: 1
}

.homepage-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
}

.homepage-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)
}




.homepage-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)
}

.homepage-features .carousel-controls button:hover svg {
    fill: #036ded
}
.homepage-features .carousel-controls button:hover i {
    color: #1376fb
}
.homepage-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)
}

@media (max-width: 61.24em) {
    .homepage-features .carousel-controls {
        position:absolute;
        top: auto;
        left: 0;
        bottom: 100px;
        width: 100%;
        height: auto
    }

    .homepage-features .carousel-controls button {
        margin-right: 12px;
        display: inline-block
    }
}

@media (max-width: 46.24em) {
    .homepage-features .carousel-controls {
        bottom:40px
    }

    .downloadimg { display: none;  width: 150px; height: 150px;}

    .homepage-features__content p {
    margin-left: 16.66667%;
    font-size: 1.28571rem;
    line-height: 1.9rem;
    margin-bottom: 1rem;
    padding-top: .61572rem;
    color: #fff;
}

.homepage-features .carousel-content.show {
    top: 0px;
    display: block;
}

}



.animate-scroll .splited-line, .show .splited-line {
    -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 1.5s cubic-bezier(0.19, 1, 0.22, 1),-webkit-transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1),transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.splited-line {
    display: block;
    overflow: hidden;
    -webkit-transform: translate3d(0, 16px, 0);
    transform: translate3d(0, 16px, 0);
    -webkit-transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1),-webkit-transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1),transform 1.5s cubic-bezier(0.19, 1, 0.22, 1)
}

.span1{ font-weight: normal;font-size:36px;}
.span2{ font-size:38px; }
.splited-line__wrapper {
    display: block;
    -webkit-transform: translate3d(0, 64px, 0);
    transform: translate3d(0, 64px, 0);
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 1s 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
}

.animate-scroll .splited-line,.show .splited-line {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.animate-scroll .splited-line .splited-line__wrapper,.show .splited-line .splited-line__wrapper {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.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
}

.no-transition .splited-line {
    -webkit-transition: none;
    transition: none
}

.no-transition .splited-line__wrapper {
    -webkit-transition: none;
    transition: none
}

.girl-in-a-pool {
    margin-bottom: -360px;
    position: relative;
    height: 80vh;
    min-height: 800px;
    background: url("girl-in-a-pool-bg.jpg")/*tpa=http://riiotlabs.com/files/templates/riiot/public/assets/images/girl-in-a-pool-bg.jpg*/ repeat-x center bottom;
    overflow: hidden;
    z-index: -1
}

.girl-in-a-pool img {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -1250px
}

@media (max-width: 46.24em) {
    .girl-in-a-pool {
        margin-bottom:-220px;
        min-height: 0
    }

    .girl-in-a-pool img {
        width: 1600px;
        margin-left: -800px
    }
}


.homepage-features__content h2 strong {
    font-weight: 800;
}
b, strong {
    font-weight: 700;
}

strong, b {
    font-weight: bold;
}


.homepage-features__content h2 .splited-line {
    color: #fff;
    padding-bottom: 13px;
}


.homepage-features__content h2 {
    font-size: 3.57143rem;
    line-height: 3.8rem;
    margin-bottom: 1.02856rem;
    padding-top: .97144rem;
    color: transparent;
}