/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2019-08-21, 16:09:33
    Author     : Vincent
*/

html, body {font-family:'Muli',arial,sans-serif;  margin-bottom:0px!important; padding-bottom:0px!important; word-break:break-word;}

.clear {clear:both;}

h1,h2,h3,h4,h5,h6,p {margin-top:0px; margin-bottom:0px;}

h2 {font-size:60px; font-weight:900;}
h3 {font-size:40px; font-weight:800;}
h4 {font-size:36px; font-weight:800;}
h5 {font-size:30px; font-weight:600;}
h6 {font-size:24px; font-weight:800;}

strong,b {font-weight:700;}

.align-center {text-align:center;}
.align-left {text-align:left;}
.align-right {text-align:right;}

.no-margin {margin:0!Important;}

.scrollingArea {position:relative;}

.scrollIcon {position:fixed; width:64px; height:120px; bottom:30px; left:50%; transform: translateX(-50%); z-index:10; opacity:0; transition:all 250ms ease-out;}
    .scrollIcon .outline {border:5px solid #fff; border-radius:32px; height:120px; width:100%; position:relative; background-color:rgba(0,0,0,0.1); box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);}
    .scrollIcon .mouse {width:30px; height:42px; border:3px solid #fff; border-radius:15px; position:absolute; left:50%; transform: translateX(-50%); top:18px;}
    .scrollIcon .mouse:before {content:""; height:8px; width:3px; left:50%; transform: translate(-50%,0); top:9px; position:absolute; display:block; background:#fff; border-radius:4px;}
    .scrollIcon .arrow {background:url(../images/arrow-bottom.png) no-repeat center center; width:18px; height:10px; position:absolute; left:50%; transform: translate(-50%,0); bottom:18px; display:block;}
    
.scrollingArea.active .scrollIcon {opacity:1;}
.scrollingArea.active .scrollIcon .outline { animation:animation 2s ease-in-out infinite;}


.windowHeight {height:100vh; height:calc(100vh - 100px); min-height:400px; position:relative; /*max-height:1000px;*/}

.green {color:#74c372!important;}

.wrapper {width:1000px; margin:0 auto; max-width:92%;}

.vertical-container {display:table; vertical-align:middle; width:100%; height:100%;}
.vertical-align {display:table-cell; vertical-align: middle;}

ul.checklist {list-style:none; margin:0; padding:0; padding-left:0px;}
    ul.checklist li {font-weight:800; color:#404a50; font-size:20px; padding-left:45px; margin-bottom:30px; line-height:130%; position:relative;}
    ul.checklist li:before {content:""; display:block; background:url(../images/icon-check.png) no-repeat center center; width:28px; height:28px; position:absolute; left:0px; top:50%; transform: translateY(-50%);}


    .backgroundImage {width:100%; height:100%; position:relative; background-size:cover; background-position:center center;}
    .imageScroll .backgroundImage {position:absolute; top:0px; left:0px; z-index:1;}
    .image1 {background-color: #888080;}
    .image1 .backgroundImage {background-color: #888080;  background-blend-mode: multiply; opacity: 0.9; }
    
    .image2 {background-color: #7b7458;}
    .image2 .backgroundImage {background-color: #7b7458; background-blend-mode: multiply; opacity: 0.9;}
    
    .image3 {background-color: #becfd5;}
    .image3 .backgroundImage {background-color: #becfd5; background-image: url(../images/main-image-3.jpg); background-blend-mode: multiply; opacity: 0.9;}
    
    .imageScroll {text-align:center;}
    .imageScroll .viewHandler {position:absolute; top:0px; left:0px; width:100%; height:1px;}
    .imageScroll h2 {font-size:60px; color:#fff; font-weight:900;}
    .imageScroll h3 {font-size:40px; color:#ffffff; font-weight:600;  padding-top:100px;}
    .imageScroll p {}
    .imageScroll .wrapper {position:relative; z-index:2;}
    .scrollingArea.active .scrollImages {opacity:0;}
    
    .scrollViewPort {position:fixed; top:100px; left:0px; width:100%; height:100%; height:calc(100% - 100px); z-index:3; display:none;}
    .scrollingArea.active .scrollViewPort {display:block;}
    .scrollViewPort .imageScroll {position:absolute; top:0px; left:0px; width:100%; opacity:0; transition:all 750ms ease-out; z-index:1;}
    .scrollViewPort .imageScroll.active {opacity:1; transition:all 350ms ease-out; z-index:2;}
    body.admin-bar .scrollViewPort {top:132px;}
    
    .section {}
    
    .section.programme {background:#e5ebef; position:relative; overflow:hidden; padding:50px 0px;}
        .section.programme .image {position:absolute; top:50%; transform:translateY(-50%); height:90%; max-width:50%; background-repeat: no-repeat; z-index:2;}
        .section.programme .image.left {left:0px; background-position:right 15%;}
        .section.programme .image.right {right:0px; background-position:left 15%;}
        .section.programme .background-fog {background:url(../images/bg-fog.png) no-repeat center center; width:100%; height:100%; padding:30px 0px 70px 0px; position:absolute; top:0px; left:0px; z-index:1; background-size:125% auto;}
        .section.programme .content-area {position:relative; z-index:3;}
        .section.programme .custom-row {margin-bottom:40px; }
        .section.programme .custom-row h3 {line-height:100%; margin-bottom:30px;}
        .section.programme .custom-row a {display:inline-block;}
        .section.programme .custom-row a img {max-width:100%; height:auto;}
        .section.programme .custom-row .col-left {float:left; width:calc(50% - 25px);}
        .section.programme .custom-row .col-center {float:left; width:50px; position:relative; height:170px;}
            .section.programme .custom-row .col-center .circle {background:#404a50; width:56px; height:56px; display:block; border-radius:56px; font-size:24px; color:#fff; line-height:52px; font-weight:800; position:absolute; top:50%; transform: translate(-50%,-50%); left:50%; text-align: center;}
            .section.programme .custom-row .col-center:before {content:""; display: block; background:#404a50; position:absolute; left:50%; top:0px; width:2px; height:170px;}
        .section.programme .custom-row .col-right {float:left; width:calc(50% - 25px);}
        .section.programme h2 {color:#64a262; font-size:60px; font-weight:900; margin-bottom:60px;}
        .section.programme p {color:#404a50; font-size:20px; padding-bottom:30px;}
        
    .section.blocs {background-color:rgba(0,0,0,0.6); position:relative; overflow:hidden;}
        .section.blocs .col-img {min-height:310px; padding:0; background-repeat: no-repeat; background-size:cover; background-position: center center;}
        .section.blocs .col-img:before {content:""; display:block; width:100%; height:100%; position:absolute; z-index:1; background-color: rgba(0,0,0,0.5);}
        .section.blocs .col-img table {height:100%; width:100%; text-align:center; vertical-align: middle;  position:relative; z-index:2; padding:0px 30px; }
        .section.blocs .col-img table h4 {font-size:30px; font-weight:800; color:#fff; line-height:125%;}
        
    .section.fonctionnement {
            background-size:cover; background-position:bottom center; padding:110px 0px;
        }
        .section.fonctionnement .green {color:#479349!important;}
        .section.fonctionnement h2 {margin-bottom:20px;}
        .section.fonctionnement h4 {margin-bottom:30px;}
        .section.fonctionnement p {padding-bottom:40px; font-size:20px; font-weight:600; color:#404a50;}
        .section.fonctionnement p strong {font-size:22px; font-weight:800;}
        .section.fonctionnement .col-icon {width:20%; max-width:20%; -ms-flex:0 0 20%; flex:0 0 20%; padding-left:8px; padding-right:8px;}
        .section.fonctionnement .icon-box {background:#fff; border-radius:10px; padding:15px 14px; height:100%; text-align:center;}
        .section.fonctionnement .icon-box .img {min-height:110px;}
        .section.fonctionnement .icon-box .img img {max-width:100%; height:auto;}
        .section.fonctionnement .icon-box .vertical-container {height:calc(100% - 110px);}
        .section.fonctionnement .icon-box p {color:#404a50; font-size:20px; font-weight:800; line-height:125%; padding:0;}
        .section.fonctionnement ul {margin-bottom:40px;}
        .section.fonctionnement .col-text {margin-bottom:50px;}
            .col-text .text-box {background:#fff; border-radius:10px; padding:40px 20px 20px 20px;  height:100%;}
            .col-text .text-box .ecole-header {margin-bottom:30px;}
            .col-text .text-box .ecole-header:after {content:""; clear:both; display:block;}
            .col-text .text-box .ecole-header h6 {float:left; line-height: 100%;}
            .col-text .text-box .ecole-header h6 span {font-size:18px; font-weight:600;}
            .col-text .text-box .ecole-header a {float:right; width:175px; display:block;}
            .col-text .text-box .ecole-header a img {max-width:100%; height:auto;}
            .col-text .text-box p {font-size:19px; line-height:140%; color:#404a50;}
            .col-text .text-box p a {color:#434574; text-decoration: none;}
            
    .section.partenaires {padding:110px 0px;}
        .section.partenaires h2 {}
        .section.partenaires h4 { }
        .section.partenaires a {display:inline-block; margin:15px; vertical-align: middle;}
        
    
body.admin-bar .site {
    padding-top:100px;
}

header.site-header {position:fixed; top:0px; left:0px; width:100%; z-index:100; background:#61a362; padding:20px 10px; text-align: center;}
    .main-navigation {float:none; width:auto; display:inline-block; width:100%;}
    .main-navigation ul li {display:inline-block; margin:0px 15px; line-height:50px;}
    .main-navigation ul li a {font-size:18px; font-weight:600; color:#fff;}
    .main-navigation ul.menu li:first-child {margin-left:0px;}
    .main-navigation ul.menu li:last-child {margin-right:0px;}
    .main-navigation ul.menu li.return-top {display:none!Important;}
    .main-navigation ul.menu li.return-top a {
        text-indent:-9999px;
        background:url(../images/arrow-top-icon.png) no-repeat center center; background-size:contain;
        width:40px; height:30px;
    }
    .menu-menu-container {display:inline-block; float:left;}
    header.site-header .align-right {float:right; display:inline-block;}
    
    header.site-header .btn {display:inline-block; height:54px; vertical-align: middle; background:#74d375; border:2px solid #74d375; border-radius:8px; min-width:50px; text-align:center; cursor: pointer; transition:250ms ease-out all;}
    
    .sc_player_container1 .myButton_play {
        display:inline-block; height:54px!important; vertical-align: middle; background:#74d375!important; border:2px solid #74d375!important; border-radius:8px; min-width:50px; text-align:center; cursor: pointer; transition:250ms ease-out all; background-image:url(../images/icon-speaker-off.png)!important; background-repeat:no-repeat!important; background-position:center center!important;
    }
    .sc_player_container1 .myButton_stop {
        display:inline-block; height:54px!important; vertical-align: middle; background:#74d375!important; border:2px solid #74d375!important; border-radius:8px; min-width:50px; text-align:center; cursor: pointer; transition:250ms ease-out all; background-image:url(../images/icon-speaker-on.png)!important; background-repeat:no-repeat!important; background-position:center center!important;
    }
    
    header.site-header .btn.btn-sound {line-height: 54px;}
        header.site-header .btn.btn-sound span {display:inline-block; vertical-align: middle; height: 100%;}
        header.site-header .btn.btn-sound span.on {display:none;}
        header.site-header .btn.btn-sound span.off {display:inline-block;}
        header.site-header .btn.btn-sound.active span.on {display:inline-block;}
        header.site-header .btn.btn-sound.active span.off {display:none;}
    
    header.site-header .btn.btn-login {background:#2b4463 url(../images/icon-login.png) no-repeat center left; font-size:18px; color:#ffffff; font-weight:800; border:2px solid #2b4463; line-height:50px; padding:0px 20px 0px 50px; margin-left:8px; background-position-x: 15px;}
    
    header.site-header .btn:hover {background-color:#fff!important; color:#2b4463;}
    
    footer {background:url(../images/background-footer.jpg) no-repeat center top; background-size:cover; padding:90px 0px 60px 0px;}
        footer h2 {color:#fff; margin-bottom:50px;}
        footer h5 {color:#ffffff; margin-bottom:10px;}
        footer h6 {color:#434574; margin-bottom:30px;}
        footer p {font-size:18px; color:#434574}
        footer p a {color:#434574; text-decoration: none; font-weight:600;}
        
        footer .copyright {padding-top:150px; color:#fff; font-size:16px;}
        footer .copyright p {color:#fff; padding:0; font-size:16px;}
        footer .copyright a {color:#434574; text-decoration: none; font-weight:800;}
    
body.admin-bar header.site-header { top:32px;}


@media screen and (max-height: 767px) {
    header.site-header {padding:12px 10px;}
    .scrollViewPort {top:84px; height: calc(100% - 84px);}
    body.admin-bar .scrollViewPort {top:116px;}
    
 
}

@media screen and (max-height: 600px) {
    body.admin-bar .site {padding-top:70px;}
    
    header.site-header {padding:10px 10px;}
    .scrollViewPort {top:70px; height: calc(100% - 70px);}
    body.admin-bar .scrollViewPort {top:102px;}
    
    header.site-header .btn {height:44px;}
    header.site-header .btn.btn-sound {line-height:44px;}
    header.site-header .btn.btn-login, .main-navigation ul li { line-height:40px;}
    
}

@media screen and (min-width: 1600px) {
    .section.programme .image.left {background-position: 0% 15%; background-size: contain;}
    .section.programme .image.right {background-position: 100% 18%; background-size: contain;}
}

@media screen and (max-width: 1350px) {
}

@media screen and (max-width: 1280px) {
    
    .imageScroll h2 {font-size:50px;}
    .imageScroll h3 {padding-top:60px; font-size:35px;}
    
    .section.programme .custom-row {margin-bottom:45px;}
    
    .section.programme .image {top:40% }
    .section.programme .image.right {right:-60px;}
    .section.programme .image.left {left:-50px;}
     
     h2 {font-size:50px;}
     h3 {font-size:35px;}
     .section.programme h2 {font-size:50px; margin-bottom:30px;}
}

@media screen and (max-width: 1200px) {
    
    .section.programme .image { height: 40%; background-size:auto 100%; top:40%}
    .section.programme .wrapper {width:900px; max-width:70%;}
}

@media screen and (max-width: 1080px) {
    
    .section.fonctionnement .icon-box p {font-size:18px;}
    .section.fonctionnement .icon-box {padding:14px 12px;}
    
    .section.blocs .col-img table h4 {font-size:26px;}
}

@media screen and (max-width: 1000px) {
    
    .section.programme .image { height: 35%; background-size:auto 100%; top:35%; }
    
    .section.programme h2 {font-size:42px;}
    .section.programme .custom-row h3 {font-size:30px;}
    .section.programme .content-area p img {max-width:50%;}
    
    .main-navigation ul li {margin:0px 8px;}
    .main-navigation ul li a {font-size:16px;}
    
    header.site-header .btn.btn-login {font-size:15px; padding:0px 10px 0px 42px; background-position-x: 10px;}
    
    .site-header .wrapper {max-width:96%;}
    
}

@media screen and (max-width: 991px) {
    .section.blocs .col-img table h4 {font-size:30px;}
}

@media screen and (max-width: 860px) {
    
    .section.programme .image { display:none; }
    .section.programme .wrapper {width:900px; max-width:90%;}
    
    .section.fonctionnement .icon-box p {font-size:17px;}
    .section.fonctionnement .icon-box {padding:12px 10px;}
}

@media screen and (max-width: 767px) {
    
    h1 {}
    h2 {font-size:45px;}
    h3 {font-size:38px;}
    h4 {font-size:32px;}
    h5 {font-size:25px;}
    h6 {font-size:21px;}
    
   .section.fonctionnement .col-icon {margin-bottom:20px; width: 33%; max-width: 33%; -ms-flex: 0 0 33%; flex: 0 0 33%;}
   
    .menu-toggle {border:none; background:transparent url(../images/bars-regular.png) no-repeat center center; background-size:contain; text-indent:-9999px;     width: 50px; height: 35px; margin:0 auto; display:inline-block; outline:none!Important;}
    
    .menu-toggle{
        display: inline-block;
        float: left;
       margin-top:10px;
        clear: both;
    }
    
    .menu-menu-container {width:100%;}
    
    .main-navigation.toggled ul {
        display: inline-block;
        float: left;
        margin-top: 0px; margin-bottom:0px;
        margin:0; width:100%; float:none;
    }
    
    .main-navigation ul {
        display:none;
    }
     
    header.site-header {
        padding:10px 10px;
    }
    
    header.site-header,body.admin-bar header.site-header {top:0px; position:relative;}
    
    .main-navigation ul li.return-top {
        display:none!important;
    }
    
    .main-navigation ul {margin-top:30px;}
    .main-navigation ul li {display:block; width:100%; margin:0; margin-bottom:15px; line-height:100%;}
    
    .section.programme h2 {font-size:38px;}
    
    .section.programme .background-fog {background-size:90% 90%;}
    
    .section.blocs .col-img table h4 {font-size:26px;}
    
    body.admin-bar .site {padding-top:0px;} 
    .scrollViewPort {top:88px;}
    body.admin-bar .scrollViewPort {top:120px;}
    .scrollViewPort {display:none!important;}
    .scrollingArea.active .scrollImages {opacity:1;}
    
    
    footer {padding:45px 0px 30px 0px;}
    footer .col-adresse {margin-bottom:40px;}
    footer h6 {margin-bottom:10px;}
    footer .copyright {padding-top:40px; font-size:14px;}
    footer .copyright p {color:#fff; padding:0; font-size:14px;}
    .copyright .col-12 {text-align:left; padding-bottom:10px;}
    
    .section.partenaires, .section.fonctionnement {padding:80px 0px;}
    
}

@media screen and (max-width: 600px) {
    body.admin-bar .site {padding-top:0px;}
    body.admin-bar header.site-header {top:0px;}
    
    .scrollingArea .imageScroll p img {max-width:80%;}
}

@media screen and (max-width: 575px) {
    
    h1 {}
    h2 {font-size:38px;}
    h3 {font-size:32px;}
    h4 {font-size:28px;}
    h5 {font-size:22px;}
    h6 {font-size:18px;}
    
    ul.checklist li {font-size:18px;}
    
    .section.programme h2 {font-size:32px; margin-bottom:20px;} 
    .section.programme .custom-row h3 {font-size:26px;}
    .section.programme .content-area br {display:none;}
    .section.programme .custom-row .col-center .circle {width:40px; height:40px; line-height:36px; font-size:20px;}
    
    .section.programme p {font-size:17px;}
    
    .section.fonctionnement p {font-size:17px; padding-bottom:30px;}
    .section.fonctionnement p strong {font-size:19px;}
    .section.fonctionnement p strong br {display:none;}
    
    .section.fonctionnement .col-icon {
        margin-bottom: 20px;
        width: 50%;
        max-width: 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }
    
    .imageScroll h2 {font-size:42px;}
    
    .section.blocs .col-img table h4 {font-size:30px;}
    
    header.site-header .btn.btn-login {font-size:14px;}
    
    .section.partenaires, .section.fonctionnement {padding:50px 0px;}
    
}

@media screen and (max-width: 420px) {
    
    
    h2 {font-size:35px;}
    h3 {font-size:30px;}
    h4 {font-size:26px;}
    h5 {font-size:20px;}
    h6 {font-size:17px;}
    
    ul.checklist li {font-size:16px;}
    .section.programme p {font-size:16px;} 
    .section.fonctionnement p strong {font-size:18px;}
    
    .menu-toggle {width:32px; height:32px; margin-top:12px;}
    header.site-header .btn {min-width:45px;}
    header.site-header .btn.btn-login {font-size:12px; padding:0px 10px 0px 40px; background-position-x: 8px;}
    
    .col-text .text-box .ecole-header h6,.col-text .text-box .ecole-header a {float:none; display:inline-block; width:100%; text-align:center; margin-bottom:20px;}
    .col-text .text-box .ecole-header a {max-width:75%; margin-left:auto; margin-right:auto; display:block;}
    
    .section.programme .custom-row h3 {font-size:19px;}
    
    .section.blocs .col-img table h4 {font-size:24px;}
    
    .section.partenaires, .section.fonctionnement {padding:40px 0px;}
}



@-webkit-keyframes animation { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.6% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 19.97, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 19.97, 0, 1); }
  5.11% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 26.021, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 26.021, 0, 1); }
  8.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 18.49, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 18.49, 0, 1); }
  11.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.54, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.54, 0, 1); }
  14.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -6.437, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -6.437, 0, 1); }
  17.62% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.063, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.063, 0, 1); }
  20.82% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.131, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.131, 0, 1); }
  23.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.735, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.735, 0, 1); }
  27.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.501, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.501, 0, 1); }
  30.13% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.892, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.892, 0, 1); }
  36.44% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.663, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.663, 0, 1); }
  42.64% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.505, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.505, 0, 1); }
  55.16% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.582, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.582, 0, 1); }
  67.67% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.225, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.225, 0, 1); }
  80.18% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.087, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.087, 0, 1); }
  92.69% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.034, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.034, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@keyframes animation { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.6% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 19.97, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 19.97, 0, 1); }
  5.11% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 26.021, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 26.021, 0, 1); }
  8.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 18.49, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 18.49, 0, 1); }
  11.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.54, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.54, 0, 1); }
  14.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -6.437, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -6.437, 0, 1); }
  17.62% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.063, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.063, 0, 1); }
  20.82% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.131, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.131, 0, 1); }
  23.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.735, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.735, 0, 1); }
  27.03% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.501, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.501, 0, 1); }
  30.13% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.892, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.892, 0, 1); }
  36.44% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.663, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.663, 0, 1); }
  42.64% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.505, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.505, 0, 1); }
  55.16% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.582, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.582, 0, 1); }
  67.67% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.225, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.225, 0, 1); }
  80.18% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.087, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.087, 0, 1); }
  92.69% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.034, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.034, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}