@font-face {
    font-family: 'RenaultLife';
    src: url('../fonts/RenaultLife.eot?#iefix') format('embedded-opentype'),  url('../fonts/RenaultLife.woff') format('woff'), url('../fonts/RenaultLife.ttf')  format('truetype'), url('../fonts/RenaultLife.svg#RenaultLife') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RenaultLife-Bold';
    src: url('../fonts/RenaultLife-Bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/RenaultLife-Bold.otf')  format('opentype'),
           url('../fonts/RenaultLife-Bold.woff') format('woff'), url('../fonts/RenaultLife-Bold.ttf')  format('truetype'), url('../fonts/RenaultLife-Bold.svg#RenaultLife-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RenaultLife-Light';
    src: url('../fonts/RenaultLife-Light.eot?#iefix') format('embedded-opentype'),  url('../fonts/RenaultLife-Light.woff') format('woff'), url('../fonts/RenaultLife-Light.ttf')  format('truetype'), url('../fonts/RenaultLife-Light.svg#RenaultLife-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}


/** GENERAL **/  
body{ background-color: black; color:white; font-family: 'RenaultLife-Light'; font-size: 16px; line-height: 1.25em; margin:0; }

.button { padding: .5em 1.5em; background-color: #FFCC33; color: #000000; text-transform: uppercase; font-family: 'RenaultLife-Bold'; transition: 0.3s; display: inline-block; }
.button:hover { background-color: #E5AB1A; color:#FFFFFF; text-decoration: none; }
.button.condensed { padding: .3em .5em; }
.button.seemore { font-size: .9em; margin-top: .35em; }
.button .fas { margin-left:.5em; line-height: 1.2em; }
.action { padding-right: .5em; margin-top: 2.5em; float: right; }

.logo { text-align: center; margin: .5em 0; }
.logo > img { width: 140px; }

.section { display: none; overflow: hidden; padding-bottom: 1em; }
.section.active { display: block; }

.framed { text-transform: uppercase; border-left:1px solid white; border-right:1px solid white; display: block; font-size: .8em; padding: 0 .5em; margin-top: .3em; width:11em; }
.fa-plus { color:white; }
.bolder { font-family: 'RenaultLife-Bold'; }
.bullet { padding-left: 1em; }

@media only screen and (min-width: 992px) {
    body { font-size: 25px; }

    .button { font-size: 20px; }
    .button.seemore { font-size: 15px; margin-left: -2em; padding: 0 0.3em !important; line-height: 1.8em; }
    .button.condensed { padding: .1em .8em; }

    .logo { position: absolute; width: 100%; text-align: right; }
    .logo > img { margin-right: 1em; width: auto; }

    .section { padding-bottom: 0; }

    .action { padding: 0; margin: 0; position: absolute; right: 1em; bottom: 1em; z-index: 500; }

    .framed { font-size: 0.7em; margin-top: .7em; width: 14em; line-height: 1.2em; }
}


/** INTRO **/
.title { height: 5em; opacity: 0; }
.tagline { font-size: 1.125rem; line-height: 1.25rem; margin: 2em 0; }
.tagline > em { font-family: 'RenaultLife-Bold'; font-size: 1.6875rem; display: block; font-style: normal; line-height: 1.2em; }

.evolution-images {position: relative; overflow: hidden; opacity:0; z-index: -1; }
.evolution-images img { max-width: 130%; margin-left: -15%; }
.evolution-images .slide { position: absolute; }

.years-50 { position: relative; opacity: 0; }
.years-50 img { width: 135px; position: absolute; top:-70px; left: 1em; }
.intro-text { margin: 2em 1em; font-size: .95em; opacity: 0; }

#landing.animation-in .evolution-images { animation: fadeIn .5s linear both, goToRight 1s ease-out both; }
#landing.animation-in .title { animation: fadeIn .5s linear both 5s, goToDown 1s ease-out both 5s; }
#landing.animation-in .years-50 { animation: fadeIn .5s linear both 5.5s, goToRight 1s ease-out both 5.5s; }
#landing.animation-in .intro-text { animation: fadeIn .5s linear both 6s, goToUp 1s ease-out both 6s; }

@media only screen and (min-width: 992px) {
    .evolution-images img { max-width: 100%; margin-left: 0; }

    .title { position: absolute; right:10%; top: 10%; }
    .tagline { font-size: 1.5625rem; line-height: 1.4rem; }
    .tagline > em { font-size: 2.375rem; }

    .years-50 { position: absolute; left: 5%; bottom: 7%; }
    .years-50 img { width: auto;  position: relative; top: 0; left: 0; }
    .intro-text { position: absolute; right: 5%; bottom: 7%; margin: 0; }

    #landing.animation-in .evolution-images { animation: fadeIn .5s linear both, locateCar 9s linear forwards; }
    #landing.animation-in .title { animation: fadeIn .5s linear both 4s, hideTitle 1s linear forwards 8s; }
    #landing.animation-in .years-50 { animation: fadeIn .5s linear both 4.5s, goToRight 1s ease-out both 4.5s; }
    #landing.animation-in .intro-text { animation: fadeIn .5s linear both 9s, goToUp .5s ease-out both 9s; }
}


/** TIMELINE **/
.logos { padding-left: .5em; display: inline-block; height: 72px; position: relative; width:150px; }
.logo-renault { display: none; position: absolute; bottom:0; left:10px; }
.logo-renault.active { display: block; }
.logo-1969 { width: 51px; margin-bottom:-10px; }
.logo-1972 { width: 129px; }
.logo-1992 { width: 74px; }
.logo-2004 { width: 133px; }
.logo-2007 { width: 55px; }
.logo-2019 { width: 123px; }

.milestones { width:calc(12 * 100%); position: relative; }
.milestones:after { display: block; content: ''; border-top:1px solid #FFCC33; top:230px; left:2em; width:100%; position: absolute; }
.couple { width:calc(100% / 12); float: left; }
.milestone { width:100%; height: 230px; position: relative; }

.year { color:#FFCC33; font-family: 'RenaultLife-Bold'; font-size: 1.875rem; position: absolute; margin:0; padding-left: .2em; }
.marker { position: absolute; left: 0; display: block; border-left:1px solid #FFCC33; height:50%; width:1px; }
.marker:before { position: absolute; display: block; content: ''; background-color: #FFCC33; width:11px; height:10px; border-radius: 5px; left:-6px; top:-5px; }
.marker.bigger:before { width:15px; height:14px; border-radius: 7px; left:-8px; top:-7px; }
.first > .year { bottom:0; margin-left:1em; }
.first > .year > .marker { top:50%; }
.first > .year > .marker:before { bottom:-5px; top:auto; }
.first > .year > .marker.bigger:before { bottom:-7px; }
.second > .year { margin-left:60%; }
.second > .year > .marker { top:0; }
.second > .year > .marker:before { top:-5px; }
.second > .year > .marker.bigger:before { top:-7px; }
.second > .row { padding-top: 2.5em; }
.thumb-image { text-align: center; }
.hito > p { margin-bottom: .5rem; }

@media only screen and (min-width: 992px) {
    .logos { padding-left: 1.5em; height: 150px; width: 310px; margin-bottom: -2em; position: absolute; }
    .logo-renault { left:auto; }
    .logo-renault > img { width: auto; }
    .logo-1972 { margin-bottom: 2em; }
    .logo-1992 {  width: 130px !important; margin-bottom: .5em; }
    .logo-2004 { margin-bottom: 1.5em; }
    .logo-2007 { width: 100px !important; margin-bottom: .5em; }
    .logo-2019 { width: 180px !important; margin-bottom: 1em; }

    .milestones { position: absolute; top:90px; height:calc(100% - 150px); z-index: 1; padding-left: 4em; }
    .milestones:after { top:230px; left:7em; }
    .milestone { width:48%; height: 100%; display: inline-block; margin-right: -3em; }
    .couple { height:100%; }
    .year { position: absolute; bottom: auto; font-size: 2em; }
    .hito { margin-left: 25%; padding: 0; }
    .hito > p { font-size:.95em; line-height: 1.2em; }
    .hito-col { height: 220px; }
    .thumb-image { text-align: left; padding-left: 5% !important; }
    .thumb-image img { margin-left: -10px; }
    .withmore { margin-left: -40px; }

    .year .num { background-color: black; z-index: 10; position: absolute; left:-60px; top: 120px; line-height: 1em; padding-top: 8px; padding-bottom: 5px; }

    .first > .year,
    .second > .year { top:40px; left:110px; display: block; width: 150px; height:410px; margin: 0; position: absolute; }
    .first > .year > .marker, 
    .second > .year > .marker { top:0; left:0; }
    .first > .year > .marker:before, 
    .second > .year > .marker:before { top:0; }
    .first > .year > .marker.bigger:before, 
    .second > .year > .marker.bigger:before { top:0; }
    .first > .row,
    .second > .row { padding-top: 30px; }
}


/** ENDING **/
.ending-text { font-size: 1.3rem; line-height: 1.2em; margin-top: 3em; }
.ending-text .bolder { font-size: 1.3em; }

#closing .years-50 { opacity:1; }
#closing .evolution-images { opacity:1; }

@media only screen and (min-width: 992px) {
    #closing .evolution-images img { max-height: 400px; margin-left: -50px; margin-top: 100px; }

    .ending-text { margin: 0; position: absolute; top: 35%; right:5%; font-size: 1.8rem; }
    .ending-text .bolder { font-size: 1.5em; }
}


/** POPUP **/
.popup { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 1000; display: none; background-color: rgba(0, 0, 0, .5); }
.popup .frame { position: absolute; bottom: 1em; width: 100%; }
.popup .info { width: 310px; height: 410px; margin: 0 auto; background: rgba(255, 255, 255, 0.95); position: relative; color:black; padding: 3em 1em 1em; }
.info p { margin-bottom: .5em; font-size: .9em; position: relative; }
.info p.bullet:after { content:''; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #FFCC33; position: absolute; top: 7px; left: 2px; }
.info > div { display: none; }
.info > .fa-times { position: absolute; top: .5em; right: .5em; width: 1.65em; height: 1.6em; padding: .5em; color: black; background-color: #FFCC33; text-align: center; border-radius: 50%; line-height: 0.5em; cursor: pointer; }

@media only screen and (min-width: 992px) {
    .popup { font-size: .7em; line-height: 1.2em; }
}

/** ANIMACIONES **/
.fade-out { opacity:0; transition: opacity .5s 3s ease-in; }

@keyframes fadeIn {
    0%{ opacity:0; }
    100%{ opacity:1; }
}
  
@keyframes fadeOut {
    0%{ opacity:1; }
    100%{ opacity:0; }
}
  
@keyframes zoomIn {
    0%{ transform:scale(1); }
    100%{ transform:scale(1.5); }
}
  
@keyframes zoomOut {
    0%{ transform:scale(1.5); }
    100%{ transform:scale(1); }
}
  
@keyframes goToUp {
    0%{ transform:translateY(50px); }
    100%{ transform:translateY(0px); }
}
  
@keyframes goToDown {
    0%{ transform:translateY(-50px); }
    100%{ transform:translateY(0px); }
}
  
@keyframes goToRight {
    0%{ transform:translateX(-50px); }
    100%{ transform:translateX(0px); }
}
  
@keyframes goToLeft {
    0%{ transform:translateX(50px); }
    100%{ transform:translateX(0px); }
}
  
@keyframes enterRight {
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(0px); }
}
  
@keyframes enterLeft {
    0%{ transform:translateX(100%); }
    100%{ transform:translateX(0px); }
}

@keyframes locateCar {
    0%{ 
        transform:translateX(-50px);
    }
    10%{ 
        transform:translateX(0px); 
    }
    80%{ 
        transform:scale(1);
    }
    95%{
        transform:scale(.66) translateX(-400px);
    }
    100%{
        transform:scale(.66) translateX(-400px);
    }
}

@keyframes hideTitle {
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}