@charset "UTF-8";
/* CSS Document */

*{
    outline: none;
    margin: 0;
    padding: 0;}
body{
    background: #b2b2b2;
    color: #527fc0;
    font-family: futura, Helvetica, Arial, sans-serif;
    position: relative;
    height: 100%;
    width: 100%;}
html{
    position: relative;
    height: 100%;
    width: 100%;}


@font-face {
    font-family: 'futura';
    src: url('fonts/futura_light_bt-webfont.woff2') format('woff2'),
         url('fonts/futura_light_bt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'adam';
    src: url('fonts/adam.cg_pro-webfont.woff2') format('woff2'),
         url('fonts/adam.cg_pro-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

.logo {
  width: clamp(345px, 40vw, 500px);
}

h1{
    text-transform: uppercase;
    font-family: futura, Helvetica, Arial, sans-serif;
    margin-bottom: 5vw;
    font-size: 30px;
    letter-spacing: 3px;
    font-weight: normal;}
h2{
    text-transform: uppercase;
    font-family: futura, Helvetica, Arial, sans-serif;
    margin: 5vw 0 2vw 0;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: normal;}
h3{
    text-transform: uppercase;
    font-family: futura, Helvetica, Arial, sans-serif;
    margin-bottom: 5vw;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: normal;}
p{  
    color: #fff;
    font-family: futura, Helvetica, Arial, sans-serif;
    font-size: 22px;
    line-height: 38px;
    width: auto;}

li{  
    font-family: futura, Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 30px;
    width: 60%;
    margin: 0 auto;}

a{
    color: #6199ed;
    text-decoration: none;}
a.externalLink{
    color: #87b5fb;
    border-bottom: 1px solid #87b5fb;}

.nav{
    opacity: 0;
    transition: all 0.3s;
    position: absolute;
    z-index: 1000;
    top: 70px;
    left: 70px;}
.nav ul{
    position: relative;
    text-align: left;}
.nav li{
    font-family: adam, Helvetica, Arial, sans-serif;
    list-style-type:none;
    margin: 2px 0px 0 14px;
    width: auto;}
.nav li:first-child{
    margin: 2px 10px 10px 14px;
    color: #5f7486;}
.nav li a, .nav li{
    white-space: nowrap;
    -webkit-transition: all 0.3s; /* Safari */
    transition: all 0.3s;
    font-family: adam, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #374857;
    text-decoration: none;
    font-weight: normal;
    font-size:20px;
    letter-spacing: 2px;
    background: transparent;
    line-height: 23px;}
.nav li a{
    display: inline-block;
    position: relative;
    border-bottom: 2px solid transparent;}
.nav li a:hover{
    color: #0a7fd5;
    border-bottom: 2px solid #0a7fd5;}
.mobileMe .nav li a, .mobileMe .nav li{
    font-size:40px;
    line-height: 50px;}
.mobileMe.landscape .nav{
    top: 30px;
    left: 30px;}
.mobileMe.landscape .nav li a, .mobileMe.landscape .nav li {
    font-size: 30px;
    line-height: 30px;}


.visualContainer{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;}
.mobileMe.landscape .visualContainer{
    height: 84vh;}
.retinaTime.landscape .visualContainer{
    height: 78vh;}
.mobileMe.landscape .visualContainer .step:nth-child(1) {;
    background: url(../images/smallSizeBgd_1.jpg) center -52vh;}
.mobileMe.landscape .visualContainer .step:nth-child(2) {;
    background: url(../images/smallSizeBgd_2.jpg) center -52vh;}
.mobileMe.landscape .visualContainer .step:nth-child(3) {;
    background: url(../images/smallSizeBgd_3.jpg) center -52vh;}
.visualContainer .step{
    transition: all 1s ease;
    transform-origin: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    animation-fill-mode: both;
    animation-timing-function: ease;
    background-size: cover !important;}
.visualContainer .step:nth-child(1){
    background: url(../images/smallSizeBgd_1.jpg) center center;
    z-index: 5;}
.visualContainer .step:nth-child(2){
    background: url(../images/smallSizeBgd_2.jpg) center center;
    z-index: 3;}
.visualContainer .step:nth-child(3){
    background: url(../images/smallSizeBgd_3.jpg) center center;
    z-index: 1;}

@keyframes fadeInOut_1 {
  0%   { opacity: 0; }
  1%  { opacity: 1; }
  4%  { opacity: 1; transform: scale(1.0); }
  5% { opacity: 0; transform: scale(1.2);  }
  100% { opacity: 0; }
}
@keyframes fadeInOut_2 {
  0%   { opacity: 0; }
  2%  { opacity: 1; }
  8%  { opacity: 1; transform: scale(1.0);}
  9% { opacity: 0; transform: scale(1.2); }
  100% { opacity: 0; }
}
@keyframes fadeInOut_3 {
  0%   { opacity: 0; }
  2%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1.1); }
}

@keyframes navFadeIn {
  13%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 1; }
}
.no-animations * {
  transition: none !important;
  animation: none !important;
}
/* step1: visible de 0s à 3s */
.loaded .visualContainer .step:nth-child(1) {
  animation: fadeInOut_1 10s infinite;
  animation-delay: 0s;
}

/* step2: visible de 3s à 5s */
.loaded .visualContainer .step:nth-child(2) {
  animation: fadeInOut_2 10s infinite;
  animation-delay: 0s;
}

/* step3: visible de 5s à 9s */
.loaded .visualContainer .step:nth-child(3) {
  animation: fadeInOut_3 10s infinite;
  animation-delay: 0s;
}

.loaded .nav{
  animation: navFadeIn 10s ease 1 forwards;
  animation-delay: 0s;
}



/************************/


.footer{
    color: #279bf0 !important;
    position: relative;
    min-width: calc(380px - 20vw);
    width: calc(100vw - 20vw);
    background: #003d69;
    height: auto;
    padding: 5vw 10vw 10vw;}
.footer h2{
    margin: 50px 0 20px;}
.footer p, .footer a{
    color: #279bf0 !important;}
.footer p{
    margin-left: clamp(70px, 8vw, 105px); }
.footer .smallFooter{
    font-size: 20px;
    line-height: 33px;
    color: #066ebb !important;
    letter-spacing: 1px;}
.smallSize .footer .logo{
    width: 330px;
    margin-bottom: 30px;
    min-width: 330px;}
.smallSize .footer p {
  margin-left: 53px;}
.discoveryHandler{
    position: absolute;
    bottom: 5vw;
    right: 5vw;}
.discoveryHandler img{
    width: 10vw;
    min-width: 200px;}

/************************/