/*
    SASS constants used in the website.
    Define colors, fonts and mixins used here.
*/
/*#region Colors*/
/*#endregion*/
/*#region Fonts*/
/*#endregion*/
/*#region Mixins*/
/*#endregion*/
@-webkit-keyframes opacityIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  pointer-events: none;
  animation: animationOff 0.5s ease;
  animation-delay: 1.8s;
  animation-fill-mode: both; }

@-webkit-keyframes animationOff {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .animation .logo {
    position: relative; }
    @media (max-width: 767px) {
      .animation .logo {
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        transform: scale(0.8); } }
    .animation .logo .bar {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      z-index: 2;
      transform-origin: center center; }
      .animation .logo .bar:after {
        content: "";
        width: 0;
        height: 7px;
        display: block;
        background-color: #065797;
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: center center;
        transform: translate(-50%, calc(-50% + 3px));
        animation: BarInTop 2s ease;
        animation-delay: 0.3s;
        animation-fill-mode: both; }

@-webkit-keyframes BarInTop {
  0% {
    width: 0;
    top: 0; }
  25% {
    top: 0;
    width: 100%; }
  40% {
    top: -50px;
    width: 100%; }
  60% {
    top: -50px;
    width: 100%; }
  75% {
    top: 0;
    width: 100%;
    opacity: 1; }
  100% {
    top: 0;
    width: 100%;
    opacity: 0; } }
      .animation .logo .bar:before {
        content: "";
        width: 0;
        height: 7px;
        display: block;
        background-color: #065797;
        position: absolute;
        bottom: 0;
        left: 0;
        transform-origin: center center;
        transform: translate(-50%, calc(-50% + 10px));
        animation: BarInBottom 2s ease;
        animation-delay: 0.3s;
        animation-fill-mode: both; }

@-webkit-keyframes BarInBottom {
  0% {
    width: 0;
    bottom: 0; }
  25% {
    bottom: 0;
    width: 100%; }
  40% {
    bottom: -50px;
    width: 100%; }
  60% {
    bottom: -50px;
    width: 100%; }
  75% {
    bottom: 0;
    width: 100%;
    opacity: 1; }
  100% {
    bottom: 0;
    width: 100%;
    opacity: 0; } }
    .animation .logo .titre {
      overflow: hidden;
      opacity: 0;
      animation: animTitre 2s ease;
      animation-delay: 0.3s;
      animation-fill-mode: both; }

@-webkit-keyframes animTitre {
  0% {
    opacity: 0; }
  25% {
    opacity: 0; }
  40% {
    opacity: 1; }
  54% {
    opacity: 1; }
  64% {
    opacity: 0; }
  100% {
    opacity: 0; } }
      .animation .logo .titre h1 {
        font-family: "Sarabun", sans-serif;
        font-weight: bold;
        font-size: 36px;
        margin: 0;
        padding: 0; }
        .animation .logo .titre h1 span {
          font-family: "Lora", serif;
          font-size: 29px;
          font-style: italic;
          position: relative;
          top: -1px;
          margin: 0;
          padding: 0; }