@font-face {
    font-family: 'elior';
    src: url('../fonts/elior_regular-webfont.eot');
    src: url('../fonts/elior_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/elior_regular-webfont.woff') format('woff'),
         url('../fonts/elior_regular-webfont.ttf') format('truetype'),
         url('../fonts/elior_regular-webfont.svg#eliorregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

}

@font-face {
    font-family: 'futura';
    src: url('../fonts/futura_medium_bt-webfont-webfont.eot');
    src: url('../fonts/futura_medium_bt-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/futura_medium_bt-webfont-webfont.woff2') format('woff2'),
         url('../fonts/futura_medium_bt-webfont-webfont.woff') format('woff'),
         url('../fonts/futura_medium_bt-webfont-webfont.ttf') format('truetype'),
         url('../fonts/futura_medium_bt-webfont-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

body{
    position: absolute;
    width: 100%;
    height: 100%;
    padding:0;
    margin:0;
    overflow: hidden;
    font: 30px 'elior', arial, sans-serif;
}

#aspectRatioVertical{
    position: relative;
    width: 1080px;
    height:1920px;
    top:0;left:0;
    overflow: hidden;
}

.slider{
    position: relative;
    overflow:hidden;
    background: #EA9602;
    color:white;
}

.title{
    width: 1080px;
    text-align: center;
    text-transform: uppercase;
    font: 100px 'futura', 'geosanslight', sans-serif;
}

.today{
    width: 1080px;
    text-align: center;
    text-transform: uppercase;
    font-size:50px;
}

.today-time{
    width: 1080px;
    text-align: center;
    text-transform: uppercase;
    font-size:90px;
}

.bandeau-bas{
    width: 1080px;
    height: 378px;
}

.map{
    width: 1080px;
    height: 1180px;
    background:white;
}

.spinner{
    width: 1080px;
    height: 1180px;
    background: #EA9602;
    
    -webkit-transition: all .5s ease;
    
    transition: all .5s ease;
}

.spinner.fadeout{
    height: 2em !important;
}

.voiture{
    width: 150px;
    height: 83px;
    
    -webkit-animation: animTranslate 5s infinite linear;
    
    animation: animTranslate 5s infinite linear;
}

.dash{
    width: 1080px;
    height: 0px;
    border: 0px solid transparent;
    border-top: 0.8em solid white;
    border-style: dashed;
}

@-webkit-keyframes animTranslate {
  0%   { -webkit-transform: translateX(-600px); transform: translateX(-600px); }
  100% { -webkit-transform: translateX(1080px); transform: translateX(1080px); }
}

@keyframes animTranslate {
  0%   { -webkit-transform: translateX(-600px); transform: translateX(-600px); }
  100% { -webkit-transform: translateX(1080px); transform: translateX(1080px); }
}