button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

@font-face {
    font-family: 'Renault Life';
    src: url('../fonts/RenaultLife-Bold.eot');
    src: url('../fonts/RenaultLife-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RenaultLife-Bold.woff2') format('woff2'),
        url('../fonts/RenaultLife-Bold.woff') format('woff'),
        url('../fonts/RenaultLife-Bold.ttf') format('truetype'),
        url('../fonts/RenaultLife-Bold.svg#RenaultLife-Bold') format('svg');
}

@font-face {
    font-family: 'Renault Life';
    src: url('../fonts/RenaultLife-Light.eot');
    src: url('../fonts/RenaultLife-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RenaultLife-Light.woff2') format('woff2'),
        url('../fonts/RenaultLife-Light.woff') format('woff'),
        url('../fonts/RenaultLife-Light.ttf') format('truetype'),
        url('../fonts/RenaultLife-Light.svg#RenaultLife-Light') format('svg');
}

@font-face {
    font-family: 'Renault Life';
    src: url('../fonts/RenaultLife.eot');
    src: url('../fonts/RenaultLife.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RenaultLife.woff2') format('woff2'),
        url('../fonts/RenaultLife.woff') format('woff'),
        url('../fonts/RenaultLife.ttf') format('truetype'),
        url('../fonts/RenaultLife.svg#RenaultLife') format('svg');
}

.fp-controlArrow.fp-next,
.fp-controlArrow.fp-prev {
    height: 100%;
    opacity: 0;
    top: 0;
}

.fp-controlArrow.fp-next {
    right: 0;
}

.fp-controlArrow.fp-prev {
    left: 0;
}

a {
    color: #000;
    text-decoration: none;
}

p {
    font-family: 'Renault Life';
    font-weight: normal;
    margin: 0;
}


p small {
    font-family: 'Renault Life';
    font-size: 20px;
    font-weight: 300;
}

p strong {
    font-family: 'Renault Life';
    font-weight: bold;
}

.text {
    list-style: none;
    position: absolute;
    text-align: left;
}

.section-two .blockYellow {
    background: #ffde00;
    font-weight: bold;
    font-family: 'Renault Life';
    padding: 12px 30px;
}

.is-animated {
    opacity: 0;
    transform: translateX(-3000px);
    transition: transform .86s cubic-bezier(0.16, 0.68, 0.43, 0.99),
                opacity .86s ease-in-out;
}

#slide01 .is-animated {
    transition: transform 1.66s cubic-bezier(0.16, 0.68, 0.43, 0.99),
                opacity 2.66s ease-in-out;
}

.slide.active .is-animated{
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1.8s;
}

#slide01.active .is-animated{
    transition-delay: 0.3s;    
}

.scene,
.layer {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.scene {
  position: relative;
  overflow: hidden;
}

.layer {
  position: absolute;
}

.layer div {
    transform: translate3d(0,0,0);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.element{
    background-size: cover;
    position: absolute;
}

#slide01 .text{
    text-align: center;
}

#slide01 .is-animated.guia{
    animation: guia 1.5s linear 3s 5;
}

/* Define mobile styles */
@media only screen {

    /*guide animation*/
    @keyframes guia {
        0% {
            left: 32.8%;
            opacity: 1;
        }
        80% {        
            left: 52.8%;
            opacity: 0;
        }
        100%{        
            left: 52.8%;
            opacity: 0;
        }
    }

    /*Text styles*/
    p {
        font-size: 20px;
    }

    .section-two .blockYellow {
        font-size: 12px;
    }
    .section-two #slide01 .text {
        top: 34%;
        width: 100%;
    }
    .section-two #slide02 .text {
        top: 15%;
        left: 11%;
    }
    .section-two #slide03 .text {
        text-align: right;
        top:27%;
        right: 13%
    }
    .section-two #slide03 .text .subtitle{
        font-size: 18px;
    }
    .section-two #slide03 .text .small{
        font-size: 14px;
    }
    .section-two #slide04 .text {
        top: 19%;
        left: 15%;
    }
    .section-two #slide05 .text {
        top:27%;
        left: 10%;
    }
    .section-two #slide06 .text {
        top: 24%;
        left: 21%;
    }

    /*Elements styles*/

    #slide01 .background {
        background: url(../img/slide01/mobile-cielo-1.jpg) no-repeat;
        background-size: cover;
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;
    }
    #slide02 .background {
        background: url(../img/slide02/mobile-cielo-2.jpg) no-repeat;
        background-size: cover;
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;
    }
    #slide03 .background {
        background: url(../img/slide03/mobile-cielo-3.jpg) no-repeat;
        background-size: cover;
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;
    }
    #slide04 .background {
        background: url(../img/slide04/mobile-cielo-4.jpg) no-repeat;
        background-size: cover;
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;
    }
    #slide05 .background {
        background: url(../img/slide05/mobile-cielo-5.jpg) no-repeat;
        background-size: cover;
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;
    }
    #slide06 .background {
        background: url(../img/slide06/mobile-cielo-6.jpg) no-repeat;
        background-size: cover;
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;;
    }
    
    #slide01 .nubeinicio {
        background: url(../img/slide01/mobile-nubeinicio.png) no-repeat;
        background-size: cover;
        width: 41.97%;
        height: 11.68%;
        top: 34%;
        left: -3%;
    }
    #slide01 .aves {
        background: url(../img/slide01/mobile-aves.png) no-repeat;
        background-size: cover;
        width: 29.8%;
        height: 13.05%;
        top: 24%;
        left: 66%;
    }
    #slide01 .guia{
        background: url(../img/slide01/guia-mobile.png) no-repeat;
        background-size: cover;
        width: 14.35%;
        height: 7.79%; 
        left: 42.8%;    
        bottom: 35%;
        opacity: 0;
    }
    #slide01 .rocas {
        background: url(../img/slide01/mobile-rocas-1.png) no-repeat;
        background-size: cover;
        width: 56.32%;
        height: 19.68%;
        right: -3px;
        bottom: 0;
    }

    #slide02 .ciclista {
        background: url(../img/slide02/mobile-ciclista.png) no-repeat;
        background-size: cover;
        width: 11.54%;
        height: 10.95%;
        top: 71.5%;
        left: 6%;
    }
    #slide02 .duster {
        background: url(../img/slide02/mobile-duster.png) no-repeat;
        background-size: cover;
        width: 39.63%;
        height: 17.26%;
        top: 61%;
        left: 44%;;
    }
    #slide02 .rocas {
        background: url(../img/slide02/mobile-rocas-2.png) no-repeat;
        background-size: cover;
        width: 101%;
        height: 31.5%;
        left: -3px;
        bottom: 0;
    }

    #slide03 .montana-lejana {
        background: url(../img/slide03/mobile-montana1.png) no-repeat;
        background-size: contain;
        width: 100%;
        height: 19.26%;
        bottom: 5%;
        right: 4%;
    }
    #slide03 .duster {
        background: url(../img/slide03/mobile-oroch.png) no-repeat;
        background-size: cover;
        width: 100%;
        height: 24.63%;
        bottom: 0;
    }
    #slide03 .paracaidista {
        background: url(../img/slide03/mobile-paracaidista.png) no-repeat;
        background-size: cover;
        width: 35.41%;
        height: 22.63%;
        top: 10.4%;
        left: 14%;
    }
    #slide03 .arbol {
        background: url(../img/slide03/mobile-arbol-1_01.png) no-repeat;
        background-size: cover;
        width: 19.5%;
        height: 50.11%;;
        bottom: 0;
        right: 0;
    }
    #slide03 .rocas {
        background: url(../img/slide03/mobile-rocas-3.png) no-repeat;
        background-size: cover;
        width: 49.14%;
        height: 42.63%;
        left: -2px;
        bottom: 0;
    }

    #slide04 .montana-lejana {
        background: url(../img/slide04/mobile-montana-2.png) no-repeat;
        background-size: cover;
        height: 15.05%;
        width: 101%;
        bottom: 14%;
    }
    #slide04 .nubes {
        background: url(../img/slide01/mobile-nubeinicio.png) no-repeat;
        background-size: cover;
        width: 41.97%;
        height: 11.68%;
        top: 29%;
        left: 40%;
    }
    #slide04 .alaskan {
        background: url(../img/slide04/mobile-carros-4.png) no-repeat;
        background-size: cover;
        width: 100%;
        height: 29.58%;
        bottom: 0;
    }
    #slide04 .arbol-1 {
        background: url(../img/slide04/mobile-arbol-1_02.png) no-repeat;
        background-size: cover;
        width: 34.95%;
        height: 50.11%;;
        bottom: 0;
        left: 0;
    }
    #slide04 .arbol-2 {
        background: url(../img/slide04/mobile-arbol-2.png) no-repeat;
        background-size: cover;
        width: 44.46%;
        height: 13.58%;
        bottom: 0%;
        right: -15%;
    }
    #slide04 .arbol-3 {
        background: url(../img/slide05/mobile-arbol-3.png) no-repeat;
        background-size: cover;
        width: 29.49%;
        height: 22.63%;
        bottom: 6%;
        right: -15%;
    }

    #slide05 .montana-lejana {
        background: url(../img/slide05/mobile-montana-3.png) no-repeat;
        background-size: cover;
        width: 100%;
        height: 15.89%;
        right: -1.1%;
        bottom: 12%;
    }
    #slide05 .avion {
        animation: flying 20s linear infinite;
        background: url(../img/slide05/avion.png) no-repeat;
        background-size: cover;
        width: 10.4%;
        height: 1.58%;
        top: 20%;
        right: -15%;
    }
    #slide05 .captur {
        background: url(../img/slide05/mobile-carros-5.png) no-repeat;
        background-size: cover;
        width: 100%;
        height: 24.63%;
        bottom: 0;
    }
    #slide05 .arbol {
        background: url(../img/slide04/mobile-arbol-2.png) no-repeat;
        background-size: cover;
        width: 44.46%;
        height: 13.58%;
        bottom: 0;
        left: -29%;
    }
    #slide05 .arbol-2 {
        background: url(../img/slide05/mobile-arbol-3.png) no-repeat;
        background-size: cover;
        width: 29.49%;
        height: 22.63%;
        bottom: 6%;
        left: -14.5%;
    }
    #slide06 .montana-lejana {
        background: url(../img/slide06/mobile-montana-4.png) no-repeat;
        background-size: cover;
        width: 100%;
        height: 14.42%;
        right: 2.1%;
        bottom: 19.2%;
    }
    #slide06 .koleos {
        background: url(../img/slide06/mobile-carros-6.png) no-repeat;
        background-size: cover;
        width: 100%;
        height: 36%;
        bottom: 0;
    }

}

/* min-width 642px, medium screens */
@media only screen and (min-width: 642px) {
    /*Guide animation*/
    @keyframes guia {
        0% {
            bottom: 35%;
            opacity: 1;
        }
        80% {        
            bottom: 25%;
            opacity: 0;
        }
        100%{        
            bottom: 25%;
            opacity: 0;
        }
    }
    #slide01 .is-animated.guia{
        animation-duration: 1.5s;
    }   
    /*text styles*/
    .section-two p {
        font-size:28px;
    }
    .section-two p.title {
        font-size: 36px;
    }
    .section-two p.title2 {
        font-size: 25px;
        margin-top: -3px
    }
    .section-two p.subtitle{
        margin-top: -10px;
        margin-bottom: -5px;
        padding-left: 2px;     
    }

    .section-two #slide03 p.subtitle{
        margin-top: 0;
    }
    
    .section-two p small{
        font-size: 16px
    }
    .section-two .blockYellow {
        font-size:14px;
        padding: 8px 18px;
    }
    .section-two #slide01 .text {
        top: 34%;
    }
    .section-two #slide02 .text {
        top: 10%;
        left: 18%;
    }
    .section-two #slide03 .text {
        top: 25%;
        right: 22%
    }
    .section-two #slide06 .text {
        top: 12%;
        left: 21%;
    }
    /*elements styles*/
    #slide01 .background {
        background: url(../img/slide01/frame-cielo-1.jpg) no-repeat;
        background-size: cover;
        width: 100%;
        bottom: 0;
        top: 0;
    }
    #slide02 .background {
        background: url(../img/slide02/frame-cielo-2.jpg) no-repeat;
        background-size: cover;
        width: 100%;
        bottom: 0;
        top: 0;
    }
    #slide03 .background {
        background: url(../img/slide03/frame-cielo-3.jpg) no-repeat;
        background-size: cover;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
    }
    #slide04 .background {
        background: url(../img/slide04/frame-cielo-4.jpg) no-repeat;
        background-size: cover;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
    }
    #slide05 .background {
        background: url(../img/slide05/frame-cielo-5.jpg) no-repeat;
        background-size: cover;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
    }
    #slide06 .background {
        background: url(../img/slide06/frame-cielo-6.jpg) no-repeat;
        background-size: cover;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
    }

    #slide01 .nubeinicio {
        background: url(../img/slide01/nubeinicio.png) no-repeat;
        background-size: cover;
        width: 25.8%;
        height: 21.42%;
        top: 37%;
        left: 6%;
    }
    #slide01 .aves {
        background: url(../img/slide01/aves.png) no-repeat;
        background-size: cover;
        width: 11.45%;
        height: 15.02%;
        top: 24%;
        left: 66%;
    }
    #slide01 .guia{
        background: url(../img/slide01/guia-desktop.png) no-repeat;
        background-size: cover;
        width: 2.6%;
        height: 10.5%; 
        left: 48.7%;    
        bottom: 35%;
        opacity: 0;
    }
    #slide01 .rocas {
        background: url(../img/slide01/frame-roca-1.png) no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
        right: -3px;
    }
    #slide02 .ciclista {
        background: url(../img/slide02/ciclista.png) no-repeat;
        background-size: cover;
        width: 8%;
        height: 22.58%;
        top: 46%;
        left: 32%;
    }
    #slide02 .duster {
        background: url(../img/slide02/duster.png) no-repeat;
        background-size: cover;
        width: 26.9%;
        height: 34.86%;
        top: 26%;
        left: 56%;;
    }
    #slide02 .rocas {
        background: url(../img/slide02/frame-roca-2.png) no-repeat;
        background-size: cover;
        height: 100%;
        width: 100.4%;
        left: -3px;
    }
    #slide03 .montana-lejana {
        background: url(../img/slide03/frame-montana-lejana-3.png) no-repeat;
        background-size: contain;
        height: 100%;    
        width: 102%;
        bottom: 4%;
        right: -12%;
    }
    #slide03 .duster {
        background: url(../img/slide03/frame-carros-3.png) no-repeat;
        background-size: cover;
        height: 51%;
        width: 100%;
        bottom: 0;
    }
    #slide03 .paracaidista {
        background: url(../img/slide03/paracaidista.png) no-repeat;
        background-size: cover;
        width: 18.42%;
        height: 35.17%;
        top: 8%;
        left: 32%;
    }
    #slide03 .arbol {
        background: url(../img/slide03/arbol-1-1.png) no-repeat;
        background-size: cover;
        width: 15.1%;
        height: 56.3%;;
        bottom: 0;
        right: 0;
    }
    #slide03 .rocas {
        background: url(../img/slide03/frame-rocas-3.png) no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
    }
    #slide03 .text {
        text-align: right;
    }
    #slide04 .montana-lejana {
        background: url(../img/slide04/frame-montana-lejana-4.png) no-repeat;
        background-size: cover;
        height: 100%;
        width: 103%;
        bottom: 6%;
    }
    #slide04 .nubes {
        background: url(../img/slide04/nubes.png) no-repeat;
        background-size: cover;
        width: 25.8%;
        height: 21.42%;
        top: 26%;
        left: 25%;
    }
    #slide04 .alaskan {
        background: url(../img/slide04/frame-carros-4.png) no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
    }
    #slide04 .arbol-1 {
        background: url(../img/slide04/arbol-1-2.png) no-repeat;
        background-size: cover;
        width: 15.1%;
        height: 56.3%;;
        bottom: 0;
        left: 0;
    }
    #slide04 .arbol-2 {
        background: url(../img/slide04/arbol-2.png) no-repeat;
        background-size: cover;
        width: 38.6%;
        height: 28.66%;
        bottom: 0;
        right: -12%;
    }
    #slide04 .arbol-3 {
        background: url(../img/slide05/arbol-3.png) no-repeat;
        background-size: cover;
        width: 26%;
        height: 52.4%;
        bottom: 9%;
        right: -15%;
    }
    #slide04 .text {
        top: 30%;
        left: 5%;
    }
    #slide05 .montana-lejana {
        background: url(../img/slide05/frame-montana-lejana-5.png) no-repeat;
        background-size: cover;
        height: 53.58%;
        width: 100%;
        right: -1.1%;
        bottom: 0;
    }
    #slide05 .avion {
        animation: flying 50s linear infinite;
        background: url(../img/slide05/avion.png) no-repeat;
        background-size: cover;
        height: 1.9%;
        width: 4.1%;
        top: 20%;
        right: -15%;
    }
    #slide05 .captur {
        background: url(../img/slide05/frame-carros-5.png) no-repeat;
        background-size: cover;
        height: 49.4%;
        width: 100%;
        bottom: 0;
    }
    #slide05 .arbol {
        background: url(../img/slide04/arbol-2.png) no-repeat;
        background-size: cover;
        width: 38.6%;
        height: 28.66%;
        bottom: 0;
        left: -27%;
    }
    #slide05 .arbol-2 {
        background: url(../img/slide05/arbol-3.png) no-repeat;
        background-size: cover;
        width: 26%;
        height: 52.4%;
        bottom: 9%;
        left: -11%;
    }
    #slide05 .text {
        top: 23%;
    }
    #slide06 .montana-lejana {
        background: url(../img/slide06/frame-montana-lejana-6.png) no-repeat;
        background-size: cover;
        height: 53.58%;
        width: 100%;
        right: 2.1%;
        bottom: 13.2%;
    }
    #slide06 .koleos {
        background: url(../img/slide06/frame-carros-6.png) no-repeat;
        background-size: cover;
        height: 70.59%;
        width: 100%;
        bottom: 0;
    }

}

/* min-width 1026px, large screens */
@media only screen and (min-width: 1026px) {

    /* Text styles */

    .section-two p {
        font-size:34px;
    }
    .section-two p.title {
        font-size: 42px;
    }
    .section-two p.title2 {
        font-size: 32px;
    }
    .section-two p.subtitle{
        margin-top: -15px;    
    }
    .section-two p small{
        font-size: 18px
    }
    .section-two .blockYellow {
        font-size:16px;
        padding: 12px 30px;
    }
    .section-two #slide02 .text {
        top: 17%;
        left: 22%;
    }
    .section-two #slide03 .text {
        top:27%;
        right: 24%
    }
    .section-two #slide06 .text {
        top: 18%;
        left: 21%;
    }

    /*Elements styles*/

    #slide01 .aves {
        left: 63%;
    }
    #slide01 .nubeinicio {
        top: 36%;
        left: 9%;
    }

}

/* min-width 1442px, xlarge screens */
@media only screen and (min-width: 1442px) {

    /*text styles*/
    .section-two p {
        font-size: 41px;
    }

    .section-two p.title {
        font-size: 56px;
    }

    .section-two p.title2 {
        font-size: 40px;
    }

    .section-two p.subtitle{
        margin-top: -20px;
    }

    .section-two p small{
        font-size: 22px
    }

    .section-two .blockYellow {
        font-size:17px;
    }

    .section-two #slide02 .text {
        top: 16%;
    }

    .section-two #slide03 .text {
        top:28%;
        right: 25%
    }

    .section-two #slide06 .text {
        top: 24%;
        left: 21%;
    }
    /*element styles*/

    #slide01 .aves {
        background-size: 100% 100%, auto;
        top: 26%;
        left: 60%;
    }

}

@keyframes flying {
    0% {
        transform: translateY(0);
        rigth:-15%;
    }
    100% {
        transform: translateY(5%);
        right:100%;
    }
}