@font-face
{
    font-style: normal;
    font-family: k2d;
    src:url("../Fonts/K2D-Medium.eot") format("eot"), 
        url("../Fonts/K2D-Medium.woff") format("woff"), 
        url("../Fonts/K2D-Medium.woff2") format("woff2");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    background: #000;
    width: 100%;
    animation: animq 1s infinite;
}

.row {
    display: flex;
}

@keyframes animq {
  0%{
    background: white;
  }
  100%{
    background: black;
  }  
}

.marquee {
    position: relative;
    width: 100vw;
    height: 89vh;
    overflow: hidden;
    background-color: white;
    font-size: 10vw;
}

.marquee .by{
    position: absolute;
    display: block;
    top: -3%;
    width: 300%;
    font-size: 1.1em;
    font-family: k2d;
    font-weight: normal;
    animation: by 7s linear infinite;
}
.marquee:hover .by
{
    color: white;
    background: black;
}

.marquee .lsd {
    font-size: 46vw;
    position: absolute;
    top: 45%;
    left: 50%;
    font-family: k2d;
    transform: translate(-50%, -50%);
    filter: blur(10px);
    transition: .4s;
}
.marquee:hover .lsd
{
    color: white; 
}
@keyframes by
{
    0%
    {
        left: 0%;
        color: #fff;
    }
    100%
    {
        left: -100%;
        background: white;
        color: #000;
    }
}

.chapitre {
    width: 100%;
    height: 90px;
    font-size: 4em;
    background: white;
    font-family: k2d;
    padding-top: 5px;
    text-align: center;
    color: black;
    border-style: solid;
    border-width: 0.4vw;
    animation: anim 1.5s infinite;
    text-transform: uppercase;
    overflow: hidden;
    -webkit-position: sticky;
}

@keyframes anim {
    0% {
        background: #000;
        color: #fff;
    }
}
.section1 
{
    width: 100%;
    height: 70vh;
    animation: ab 10s infinite;
    position: relative;
    overflow: hidden;
}
@keyframes ab
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.forme
{
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%,-50%) rotateX(60deg);
    transform-style: preserve-3d;
    width: 80%;
    height: 600px;
}
span3
{
    position: absolute;
    border: 3px solid white;
    animation: animr 5s ease-in-out infinite;
}
@keyframes animr 
{
    0%
    {
        transform: translateY(-130px);
        border: 2px solid transparent;
        border-left-color: white;
        border-bottom-color: blue;
        border-right-color: black;
        border-top-color: yellow;
    }
    50%
    {
        transform: translateY(100px);
    }
    100%
    {
        transform: translateY(-130px);
        border: 7px solid transparent;
        border-left-color: red;
        border-bottom-color: aqua;
        border-right-color: white;
        border-top-color: black;
    }
}
span3:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 0.1s;
}
span3:nth-child(2)
{
    left: 10px;
    top: 10px;
    bottom: 10px;
    right: 10px;
    animation-delay: 0.2s;
}
span3:nth-child(3)
{
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: 0.3s;
}
span3:nth-child(4)
{
    left: 30px;
    top: 30px;
    bottom: 30px;
    right: 30px;
    animation-delay: 0.4s;
}
span3:nth-child(5)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: 0.5s;
}
span3:nth-child(6)
{
    left: 50px;
    top: 50px;
    bottom: 50px;
    right: 50px;
    animation-delay: 0.6s;
}
span3:nth-child(7)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: 0.7s;
}
span3:nth-child(8)
{
    left: 70px;
    top: 70px;
    bottom: 70px;
    right: 70px;
    animation-delay: 0.8s;
}
span3:nth-child(9)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: 0.9s;
}
span3:nth-child(10)
{
    left: 90px;
    top: 90px;
    bottom: 90px;
    right: 90px;
    animation-delay: 1s;
}
span3:nth-child(11)
{
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    animation-delay: 1.1s;
}
span3:nth-child(12)
{
    left: 110px;
    top: 110px;
    bottom: 110px;
    right: 110px;
    animation-delay: 1.2s;
}
span3:nth-child(13)
{
    left: 120px;
    top: 120px;
    bottom: 120px;
    right: 120px;
    animation-delay: 1.3s;
}
span3:nth-child(14)
{
    left: 130px;
    top: 130px;
    bottom: 130px;
    right: 130px;
    animation-delay: 1.4s;
}
span3:nth-child(15)
{
    left: 140px;
    top: 140px;
    bottom: 140px;
    right: 140px;
    animation-delay: 1.5s;
}
span3:nth-child(16)
{
    left: 150px;
    top: 150px;
    bottom: 150px;
    right: 150px;
    animation-delay: 1.6s;
}
span3:nth-child(17)
{
    left: 160px;
    top: 160px;
    bottom: 160px;
    right: 160px;
    animation-delay: 1.7s;
}
span3:nth-child(18)
{
    left: 170px;
    top: 170px;
    bottom: 170px;
    right: 170px;
    animation-delay: 1.8s;
}
span3:nth-child(19)
{
    left: 180px;
    top: 180px;
    bottom: 180px;
    right: 180px;
    animation-delay: 1.9s;
}
span3:nth-child(20)
{
    left: 190px;
    top: 190px;
    bottom: 190px;
    right: 190px;
    animation-delay: 2s;
}
.substances{
    font-family: k2d;
    color: #fff;
    background: black;
    padding: 20 20px;
    height: 200px;
    width: 100%;
    overflow: hidden;
    border: solid;
    border-width: 0.4vw;
}
.substances:hover
{
    background: white;
    color: black;
}

.line{
    text-transform: uppercase;
    text-align: center;
    font-size: 4em;
    line-height: 100px;
}

.line:first-child{
    animation: ani 12s infinite;
}

@keyframes ani
{
    0%{
        margin-top: 0;
    }
    5%{
        margin-top: -80px;
    }    
    10%{
        margin-top: -160px;
    }
    15%{
        margin-top: -240px;
    }
    20%{
        margin-top: -320px;
    }
    25%{
        margin-top: -400px;
    }
    30%{
        margin-top: -480px;   
    }
    35%{
        margin-top: -560px;   
    }
    40%{
        margin-top: -640px;   
    }
    45%{
        margin-top: -720px;   
    }
    50%{
        margin-top: -800px;   
    }
    55%{
        margin-top: -880px;   
    }
    60%{
        margin-top: -960px;   
    }
    65%{
        margin-top: -1040px;
    }
    70%{
        margin-top: -1120px;
    }
    75%{
        margin-top: -1200px;
    }
    80%{
        margin-top: -1280px;   
    }
    85%{
        margin-top: -1360px;   
    }
    90%{
        margin-top: -1440px;   
    }
    95%{
        margin-top: -1520px;   
    }
    100%{
        margin-top: -1600px;   
    }
}
.section2 
{
    width: 100%;
    height: 90vh;
    position: relative;
    overflow: hidden;
    animation: abc 8s infinite;
}
@keyframes abc
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.spine
{
    position: absolute;
    width: 70%;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateX(60deg);
    transform-style: preserve-3d;
    width: 80%;
    height: 600px;
}
.spine span9
{
    position: absolute;;
    animation: spine 10s infinite;
    border-radius: 50%;
}
@keyframes spine
{
    0%,100%
    {
        transform: rotateY(0deg);
        border: 2px solid;
        border-top-color: aqua;
        border-bottom-color: blue;
        border-left-color: yellow; 
        border-right-color: white; 
    }
    50%
    {
        transform: rotateY(360deg);
        border: 15px solid;
        border-top-color: red;
        border-bottom-color: black;
        border-left-color: white; 
        border-right-color: blue; 
    }
}
.spine span9:nth-child(even)
{
    border: 2px solid white;
}
.spine span9:nth-child(1)
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-delay: 0.9s;
}
.spine span9:nth-child(2)
{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    animation-delay: 0.8s;
}
.spine span9:nth-child(3)
{
    top: 60px;
    left: 60px;
    right: 60px;
    bottom: 60px;
    animation-delay: 0.7s;
}
.spine span9:nth-child(4)
{
    top: 90px;
    left: 90px;
    right: 90px;
    bottom: 90px;
    animation-delay: 0.6s;
}
.spine span9:nth-child(5)
{
    top: 120px;
    left: 120px;
    right: 120px;
    bottom: 120px;
    animation-delay: 0.5s;
}
.spine span9:nth-child(6)
{
    top: 150px;
    left: 150px;
    right: 150px;
    bottom: 150px;
    animation-delay: 0.4s;
}
.spine span9:nth-child(7)
{
    top: 180px;
    left: 180px;
    right: 180px;
    bottom: 180px;
    animation-delay: 0.3s;
}
.spine span9:nth-child(8)
{
    top: 210px;
    left: 210px;
    right: 210px;
    bottom: 210px;
    animation-delay: 0.2s;
}
.spine span9:nth-child(9)
{
    top: 240px;
    left: 240px;
    right: 240px;
    bottom: 240px;
    animation-delay: 0.1s;
}
.phrase {
    width: 100%;
    overflow: hidden;
}
.phrase h3
{
    font-size: 4em;
    background: black;
    font-family: k2d;
    color: #fff;
    text-align: center;
    color: #fff;
    padding-top: 10px;
    height: 150px;
    top: 102%;
    left: 50%;
    border-style: solid;
    border-width: 0.4vw;
    animation: ano 1s linear infinite;
}
@keyframes ano
{
 0%
 {
    background: white;
    color: #000;
 }
}
.section 
{
    width: 100%;
    padding: 100px;
    height: 90vh;
    background: blue;
    position: relative;
    overflow: hidden;
    animation: a 8s infinite;
}
@keyframes a
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.square
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateX(60deg);
    transform-style: preserve-3d;
    width: 80%;
    height: 650px;
}
span
{
    position: absolute;
    top: 60%;
    left: 0;
    border: 10px solid transparent;
    border-left-color: red;
    border-right-color: blue;
    border-bottom-color: black;
    border-top-color: white;
    border-radius: 50%;
    animation: animi 7s linear infinite;
}
@keyframes animi 
{
    0%
    {
        transform: rotateY(360deg);
    }
    50%
    {
        transform: rotate(0deg);
        border-left-color: white;
        border-right-color: red;
        border-bottom-color: blue;
        border-top-color: black;
    }
    100%
    {
        transform: rotateX(360deg);
    }
}
span:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 0.1s;
}
span:nth-child(2)
{
    left: 10px;
    top: 10px;
    bottom: 10px;
    right: 10px;
    animation-delay: 0.2s;
}
span:nth-child(3)
{
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: 0.3s;
}
span:nth-child(4)
{
    left: 30px;
    top: 30px;
    bottom: 30px;
    right: 30px;
    animation-delay: 0.4s;
}
span:nth-child(5)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: 0.5s;
}
span:nth-child(6)
{
    left: 50px;
    top: 50px;
    bottom: 50px;
    right: 50px;
    animation-delay: 0.6s;
}
span:nth-child(7)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: 0.7s;
}
span:nth-child(8)
{
    left: 70px;
    top: 70px;
    bottom: 70px;
    right: 70px;
    animation-delay: 0.8s;
}
span:nth-child(9)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: 0.9s;
}
span:nth-child(10)
{
    left: 90px;
    top: 90px;
    bottom: 90px;
    right: 90px;
    animation-delay: 1s;
}
span:nth-child(11)
{
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    animation-delay: 1.1s;
}
span:nth-child(12)
{
    left: 110px;
    top: 110px;
    bottom: 110px;
    right: 110px;
    animation-delay: 1.2s;
}
span:nth-child(13)
{
    left: 120px;
    top: 120px;
    bottom: 120px;
    right: 120px;
    animation-delay: 1.3s;
}
span:nth-child(14)
{
    left: 130px;
    top: 130px;
    bottom: 130px;
    right: 130px;
    animation-delay: 1.4s;
}
span:nth-child(15)
{
    left: 140px;
    top: 140px;
    bottom: 140px;
    right: 140px;
    animation-delay: 1.5s;
}
span:nth-child(16)
{
    left: 150px;
    top: 150px;
    bottom: 150px;
    right: 150px;
    animation-delay: 1.6s;
}
span:nth-child(17)
{
    left: 160px;
    top: 160px;
    bottom: 160px;
    right: 160px;
    animation-delay: 1.7s;
}
span:nth-child(18)
{
    left: 170px;
    top: 170px;
    bottom: 170px;
    right: 170px;
    animation-delay: 1.8s;
}
span:nth-child(19)
{
    left: 180px;
    top: 180px;
    bottom: 180px;
    right: 180px;
    animation-delay: 1.9s;
}
span:nth-child(20)
{
    left: 190px;
    top: 190px;
    bottom: 190px;
    right: 190px;
    animation-delay: 2s;
}
.vêtement{
    font-family: k2d;
    color: #fff;
    background: black;
    padding: 20 20px;
    height: 200px;
    width: 100%;
    overflow: hidden;
    border: solid;
    border-width: 0.4vw;
}
.vêtement:hover
{
    background: white;
    color: black;
}

.line1{
    text-transform: uppercase;
    text-align: center;
    font-size: 4em;
    line-height: 100px;
}

.line1:first-child{
    animation: anir 7s infinite;
}

@keyframes anir
{
    0%{
        margin-top: 0;
    }
    5%{
        margin-top: -80px;
    }    
    10%{
        margin-top: -160px;
    }
    15%{
        margin-top: -240px;
    }
    20%{
        margin-top: -320px;
    }
    25%{
        margin-top: -400px;
    }
    30%{
        margin-top: -480px;   
    }
    35%{
        margin-top: -560px;   
    }
    40%{
        margin-top: -640px;   
    }
    45%{
        margin-top: -720px;   
    }
    50%{
        margin-top: -800px;   
    }
    55%{
        margin-top: -880px;   
    }
    60%{
        margin-top: -960px;   
    }
    65%{
        margin-top: -1040px;
    }
    70%{
        margin-top: -1120px;
    }
    75%{
        margin-top: -1200px;
    }
    80%{
        margin-top: -1280px;   
    }
    85%{
        margin-top: -1360px;   
    }
    90%{
        margin-top: -1440px;   
    }
    95%{
        margin-top: -1520px;   
    }
    100%{
        margin-top: -1600px;   
    }
}
.section3 
{
    width: 100%;
    height: 90vh;
    position: relative;
    overflow: hidden;
    animation: abcd 6s infinite;
}
@keyframes abcd
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.circles
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateX(60deg);
    transform-style: preserve-3d;
    width: 80%;
    height: 600px;
}
span8
{
    position: absolute;
    border: 6px solid black;
    border-radius: 50%;
    animation: bools 4s ease-in-out infinite;
}
@keyframes bools 
{
    0%
    {
        transform: translateY(100px);
        border: 8px solid transparent;
        border-left-color: white;
        border-bottom-color: blue;
        border-right-color: black;
        border-top-color: yellow;
    }
    50%
    {
        transform: translateY(-100px);
    }
    100%
    {
        transform: translateY(100px);
        border: 1px solid transparent;
        border-left-color: aqua;
        border-bottom-color: red;
        border-right-color: white;
        border-top-color: black;
    }
}
span8:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 1s
}
span8:nth-child(2)
{
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: .9s
}
span8:nth-child(3)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: .8s
}
span8:nth-child(4)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: .7s
}
span8:nth-child(5)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: .6s
}
span8:nth-child(6)
{
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    animation-delay: .5s
}
span8:nth-child(7)
{
    left: 120px;
    top: 120px;
    bottom: 120px;
    right: 120px;
    animation-delay: .4s
}
span8:nth-child(8)
{
    left: 140px;
    top: 140px;
    bottom: 140px;
    right: 140px;
    animation-delay: .3s 
}
span8:nth-child(9)
{
    left: 160px;
    top: 160px;
    bottom: 160px;
    right: 160px;
    animation-delay: .2s
}
span8:nth-child(10)
{
    left: 180px;
    top: 180px;
    bottom: 180px;
    right: 180px;
    animation-delay: .0.5s 
}
.texte {
    position: relative;
    width: 100vw;
    height: 90px;
    background-color: white;
    border-style: solid;
    border-width: 0.4vw;
    flex: 1 1 auto;
    overflow: hidden;
}

.texte .flow{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    overflow: hidden;
    align-content: center;
    float: left;
    font-size: 4em;
    font-family: k2d;
    font-weight: normal;
    text-transform: uppercase;
    white-space: nowrap;
    animation: flow 9s linear infinite;
}
.texte:hover
{
    background: red;
    color: white;
}
@keyframes flow
{
    0%
    {
        left: -10%;
        color: #fff;
    }
    100%
    {
        left: -100%;
        color: #000;
    }
}
.texte1 {
    position: relative;
    width: 100vw;
    height: 90px;
    background-color: white;
    border-style: solid;
    border-width: 0.4vw;
    flex: 1 1 auto;
    overflow: hidden;
}

.texte1 .flow1{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    overflow: hidden;
    align-content: center;
    float: left;
    font-size: 4em;
    font-family: k2d;
    font-weight: normal;
    text-transform: uppercase;
    white-space: nowrap;
    animation: flows 6s linear infinite;
}
@keyframes flows
{
    0%
    {
        left: -10%;
        color: black;
    }
    100%
    {
        left: -100%;
        color: #fff;
    }
}
.texte1:hover
{
    background: blue;
    color: yellow;
}
.section13 
{
    width: 100%;
    height: 90vh;
    position: relative;
    overflow: hidden;
    animation: ag 5s infinite;
}
@keyframes ag
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.spanes
{
    position: absolute;
    width: 70%;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transform-style: preserve-3d;
}
.spanes span13
{
    position: absolute;
    border: 10px solid transparent;
    border-top-color: red;
    border-bottom-color: blue;
    border-left-color: yellow; 
    border-right-color: white; 
    animation: spanes 6s ease-in-out infinite;
}
@keyframes spanes
{
    0%,100%
    {
        transform: rotate(0deg);
        border: 2px solid black;
        border-top-color: red;
        border-bottom-color: blue;
        border-left-color: yellow; 
        border-right-color: white;
    }
    50%
    {
        transform: rotate(360deg);
        border: 25px solid white;
        border-top-color: black;
        border-bottom-color: aqua;
        border-left-color: red; 
        border-right-color: yellow; 
    }
}
.spanes span13:nth-child(even)
{
    border: 2px solid transparent;
    border-top-color: black;
    border-bottom-color: aqua;
    border-left-color: red; 
    border-right-color: yellow; 
}
.spanes span13:nth-child(1)
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-delay: 0.9s;
}
.spanes span13:nth-child(2)
{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    animation-delay: 0.8s;
}
.spanes span13:nth-child(3)
{
    top: 60px;
    left: 60px;
    right: 60px;
    bottom: 60px;
    animation-delay: 0.7s;
}
.spanes span13:nth-child(4)
{
    top: 90px;
    left: 90px;
    right: 90px;
    bottom: 90px;
    animation-delay: 0.6s;
}
.spanes span13:nth-child(5)
{
    top: 120px;
    left: 120px;
    right: 120px;
    bottom: 120px;
    animation-delay: 0.5s;
}
.spanes span13:nth-child(6)
{
    top: 150px;
    left: 150px;
    right: 150px;
    bottom: 150px;
    animation-delay: 0.4s;
}
.spanes span13:nth-child(7)
{
    top: 180px;
    left: 180px;
    right: 180px;
    bottom: 180px;
    animation-delay: 0.3s;
}
.spanes span13:nth-child(8)
{
    top: 210px;
    left: 210px;
    right: 210px;
    bottom: 210px;
    animation-delay: 0.2s;
}
.spanes span13:nth-child(9)
{
    top: 240px;
    left: 240px;
    right: 240px;
    bottom: 240px;
    animation-delay: 0.1s;
}
.texte2 {
    position: relative;
    width: 100vw;
    height: 90px;
    background-color: white;
    border-style: solid;
    border-width: 0.4vw;
    flex: 1 1 auto;
    overflow: hidden;
}

.texte2 .flow2{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    overflow: hidden;
    align-content: center;
    float: left;
    font-size: 4em;
    font-family: k2d;
    font-weight: normal;
    text-transform: uppercase;
    white-space: nowrap;
    animation: flowss 6s linear infinite;
}

@keyframes flowss
{
    0%
    {
        left: 0%;
        color: white;
    }
    100%
    {
        left: -100%;
        color: black;
    }
}
.texte2:hover
{
    color: blue;
    background: red;
}
.box
{
    height: 400px;
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
}
.avale
{
    position: relative;
    transition: 1s;
    width:100%;
    font-family: k2d;
    font-size: 30vw;
    text-align: center; 
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box:hover .avale
{
    filter: blur(20px);
    opacity: 0;
    color: white;
}
.texte3 {
    position: relative;
    width: 100vw;
    height: 90px;
    background-color: white;
    border-style: solid;
    border-width: 0.4vw;
    flex: 1 1 auto;
    overflow: hidden;
}
.texte3 .flow3{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    overflow: hidden;
    align-content: center;
    float: left;
    font-size: 4em;
    font-family: k2d;
    font-weight: normal;
    text-transform: uppercase;
    white-space: nowrap;
    animation: flowsss 6s linear infinite;
}
@keyframes flowsss
{
    0%
    {
        left: 0%;
        color: white;
    }
    100%
    {
        left: -100%;
        color: #000;
    }
}
.texte3:hover
{
    color: blue;
    background: red;
}
.section14 
{
    width: 100%;
    height: 90vh;
    position: relative;
    overflow: hidden;
    animation: avg 4s infinite;
}
@keyframes avg
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.spone
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateY(60deg);
    transform-style: preserve-3d;
    width: 80%;
    height: 600px;
}
span14
{
    position: absolute;
    border: 10px solid transparent;
    border-top-color: aqua;
    border-bottom-color: blue;
    border-left-color: yellow; 
    border-right-color: white; 
    border-radius: 50%;
    animation: spone 4s ease-in-out infinite;
}
@keyframes spone
{
    0%,100%
    {
        transform: rotateX(0deg);
        border: 15px solid transparent;
        border-top-color: yellow;
        border-bottom-color: red;
        border-left-color: black; 
        border-right-color: white; 
    }
    50%
    {
        transform: rotateX(360deg);
        border: 1px solid transparent;
        border-top-color: red;
        border-bottom-color: white;
        border-left-color: black; 
        border-right-color: blue; 
    }
}
.spone span14:nth-child(even)
{
    border: 2px solid white;
}
.spone span14:nth-child(1)
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-delay: 0.9s;
}
.spone span14:nth-child(2)
{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    animation-delay: 0.8s;
}
.spone span14:nth-child(3)
{
    top: 60px;
    left: 60px;
    right: 60px;
    bottom: 60px;
    animation-delay: 0.7s;
}
.spone span14:nth-child(4)
{
    top: 90px;
    left: 90px;
    right: 90px;
    bottom: 90px;
    animation-delay: 0.6s;
}
.spone span14:nth-child(5)
{
    top: 120px;
    left: 120px;
    right: 120px;
    bottom: 120px;
    animation-delay: 0.5s;
}
.spone span14:nth-child(6)
{
    top: 150px;
    left: 150px;
    right: 150px;
    bottom: 150px;
    animation-delay: 0.4s;
}
.spone span14:nth-child(7)
{
    top: 180px;
    left: 180px;
    right: 180px;
    bottom: 180px;
    animation-delay: 0.3s;
}
.spone span14:nth-child(8)
{
    top: 210px;
    left: 210px;
    right: 210px;
    bottom: 210px;
    animation-delay: 0.2s;
}
.spone span14:nth-child(9)
{
    top: 240px;
    left: 240px;
    right: 240px;
    bottom: 240px;
    animation-delay: 0.1s;
}
.texte4 {
    position: relative;
    width: 100vw;
    height: 90px;
    background-color: white;
    border-style: solid;
    border-width: 0.4vw;
    flex: 1 1 auto;
    overflow: hidden;
}
.texte4 .flow4{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    overflow: hidden;
    align-content: center;
    float: left;
    font-size: 4em;
    font-family: k2d;
    font-weight: normal;
    text-transform: uppercase;
    white-space: nowrap;
    animation: flowssss 9s linear infinite;
}
@keyframes flowssss
{
    0%
    {
        left: 0%;
        color: white;
    }
    100%
    {
        left: -100%;
        color: #000;
    }
}
.texte4:hover
{
    color: yellow;
    background: blue;
}
.texte5 {
    position: relative;
    width: 100vw;
    height: 90px;
    background-color: white;
    border-style: solid;
    border-width: 0.4vw;
    flex: 1 1 auto;
    overflow: hidden;
}
.texte5 .flow5{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    overflow: hidden;
    align-content: center;
    float: left;
    font-size: 4em;
    font-family: k2d;
    font-weight: normal;
    text-transform: uppercase;
    white-space: nowrap;
    animation: flowsssss 6s linear infinite;
}
@keyframes flowsssss
{
    0%
    {
        left: 0%;
        color: white;
    }
    100%
    {
        left: -100%;
        color: #000;
    }
}
.texte5:hover
{
    color: white;
    background: red;
}
.section4
{
    width: 100%;
    height: 90vh;
    position: relative;
    overflow: hidden;
    animation: abcde 4s infinite;
}
@keyframes abcde
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.bille
{
    position: absolute;
    width: 40%;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transform-style: preserve-3d;
}
.bille span10
{
    position: absolute;
    display: block;
    animation: bille 8s ease-in-out infinite;
}
@keyframes bille
{
    0%
    {
        transform: rotate(0deg);
        border: 8px solid yellow;
        border-top-color: blue;
        border-bottom-color: red;
        border-left-color: black; 
        border-right-color: white; 
    }
    50%
    {
        transform: rotate(360deg);
        border: 2px solid white;
        border-top-color: yellow;
        border-bottom-color: aqua;
        border-left-color: white; 
        border-right-color: black; 
    }
}
.bille span10:nth-child(even):before
{
    content:'';
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
    height: 80%;
    border: 6px solid black;
    transform: translateY(-50%);
}
.bille span10:nth-child(even):after
{
    content:'';
    position: absolute;
    top: 0%;
    left: 50%;
    width: 50%;
    height: 100%;
    border: 6px solid white;
    transform: translateX(-50%);
}
.bille span10:nth-child(odd):before
{
    content:'';
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
    height: 50%;
    border: 6px solid red;
    transform: translateY(-50%);
}
.bille span10:nth-child(odd):after
{
    content:'';
    position: absolute;
    top: 0%;
    left: 50%;
    width: 50%;
    height: 100%;
    border: 6px solid blue;
    transform: translateX(-50%);
}
.bille span10:nth-child(1)
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-delay: 0.9s;
}
.bille span10:nth-child(2)
{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    animation-delay: 0.8s;
}
.bille span10:nth-child(3)
{
    top: 60px;
    left: 60px;
    right: 60px;
    bottom: 60px;
    animation-delay: 0.7s;
}
.bille span10:nth-child(4)
{
    top: 90px;
    left: 90px;
    right: 90px;
    bottom: 90px;
    animation-delay: 0.6s;
}
.bille span10:nth-child(5)
{
    top: 120px;
    left: 120px;
    right: 120px;
    bottom: 120px;
    animation-delay: 0.5s;
}
.bille span10:nth-child(6)
{
    top: 150px;
    left: 150px;
    right: 150px;
    bottom: 150px;
    animation-delay: 0.4s;
}
.bille span10:nth-child(7)
{
    top: 180px;
    left: 180px;
    right: 180px;
    bottom: 180px;
    animation-delay: 0.3s;
}
.bille span10:nth-child(8)
{
    top: 210px;
    left: 210px;
    right: 210px;
    bottom: 210px;
    animation-delay: 0.2s;
}
.bille span10:nth-child(9)
{
    top: 240px;
    left: 240px;
    right: 240px;
    bottom: 240px;
    animation-delay: 0.1s;
}
.chapitre1 {
    width: 100%;
    height: 90px;
    font-size: 4em;
    background: black;
    font-family: k2d;
    color: #fff;
    padding-top: 5px;
    text-align: center;
    color: #000;
    border-style: solid;
    border-width: 0.4vw;
    animation: anim 1.5s infinite;
    text-transform: uppercase;
    overflow: hidden;
}
.middle
{
    display: grid;
    float: left;
    margin-left: 40px;
}
.middle1
{
    display: grid;
    float: left;
    margin-left: 60px;
}
.middle2
{
    display: grid;
    float: left;
    margin-left: 70px;
}
.middle3
{
    display: grid;
    float: left;
    margin-left: 80px;
}
.middle4
{
    display: grid;
    float: left;
    margin-left: 40px;
    margin-top: 20px;
}
.middle5
{
    display: grid;
    float: left;
    margin-left: 60px;
    margin-top: 20px;
}
.middle6
{
    display: grid;
    float: left;
    margin-left: 70px;
    margin-top: 20px;
}
.middle7
{
    display: grid;
    float: left;
    margin-left: 80px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.card
{
    cursor: pointer;
    width: 270px;
    height: 270px;
    transform-style: preserve-3d;
    padding: 10px;
}
.front, .back 
{
    overflow: hidden;
    backface-visibility: hidden;
    text-align: center;
    position: absolute;
    text-shadow: 0 8px 5px #fff;
    transition: transform .6s linear; 
}
.card:hover .front
{
    transform: perspective(600px) rotateX(-180deg);
    color: blue;
}
.card:hover .back
{
    transform: perspective(600px) rotateY(0deg);
    color: black;
    background: white;
}
.front h1
{
    font-size: 10em; 
    text-align: center;
    color: blue; 
    padding-top: 30px;
    padding-left: 80px;
    width: 100%;
    height: 100%;
    font-family: k2d;
    font-weight: bold; 
}
.front 
{
    transform: perspective(600px) rotateY(45deg);
}
.back 
{
    background: blue;
    color: white; 
    text-align: center; 
    transform: perspective(600px) rotateX(260deg); 
    font-size: 3em;
    font-family: k2d;
    padding-top: 20px;
    width: 340px;
    height: 230px;
    border-radius: 20px;
    text-transform: uppercase;

}
.chapitre2 {
    width: 100%;
    height: 90px;
    font-size: 4em;
    background: black;
    font-family: k2d;
    color: #fff;
    padding-top: 5px;
    text-align: center;
    color: #000;
    border-style: solid;
    border-width: 0.4vw;
    animation: anim 1.5s infinite;
    text-transform: uppercase;
    overflow: hidden;
}
.section5 
{
    width: 100%;
    height: 105vh;
    position: relative;
    overflow: hidden;
    animation: abcdef 4s infinite;
}
@keyframes abcdef
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.tube
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateY(200deg);
    width: 80%;
    height: 600px;
    transform-style: preserve-3d; 
}
span5
{
    position: absolute;
    border: 10px solid transparent;
    border-top-color: black;
    border-bottom-color: red;
    border-left-color: yellow; 
    border-right-color: white; 
    animation: amb 2s linear infinite;
}
@keyframes amb
{
    0%
    {
        transform: rotateY(360deg);
        border-top-color: yellow;
        border-bottom-color: red;
        border-left-color: black; 
        border-right-color: white; 
    }
    50%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotateX(360deg); 
        border-radius 50%;
        border-top-color: aqua;
        border-bottom-color: blue;
        border-left-color: white; 
        border-right-color: black; 
    }
}
span5:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 1s
}
span5:nth-child(2)
{
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: .9s
}
span5:nth-child(3)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: .8s
}
span5:nth-child(4)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: .7s
}
span5:nth-child(5)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: .6s
}
span5:nth-child(6)
{
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    animation-delay: .5s
}
span5:nth-child(7)
{
    left: 120px;
    top: 120px;
    bottom: 120px;
    right: 120px;
    animation-delay: .4s
}
span5:nth-child(8)
{
    left: 140px;
    top: 140px;
    bottom: 140px;
    right: 140px;
    animation-delay: .3s 
}
span5:nth-child(9)
{
    left: 160px;
    top: 160px;
    bottom: 160px;
    right: 160px;
    animation-delay: .2s
}
span5:nth-child(10)
{
    left: 180px;
    top: 180px;
    bottom: 180px;
    right: 180px;
    animation-delay: .1s 
}
.section6 
{
    width: 100%;
    height: 105vh;
    position: relative;
    overflow: hidden;
    animation: abcdefg 3s infinite;
}
@keyframes abcdefg
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.container
{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90%;
    height: 400px;
    transform: translate(-50%,-50%);
    transform-style: preserve-3d;
}
span2
{
    position: absolute;
    top: 50%;
    left: 0;
    border: 15px solid transparent;
    border-left-color: blue;
    border-bottom-color: yellow;
    border-right-color: red;
    border-top-color: white;
    border-radius: 50%;
    animation: bouge 1s linear infinite;
}
@keyframes bouge
{
    0%
    {
        transform: rotateY(360deg);
        border-top-color: aqua;
        border-bottom-color: blue;
        border-left-color: white; 
        border-right-color: black; 
    }
    50%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotateX(360deg);
        border-left-color: blue;
        border-bottom-color: yellow;
        border-right-color: red;
        border-top-color: white;
    }
}
span2:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 1s
}
span2:nth-child(2)
{
    left: 10px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: .9s
}
span2:nth-child(3)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: .8s
}
span2:nth-child(4)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: .7s
}
span2:nth-child(5)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: .6s
}
span2:nth-child(6)
{
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    animation-delay: .5s
}
span2:nth-child(7)
{
    left: 120px;
    top: 120px;
    bottom: 120px;
    right: 120px;
    animation-delay: .4s
}
span2:nth-child(8)
{
    left: 140px;
    top: 140px;
    bottom: 140px;
    right: 140px;
    animation-delay: .3s 
}
span2:nth-child(9)
{
    left: 160px;
    top: 160px;
    bottom: 160px;
    right: 160px;
    animation-delay: .2s
}
span2:nth-child(10)
{
    left: 180px;
    top: 180px;
    bottom: 180px;
    right: 180px;
    animation-delay: .1s 
}
.section7 
{
    width: 100%;
    height: 105vh;
    position: relative;
    overflow: hidden;
    animation: abcdefg 2s infinite;
}
@keyframes abcdefg
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.wave
{
    position: absolute;
    left: 5%;
    top: 10%;
    width: 90%;
    height: 600px;
    transform: translate(-50%,-50%);
    transform-style: preserve-3d;
    transform: rotateY(60deg); 
}
span4
{
    position: absolute;
    border: 15px solid transparent;
    border-top-color: black;
    border-bottom-color: white;
    animation: wove 0.5s infinite;
}
@keyframes wove
{
    0%
    {
        transform: rotateY(360deg);
        border: 1px solid transparent;
        border-top-color: white;
        border-bottom-color: black;
    }
    50%
    {
        transform: rotate(0deg);
        border: 6px solid transparent;
        border-top-color: red;
        border-bottom-color: blue;
    }
    100%
    {
        transform: rotateX(360deg);
        border: 15px solid transparent;
        border-top-color: black;
        border-bottom-color: white;
    }
}
span4:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 1s
}
span4:nth-child(2)
{
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: .9s
}
span4:nth-child(3)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: .8s
}
span4:nth-child(4)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: .7s
}
span4:nth-child(5)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: .6s
}
span4:nth-child(6)
{
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    animation-delay: .5s
}
span4:nth-child(7)
{
    left: 120px;
    top: 120px;
    bottom: 120px;
    right: 120px;
    animation-delay: .4s
}
span4:nth-child(8)
{
    left: 140px;
    top: 140px;
    bottom: 140px;
    right: 140px;
    animation-delay: .3s 
}
span4:nth-child(9)
{
    left: 160px;
    top: 160px;
    bottom: 160px;
    right: 160px;
    animation-delay: .2s
}
span4:nth-child(10)
{
    left: 180px;
    top: 180px;
    bottom: 180px;
    right: 180px;
    animation-delay: .1s 
}
.section8 
{
    width: 100%;
    height: 105vh;
    position: relative;
    overflow: hidden;
    animation: abcdefgh 1s infinite;
}
@keyframes abcdefgh
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.waze
{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    height: 510px;
    transform: translate(-50%,-50%);
    transform-style: preserve-3d;
}
.waze span11
{
    position: absolute;
    display: block;
    animation: waze 1s ease-in-out infinite;
}
@keyframes waze
{
    0%
    {
        transform: rotateY(180deg);
        border: 2px solid transparent;
        border-left-color: white;
        border-bottom-color: blue;
        border-right-color: black;
        border-top-color: yellow;
    }
    50%
    {
        transform: rotateX(0deg);
        border: 10px solid transparent;
        border-left-color: black;
        border-bottom-color: white;
        border-right-color: blue;
        border-top-color: red;
    }
}
.waze span11:nth-child(even):before
{
    content:'';
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
    height: 50%;
    border: 10px solid transparent;
    border-left-color: blue;
    border-bottom-color: yellow;
    border-right-color: red;
    border-top-color: white;
    transform: translateY(-50%);
}
.waze span11:nth-child(1)
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-delay: 0.9s;
}
.waze span11:nth-child(2)
{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    animation-delay: 0.8s;
}
.waze span11:nth-child(3)
{
    top: 60px;
    left: 60px;
    right: 60px;
    bottom: 60px;
    animation-delay: 0.7s;
}
.waze span11:nth-child(4)
{
    top: 90px;
    left: 90px;
    right: 90px;
    bottom: 90px;
    animation-delay: 0.6s;
}
.waze span11:nth-child(5)
{
    top: 120px;
    left: 120px;
    right: 120px;
    bottom: 120px;
    animation-delay: 0.5s;
}
.waze span11:nth-child(6)
{
    top: 150px;
    left: 150px;
    right: 150px;
    bottom: 150px;
    animation-delay: 0.4s;
}
.waze span11:nth-child(7)
{
    top: 180px;
    left: 180px;
    right: 180px;
    bottom: 180px;
    animation-delay: 0.3s;
}
.waze span11:nth-child(8)
{
    top: 210px;
    left: 210px;
    right: 210px;
    bottom: 210px;
    animation-delay: 0.2s;
}
.waze span11:nth-child(9)
{
    top: 240px;
    left: 240px;
    right: 240px;
    bottom: 240px;
    animation-delay: 0.1s;
}
.section9 
{
    width: 100%;
    height: 105vh;
    position: relative;
    overflow: hidden;
    animation: abcdefghi .5s infinite;
}
@keyframes abcdefghi
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.circle
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateX(60deg);
    transform-style: preserve-3d;
    width: 80%;
    height: 800px;
}
span6
{
    position: absolute;
    border: 6px solid black;
    border-radius: 50%;
    animation: bool 1s ease-in-out infinite;
}
@keyframes bool 
{
    0%
    {
        transform: translateY(100px);
        border: 1px solid transparent;
        border-left-color: white;
        border-bottom-color: blue;
        border-right-color: black;
        border-top-color: yellow;
    }
    100%
    {
        transform: translateY(-100px);
        border: 15px solid transparent;
        border-left-color: black;
        border-bottom-color: aqua;
        border-right-color: red;
        border-top-color: white;
    }
}
span6:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: .1s;
}
span6:nth-child(2)
{
    left: 10px;
    top: 10px;
    bottom: 10px;
    right: 10px;
    animation-delay: .2s;
}
span6:nth-child(3)
{
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: .3s;
}
span6:nth-child(4)
{
    left: 30px;
    top: 30px;
    bottom: 30px;
    right: 30px;
    animation-delay: 0.4s;
}
span6:nth-child(5)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: .5s;
}
span6:nth-child(6)
{
    left: 50px;
    top: 50px;
    bottom: 50px;
    right: 50px;
    animation-delay: .6s;
}
span6:nth-child(7)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: .7s;
}
span6:nth-child(8)
{
    left: 70px;
    top: 70px;
    bottom: 70px;
    right: 70px;
    animation-delay: .8s;
}
span6:nth-child(9)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: .9s;
}
span6:nth-child(10)
{
    left: 90px;
    top: 90px;
    bottom: 90px;
    right: 90px;
    animation-delay: 1s;
}
span6:nth-child(11)
{
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    animation-delay: 1.1s;
}
span6:nth-child(12)
{
    left: 110px;
    top: 110px;
    bottom: 110px;
    right: 110px;
    animation-delay: 1.2s;
}
span6:nth-child(13)
{
    left: 120px;
    top: 120px;
    bottom: 120px;
    right: 120px;
    animation-delay: 1.3s;
}
span6:nth-child(14)
{
    left: 130px;
    top: 130px;
    bottom: 130px;
    right: 130px;
    animation-delay: 1.4s;
}
span6:nth-child(15)
{
    left: 140px;
    top: 140px;
    bottom: 140px;
    right: 140px;
    animation-delay: 1.5s;
}
span6:nth-child(16)
{
    left: 150px;
    top: 150px;
    bottom: 150px;
    right: 150px;
    animation-delay: 1.6s;
}
span6:nth-child(17)
{
    left: 160px;
    top: 160px;
    bottom: 160px;
    right: 160px;
    animation-delay: 1.7s;
}
span6:nth-child(18)
{
    left: 170px;
    top: 170px;
    bottom: 170px;
    right: 170px;
    animation-delay: 1.8s;
}
span6:nth-child(19)
{
    left: 180px;
    top: 180px;
    bottom: 180px;
    right: 180px;
    animation-delay: 1.9s;
}
span6:nth-child(20)
{
    left: 190px;
    top: 190px;
    bottom: 190px;
    right: 190px;
    animation-delay: 2s;
}
.section10 
{
    width: 100%;
    height: 105vh;
    position: relative;
    overflow: hidden;
    animation: abcdefghij .2s infinite;
}
@keyframes abcdefghij
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.block
{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    height: 510px;
    transform: translate(-50%,-50%);
    transform-style: preserve-3d;
}
.block span12
{
    position: absolute;
    display: block;
    border: 16px solid transparent;
    border-left-color: blue;
    border-bottom-color: yellow;
    border-right-color: red;
    border-top-color: white;
    animation: block 1s ease-in-out infinite;
}
@keyframes block
{
    0%
    {
        transform: rotate(0deg);
        border: 16px solid;
        border-left-color: blue;
        border-bottom-color: yellow;
        border-right-color: red;
        border-top-color: white;
    }
    50%
    {
        transform: rotate(360deg);
        border: 1px solid;
        border-left-color: black;
        border-bottom-color: aqua;
        border-right-color: white;
        border-top-color: blue;
    }
}
.block span12:nth-child(even):before
{
    content:'';
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
    height: 50%;
    border: 1px solid transparent;
    border-left-color: yellow;
    border-bottom-color: blue;
    border-right-color: black;
    border-top-color: red;
    transform: translateY(-50%);
}
.block span12:nth-child(even):after
{
    content:'';
    position: absolute;
    top: 0%;
    left: 50%;
    width: 50%;
    height: 100%;
    border: 8px solid transparent;
    border-left-color: aqua;
    border-bottom-color: red;
    border-right-color: white;
    border-top-color: black;
    transform: translateX(-50%);
}
.block span12:nth-child(1)
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-delay: 0.9s;
}
.block span12:nth-child(2)
{
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    animation-delay: 0.8s;
}
.block span12:nth-child(3)
{
    top: 60px;
    left: 60px;
    right: 60px;
    bottom: 60px;
    animation-delay: 0.7s;
}
.block span12:nth-child(4)
{
    top: 90px;
    left: 90px;
    right: 90px;
    bottom: 90px;
    animation-delay: 0.6s;
}
.block span12:nth-child(5)
{
    top: 120px;
    left: 120px;
    right: 120px;
    bottom: 120px;
    animation-delay: 0.5s;
}
.block span12:nth-child(6)
{
    top: 150px;
    left: 150px;
    right: 150px;
    bottom: 150px;
    animation-delay: 0.4s;
}
.block span12:nth-child(7)
{
    top: 180px;
    left: 180px;
    right: 180px;
    bottom: 180px;
    animation-delay: 0.3s;
}
.block span12:nth-child(8)
{
    top: 210px;
    left: 210px;
    right: 210px;
    bottom: 210px;
    animation-delay: 0.2s;
}
.block span12:nth-child(9)
{
    top: 240px;
    left: 240px;
    right: 240px;
    bottom: 240px;
    animation-delay: 0.1s;
}
.section11 
{
    width: 100%;
    height: 105vh;
    position: relative;
    overflow: hidden;
    animation: abcdefghijk .1s infinite;
}
@keyframes abcdefghijk
{
  0%{
    background: white;
  } 
  25%{
    background: black;
  } 
  50%{
    background: yellow;
  } 
  75%{
    background: red;
  } 
  100%{
    background: blue;
  }  
}
.boucle
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateY(200deg);
    width: 50%;
    height: 500px;
    transform-style: preserve-3d;
}
span7
{
    position: absolute;
    border: 10px solid transparent;
    border-top-color: black;
    border-bottom-color: white;
    border-left-color: blue; 
    border-right-color: red; 
    animation: scoll .2s ease-in-out infinite;
}
@keyframes scoll
{
    0%
    {
        transform: rotate(360deg);
        border: 1px solid transparent;
        border-top-color: black;
        border-bottom-color: white;
        border-left-color: blue; 
        border-right-color: red; 
    }
    50%
    {
        transform: rotateY(0deg);
    }
    100%
    {
        transform: rotate(360deg); 
        border: 8px solid transparent;
        border-top-color: blue;
        border-bottom-color: aqua;
        border-left-color: white; 
        border-right-color: yellow; 
    }
}
span7:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 1s
}
span7:nth-child(2)
{
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: .9s
}
span7:nth-child(3)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: .8s
}
span7:nth-child(4)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: .7s
}
span7:nth-child(5)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: .6s
}
span7:nth-child(6)
{
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    animation-delay: .5s
}
span7:nth-child(7)
{
    left: 120px;
    top: 120px;
    bottom: 120px;
    right: 120px;
    animation-delay: .4s
}
span7:nth-child(8)
{
    left: 140px;
    top: 140px;
    bottom: 140px;
    right: 140px;
    animation-delay: .3s 
}
span7:nth-child(9)
{
    left: 160px;
    top: 160px;
    bottom: 160px;
    right: 160px;
    animation-delay: .2s
}
span7:nth-child(10)
{
    left: 180px;
    top: 180px;
    bottom: 180px;
    right: 180px;
    animation-delay: .1s 
}
.section15 
{
    width: 100%;
    height: 105vh;
    position: relative;
    overflow: hidden;
    animation: abcdef .1s infinite;
}
@keyframes abcdef
{
  0%{
    background: blue;
  } 
  25%{
    background: white;
  } 
  50%{
    background: black;
  } 
  75%{
    background: yellow;
  } 
  100%{
    background: red;
  }  
}
.tobe
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateY(200deg);
    width: 80%;
    height: 600px;
    transform-style: preserve-3d; 
}
span15
{
    position: absolute;
    border: 10px solid transparent;
    border-top-color: black;
    border-bottom-color: red;
    border-left-color: yellow; 
    border-right-color: white; 
    animation: ambre .2s linear infinite;
}
@keyframes ambre
{
    0%
    {
        transform: rotateY(360deg);
        border: 10px solid transparent;
        border-top-color: black;
        border-bottom-color: red;
        border-left-color: yellow; 
        border-right-color: white;
    }
    50%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotateX(360deg); 
        border-radius 50%;
        border: 1px solid transparent;
        border-top-color: white;
        border-bottom-color: blue;
        border-left-color: aqua; 
        border-right-color: black;
    }
}
span15:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 1s
}
span15:nth-child(2)
{
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: .9s
}
span15:nth-child(3)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: .8s
}
span15:nth-child(4)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: .7s
}
span15:nth-child(5)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: .6s
}
span15:nth-child(6)
{
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    animation-delay: .5s
}
span15:nth-child(7)
{
    left: 120px;
    top: 120px;
    bottom: 120px;
    right: 120px;
    animation-delay: .4s
}
span15:nth-child(8)
{
    left: 140px;
    top: 140px;
    bottom: 140px;
    right: 140px;
    animation-delay: .3s 
}
span15:nth-child(9)
{
    left: 160px;
    top: 160px;
    bottom: 160px;
    right: 160px;
    animation-delay: .2s
}
span15:nth-child(10)
{
    left: 180px;
    top: 180px;
    bottom: 180px;
    right: 180px;
    animation-delay: .1s 
}
.section16 
{
    width: 100%;
    height: 105vh;
    position: relative;
    overflow: hidden;
    animation: abcdefg .2s infinite;
}
@keyframes abcdefg
{
  0%{
    background: black;
  } 
  25%{
    background: yellow;
  } 
  50%{
    background: red;
  } 
  75%{
    background: blue;
  } 
  100%{
    background: white;
  }  
}
.convain
{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90%;
    height: 600px;
    transform: translate(-50%,-50%);
    transform-style: preserve-3d;
}
span16
{
    position: absolute;
    top: 50%;
    left: 0;
    border: 15px solid transparent;
    border-left-color: blue;
    border-bottom-color: yellow;
    border-right-color: red;
    border-top-color: white;
    border-radius: 50%;
    animation: blup .1s linear infinite;
}
@keyframes blup
{
    0%
    {
        transform: rotateX(360deg);
        border: 15px solid transparent;
        border-left-color: blue;
        border-bottom-color: yellow;
        border-right-color: red;
        border-top-color: white;
    }
    50%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotateY(360deg);
        border: 2px solid transparent;
        border-left-color: aqua;
        border-bottom-color: black;
        border-right-color: white;
        border-top-color: blue;
    }
}
span16:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 1s
}
span16:nth-child(2)
{
    left: 10px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: .9s
}
span16:nth-child(3)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: .8s
}
span16:nth-child(4)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: .7s
}
span16:nth-child(5)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: .6s
}
span16:nth-child(6)
{
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    animation-delay: .5s
}
span16:nth-child(7)
{
    left: 120px;
    top: 120px;
    bottom: 120px;
    right: 120px;
    animation-delay: .4s
}
span16:nth-child(8)
{
    left: 140px;
    top: 140px;
    bottom: 140px;
    right: 140px;
    animation-delay: .3s 
}
span16:nth-child(9)
{
    left: 160px;
    top: 160px;
    bottom: 160px;
    right: 160px;
    animation-delay: .2s
}
span16:nth-child(10)
{
    left: 180px;
    top: 180px;
    bottom: 180px;
    right: 180px;
    animation-delay: .1s 
}
.bubble0
{
    position: absolute;
    left: 50%;
    top: 200%;
    transform: translate(-50%,-50%) rotateX(60deg);
    transform-style: preserve-3d;
    width: 200px;
    height: 200px;
    transition: .2s;
    border-radius: 50%;
    animation: bubble 40s linear infinite;
    overflow: hidden;
}
@keyframes bubble
{
    0%
    {
        left: 0%;
        top: -10%;
        transform: rotateY(0deg);
        color: blue;
    }
    100%
    {
        left: 100%;
        top: 1050%; 
        transform: rotateY(360deg);
        color: white;
    }
}
span17
{
    position: absolute;
    top: 60%;
    left: 0;
    border: 2px solid transparent;
    border-left-color: red;
    border-right-color: blue;
    border-bottom-color: black;
    border-top-color: white;
    border-radius: 50%;
}
span17:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 0.1s;
}
span17:nth-child(2)
{
    left: 10px;
    top: 10px;
    bottom: 10px;
    right: 10px;
    animation-delay: 0.2s;
}
span17:nth-child(3)
{
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: 0.3s;
}
span17:nth-child(4)
{
    left: 30px;
    top: 30px;
    bottom: 30px;
    right: 30px;
    animation-delay: 0.4s;
}
span17:nth-child(5)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: 0.5s;
}
span17:nth-child(6)
{
    left: 50px;
    top: 50px;
    bottom: 50px;
    right: 50px;
    animation-delay: 0.6s;
}
span17:nth-child(7)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: 0.7s;
}
.bubble2
{
    position: absolute;
    width: 200px;
    height: 200px;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 1000%;
    transform-style: preserve-3d;
    transform: rotateY(200deg);
    overflow: hidden;
    animation: buble 30s linear infinite;
}
@keyframes buble
{
    0%
    {
        right: 0%;
        top: 200%;
        color: blue;
        transform: rotateX(360deg);
        transform: rotateY(0deg);
    }
    100%
    {
        right: 100%;
        top: 1050%; 
        color: #000;
        transform: rotateX(0deg);
        transform: rotateY(360deg);
    }
}
span18
{
    position: absolute;
    border: 4px solid transparent;
    border-top-color: aqua;
    border-bottom-color: blue;
    border-left-color: yellow; 
    border-right-color: white; 
}
span18:nth-child(1)
{
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    animation-delay: 1s
}
span18:nth-child(2)
{
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    animation-delay: .9s
}
span18:nth-child(3)
{
    left: 40px;
    top: 40px;
    bottom: 40px;
    right: 40px;
    animation-delay: .8s
}
span18:nth-child(4)
{
    left: 60px;
    top: 60px;
    bottom: 60px;
    right: 60px;
    animation-delay: .7s
}
span18:nth-child(5)
{
    left: 80px;
    top: 80px;
    bottom: 80px;
    right: 80px;
    animation-delay: .6s
}
.bubble3
{
    position: absolute;
    left: 30%;
    top: 1040%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateY(200deg);
    animation: bulle 10s linear infinite; 
}
@keyframes bulle
{
    0%
    {
        right: 50%;
        top: 100%;
        color: blue;
    }
    100%
    {
        right: 100%;
        top: 1050%; 
        color: #000;
    }
}
.bubble4
{
    position: absolute;
    left: 30%;
    top: 1040%;
    transform: translate(-50%,-50%);
    width: 70px;
    height: 70px;
    transform-style: preserve-3d;
    transform: rotateY(200deg);
    animation: smil 20s linear infinite; 
}
@keyframes smil
{
    0%
    {
        right: 50%;
        top: 100%;
    }
    100%
    {
        right: 100%;
        top: 1050%; 
    }
}
#scrollPath
{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: rgba(255,255,255,0.05);
}
#progressbar
{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to top, #008aff,#00ffe7);
    animation: animate 5s linear infinite;
}
@keyframes animate
{
    0%,100%
    {
        filter: hue-rotate(0deg);
    }
    50%
    {
        filter: hue-rotate(360deg);
    }
}
#progressbar:before
{
    content:'';
    position: absolute;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #008aff, #00ffe7);
    filter: blur(30px);
}
#progressbar:after
{
    content:'';
    position: absolute;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #008aff, #00ffe7);
    filter: blur(30px);
}
.box1
{
    position: absolute;
    left: 50%;
    top: 2060%;
    transform: translate(-50%,-50%);
    font-size: 5em;
    color: yellow;
    transition-duration: 0.2s;
}
.box1:hover
{
    transform: rotate(360deg);
    color: red;
    filter: blur(3px);

}