:root{--light: #f8f9fa;--lighten: #e9e9e9;--dark: #1e1f36;--blue: #46d5ff;--orange: #DF744A;--jaune: #DCB239}html,body{font-family:open sans condensed;width:100%;height:100%;margin:0;color:#000}html,*{box-sizing:border-box}html{font-size:62.5%;font-size:calc(1em * 0.625);color:#000}a{text-decoration:none;color:#fff}body{font-size:1.6rem;background-color:var(--light)}.topnavbar{width:100%;background-color:var(--blue);position:fixed;top:0;right:0;left:0;z-index:5}.menu--main{margin:0;padding:0;display:flex}.menu--main li{display:inline;list-style:none}.menu--main li a{display:block;font-size:1.8rem;color:#fff;padding:10px;transition:.25s ease-in-out}.menu--main li a:hover{background-color:var(--orange)}.menu--main li a.active{background-color:var(--orange)}.container{max-width:100vw;padding:0 15px;margin:0 auto}@media(min-width:768px){.container{max-width:1200px}}@media(min-width:1367px){.container{max-width:1440px}}.intro{padding-top:50px;display:flex;flex-direction:column-reverse;flex:0 0 50%;max-height:100vh}@media(min-width:768px){.intro{padding-top:100px;padding-bottom:50px;flex-direction:row;height:auto}}.intro h1{font-size:4rem;font-weight:700;line-height:1;color:var(--dark)}.welcome_block,.welcome_picture{width:100%}@media(min-width:768px){.welcome_block,.welcome_picture{width:50%}}.welcome_picture img{max-width:100%}@media(min-width:768px){.welcome_block{padding-right:80px}}.welcome_block svg{width:50px;height:auto}.featured{display:flex;flex-direction:column-reverse;flex:0 0 100%;width:98%}@media(min-width:768px){.featured{flex-direction:row}}.featured_picture img{max-width:100%}.featured_block{width:98%;padding-top:30px;width:100%}@media(min-width:1025px){.featured_block{width:60%;padding:50px}}.featured--title{display:block;text-align:center}.featured--stats{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;flex-wrap:nowrap;z-index:2;font-family:open sans;font-weight:500;padding-bottom:15px}h2.title_section_featured,h2.title_section_videos{text-transform:uppercase;font-size:4rem;padding:20px;margin:-20px;line-height:1;background-color:var(--jaune);color:#fff}@media(min-width:1025px){h2.title_section_featured,h2.title_section_videos{font-size:7rem}}h2.title_section_featured{transform:rotate(2deg);text-align:center;margin-bottom:40px}@media(min-width:768px){h2.title_section_featured{text-align:right}}h2.title_section_videos{transform:rotate(-2deg);margin-bottom:50px;margin-top:50px;text-align:center;max-width:98%;margin-left:auto;margin-right:auto}.filters{width:100%;text-align:center;color:#000}.filters .sort{display:inline-block;padding-right:15px;padding-top:15px;padding-bottom:15px;cursor:pointer}.grid-wrapper{width:100%;display:flex;justify-content:center;margin-bottom:50px}.grid-container{width:100%;margin:auto;text-align:center}.grid-item{height:calc( (100vw * 9)/16);margin:5px 0;padding:0;color:#fff;text-shadow:#000 1px 0 20px;position:relative;display:inline-block;width:100%;overflow:hidden}@media(min-width:768px){.grid-item{width:300px}}@media(min-width:1201px){.grid-item{width:300px;height:170px}}.grid-item .grid-item-link{z-index:3;background-size:cover;background-repeat:no-repeat;background-position:center;height:100%;width:100%;display:block;transition:transform 3s ease}.grid-item .grid-item-link:hover{transform:scale(1.05)}.grid-item .grid-item--container{width:100%;height:100%;opacity:1;transition:opacity .25s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.grid-item .grid-item--container::before{position:absolute;content:'';background-color:rgba(0,0,0,.5);width:100%;height:100%}@media(min-width:768px){.grid-item .grid-item--container{opacity:0}}.grid-item:hover .grid-item--container{opacity:1}.grid-item--stats{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;z-index:2}.grid-item--title{z-index:2;font-size:2rem;line-height:1}.grid-item--likes,.grid-item--views{font-size:1.4rem;line-height:1;width:50%;text-align:center;display:flex;flex-wrap:nowrap;padding:0 25px}.grid-item--likes i,.grid-item--views i{padding-right:10px}.container--text{width:100%;padding:0;text-align:center;font-size:2rem;background-color:#48b379;padding:10px 10px 50px 50px}@media(min-width:768px){.container--text{padding:50px}}#timeline{list-style:none;margin:0;padding-left:30px;border-left:8px solid #fff;color:#fff;font-weight:500}@media(min-width:768px){#timeline{margin:50px 0 30px 120px}}#timeline li{margin:40px 0;position:relative}.date{margin-top:-10px;top:50%;left:-80px;font-size:.95em;line-height:20px;position:absolute}@media(min-width:768px){.date{left:-158px}}.circle{margin-top:-10px;top:50%;left:-44px;width:20px;height:20px;background:#df744a;border:2px solid #fff;border-radius:50%;display:block;position:absolute}.content{padding:20px;margin-right:0;border-color:#fff;border-width:2px;border-style:solid;border-radius:.5em;position:relative}@media(min-width:768px){.content{margin-right:20px}}.content:before,.content:after{content:"";width:0;height:0;border:solid transparent;position:absolute;pointer-events:none;right:100%}.content:before{border-right-color:inherit;border-width:20px;top:50%;margin-top:-20px}.content:after{border-right-color:#48b379;border-width:17px;top:50%;margin-top:-17px}.content p{text-align:justify;word-break:break-word;hyphens:auto;overflow:hidden}.footer{background-color:#46d5ff;padding:50px;display:flex;flex-direction:column;align-items:center;justify-content:center}.footer img{max-width:558px;width:100%;height:auto}.footer .credits{margin-top:30px;font-size:1.6rem}.footer .credits .love i{color:red;margin-left:2px;margin-right:2px}.header__main{background:url(/assets/channels4_banner.jpg) center center no-repeat;background-size:cover;height:100vh;display:flex;flex-direction:column;position:relative}@media(min-width:768px){.header__main{height:500px;flex-direction:row}}.header__main::before{position:absolute;content:'';width:100%;height:100%;background:rgba(0,0,0,.3)}.logo{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;position:relative}@media(min-width:768px){.logo{width:50%;align-items:flex-start}}.logo .total_views{margin-left:5%;font-size:1.4rem;color:#fff;z-index:2}.logo img{z-index:2;margin-left:5%}.amis{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:100%;position:relative;margin-right:5%}@media(min-width:768px){.amis{width:50%;justify-content:flex-end}}.amis a.amis--link{padding:0 10px}.amis i{color:#fff;font-size:4rem}.title__wrapper{width:90%;margin:0 auto}@media(min-width:768px){.title__wrapper{width:60%}}.title--main{text-align:center;font-family:exo,sans-serif;font-size:3.2rem;text-shadow:1px 1px 5px rgba(0,0,0,.5);color:#46d5ff;position:relative;line-height:1;padding:0;margin:0}@media(min-width:768px){.title--main{font-size:6.2rem}}@keyframes morph-1{0%{clip-path:polygon(93% 0,100% 84%,13% 100%,0 11%)}20%{clip-path:polygon(100% 6%,100% 91%,6% 100%,0 0)}40%{clip-path:polygon(100% 0,94% 100%,13% 100%,0 11%)}60%{clip-path:polygon(100% 0,100% 84%,3% 100%,0 15%)}80%{clip-path:polygon(100% 16%,94% 100%,3% 100%,0 0)}100%{clip-path:polygon(93% 0,100% 84%,13% 100%,0 11%)}}@keyframes morph-2{0%{clip-path:polygon(100% 6%,100% 91%,6% 100%,0 0)}20%{clip-path:polygon(100% 16%,94% 100%,3% 100%,0 0)}40%{clip-path:polygon(90% 0,100% 95%,0 100%,6% 0)}60%{clip-path:polygon(100% 0,89% 100%,0 100%,8% 4%)}80%{clip-path:polygon(100% 4%,89% 100%,4% 100%,0 1%)}100%{clip-path:polygon(100% 6%,100% 91%,6% 100%,0 0)}}@keyframes morph-3{0%{clip-path:polygon(100% 0,94% 100%,13% 100%,0 11%)}20%{clip-path:polygon(100% 4%,89% 100%,4% 100%,0 1%)}40%{clip-path:polygon(95% 0,100% 88%,0 100%,4% 9%)}60%{clip-path:polygon(100% 8%,96% 90%,6% 100%,0 0)}80%{clip-path:polygon(93% 0,100% 84%,13% 100%,0 11%)}100%{clip-path:polygon(100% 0,94% 100%,13% 100%,0 11%)}}@keyframes morph-4{0%{clip-path:polygon(100% 0,100% 84%,3% 100%,0 15%)}20%{clip-path:polygon(100% 8%,96% 90%,6% 100%,0 0)}40%{clip-path:polygon(95% 0,100% 88%,0 100%,4% 9%)}60%{clip-path:polygon(100% 4%,89% 100%,4% 100%,0 1%)}80%{clip-path:polygon(100% 0,89% 100%,0 100%,8% 4%)}100%{clip-path:polygon(100% 0,100% 84%,3% 100%,0 15%)}}@keyframes morph-5{0%{clip-path:polygon(100% 16%,94% 100%,3% 100%,0 0)}20%{clip-path:polygon(100% 0,89% 100%,0 100%,8% 4%)}40%{clip-path:polygon(90% 0,100% 95%,0 100%,6% 0)}60%{clip-path:polygon(100% 16%,94% 100%,3% 100%,0 0)}80%{clip-path:polygon(100% 0,100% 84%,3% 100%,0 15%)}100%{clip-path:polygon(100% 16%,94% 100%,3% 100%,0 0)}}@keyframes morph-6{0%{clip-path:polygon(90% 0,100% 95%,0 100%,6% 0)}20%{clip-path:polygon(100% 0,100% 84%,3% 100%,0 15%)}40%{clip-path:polygon(100% 0,94% 100%,13% 100%,0 11%)}60%{clip-path:polygon(100% 6%,100% 91%,6% 100%,0 0)}80%{clip-path:polygon(93% 0,100% 84%,13% 100%,0 11%)}100%{clip-path:polygon(90% 0,100% 95%,0 100%,6% 0)}}@keyframes morph-7{0%{clip-path:polygon(100% 0,89% 100%,0 100%,8% 4%)}20%{clip-path:polygon(100% 8%,96% 90%,6% 100%,0 0)}40%{clip-path:polygon(93% 0,100% 84%,13% 100%,0 11%)}60%{clip-path:polygon(95% 0,100% 88%,0 100%,4% 9%)}80%{clip-path:polygon(100% 6%,100% 91%,6% 100%,0 0)}100%{clip-path:polygon(100% 0,89% 100%,0 100%,8% 4%)}}@keyframes morph-8{0%{clip-path:polygon(100% 4%,89% 100%,4% 100%,0 1%)}20%{clip-path:polygon(100% 0,89% 100%,0 100%,8% 4%)}40%{clip-path:polygon(100% 0,94% 100%,13% 100%,0 11%)}60%{clip-path:polygon(90% 0,100% 95%,0 100%,6% 0)}80%{clip-path:polygon(100% 0,100% 84%,3% 100%,0 15%)}100%{clip-path:polygon(100% 4%,89% 100%,4% 100%,0 1%)}}@keyframes morph-9{0%{clip-path:polygon(95% 0,100% 88%,0 100%,4% 9%)}20%{clip-path:polygon(100% 4%,89% 100%,4% 100%,0 1%)}40%{clip-path:polygon(100% 0,100% 84%,3% 100%,0 15%)}60%{clip-path:polygon(100% 8%,96% 90%,6% 100%,0 0)}80%{clip-path:polygon(100% 0,89% 100%,0 100%,8% 4%)}100%{clip-path:polygon(95% 0,100% 88%,0 100%,4% 9%)}}@keyframes morph-10{0%{clip-path:polygon(100% 8%,96% 90%,6% 100%,0 0)}20%{clip-path:polygon(100% 16%,94% 100%,3% 100%,0 0)}40%{clip-path:polygon(100% 0,94% 100%,13% 100%,0 11%)}60%{clip-path:polygon(100% 4%,89% 100%,4% 100%,0 1%)}80%{clip-path:polygon(100% 16%,94% 100%,3% 100%,0 0)}100%{clip-path:polygon(100% 8%,96% 90%,6% 100%,0 0)}}.shape{position:relative;margin:auto}.shape::after{animation-duration:25s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.17,.67,.83,.67)}.shape::before{content:'';position:absolute;top:0;bottom:0;right:0;left:0;animation-name:morph-3;background:0 0;z-index:-1;box-shadow:10px 5px 5px rgba(0,0,0,.15)}.shape::after{content:'';position:absolute;top:50px;bottom:50px;right:50px;left:50px;animation-name:morph-10;background:rgba(0,0,0,.15);z-index:-1}