@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

.main{
  height: 80vh;
}

.box-text{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0068b2;
  font-family: 'Poppins';
}

/*
.box-text::after {
  content: '';
  animation: dots 1s steps(3, end) infinite;
}

 Animation qui ajoute les points un par un 
@keyframes dots {
  0%   { content: ''; }
  33%  { content: '.'; }
  66%  { content: '..'; }
  100% { content: '...'; }
}
*/

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */



.loader {
  background:#FFF;
  left:50%;
  position:absolute;
  top:50%;
  -webkit-transform:translateX(-50%) translateY(-50%);
  -moz-transform:translateX(-50%) translateY(-50%);
  -ms-transform:translateX(-50%) translateY(-50%);
  transform:translateX(-50%) translateY(-50%);
}

.loader:before,
.loader:after {
  content:"";
  background: #0068b2;
  box-shadow: 0px 6px 0px 0px #0068b2,
              0px 12px 0px 0px #0068b2,
              0px 18px 0px 0px #0068b2,
              0px 24px 0px 0px #0068b2,
              0px 30px 0px 0px #0068b2;
  height: 2px;
  position: absolute;
  top: 12px;
  width: 60px;
  z-index:0;
}

.loader:before {
  left: 12px;
}

.loader:after {
  right: 12px;
}

.loader .article {
  border:2px solid #0068b2;
  height:100px;
  perspective:600px;
  -webkit-perspective-origin:left left;
  -moz-perspective-origin:left left;
  -ms-perspective-origin:left left;
  perspective-origin:left left;
  position:relative;
  width:160px;
}

.loader .article:before {
  background:#0068b2;
  content:'';
  display:none;
  height:100%;
  left:-webkit-calc(50% - 0px);
  left:-moz-calc(50% - 0px);
  left:-ms-calc(50% - 0px);
  left:calc(50% - 0px);
  position:absolute;
  top:0;
  width:2px;
}

.loader .article .page {
  -webkit-animation:turn_page 1s infinite;
  -moz-animation:turn_page 1s infinite;
  -ms-animation:turn_page 1s infinite;
  animation:turn_page 1s infinite;
  background:#FFF;
  border:2px solid #0068b2;
  overflow: hidden;
  height:100%;
  left:50%;
  backface-visibility: visible;
  -webkit-perspective-origin:left left;
  -moz-perspective-origin:left left;
  -ms-perspective-origin:left left;
  perspective-origin:left left;
  position:absolute;
  top:-2px;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  transform-style:preserve-3d;
  width:-webkit-calc(50% - 2px);
  width:-moz-calc(50% - 2px);
  width:-ms-calc(50% - 2px);
  width:calc(50% - 2px);
  -webkit-transform-origin:left;
  -moz-transform-origin:left;
  -ms-transform-origin:left;
  transform-origin:left;
  z-index:10;
}

.page:before {
  content:"";
  background: #0068b2;
  box-shadow: 0px 6px 0px 0px #0068b2,
              0px 12px 0px 0px #0068b2,
              0px 18px 0px 0px #0068b2,
              0px 24px 0px 0px #0068b2,
              0px 30px 0px 0px #0068b2;
  height: 2px;
  margin: 0px 10px;
  position: absolute;
  top: 10px;
  width: 60px;
}

@-webkit-keyframes turn_page {
  0% { 
    left:50%; 
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    -ms-transform:rotateY(0);
    transform:rotateY(0);
    -webkit-width:calc(50% - 2px);
    -moz-width:calc(50% - 2px);
    -ms-width:calc(50% - 2px);
    width:calc(50% - 2px);
    box-shadow: 0px 1px 5px -1px rgba(0,0,0,1);
  }
  100% { 
    -webkit-left:calc(50% + 2px);
    -moz-left:calc(50% + 2px);
    -ms-left:calc(50% + 2px);
    left:calc(50% + 2px);
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -ms-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    width:50%; 
    box-shadow: 0px 1px 5px -1px transparent;
  }
}

@keyframes turn_page {
  0% { 
    left:50%; 
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    -ms-transform:rotateY(0);
    transform:rotateY(0);
    -webkit-width:calc(50% - 2px);
    -moz-width:calc(50% - 2px);
    -ms-width:calc(50% - 2px);
    width:calc(50% - 2px);
    box-shadow: 0px 1px 5px -1px rgba(0,0,0,1);
  }
  100% { 
    -webkit-left:calc(50% + 2px);
    -moz-left:calc(50% + 2px);
    -ms-left:calc(50% + 2px);
    left:calc(50% + 2px);
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -ms-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    width:50%; 
    box-shadow: 0px 1px 5px -1px transparent;
  }
}