/*BODY*/
:root {--main:#132289;--main25:rgba(19,34,137,0.25);--red:#FF6472;--red25:rgba(255,100,114,0.25);--red10:rgba(255,100,114,0.10);--shadow:0 4px 0;--shadowtop:0 -4px 0;--noshadow:0 0 0;--blanc:#fff;--black:#222;--trans:rgba(255,255,255,0);--r20:20px;--t4:translateY(4px);--t-4:translateY(-4px);}
#ops {position:relative;width:100%;font-family:'Poppins',sans-serif;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.ops {width:100%;overflow:hidden;}
.ops section {position:relative;width:100%;overflow:hidden;}
.ops section > svg {width:100%;}
.ops img, .ops svg {display:block;width:100%;margin:0 auto;}
.ops svg path {fill:var(--main);}
.ops h2 {position:absolute;margin:0;font-weight:600;padding:20px;left:0;right:0;bottom:0;text-align:left;color:var(--blanc);}
.ops h3 {font-family:'Caveat',cursive;font-size:40px;line-height:44px;font-weight:700;margin:0 auto;}
.ops h4 {font-family:'Caveat',cursive;font-size:80px;line-height:88px;font-weight:700;margin:0 auto 20px;color:var(--main);}
.ops h5 {font-size:18px;line-height:26px;font-weight:400;}
.ops p {font-size:18px;line-height:26px;margin:0 auto;}
.ops b {font-weight:600;}
.ops a, .ops a:hover {text-decoration:none;}
/*ANIMATION*/
.ops a, .myanim, .myanim:before, .myanim:after, .ops-slider-bloc a:before {transition:.2s;-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
/*BRIGHTCOVE*/
.bc-iframe .vjs-playlist-sidebar .vjs-playlist-show-hide button:hover, .bc-player-B1AXyqmvl_default .vjs-big-play-button:active, .bc-player-B1AXyqmvl_default .vjs-big-play-button:focus, .bc-player-B1AXyqmvl_default .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected, .bc-player-B1AXyqmvl_default .vjs-play-progress, .bc-player-B1AXyqmvl_default .vjs-volume-level, .bc-player-B1AXyqmvl_default:active .vjs-big-play-button, .bc-player-B1AXyqmvl_default:hover .vjs-big-play-button {background-color:var(--red);}
/*SEPARATION*/
.ops-separation {max-width:776px;padding:0 10px;margin:40px auto;}
/*CHAPO*/
#ops-chapo {background-image:url('../img/header_bg.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;}
#ops-chapo > svg {z-index:10;position:absolute;left:0;right:0;bottom:-1px;width:100%;}
#ops-chapo > svg path {fill:var(--blanc)!important;}
.ops-chapo {display:table;float:right;width:50%;}
.ops-chapo-ct {z-index:5;position:relative;float:left;max-width:600px;margin:10% 0 20%;padding:0 20px;}
.ops-chapo-ct svg {max-width:470px;fill:var(--main);}
.ops-chapo-ct p {margin:40px auto 20px;}
.ops-chapo-ct img {display:inline;max-width:120px;}
#animation {position:absolute;top:0;left:0;width:50%;height:0;padding-bottom:50%;background-size:auto 100%;background-image: url('../img/animation.png');animation: anim 1s steps(50) infinite;-webkit-animation: anim 1s steps(50) infinite;}
@keyframes anim { from{ background-position: 0 0; } to{ background-position:5000% 0; } } @-webkit-keyframes anim { from{ background-position: 0 0; } to{ background-position:5000% 0; } }
    /*ANIM CHAPO RESPPONSIVE*/
    @media screen and (max-width:2560px) { #animation {width:30%;padding-bottom:30%;} }
    @media screen and (max-width:2100px) { #animation {width:32%;padding-bottom:32%;} }
    @media screen and (max-width:1920px) { #animation {width:35%;padding-bottom:35%;} }
    @media screen and (max-width:1800px) { #animation {width:38%;padding-bottom:38%;} }
    @media screen and (max-width:1600px) { #animation {width:40%;padding-bottom:40%;} }
    @media screen and (max-width:1400px) { #animation {width:42%;padding-bottom:42%;} }
    @media screen and (max-width:1280px) { #animation {width:45%;padding-bottom:45%;} }
    @media screen and (max-width:1160px) { #animation {width:49%;padding-bottom:49%;} }
    @media screen and (max-width:1024px) { #animation {width:53%;padding-bottom:53%;} }
    @media screen and (max-width:768px) { #animation {width:62%;padding-bottom:62%;} }
    @media screen and (max-width:560px) { #animation {position:relative;top:auto;left:auto;width:90%;padding-bottom:90%;} }
    
/*MENU*/
#ops-menu {z-index:10;margin-top:-8%;padding-top:4px;}
.ops-menu {display:table;max-width:1040px;margin:0 auto;}
.ops-menu-ct {position:relative;display:inline-table;max-width:260px;width:24.5%;}
.ops-menu-ct a {position:relative;display:block;margin:0 20px;}
.ops-menu-ct a:before {z-index:-1;content:'';background-color:var(--blanc);border:var(--main) 4px solid;position:absolute;top:20px;right:0;bottom:0;left:0;border-radius:var(--r20);-moz-border-radius:var(--r20);-webkit-border-radius:var(--r20);}
.ops-menu-ct a:hover {transform:var(--0.1);-moz-transform:var(--t-4);-webkit-transform:var(--t-4);}
.ops-menu-ct > img {max-width:220px;margin-top:-20px}
.ops-menu-ct svg {max-width:220px;}
/*MENU TOP*/
#ops-mtop {z-index:9999;position:fixed;top:0;left:0;right:0;background-color:var(--blanc);height:60px;box-shadow:var(--main25) var(--shadow);-moz-box-shadow:var(--main25) var(--shadow);-webkit-box-shadow:var(--main25) var(--shadow);}
#ops-mtop .ops-menu {max-width:initial;}
#ops-mtop .ops-menu-ct a:before {display:none;}
#ops-mtop .ops-menu-ct {max-width:initial;width:initial;}
#ops-mtop .ops-menu-ct svg, #ops-mtop .ops-menu-ct img {float:left;width:initial;max-width:initial;height:60px;}
#ops-mtop .ops-menu-ct a:hover {transform:translate(0);-moz-transform:translate(0);-webkit-transform:translate(0);}
#ops-mtop.mymove {top:-64px;}
#ops-mtop .ops-menu-ct:nth-of-type(5) {top:-5px;}
#ops-mtop .ops-menu-ct:nth-of-type(5) a svg {height:50px;}
#ops-mtop .ops-menu-ct:nth-of-type(5) a svg path {fill:var(--red);}
#ops-mtop .ops-menu-ct:nth-of-type(6) {top:-15px;}
#ops-mtop .ops-menu-ct:nth-of-type(6) img {height:30px;}
/*JE SUIS*/
.je-suis-illu {position:relative;max-width:1180px;margin:60px auto 30px;overflow:hidden;padding:0 20px;}
.je-suis-illu-vid {width:100%;padding-bottom:54.55%;}
.je-suis-illu-vid video {position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;outline:none;margin-bottom:-1px;}
.je-suis-illu-vid video:focus {outline:none;}
.je-suis-illu svg {z-index:5;position:absolute;max-width:32%;}
.je-suis-para {position:relative;max-width:580px;padding:0 20px;margin:0 auto;}
.je-suis-para h3 {color:var(--main);}
.je-suis-para p {margin:10px auto 0;}
.je-suis-art {max-width:1200px;margin:60px auto 20px;}
.je-suis-art-bloc {display:table;margin:0 auto;width:100%;}
.je-suis-art-ct {position:relative;display:inline-table;max-width:300px;width:24.5%;}
.je-suis-art-ct a {position:relative;display:block;overflow:hidden;margin:0 20px 40px;border-radius:var(--r20);-moz-border-radius:var(--r20);-webkit-border-radius:var(--r20);box-shadow:var(--main25) var(--shadow);-moz-box-shadow:var(--main25) var(--shadow);-webkit-box-shadow:var(--main25) var(--shadow);}
.je-suis-art-ct a:before {content:'';position:absolute;top:50%;right:0;bottom:0;left:0;background:var(--main);background:linear-gradient(0deg,var(--main) 0%,var(--trans) 100%);}
.je-suis-art-ct a:hover {transform:var(--t4);-moz-transform:var(--t4);-webkit-transform:var(--t4);box-shadow:var(--main25) var(--noshadow);-moz-box-shadow:var(--main25) var(--noshadow);-webkit-box-shadow:var(--main25) var(--noshadow);}
.je-suis-art-ct img {max-width:260px;}
.je-suis-art-ct h2 {font-size:18px;line-height:26px;}
.je-suis-saviez {position:relative;max-width:640px;padding:0 20px;margin:0 auto;}
.je-suis-saviez p {font-size:26px;line-height:36px;margin:0 auto 40px;}
.je-suis-saviez span {display:block;font-size:16px;line-height:24px;margin:20px auto 40px;}
.je-suis-saviez span a {color:var(--main);}
/*SLIDER*/
#ops-slider > svg path {fill:var(--red10);}
.ops-slider-global {background-color:var(--red10);padding:20px 0;}
.ops-slider-global h3 {color:var(--red);margin:0 auto 40px;}
.ops-slider {position:relative;max-width:1200px;margin:0 auto;overflow:hidden;padding:0;}
.ops-slider-over {overflow:hidden;}
.ops-slider-bloc a {display:block;padding:25px;}
.ops-slider-bloc img {position:relative;max-height:120px;width:initial;}
.ops-slider-bloc h5 {position:relative;margin:20px auto;color:var(--black);}
.ops-slider-bloc div {position:relative;font-weight:600;color:var(--main);}
.ops-slider-ct {display:table;padding-bottom:4px;position:relative;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;}
.ops-slider-ct > div {position:relative;width:33%;display:flex;}
.ops-slider-content {position:relative;margin:0 20px;}
.ops-slider-bloc a:before {content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:var(--blanc);border-radius:var(--r20);-moz-border-radius:var(--r20);-webkit-border-radius:var(--r20);box-shadow:var(--red25) var(--shadow);-moz-box-shadow:var(--red25) var(--shadow);-webkit-box-shadow:var(--red25) var(--shadow);}
.ops-slider-bloc a:hover {transform:var(--t4);-moz-transform:var(--t4);-webkit-transform:var(--t4);}
.ops-slider-bloc a:hover:before {box-shadow:var(--red25) var(--noshadow);-moz-box-shadow:var(--red25) var(--noshadow);-webkit-box-shadow:var(--red25) var(--noshadow);}
/*VIDEOS*/
#je-suis-comme-je-suis > svg path {fill:var(--red10);}
.ops-vid {background-color:var(--red10);}
.ops-vid-bloc {display:table;max-width:1200px;width:100%;padding:20px;margin:0 auto;}
.ops-vid-para {z-index:5;position:relative;display:table;width:100%;pointer-events:none;}
.ops-vid-para svg {float:left;max-width:700px;width:61%;}
.ops-vid-para p {max-width:280px;float:left;text-align:left;margin:50px 0 0 50px;}
.ops-vid-para > svg path {fill:var(--red);}
.ops-vid-ct {max-width:960px;width:100%;margin:-30px auto 0;overflow:hidden;border-radius:var(--r20);-moz-border-radius:var(--r20);-webkit-border-radius:var(--r20);box-shadow:var(--red25) var(--shadow);-moz-box-shadow:var(--red25) var(--shadow);-webkit-box-shadow:var(--red25) var(--shadow);}
.ops-vid-content {position:relative;width:100%;height:0;padding-bottom:56.25%;}
.ops-vid-content video-js {position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;}
.ops-vid-selec {display:table;margin:20px auto 0;}
.ops-vid-selec-ct {position:relative;max-width:100px;margin:0 10px;display:inline-table;overflow:hidden;border-radius:var(--r20);-moz-border-radius:var(--r20);-webkit-border-radius:var(--r20);}
.ops-vid-selec-ct.border:before {content:'';position:absolute;top:0;right:0;bottom:0;left:0;border:var(--red) 4px solid;border-radius:var(--r20);-moz-border-radius:var(--r20);-webkit-border-radius:var(--r20);pointer-events:none;}
/*FOOTER*/
.ops-footer {margin:20px auto;}
.ops-footer img {display:inline;max-width:120px;}
/*MOBILE*/
@media screen and (max-width:1180px) {
#ops-mtop .ops-menu-ct a {margin:0 10px;}
}
@media screen and (max-width:1024px) {
.ops-slider-over {overflow:initial;}
.ops-slider-over {overflow-x:auto;overflow-y:hidden;}
.ops-slider-ct {width:max-content;width:-webkit-max-content;width:-moz-max-content;max-width:initial!important;}
.ops-slider-ct > div {width: initial!important;max-width:40vw;}
#ops-mtop .ops-menu-ct svg {display:none;}
#ops-mtop .ops-menu-ct:nth-of-type(5) svg {display:block;}
#ops-mtop {top:auto;bottom:0;box-shadow:var(--main25) var(--shadowtop);-moz-box-shadow:var(--main25) var(--shadowtop);-webkit-box-shadow:var(--main25) var(--shadowtop);}
}
@media screen and (max-width:910px) {
.ops-vid-para svg {float:none;}
.ops-vid-para p {float:none;margin:20px auto;text-align:center;max-width:480px;}
.ops-vid-ct {margin:0 auto;}
}
@media screen and (max-width:860px) {
.je-suis-art {overflow-x:auto;overflow-y:hidden;}
.je-suis-art-bloc {width:max-content;width:-webkit-max-content;width:-moz-max-content;max-width:initial!important;}
.je-suis-art-ct {width: initial!important;max-width:85vw;}
#ops-menu {overflow-x:auto;overflow-y:hidden;}
.ops-menu {width:max-content;width:-webkit-max-content;width:-moz-max-content;max-width:initial!important;}
.ops-menu-ct {width: initial!important;max-width:35vw;}
}
@media screen and (max-width:600px) {
.ops-slider-ct > div {max-width:65vw;}
.ops-menu-ct {max-width:45vw;}
#ops-mtop .ops-menu-ct:nth-of-type(6) {display:none;}
}
@media screen and (max-width:560px) {
.ops-chapo {width:100%;float:none;}
.ops-chapo-ct {float:none;max-width:100%;margin:0 auto 20%;}
#ops-mtop .ops-menu-ct:nth-of-type(5) {display:none;}
}
@media screen and (max-width:480px) {
#ops-menu {margin-top: -12%;}
.ops h4 {font-size:56px;line-height:60px;}
.ops-separation {margin:0 auto;}
.ops-vid-para svg {width:100%;}
.ops-vid-selec-ct {width:90px;}
.ops-menu-ct {max-width:65vw;}
.ops-slider-ct > div {max-width:70vw;}
}
@media screen and (max-width:380px) {
.ops-vid-selec-ct {width:70px;}
#ops-mtop .ops-menu-ct a {margin:0 5px;}
}