html,
body {
  margin: 0;
  padding: 0; }

#animation,
#animation * {
  box-sizing: border-box; }

@-webkit-keyframes one-logo {
  0% {
    -webkit-transform: translateY(-50%) scale(0.6);
            transform: translateY(-50%) scale(0.6);
    top: 50%; }
  50% {
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
    top: 50%; }
  100% {
    -webkit-transform: translateY(-50%) scale(0.7);
            transform: translateY(-50%) scale(0.7);
    top: 45%; } }

@keyframes one-logo {
  0% {
    -webkit-transform: translateY(-50%) scale(0.6);
            transform: translateY(-50%) scale(0.6);
    top: 50%; }
  50% {
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
    top: 50%; }
  100% {
    -webkit-transform: translateY(-50%) scale(0.7);
            transform: translateY(-50%) scale(0.7);
    top: 45%; } }
@-webkit-keyframes change-number {
  0% {
    opacity: 1; }
  30% {
    opacity: 0; }
  70% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes change-number {
  0% {
    opacity: 1; }
  30% {
    opacity: 0; }
  70% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes change-number2 {
  0% {
    opacity: 1; }
  30% {
    opacity: 0; }
  70% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes change-number2 {
  0% {
    opacity: 1; }
  30% {
    opacity: 0; }
  70% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
#animation {
  font-family: Arial;
  width: 100%;
  height: 580px;
  overflow: hidden;
  position: relative; }
  #animation .pause {
    display: inline; }
  #animation:hover #pause-anim {
    opacity: 1; }
  #animation #pause-anim {
    z-index: 3;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 25px;
    opacity: 0; }
    #animation #pause-anim .play,
    #animation #pause-anim .refresh,
    #animation #pause-anim .pause {
      cursor: pointer; }
    #animation #pause-anim .play {
      margin-right: 20px; }
    #animation #pause-anim .play,
    #animation #pause-anim .refresh {
      display: none; }
    #animation #pause-anim.waiting {
      -webkit-animation: blink 1s infinite;
              animation: blink 1s infinite; }
    #animation #pause-anim.ready {
      opacity: 1; }
      #animation #pause-anim.ready .pause {
        display: none; }
      #animation #pause-anim.ready .play,
      #animation #pause-anim.ready .refresh {
        display: inline; }
  #animation .one {
    background-color: #ffdd00;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
    text-align: center;
    height: 100%;
    -webkit-transition: all 3s ease-in-out;
            transition: all 3s ease-in-out;
    top: 0; }
    #animation .one .logo-container {
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      position: relative;
      top: 45%;
      -webkit-transform: translateY(-50%) scale(0.7);
          -ms-transform: translateY(-50%) scale(0.7);
              transform: translateY(-50%) scale(0.7); }
    #animation .one .text {
      -webkit-transition: all 4s ease-out 3.2s;
              transition: all 4s ease-out 3.2s;
      width: 100%;
      position: absolute;
      top: 72%;
      font-size: 50px;
      color: #c10a25;
      opacity: 0;
      -webkit-transform: scale(0.6);
          -ms-transform: scale(0.6);
              transform: scale(0.6); }
    #animation .one.animate .logo-container {
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      position: relative;
      top: 45%;
      -webkit-transform: translateY(-50%) scale(0.7);
          -ms-transform: translateY(-50%) scale(0.7);
              transform: translateY(-50%) scale(0.7);
      -webkit-animation: one-logo 7s ease-out;
              animation: one-logo 7s ease-out; }
    #animation .one.animate .text {
      opacity: 1;
      -webkit-filter: blur(0);
              filter: blur(0);
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
      top: 64%; }
  #animation.very-small .one img {
    width: 315px; }
  #animation .two {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
    text-align: center;
    -webkit-transition: all 3s ease-in-out;
            transition: all 3s ease-in-out;
    height: 100%;
    width: 100%;
    top: 0;
    font-weight: bold;
    font-size: 70px; }
    #animation .two .text {
      -webkit-perspective: 1000px;
              perspective: 1000px;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      padding-top: 45px;
      height: 130px;
      font-size: 70px;
      -webkit-transition: all 4s ease-in-out 2.5s;
              transition: all 4s ease-in-out 2.5s;
      position: relative;
      top: 50%;
      width: 100%;
      -webkit-transform: translateY(-50%) translate3d(0, 0, 0) scale(1);
              transform: translateY(-50%) translate3d(0, 0, 0) scale(1);
      color: #f39200;
      z-index: 2;
      background-color: #fff; }
      #animation .two .text .areva {
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
        display: inline-block;
        font-weight: bold;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0); }
      #animation .two .text .today {
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
        padding: 0 8px;
        display: inline-block;
        background-color: #f39200;
        color: #fff;
        font-weight: bold;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0); }
    #animation .two .paragraph {
      width: 100%;
      -webkit-transition: all 4s ease-out 2.5s;
              transition: all 4s ease-out 2.5s;
      font-size: 40px;
      color: #2b2b2d;
      position: absolute;
      top: 100%;
      opacity: 0;
      font-weight: normal; }
  #animation.mobile .two .text {
    font-size: 35px; }
  #animation.mobile .paragraph {
    font-size: 30px; }
  #animation .three {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
    text-align: center;
    -webkit-transition: all 3s ease-in-out;
            transition: all 3s ease-in-out;
    height: 100%;
    top: 0;
    background-color: #ffdd00;
    padding-top: 60px; }
    #animation .three .roles.first .role:nth-child(1) {
      top: 500px;
      -webkit-transition: all 2.5s ease-out 0.9s;
              transition: all 2.5s ease-out 0.9s; }
    #animation .three .roles.first .role:nth-child(2) {
      top: 500px;
      -webkit-transition: all 2.5s ease-out 1.8s;
              transition: all 2.5s ease-out 1.8s; }
    #animation .three .roles.first .role:nth-child(3) {
      top: 500px;
      -webkit-transition: all 2.5s ease-out 2.7s;
              transition: all 2.5s ease-out 2.7s; }
    #animation .three .roles.first .role:nth-child(4) {
      top: 500px;
      -webkit-transition: all 2.5s ease-out 3.6s;
              transition: all 2.5s ease-out 3.6s; }
    #animation .three .roles.second .role:nth-child(1) {
      top: 500px;
      -webkit-transition: all 2.5s ease-out 4.05s;
              transition: all 2.5s ease-out 4.05s; }
    #animation .three .roles.second .role:nth-child(2) {
      top: 500px;
      -webkit-transition: all 2.5s ease-out 4.95s;
              transition: all 2.5s ease-out 4.95s; }
    #animation .three .roles.second .role:nth-child(3) {
      top: 500px;
      -webkit-transition: all 2.5s ease-out 5.85s;
              transition: all 2.5s ease-out 5.85s; }
    #animation .three .roles.second .role:nth-child(4) {
      top: 500px;
      -webkit-transition: all 2.5s ease-out 6.75s;
              transition: all 2.5s ease-out 6.75s; }
    #animation .three .role {
      position: relative;
      width: 180px;
      display: inline-block;
      margin: 0 0%;
      vertical-align: middle; }
      #animation .three .role .logo {
        height: 80px; }
        #animation .three .role .logo img {
          position: relative;
          top: 50%;
          -webkit-transform: translateY(-50%) scale(0.7);
              -ms-transform: translateY(-50%) scale(0.7);
                  transform: translateY(-50%) scale(0.7); }
      #animation .three .role .text {
        height: 70px;
        text-align: center;
        font-size: 15px;
        text-transform: uppercase;
        color: #1c1c1b;
        font-weight: bold; }
  #animation.mobile .three .role {
    width: 120px; }
  #animation.mobile .three .text {
    font-size: 14px; }
  #animation.mobile.small .three .role {
    width: 100px; }
  #animation.mobile.small .three .text {
    font-size: 10px; }
  #animation.mobile.very-small .three .text {
    font-size: 9px; }
  #animation.mobile.very-small .three .role {
    width: 76px; }
    #animation.mobile.very-small .three .role img {
      width: 80px; }
  #animation .four {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
    text-align: center;
    -webkit-transition: all 3s ease-in-out;
            transition: all 3s ease-in-out;
    height: 100%;
    top: 0;
    left: 0;
    color: #8c358b;
    font-weight: bold; }
    #animation .four .content {
      -webkit-transition: all 5s ease-out 1s;
              transition: all 5s ease-out 1s;
      position: relative;
      top: 100%;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%); }
    #animation .four .number-three {
      font-size: 120px; }
    #animation .four .main-title {
      font-size: 60px;
      line-height: 60px; }
    #animation .four .sub-title {
      opacity: 1;
      margin-top: 25%;
      font-size: 35px;
      line-height: 35px; }
  #animation.small .main-title {
    font-size: 50px;
    line-height: 50px; }
  #animation.small .sub-title {
    font-size: 30px;
    line-height: 30px; }
  #animation.very-small .four .content {
    top: 80%; }
  #animation.very-small .four .main-title {
    font-size: 40px;
    line-height: 40px; }
  #animation.very-small .four .sub-title {
    font-size: 25px;
    line-height: 25px; }
  #animation .five {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
    text-align: center;
    -webkit-transition: all 2s ease-in-out;
            transition: all 2s ease-in-out;
    height: 100%;
    top: 0;
    text-align: center;
    color: #8c358b; }
    #animation .five .number-title {
      -webkit-transition: opacity .3s ease-out 2.5s, -webkit-transform .3s ease-out 2.5s;
              transition: opacity .3s ease-out 2.5s, transform .3s ease-out 2.5s;
      display: inline-block;
      position: relative;
      top: 37%;
      -webkit-transform: translateY(-50%) scale(12);
          -ms-transform: translateY(-50%) scale(12);
              transform: translateY(-50%) scale(12);
      height: 70px;
      overflow: hidden;
      opacity: 0; }
    #animation .five .round {
      position: relative;
      width: 90px;
      height: 90px;
      border-radius: 90px;
      background-color: #8c358b; }
      #animation .five .round .round-number {
        -webkit-transition: all 2s ease-out;
                transition: all 2s ease-out;
        color: #fff;
        font-size: 85px;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        width: 90px;
        opacity: 1; }
        #animation .five .round .round-number:nth-child(1) svg {
          height: 57px; }
        #animation .five .round .round-number:nth-child(2) svg {
          height: 57px; }
        #animation .five .round .round-number:nth-child(3) svg {
          height: 57px; }
      #animation .five .round.number-one .round-number:nth-child(1) {
        left: -4px; }
      #animation .five .round.number-one .round-number:nth-child(2) {
        left: 90px; }
      #animation .five .round.number-one .round-number:nth-child(3) {
        left: 90px; }
      #animation .five .round.number-two .round-number:nth-child(1) {
        left: -94px; }
      #animation .five .round.number-two .round-number:nth-child(2) {
        left: 0px; }
      #animation .five .round.number-two .round-number:nth-child(3) {
        left: 90px; }
      #animation .five .round.number-three .round-number:nth-child(1) {
        left: -94px; }
      #animation .five .round.number-three .round-number:nth-child(2) {
        left: -90px; }
      #animation .five .round.number-three .round-number:nth-child(3) {
        left: 0; }
  #animation .text1 {
    -webkit-transition: all 3s ease-out 2.5s;
            transition: all 3s ease-out 2.5s;
    position: absolute;
    left: 100%;
    width: 100%;
    top: 50%;
    opacity: 1; }
  #animation .text2 {
    -webkit-transition: all 3s ease-out;
            transition: all 3s ease-out;
    position: absolute;
    left: 100%;
    width: 100%;
    top: 50%;
    opacity: 1; }
  #animation .text3 {
    -webkit-transition: all 5s ease-out;
            transition: all 5s ease-out;
    position: absolute;
    left: 100%;
    width: 100%;
    top: 50%;
    opacity: 1; }
  #animation.small.mobile .text4 {
    top: 67%; }
  #animation.very-small.mobile .five .number-title {
    top: 26%; }
  #animation.very-small.mobile .five .text1 {
    top: 35%; }
  #animation.very-small.mobile .five .text2 {
    top: 35%; }
  #animation.very-small.mobile .five .text3 {
    top: 35%; }
  #animation.very-small.mobile .five .text4 {
    top: 35%; }
  #animation .main {
    font-weight: bold;
    font-size: 60px; }
  #animation .sub {
    font-weight: normal;
    font-size: 40px; }
  #animation.very-small .main {
    font-size: 45px; }
  #animation.very-small .sub {
    font-size: 31px; }
  #animation .six {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
    text-align: center;
    -webkit-transition: all 3s ease-in-out;
            transition: all 3s ease-in-out;
    height: 100%;
    top: 0;
    text-align: center;
    background-color: #f39200;
    z-index: 2; }
    #animation .six .roles.first .role:nth-child(1) {
      top: 520px;
      -webkit-transition: all 2.5s ease-out 0.9s;
              transition: all 2.5s ease-out 0.9s; }
    #animation .six .roles.first .role:nth-child(2) {
      top: 520px;
      -webkit-transition: all 2.5s ease-out 1.8s;
              transition: all 2.5s ease-out 1.8s; }
    #animation .six .roles.first .role:nth-child(3) {
      top: 520px;
      -webkit-transition: all 2.5s ease-out 2.7s;
              transition: all 2.5s ease-out 2.7s; }
    #animation .six .roles.second .role:nth-child(1) {
      top: 570px;
      -webkit-transition: all 2.5s ease-out 3.15s;
              transition: all 2.5s ease-out 3.15s; }
    #animation .six .roles.second .role:nth-child(2) {
      top: 570px;
      -webkit-transition: all 2.5s ease-out 4.05s;
              transition: all 2.5s ease-out 4.05s; }
    #animation .six .roles.second .role:nth-child(3) {
      top: 570px;
      -webkit-transition: all 2.5s ease-out 4.95s;
              transition: all 2.5s ease-out 4.95s; }
    #animation .six .role {
      position: relative;
      display: inline-block;
      margin: 0 2.5%;
      vertical-align: middle;
      opacity: 1; }
      #animation .six .role .logo {
        height: 115px; }
        #animation .six .role .logo img {
          position: relative;
          top: 50%;
          -webkit-transform: translateY(-50%) scale(0.7);
              -ms-transform: translateY(-50%) scale(0.7);
                  transform: translateY(-50%) scale(0.7); }
      #animation .six .role .text {
        height: 70px;
        text-align: center;
        font-size: 15px;
        text-transform: uppercase;
        color: #1c1c1b;
        font-weight: bold; }
    #animation .six .text {
      font-size: 70px;
      -webkit-transition: all 3s ease-out 1s;
              transition: all 3s ease-out 1s;
      position: relative;
      top: 50%;
      width: 100%;
      -webkit-transform: translateY(-50%) scale(1);
          -ms-transform: translateY(-50%) scale(1);
              transform: translateY(-50%) scale(1);
      z-index: 2;
      background-color: #fff;
      background-color: #f39200; }
      #animation .six .text .areva {
        font-weight: bold;
        display: inline-block;
        color: #1c1c1b; }
      #animation .six .text .tomorrow {
        font-weight: bold;
        padding: 0 8px;
        display: inline-block;
        background-color: #8c358b;
        color: #fff; }
    #animation .six .content {
      opacity: 1;
      color: #1c1c1b;
      font-size: 40px;
      position: absolute;
      top: 120%;
      width: 100%; }
  #animation.mobile .six .text {
    font-size: 40px; }
  #animation.mobile .six .role {
    width: 120px; }
    #animation.mobile .six .role .text {
      font-size: 14px; }
  #animation.mobile.small .text {
    font-size: 40px; }
  #animation.mobile.small .six .role {
    width: 114px;
    margin-left: 0;
    margin-right: 0; }
    #animation.mobile.small .six .role .text {
      width: 120px;
      font-size: 10px; }
  #animation.mobile.very-small .six .role {
    width: 76px; }
    #animation.mobile.very-small .six .role .text {
      font-size: 9px;
      width: 76px; }
    #animation.mobile.very-small .six .role img {
      width: 80px; }
  #animation.mobile.very-small .six .content {
    font-size: 35px; }
  #animation .seven {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
    text-align: center;
    -webkit-transition: all 3s ease-in-out;
            transition: all 3s ease-in-out;
    height: 100%;
    top: 0;
    text-align: center;
    background-color: #ffdd00;
    z-index: 2; }
    #animation .seven .roles {
      position: relative; }
    #animation .seven .roles.first {
      position: absolute;
      top: 100px;
      width: 100%;
      text-align: center;
      z-index: 6; }
      #animation .seven .roles.first .role-seven:nth-child(1) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 0.9s;
                transition: all 2.5s ease-out 0.9s; }
      #animation .seven .roles.first .role-seven:nth-child(2) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 1.8s;
                transition: all 2.5s ease-out 1.8s; }
      #animation .seven .roles.first .role-seven:nth-child(3) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 2.7s;
                transition: all 2.5s ease-out 2.7s; }
    #animation .seven .roles.second {
      position: absolute;
      top: 150px;
      width: 100%;
      text-align: center;
      z-index: 6; }
      #animation .seven .roles.second .role-seven:nth-child(1) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 3.15s;
                transition: all 2.5s ease-out 3.15s; }
      #animation .seven .roles.second .role-seven:nth-child(2) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 4.05s;
                transition: all 2.5s ease-out 4.05s; }
    #animation .seven .role-seven {
      position: relative;
      display: inline-block;
      margin: 0 1.5%;
      vertical-align: middle;
      opacity: 1; }
      #animation .seven .role-seven .logo {
        height: 80px; }
        #animation .seven .role-seven .logo img {
          position: relative;
          top: 50%;
          -webkit-transform: translateY(-50%) scale(0.7);
              -ms-transform: translateY(-50%) scale(0.7);
                  transform: translateY(-50%) scale(0.7); }
      #animation .seven .role-seven .text {
        height: 70px;
        text-align: center;
        font-size: 15px;
        text-transform: uppercase;
        color: #1c1c1b;
        font-weight: bold; }
    #animation .seven .text-seven {
      font-size: 70px;
      position: relative;
      top: 50%;
      width: 100%;
      -webkit-transform: translateY(-50%) scale(1);
          -ms-transform: translateY(-50%) scale(1);
              transform: translateY(-50%) scale(1);
      z-index: 2;
      background-color: #fff;
      background-color: #ffdd00; }
      #animation .seven .text-seven .areva {
        display: inline-block;
        color: #1c1c1b;
        font-weight: bold; }
      #animation .seven .text-seven .tomorrow {
        padding: 0 8px;
        display: inline-block;
        background-color: #8c358b;
        color: #fff;
        font-weight: bold; }
    #animation .seven .content-seven {
      opacity: 1;
      color: #1c1c1b;
      font-size: 40px;
      position: absolute;
      top: 120%;
      width: 100%; }
  #animation.mobile .seven .text-seven {
    font-size: 40px; }
  #animation.mobile .seven .role-seven {
    width: 185px;
    margin: 0; }
    #animation.mobile .seven .role-seven .text {
      font-size: 14px; }
  #animation.mobile.small .text-seven {
    font-size: 40px; }
  #animation.mobile.small .seven .role-seven {
    margin-left: 0;
    margin-right: 0;
    width: auto; }
    #animation.mobile.small .seven .role-seven .text {
      width: 120px;
      font-size: 10px; }
  #animation.mobile.very-small .seven .role-seven {
    width: 76px; }
    #animation.mobile.very-small .seven .role-seven .text {
      font-size: 9px;
      width: 76px; }
    #animation.mobile.very-small .seven .role-seven img {
      width: 80px; }
  #animation .height {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
    text-align: center;
    -webkit-transition: all 3s ease-in-out;
            transition: all 3s ease-in-out;
    height: 100%;
    top: 0;
    text-align: center;
    background-color: #f39200;
    z-index: 2; }
    #animation .height .roles {
      position: absolute;
      top: 100px;
      width: 100%;
      text-align: center;
      z-index: 6; }
      #animation .height .roles .role-height:nth-child(1) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 0.9s;
                transition: all 2.5s ease-out 0.9s; }
      #animation .height .roles .role-height:nth-child(2) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 1.8s;
                transition: all 2.5s ease-out 1.8s; }
      #animation .height .roles .role-height:nth-child(3) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 2.7s;
                transition: all 2.5s ease-out 2.7s; }
      #animation .height .roles .role-height:nth-child(4) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 3.6s;
                transition: all 2.5s ease-out 3.6s; }
      #animation .height .roles .role-height:nth-child(5) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 4.5s;
                transition: all 2.5s ease-out 4.5s; }
      #animation .height .roles .role-height:nth-child(6) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 5.4s;
                transition: all 2.5s ease-out 5.4s; }
    #animation .height .role-height {
      position: relative;
      display: inline-block;
      margin: 0 1%;
      vertical-align: middle; }
      #animation .height .role-height .logo {
        height: 80px; }
        #animation .height .role-height .logo img {
          position: relative;
          top: 50%;
          -webkit-transform: translateY(-50%) scale(0.7);
              -ms-transform: translateY(-50%) scale(0.7);
                  transform: translateY(-50%) scale(0.7); }
      #animation .height .role-height .text {
        height: 70px;
        text-align: center;
        font-size: 14px;
        text-transform: uppercase;
        color: #1c1c1b;
        font-weight: bold; }
    #animation .height .text-height {
      -webkit-transition: all 1s ease-out 1.5s;
              transition: all 1s ease-out 1.5s;
      font-size: 40px;
      top: 10%;
      position: relative;
      width: 100%;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%);
      z-index: 2;
      background-color: #fff;
      background-color: #f39200; }
      #animation .height .text-height .areva {
        display: inline-block;
        color: #1c1c1b;
        font-weight: bold; }
      #animation .height .text-height .tomorrow {
        padding: 0 8px;
        display: inline-block;
        background-color: #8c358b;
        color: #fff;
        font-weight: bold; }
  #animation .nine {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
    text-align: center;
    -webkit-transition: all 2.5s ease-out;
            transition: all 2.5s ease-out;
    height: 100%;
    top: 0;
    text-align: center;
    background-color: #ffdd00;
    z-index: 2; }
    #animation .nine .roles {
      position: absolute;
      top: 100px;
      width: 100%;
      text-align: center;
      z-index: 6; }
      #animation .nine .roles .role-nine:nth-child(1) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 0.9s;
                transition: all 2.5s ease-out 0.9s; }
      #animation .nine .roles .role-nine:nth-child(2) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 1.8s;
                transition: all 2.5s ease-out 1.8s; }
      #animation .nine .roles .role-nine:nth-child(3) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 2.7s;
                transition: all 2.5s ease-out 2.7s; }
      #animation .nine .roles .role-nine:nth-child(4) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 3.6s;
                transition: all 2.5s ease-out 3.6s; }
      #animation .nine .roles .role-nine:nth-child(5) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 4.5s;
                transition: all 2.5s ease-out 4.5s; }
      #animation .nine .roles .role-nine:nth-child(6) {
        top: 500px;
        -webkit-transition: all 2.5s ease-out 5.4s;
                transition: all 2.5s ease-out 5.4s; }
    #animation .nine .role-nine {
      position: relative;
      display: inline-block;
      margin: 0 1%;
      vertical-align: middle; }
      #animation .nine .role-nine .logo {
        height: 80px; }
        #animation .nine .role-nine .logo img {
          position: relative;
          top: 50%;
          -webkit-transform: translateY(-50%) scale(0.7);
              -ms-transform: translateY(-50%) scale(0.7);
                  transform: translateY(-50%) scale(0.7); }
      #animation .nine .role-nine .text {
        height: 70px;
        text-align: center;
        font-size: 14px;
        text-transform: uppercase;
        color: #1c1c1b;
        font-weight: bold; }
    #animation .nine .text-nine {
      -webkit-transition: all 1s ease-out 1.5s;
              transition: all 1s ease-out 1.5s;
      font-size: 40px;
      top: 10%;
      position: relative;
      width: 100%;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%);
      z-index: 2;
      background-color: #fff;
      background-color: #ffdd00; }
      #animation .nine .text-nine .areva {
        display: inline-block;
        color: #1c1c1b;
        font-weight: bold; }
      #animation .nine .text-nine .tomorrow {
        padding: 0 8px;
        display: inline-block;
        background-color: #8c358b;
        color: #fff;
        font-weight: bold; }
  #animation .eleven {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: relative;
    text-align: center;
    -webkit-transition: all 3s ease-in-out;
            transition: all 3s ease-in-out;
    height: 100%;
    z-index: 2;
    top: -800%; }
    #animation .eleven .panel {
      width: 50%;
      height: 100%; }
      #animation .eleven .panel.left {
        background-color: #ffdd00;
        float: left; }
        #animation .eleven .panel.left .text-eleven {
          background-color: #ffdd00; }
      #animation .eleven .panel.right {
        background-color: #f39200;
        float: right; }
        #animation .eleven .panel.right .text-eleven {
          background-color: #f39200; }
    #animation .eleven .roles {
      position: relative;
      top: 46%;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%); }
    #animation .eleven .role-eleven {
      position: relative;
      margin: 0 1%;
      vertical-align: middle; }
      #animation .eleven .role-eleven .logo-eleven img {
        -webkit-transform: scale(0.7);
            -ms-transform: scale(0.7);
                transform: scale(0.7); }
      #animation .eleven .role-eleven .sub-text-eleven {
        text-align: center;
        font-size: 14px;
        text-transform: uppercase;
        color: #1c1c1b;
        font-weight: bold; }
    #animation .eleven .text-eleven {
      font-size: 35px;
      width: 100%;
      z-index: 2; }
      #animation .eleven .text-eleven .areva {
        color: #1c1c1b;
        display: inline-block;
        font-weight: bold; }
      #animation .eleven .text-eleven .tomorrow {
        padding: 0 8px;
        display: inline-block;
        background-color: #8c358b;
        color: #fff;
        font-weight: bold; }
  #animation.hide-text .eleven .left .roles .role-eleven:first-child {
    margin-top: 10px; }
  #animation.hide-text .eleven .right .roles .role-eleven:first-child {
    margin-top: 21px; }
  #animation.hide-text .eleven .roles {
    top: 0;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0); }
  #animation.hide-text .eleven .role-eleven {
    margin-bottom: 16px; }
    #animation.hide-text .eleven .role-eleven .sub-text-eleven {
      font-size: 12px; }
  #animation.hide-text .eleven .logo-eleven {
    height: 40px;
    margin-bottom: 6px; }
    #animation.hide-text .eleven .logo-eleven img {
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
      height: 100%; }
  #animation.very-small .eleven .areva {
    font-size: 30px; }
  #animation.very-small .eleven .left .roles .role-eleven:first-child {
    margin-top: 17px; }
  #animation.very-small .eleven .right .roles .role-eleven:first-child {
    margin-top: 37px; }
  #animation.very-small .eleven .role-eleven .sub-text-eleven {
    font-size: 10px; }
  #animation .end {
    position: absolute;
    text-align: center;
    -webkit-transition: all 3s ease-in-out;
            transition: all 3s ease-in-out;
    height: 100%;
    width: 100%;
    top: 100%;
    text-align: center;
    background-color: #ffdd00;
    z-index: 3; }
    #animation .end .logo-container {
      position: relative;
      top: 35%;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%); }
    #animation .end .replay {
      background-color: #c10a25;
      display: inline-block;
      padding: 17px 24px;
      cursor: pointer;
      position: relative;
      top: 160px; }
      #animation .end .replay--logo {
        display: inline-block;
        margin-right: 15px; }
      #animation .end .replay--text {
        display: inline-block;
        float: right;
        color: #fff;
        text-transform: uppercase;
        font-size: 15px; }
  #animation.very-smal .end img {
    width: 318px; }
  #animation.one .one {
    top: 0; }
  #animation.two .one {
    top: -100%; }
  #animation.two .two {
    top: -100%; }
    #animation.two .two .text {
      -webkit-transform: scale(0.7);
          -ms-transform: scale(0.7);
              transform: scale(0.7);
      top: 0%; }
    #animation.two .two .paragraph {
      top: 40%;
      opacity: 1; }
  #animation.mobile.two .two .text {
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7); }
  #animation.three .one {
    top: -100%; }
  #animation.three .two {
    top: -200%; }
    #animation.three .two .text {
      -webkit-transition: all 3s ease-in-out;
              transition: all 3s ease-in-out;
      -webkit-transform: scale(0.7);
          -ms-transform: scale(0.7);
              transform: scale(0.7);
      top: 96%; }
    #animation.three .two .paragraph {
      -webkit-transition: all 3s ease-in;
              transition: all 3s ease-in;
      opacity: 0; }
  #animation.three .three {
    top: -180%; }
    #animation.three .three .roles.first .role {
      top: 0; }
    #animation.three .three .roles.second .role {
      top: 40px; }
  #animation.three .four {
    top: -180%; }
  #animation.four .two .text {
    top: 0; }
  #animation.four .three {
    top: -300%; }
  #animation.four .four {
    top: -300%; }
    #animation.four .four .content {
      top: 50%; }
    #animation.four .four .sub-title {
      margin-top: 0;
      opacity: 1; }
  #animation.four .five {
    top: -300%; }
  #animation.five .four {
    left: -100%; }
  #animation.five .six {
    top: -400%; }
  #animation.five .five {
    top: -400%; }
    #animation.five .five .number-title {
      -webkit-transform: translateY(-50%) scale(1);
          -ms-transform: translateY(-50%) scale(1);
              transform: translateY(-50%) scale(1);
      opacity: 1; }
    #animation.five .five .text1 {
      left: 0; }
  #animation.five.fiveTwo .text1 {
    -webkit-transition: 4s all ease-in-out;
            transition: 4s all ease-in-out;
    opacity: 0;
    left: -60%; }
  #animation.five.fiveTwo .text2 {
    left: 0; }
  #animation.five.fiveTwo .round-number {
    -webkit-animation: change-number 2s ease-out;
            animation: change-number 2s ease-out; }
  #animation.five.fiveThree .text2 {
    -webkit-transition: 4s all ease-in-out;
            transition: 4s all ease-in-out;
    left: -60%;
    opacity: 0; }
  #animation.five.fiveThree .text3 {
    left: 0; }
  #animation.five.fiveThree .round-number {
    -webkit-animation: change-number2 2s ease-out;
            animation: change-number2 2s ease-out; }
  #animation.five.fiveFour .number-title {
    -webkit-transition: all 2s ease-out;
            transition: all 2s ease-out;
    top: 20%; }
  #animation.five.fiveFour .text3 {
    -webkit-transition: 2s all ease-in-out;
            transition: 2s all ease-in-out;
    top: 33%; }
  #animation.five.fiveFour .text4 {
    left: 0; }
  #animation.six .five {
    top: -500%; }
  #animation.six .six {
    top: -500%; }
  #animation.six .seven {
    top: -500%; }
  #animation.six .text {
    -webkit-transition: all 4s ease-in-out 2.5s;
            transition: all 4s ease-in-out 2.5s;
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
    top: 5%; }
  #animation.six .content {
    -webkit-transition: all 4s ease-out 2.5s;
            transition: all 4s ease-out 2.5s;
    top: 40%; }
  #animation.six.sixTwo .content {
    -webkit-transition: all 3s ease-out;
            transition: all 3s ease-out;
    top: 0%;
    opacity: 0; }
  #animation.six.sixTwo .roles.first .role {
    opacity: 1;
    top: 60px; }
  #animation.six.sixTwo .roles.second .role {
    opacity: 1;
    top: 50px; }
  #animation.very-small.six .content {
    top: 35%; }
  #animation.very-small.sixTwo .content {
    -webkit-transition: all 1s ease-out;
            transition: all 1s ease-out;
    top: 0%; }
  #animation.mobile.six .six .text:first-child {
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7); }
  #animation.seven .five {
    top: -600%; }
  #animation.seven .six {
    top: -600%; }
  #animation.seven .seven {
    top: -600%; }
  #animation.seven .height {
    top: -600%; }
  #animation.seven .text-seven {
    -webkit-transition: all 4s ease-in-out 2.5s;
            transition: all 4s ease-in-out 2.5s;
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
    top: 0%; }
  #animation.seven .content-seven {
    -webkit-transition: all 4s ease-out 2.5s;
            transition: all 4s ease-out 2.5s;
    top: 40%; }
  #animation.seven.very-small .content-seven {
    top: 29%; }
  #animation.seven.sevenTwo .content-seven {
    -webkit-transition: all 3s ease-out;
            transition: all 3s ease-out;
    top: 0%;
    opacity: 0; }
  #animation.seven.sevenTwo .roles.first .role-seven {
    top: 50px; }
  #animation.seven.sevenTwo .roles.second .role-seven {
    top: 185px; }
  #animation.mobile.seven .seven .text-seven {
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7); }
  #animation.small .seven .content-seven {
    font-size: 35px; }
  #animation.very-small .seven .content-seven {
    font-size: 30px; }
  #animation.height .five {
    top: -700%; }
  #animation.height .six {
    top: -700%; }
  #animation.height .seven {
    top: -700%; }
  #animation.height .height {
    top: -700%; }
  #animation.height .nine {
    top: -700%; }
  #animation.height .roles .role-height:nth-child(1) {
    top: 0; }
  #animation.height .roles .role-height:nth-child(2) {
    top: 0; }
  #animation.height .roles .role-height:nth-child(3) {
    top: 0; }
  #animation.height .roles .role-height:nth-child(4) {
    top: 0; }
  #animation.height .roles .role-height:nth-child(5) {
    top: 0; }
  #animation.height .roles .role-height:nth-child(6) {
    top: 0; }
  #animation.nine .five {
    top: -800%; }
  #animation.nine .six {
    top: -800%; }
  #animation.nine .seven {
    top: -700%; }
  #animation.nine .height {
    top: -700%; }
  #animation.nine .nine {
    top: -750%; }
  #animation.nine .roles .role-nine:nth-child(1) {
    top: 0; }
  #animation.nine .roles .role-nine:nth-child(2) {
    top: 0; }
  #animation.nine .roles .role-nine:nth-child(3) {
    top: 0; }
  #animation.nine .roles .role-nine:nth-child(4) {
    top: 0; }
  #animation.nine .roles .role-nine:nth-child(5) {
    top: 0; }
  #animation.nine .roles .role-nine:nth-child(6) {
    top: 0; }
  #animation.eleven .seven {
    top: -700%; }
  #animation.eleven .eleven {
    top: -900%; }
  #animation.end .height {
    top: -800%; }
  #animation.end .nine {
    -webkit-transition: 3s ease-in-out;
            transition: 3s ease-in-out;
    top: -850%; }
  #animation.end .eleven {
    top: -1000%; }
  #animation.end .end {
    top: 0; }

/*# sourceMappingURL=main.css.map */