/* CSS by Manu LECHAT https://e-lechat.com */ @font-face { font-family: "EuclidSquare"; src: url("../fonts/EuclidSquare/EuclidSquare-Regular.ttf") format('truetype'); } /* @font-face { font-family: "EuclidSquare"; src: url("../fonts/EuclidSquare/EuclidSquare-Light.ttf") format('truetype'); } */ @font-face { font-family: "EuclidSquare-Medium"; src: url("../fonts/EuclidSquare/EuclidSquare-Medium.ttf") format('truetype'); } @font-face { font-family: "RozhaOne"; src: url("../fonts/RozhaOne/RozhaOne-Regular.ttf") format('truetype'); } /* /^^ /^^ /^^ /^ /^^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^/^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^ /^^ */ :root { --font_title: "RozhaOne"; --font_txt: "EuclidSquare"; --color_txt:#424242; --color_alt:#f8b002; --content_max: 1600px; --gutter_v: 45px; --gutter_h: 45px; --grid_unit:6vh; /* --fontSize_unit: calc( var(--grid_unit) * 0.1); */ --fontSize_unit: 0.4vw; } @media screen and (max-aspect-ratio: 4/3) { /* ecran + 4/3 -> grid_unit calcule sur VW */ #app{ height: 75vw; width: 100vw; transform:translate3d(0, -50%,0);top: 50%; } :root { --grid_unit: 5vw; } } @media screen and (max-aspect-ratio: 3/4) { /* ecran + vertical / grid_unit calcule sur VW */ #app{ height: 75vw; width: 100vw; transform:translate3d(0, -50%,0);top: 50%; } :root { --grid_unit: 10vw; } } /*basics */ *, *:before, *:after { box-sizing: border-box; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html{ height: 100vh; width:100vw; margin: 0;} body{ font-family: var(--font_txt); font-size: calc( var(--fontSize_unit) * 2.4); color:var(--color_txt); min-height: 100vh; width:100%; font-weight: 300; top:0; overflow-y: auto; overflow-x: hidden;margin:0;font-weight:400;letter-spacing: 0.03em; line-height:1.5; color:#000; text-align:left; background-color:#fff} body.ShowNav{ overflow: hidden; height: 100vh; } img{ max-width: 100%; height: auto; display: block; margin: 0 auto; object-fit: cover; } ul{ margin: 0; display: block; text-align: left; padding: 0; } li{ position: relative; margin: 0.2em 0; list-style: none; min-height:1.6em; padding-left: 24px; background-repeat: no-repeat; background-size: 16px; background-position: 0 3px; padding-bottom: 10px; } ::selection { background:rgba(0,0,0,0.07) } div, section, figure{ box-sizing: border-box; position: relative; display: block; } header, footer, main{ width: 100%; display: block; position: relative;} section{ width: 100%; display: block; position: relative; overflow-x: hidden; z-index: 2} /* font-style */ h1, h2, h3, h4, h5{ color:var(--color_txt); display:block; font-weight: 200; padding-bottom: 0.6em; line-height: 1.26em; text-transform: uppercase; } p{ font-weight: initial; color:var(--color_txt); margin: 0; padding-bottom: 1.26em; line-height: 1.6em; font-weight: normal; margin: 0 auto; } a{ transition:all .17s ease-in-out;color:var(--color_txt); text-align: left; text-decoration: none; display: block; position: relative; } a:hover{ text-decoration: none; } p a { display: inline; } strong{ font-family: "EuclidSquare-Medium"; } em{ color: var(--color_alt); } /* titles */ .title_margin{ margin:0 0 0.3em 0; } .surtitre{ font-size:var(--font_size_m); letter-spacing: 0.1em; font-weight: bold; text-transform: uppercase; color: var(--color_alt); } .page_title{ font-size: calc( var(--fontSize_unit) * 2.4)!important; } .page_subtitle{ font-size: calc( var(--fontSize_unit) * 2.2)!important; } .txt_size_xs{ font-size: calc( var(--fontSize_unit) * 1.8)!important; } .txt_size_s{ font-size: calc( var(--fontSize_unit) * 2.2)!important; } .txt_size_m{ font-size: calc( var(--fontSize_unit) * 3)!important; } .txt_size_l{ font-size: calc( var(--fontSize_unit) * 5)!important; } .txt_size_xl{ font-size: calc( var(--fontSize_unit) * 7)!important; } .txt_size_xxl{ font-size: calc( var(--fontSize_unit) *14)!important; } .titre_paragraphe{ font-size: calc( var(--fontSize_unit) * 7); letter-spacing: 0.1em; text-align: center; text-transform: uppercase; } .titre_paragraphe em{ font-style: italic; } .title_yellow{ color: var(--color_alt); font-size: calc( var(--fontSize_unit) * 7); letter-spacing: 0.1em; text-transform: uppercase; } .title_grey{ color: #424242; font-size: calc( var(--fontSize_unit) * 7); letter-spacing: 0.1em; text-transform: uppercase; } .title_m_yellow{ color: var(--color_alt); font-size: calc( var(--fontSize_unit) * 5); letter-spacing: 0.1em; text-transform: uppercase; } .title_m_grey{ color: #939393; font-size: calc( var(--fontSize_unit) * 5); letter-spacing: 0.1em; text-transform: uppercase; } .title_yellow strong{ color:var(--color_txt); } .title_yellow em{ color:var(--color_txt); } .title_white{ color: white; font-size: calc( var(--fontSize_unit) * 7); letter-spacing: 0.1em; text-transform: uppercase; } .txt_s{ font-size:var(--font_size_s); } .color_alt { color: var(--color_alt); } .colored { color: var(--color_alt); } .maj{ text-transform: uppercase; } .center{ text-align: center; } .center p{ text-align: center; } .txt_white{ color: white; } .txt_jaune{ color: var(--color_alt); } .underline{ text-decoration: underline; } .bold{ font-family: "EuclidSquare-Medium"; } .rounded_button{ margin-top: var(--grid_unit); background-image: url('../images/arrow.png'); background-repeat: no-repeat; background-position: .7em .6em; background-size: 1em auto; text-transform: uppercase; transform: all .3s; font-family: "EuclidSquare-Medium"; border: 1px solid var(--color_txt); border-radius: 30px; padding: .5em 1.2em .5em 2em ; display: inline-block; font-size: calc( var(--fontSize_unit) * 2); } .rounded_button:hover{ background-image: url('../images/arrow_white.png'); background-color: var(--color_txt); color: white }; .grayscale{ filter: grayscale(1); } .padding_unit{ padding:var(--grid_unit) 0; } .screener{ width: 100vw; min-height:100vh; } .screener.bg_dark{ background: rgba(0,0,0,0.9); } .shadow{ filter: drop-shadow(0px 0px 30px rgba(0,0,0,0.3)); } .justify{ text-align: justify; } .nopad{ padding: 0; } .copyright{ position: absolute; bottom: 0em; right: 0em; font-size: calc( var(--fontSize_unit) * 2)!important; color: white; opacity: 0.8; filter: drop-shadow(0px 0px 30px rgba(0,0,0,0.3)); background: rgba(0,0,0,0.3); padding: 0.3em 1em; } /* layout */ .large_wrapper{ width: 100%; height: auto; display: table; } /* .page_fadeIn{ opacity: 0; animation: anim_page_fadeIn 1s cubic-bezier(0.17, 0.9, 0.46, 1) .2s 1 normal forwards} */ .row{ transition:opacity 1s; display: table; text-align: center; position: relative; max-width: 100%; width: 1140px; margin: 40px auto; padding: 0 } .display_size{width: 100vw; height: 100vh} .content_wrapper{ margin:0 auto; position: relative; padding-left: calc(var(--grid_unit) * 0.5) ; padding-right: calc(var(--grid_unit) * 0.5); max-width: var(--content_max); } .page_title_wrapper{ padding-bottom: var(--grid_unit); text-align: center; } .center{ text-align: center;} .middle{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) } .intro_page{ padding-top: calc( var(--grid_unit) ) ; padding-bottom: calc( var(--grid_unit) ) ; } .bg_colored{ background-color: var(--color_alt); } .bg_dark{ background-color: #1e1e1e; } .bg_white{ background-color: #fff; } .bg_colored strong { font-family: "EuclidSquare-Medium"; color: var(--color_txt); } .txt_page{ padding-top: calc( var(--grid_unit) ); padding-bottom: calc( var(--grid_unit) ) ; } .txt_page p{ padding-bottom: 1em; } .txt_page h1{ font-size: calc( var(--fontSize_unit) * 7); color:var(--color_alt); text-transform: uppercase; } .txt_page h2, .txt_page h3{ font-family: "EuclidSquare-Medium"; font-size: calc( var(--fontSize_unit) * 3); color:var(--color_txt); text-transform: uppercase; } .txt_page li{ margin: 0; padding-left: 1em; } .txt_page li::before{ background-color: var(--color_alt); border-radius: 100%; content: ''; width: .5em ; height: .5em; position: absolute; left: 0; top:0.5em;} .txt_page em{ font-size: 2em; color: var(--color_alt); } .txt_page strong{ font-family: "EuclidSquare-Medium"; } .grecaptcha-badge{ display: none; } /* nav */ .menu{ transition: .5s cubic-bezier(.77,0,.83,.67) 0.2s ; opacity: 0; transform: translate3d(50%, 0, 0); z-index: -11; width:100vw; height:100vh; background: rgba(0,0,0,0.9); position: fixed; top: 0vw; left: 0; background-size: cover; background-position: center; } .ShowNav .menu{ transition: .5s cubic-bezier(0.33, 0.8, 0.4, 0.98) 0s ; z-index: 100; transform: translate3d(0,0,0); opacity:1} .menu a{ padding: 0.2em; max-width: 90%; margin: 0 auto; } .menu .alist{ transition: all .3s cubic-bezier(.77,0,.83,.67) 0s; opacity:0; display: flex; flex-direction: column; justify-content: center; position: fixed; width:100vw; height:100vh; margin:0 auto } .ShowNav .menu .alist{ opacity: 1; transition: 1.3s cubic-bezier(0.33, 0.8, 0.4, 0.98) 0.3s ; } .menu .homelink{ width: 4em; padding: 0.5em; } .menu a.link{ font-size: calc( var(--fontSize_unit) * 8); text-transform: uppercase; color:white; transition: all .7s ease-in-out; font-family: var(--font_title); letter-spacing: 0.04em;; line-height: 1.5em; display: block; } .menu a.link:hover { color: var(--color_alt); transition: all .07s ease-in-out; } .menu a.link.active { color: var(--color_alt); transition: all .07s ease-in-out; } /* burger_bt */ .burger_bt { filter: drop-shadow(0px 0px 30px rgba(0,0,0,0.3)); transition: all .3s; position: fixed; display: block; width: var(--grid_unit); height: var(--grid_unit); top: var(--grid_unit); background: white; border-radius: 100%; left: calc( 100vw - var(--grid_unit) - var(--grid_unit) ); z-index: 1001; } .burger_bt .hidden{ transform: scale(0);} .burger_bt .lines{ position: absolute; transition: all .2s ease-in-out; width:40%; height: 35%; top:50%; left: 50%; transform: translate3D(-50%, -50%, 0); } .burger_bt span{ background: var(--color_alt);; transition: all .3s ; position: absolute; width: 100%; left:0;height: 2px; border-radius: 2px; } .burger_bt .line1{ top: 0 } .burger_bt .line2{ top: 50% } .burger_bt .line3{ top: 100% } .ShowNav .burger_bt .line1{ top: 50%; left:0px; transform: rotate(45deg) ; } .ShowNav .burger_bt .line2{ width:0px; left:50% } .ShowNav .burger_bt .line3{ top: 50%; left:0px; transform: rotate(-45deg); } .ShowNav .lines{ transform: translate3D(-50%, -50%, 0) rotate(-90deg); } .ShowNav .burger_bt{ background: white; } .ShowNav .burger_bt span{ background: var(--color_alt);; } /* goback */ .goback { opacity: 0; transition: all .5s; position: fixed; width: var(--grid_unit); height: var(--grid_unit); top: var(--grid_unit); background-color: #ffffff; border-radius: 100%; left: calc( 100vw - var(--grid_unit) - var(--grid_unit) ); z-index: 1002; } .goback .lines{ position: absolute; width:40%; height: 35%; top:50%; left: 50%; transform: translate3D(-50%, -50%, 0); } .goback span{ background: var(--color_alt);; transition: all .3s ; position: absolute; width: 100%; left:0;height: 2px; border-radius: 2px; } .goback .line1{ top: 50%; left:0px; transform: rotate(45deg) ; } .goback .line2{ top: 50%; left:0px; transform: rotate(-45deg); } .media .goback { opacity: 1; } /* cover_wrapper */ .cover_wrapper{ top: 0; z-index: -1; width: 100vw; height: 100vh; overflow: hidden; position: absolute; } .cover_img_container { width: 100vw; height: 100vh; } .cover_img_container img{ width: 100%; height: 100%; } .cover_title.dark{ top: 0; z-index: 2; position: relative; width: 90%; margin: 0 auto; padding-bottom: calc( var(--grid_unit) * 2 ); padding-top: calc( var(--grid_unit) * 2 ); left: 0; display: flex; flex-direction: column; justify-content: center; } .cover_img_container.dark{ background-color: #1e1e1e; background: black; } .cover_img_container.dark img{ opacity: 0.5; filter: grayscale(1); } .limit_height{ height:50vh!important; } .limit_height .cover_img_container{ height: 50vh!important; } .cover_title{ top: 0; z-index: 1; ; } .cover_title.screen_size{ width: 100vw; height: 100vh; } .cover_title .title_top_right{ max-width: 45%; color:#1e1e1e; position: absolute; top: calc( var(--grid_unit) * 2 ) ; right: calc( var(--grid_unit) * 2 ) ; padding:1em; text-align: right; font-family: var(--font_title); letter-spacing: 0.04em; line-height: .9em; } .cover_title .title_top_right span{ opacity: 0; top: 1.6em; animation-timing-function: cubic-bezier(.17,.67,.58,.99); animation-name: appear_cover_txt; animation-duration: 3s; animation-fill-mode: forwards; animation-direction: normal; animation-iteration-count: 1; display: inline-block; transform: translateY(1em); } .cover_title .title_top_right span:nth-child(1){ animation-delay : 0.2s } .cover_title .title_top_right span:nth-child(2){ animation-delay : 0.4s } .cover_title .title_top_right span:nth-child(3){ animation-delay : 0.6s } .cover_title .title_top_right span:nth-child(4){ animation-delay : 0.8s } .cover_title .title_top_right span:nth-child(5){ animation-delay : 1s } .cover_title .title_top_right span:nth-child(6){ animation-delay : 1.2s } .cover_title .title_top_right span:nth-child(7){ animation-delay : 1.4s } .cover_title .title_top_right span:nth-child(8){ animation-delay : 1.6s } .cover_title.dark .title{ padding-bottom: 0.5em; font-family: var(--font_title); color:white;  letter-spacing: 0.04em; line-height: 1em; text-align:center } .cover_title .appear_cover{ opacity: 0; transform:translate3D(0,10px,0); animation: appear_cover 1s cubic-bezier(0.17, 0.9, 0.46, 1) .4s 1 normal forwards } .cover_title .appear_cover2{ opacity: 0; transform:translate3D(0,10px,0); animation: appear_cover 1s cubic-bezier(0.17, 0.9, 0.46, 1) .8s 1 normal forwards } .cover_title_dark .intro{ width: 90%; } /* Barba */ #barba-wrapper{ position: relative; width: 100%; padding: 0; transition: all .17s ease-out ; } .barba-container{ position: relative; width: 100%; } .anim_out { overflow: hidden; } .barba-container{ transition: all .3s .3s; } .anim_out .barba-container{ opacity: 0; } /* .ShowNav #barba-wrapper{ height: 100vh; overflow: hidden; opacity: 0.5; } */ /* footer */ .zone_newsletter{ padding: var(--grid_unit); background-repeat: no-repeat; background-image: url('../images/zone_newsletter_bg.jpg'); background-size: cover; background-position: top; } .zone_newsletter .titre_paragraphe{ padding-bottom: 0; } .zone_newsletter input{ border-radius: 10px; background: none; } .zone_newsletter input::before{ content: ''; background: red; width: 100%; height: 100%; position: absolute; ; border-radius: 10px; } .footer{ background: black;padding: var(--grid_unit) 0 ; } .footer p{ color: white; padding-bottom: 0.5em; } .footer a{ color: white; transition: 0.3s ease-out;} .footer a:hover{ text-decoration: underline; color: var(--color_alt);} .footer .content_wrapper{ display: flex; justify-content: space-between; align-items:center } .footer .logo_benoit_navigue_pour_la_chaine_de_lespoir{ width:100px; float: left; margin-right: 20px; } .footer .col1 p{ display: inline-block; } .footer .footer_nav{ padding: 10px 0; } .footer .footer_nav a{ display: inline; font-size: 12px; margin: 0 5px;} .footer .footer_social_wrapper{ position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 0; width:170px; display: flex; justify-content: space-between; } .footer .footer_social_wrapper a{ width: 50px; height: 50px; transition: all .17s; } .footer .footer_social_wrapper a:hover{ transform:scale(1.1) } .footer .mention{ color: white; font-size: 12px; ; position: absolute; bottom: 0px; left: 50%; transform: translate(-50%, 0); padding: 20px 0; width:370px; text-align: center; } .footer .mention a{ color: white; display: inline-block; } .zone_newsletter .sib-form .input{ background: none; border: none; } .zone_newsletter .sib-form .input:before{ content: ''; display: block; background: white; border:2px solid black; position: absolute; top:0; left: 0; width: 100%; height: 100%; border-radius: 50px; } .zone_newsletter .sib-form .input{ border-radius: 20px!important; padding:5px 8px; height: auto; color: black!important;} .zone_newsletter .input_newsletter{ border-radius: 20px; } .zone_newsletter #sib-container{ background: none!important; padding: 0!important;} .zone_newsletter .zone_newsletter .sib-form { margin: 0 auto; padding: 0!important; width:350px!important; text-align: center; } .zone_newsletter #sib-container input:-ms-input-placeholder { text-align: left; color: black!important;} .zone_newsletter #sib-container input::placeholder { text-align: center;} .zone_newsletter #sib-container textarea::placeholder { text-align: center;} .zone_newsletter .sib-form{ background: none!important; } .sib-form-block{ padding: 0!important; } .zone_newsletter form{ background: white; border-radius: 45px; display: flex; width: 100%; height:45px; padding:0px!important; justify-content: space-between; } .zone_newsletter .button_wrapper{ width:35%!important; } .zone_newsletter .field_wrapper{ width:65%!important; } .zone_newsletter .sib-form .entry__field{ border: none; padding: 0.3em 1em; margin: 0; background: none; } .zone_newsletter .button_wrapper button{ width: 100%; background-color: #f9b000!important; text-align: center; height:45px; color: black!important; border-radius: 0 45px 45px 0!important; padding:8px 20px!important; font-weight: bold; margin: 0 auto!important; margin: 0 auto;} .zone_newsletter .flex_fields .mail_field{ width:65%!important; background: white; border-radius: 45px 0 0 45px!important; } .sib-form .input:first-child, .sib-form .input__affix:first-child{ background: none; } .sib-form .input:first-child, .sib-form .input__affix:first-child{ padding-left: 1em; } /* loader */ /* /^^^^ /^^^ /^ /^^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^^^^ /^^ /^^^^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^ /^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^ /^^^^ /^^^^ /^^^ /^^ /^^ /^^ */ .home .site_title{ color:#1e1e1e; position: absolute; left: 42%; top: 32%; font-family: var(--font_title); font-size: calc( var(--fontSize_unit) * 16)!important; } .home .site_subtitle{ position: absolute; left: 55%; top: 45%; font-size: calc( var(--fontSize_unit) * 5)!important; } .home .soleil_cde{ height: 100%; } .home .cols_cde { display: table; width: 100%; } .home .txt_maintenance{position: absolute; left: 55%; top: 52%; } .home .skipper { display: flex; flex-direction: row; justify-content: stretch;} .home .skipper .col_right{ display: flex; flex-direction: column; justify-content: center; width: 50%; padding: calc( var(--grid_unit) * 1) calc( var(--grid_unit) * 2); } .home .skipper .col_left{ width: 50%; height: 100%; height:calc( var(--grid_unit) * 12) } .home .skipper .col_left .slider1colonne{ width: 100%; height: 100%;; } .home .skipper .col_left img{ width: 100%; height: 100%; object-fit: cover; } .home .journaldebord { display: flex; flex-direction: row; justify-content: stretch;} .home .journaldebord .col_left{ display: flex; flex-direction: column; justify-content: center; width: 50%; padding: calc( var(--grid_unit) * 1) calc( var(--grid_unit) * 2); } .home .journaldebord .col_right{ width: 50%; height: 100%; height:calc( var(--grid_unit) * 12) } .home .journaldebord .col_right img{ width: 100%; height: 100%; } .home .cols_cde .logo_cde{ position: absolute; bottom: 0; left: 25%; transform: translateX(-50%); height:90% } .home .cols_cde .col_right{ display: block; width:50%; padding-top: calc( var(--grid_unit) * 1 ); padding-left: calc( var(--grid_unit) * 0.5 ) ; padding-bottom: calc( var(--grid_unit) - 1.2em ) ; padding-right: 0;; float: right;} .home .cols_cde .title_cde{ color:var(--color_txt); padding-left: 1.5em; background-image: url('../images/puce_cde.png'); background-repeat: no-repeat; background-position: 0 0; background-size: 1.2em auto; text-transform: uppercase; } .project .cols_cde { display: table; width: 100%; } .project .cols_cde .logo_cde{ position: absolute; bottom: 0; left: 25%; transform: translateX(-50%); width:36% } .project .cols_cde .col_right{ display: block; width:50%; padding: calc( var(--grid_unit) ) ; padding-bottom: calc( var(--grid_unit) - 1.2em ) ;float: right;} .project .cols_mid{ width:100% } .project .cols_mid::before{ content: ''; width:1px; height: 100%; position: absolute; left: 50%; display: block;} .project .cols_mid .col{ width:50% } .project .cols_mid .col.left{ padding-left: calc( var(--grid_unit) ); float: left; height: 100%; } .project .cols_mid .col.right{ padding: calc( var(--grid_unit) ) ; float: right;} .project .slider_courses{ padding:var(--grid_unit) 0; height: calc( var(--grid_unit) *5 ); } .project .slider_courses .swiper-slide{ padding: 0 40px; height: auto; display: flex; justify-content: space-between; flex-direction: row; }  .project .slider_courses{ width: 80%; margin: 0 auto; } .project .slider_courses .swiper-slide .flex_content_txt{ width:55%; } .project .slider_courses .swiper-wrapper{ height: auto; } .project .slider_courses .swiper-slide .separation{ position: absolute; left:-10px; top:10px; z-index: 2; display: block; background: #b2b2b2; width:1px; height: calc( 100% - 20px) } .project .slider_courses .swiper-slide .flex_content_img{ text-align: center; width:45%; } .project .slider_courses .swiper-slide .flex_content_img img{ padding:20px; width:100%; height: 100%; object-fit: contain; } .project .slider_courses .swiper-slide .flex_content_txt{ width:55%; text-align: left; display: flex; flex-direction: column; text-align: left; } .project .slider_courses .swiper-slide .flex_content_txt p{ text-align: center; } .project .swiper-slide-prev{ } .project .slider_courses .swiper-slide-active .separation{ display: none; } .legals{ padding-top: 120px; } .sponsors .logo_sponsors_screen{ width : calc( var(--grid_unit) * 3 ) ; margin-bottom: calc( var(--grid_unit) * 1 ); } .sponsors .sponsors_cols{ width: 90%; display: flex; justify-content: space-around; align-items: center; margin: calc( var(--grid_unit) * 2 ) 5% 0 5%; } .sponsors .sponsors_cols .logoSponsor{ max-height: calc( var(--grid_unit) * 2.5 ); max-width: 20%; } .sponsors .sponsors_cols .logo{ max-height: calc( var(--grid_unit) * 2.5 ); max-width: 100%; } .sponsors .cover_wrapper{ z-index: -1; } .sponsors_swiper{ width: 100%; background: white; height: calc( var(--grid_unit) * 12 ); } .sponsors_swiper .swiper-slide .left{ width: 50%; height: 100%; float: left; padding:calc( var(--grid_unit) * 3 ) } .sponsors_swiper .swiper-slide .right{ overflow: hidden; background: black; width: 50%; height: 100%; float: right; } .sponsors_swiper .swiper-slide .right .img_file{ transform: scale(1.1); transition: all 8s ease-out; opacity: 0.6; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .sponsors_swiper .swiper-slide .right .logo_img_file{ position: absolute; top: 50%;; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 40%; object-fit: contain; } .sponsors .partnrs{ background: #1e1e1e; padding:calc( var(--grid_unit) * 1 ) calc( var(--grid_unit) * 3 ) } .sponsors .partnrs .title_white{ padding-bottom: 0; } .sponsors .partnrs_cols{ width: 70%; display: flex; justify-content: center; flex-flow: row wrap; align-items: center; text-align: center; margin: calc( var(--grid_unit) * 1 ) 15% 0 15%; } .sponsors .partnrs_cols .logo{ max-height: calc( var(--grid_unit) * 2 ); display: inline-block; margin: 2em; max-width:calc( var(--grid_unit) * 2 ); } .sponsors .swiper-button-next{ transform: scale(0.8); bottom: calc( var(--grid_unit) * 1 ); top: auto; right: calc( var(--grid_unit) * 1 ); width: calc( var(--grid_unit) * 1 ); height: calc( var(--grid_unit) * 1 );} .sponsors .swiper-button-prev{ transform: scale(0.8); bottom: calc( var(--grid_unit) * 1 ); top: auto; left: calc( var(--grid_unit) * 1 ); width: calc( var(--grid_unit) * 1 ); height: calc( var(--grid_unit) * 1 );} .sponsors .swiper-button-next img, .sponsors .swiper-button-prev img{ width: calc( var(--grid_unit) * 1 ); height: calc( var(--grid_unit) * 1 ); } .sponsors .devenir_partenaire { padding:calc( var(--grid_unit) * 1 ); text-align: center; } .sponsors .devenir_partenaire .title_white{ line-height: 1.6em; } .sponsors .devenir_partenaire a{ color:black; text-align: center; text-decoration: none;} .sponsors .devenir_partenaire a:hover{ text-decoration: underline; } .swiper-button-next, .swiper-button-prev{ transform: scale(0.5); width: calc( var(--grid_unit) * 1 ); height: calc( var(--grid_unit) * 1 ); border-radius: 100%; border: 2px solid #555; } .swiper-pagination-bullet{ background: white; } .swiper-button-next:after, .swiper-button-prev:after{ transform: scale(0.5); } .sponsors_swiper .swiper-slide-active .right .img_file{ transform: scale(1); } .bg_dark .swiper-button-next, .bg_dark .swiper-button-prev{ border: 2px solid white; opacity: 0.5 } .bg_dark .swiper-button-next:hover, .bg_dark .swiper-button-prev:hover{ opacity: 1 } .actus .zone_actus{ background: white; ; padding:calc( var(--grid_unit) * 1 ) 0; } .actus .zone_actus .date{ margin-bottom: 0.8em; ; } .actus .zone_actus article{ padding: calc( var(--grid_unit) * 1 ) 0; border-bottom: 1px solid black; } .actus .zone_actus article p{ font-weight: lighter; margin: 3em 0; } .actus .zone_actus .content_wrapper{ max-width: calc(var(--content_max) * 0.75); } .actus .zone_actus .main_txt{ } .actus .video_container{ width: 100%; height: 565px; } .actus .video_container iframe{ width: 100%; height: 100%; } .actus .main_txt figure{ margin-bottom: 1em; } .actus .builder_images{ margin-bottom: 1em; } .actus .diaporama{ height: calc( var(--grid_unit) * 10); width:100% } .actus .diaporama img{ height: calc( var(--grid_unit) * 10); object-fit: conatain; } .actus .diaporama .bt_prev{ background: white; transform: scale(1.1); border:none } .actus .diaporama .bt_next{ background: white; transform: scale(1.1); border:none } .about .skipper_swiper{ height: calc( var(--grid_unit) * 7);; } .about .skipper_swiper .swiper-slide{ position: relative; width: 100%; height: 100%; } .about .skipper_swiper .swiper-slide .titre{ display: inline; opacity: 1; width: auto; padding:0.5em 1em; position: relative; top:0; left: 0; } .about .skipper_swiper .swiper-slide .titre h3{ margin-left: 1em; width: 0%; transition:all .6s .3s; position: relative; color:white; z-index: 12; display: inline; font-family: var(--font_title); } .about .skipper_swiper .swiper-slide-active .titre h3{ margin-left: 0; width: 100%; } .about .skipper_swiper .swiper-slide .titre::after{ z-index: 1; width: 0%; height: 110%; top:-15%; position: absolute; transition:all .6s .3s; background-color: var(--color_alt); content: ''; display: block; } .about .skipper_swiper .swiper-slide-active .titre:after{ width: 100%;} .about .skipper_swiper .swiper-slide .text{ opacity: 0; transition:all .6s .5s; width: 50%; padding: calc( var(--grid_unit) * 1); } .about .skipper_swiper .swiper-slide-active .text{ opacity: 1;} .about .skipper_swiper .swiper-button-prev{ left: 0; top: auto; position: absolute; transform: rotate(90deg) scale(0.6); bottom: calc( var(--grid_unit) * 1); right: auto; } .about .skipper_swiper .swiper-button-next{ left: 0; top: auto; position: absolute; transform: rotate(90deg) scale(0.6); bottom: 0; right: auto; } .about .skipper_swiper .img_container{ z-index: 11; opacity: 0; transform: scale(0); transition:all .3s .5s; position: absolute; right: calc( var(--grid_unit) * 2); top:0; width: calc( var(--grid_unit) * 5); height: calc( var(--grid_unit) * 5); border-radius: calc( var(--grid_unit) * 5); overflow: hidden; } .about .skipper_swiper .swiper-slide-active .img_container { opacity:1; transform: scale(1);; } .about .skipper_swiper .img_container img{ width: 100%; height: 100%; object-fit: cover; } .about .skipper_swiper .text::before{ display: block; width: 1em; height: 1em; position: absolute; top:0.5em; left:0.2em; content: "“"; color: var(--color_alt); font-size: 4em; } .about .skipper_swiper .text::after{ display: block; width: 1em; height: 1em; position: absolute; bottom: 0.5em; right:-.2em; content: " ”"; color: var(--color_alt); font-size: 4em; } .about .roue { position: absolute; top: 50%; right: 0; transform: translate(0%, -50%); overflow: hidden; width: calc( var(--grid_unit) * 5); height: calc( var(--grid_unit) * 10); } .about .roue img{transition:all .6s 0s; position: absolute; top:0; left:0; max-width: none; width: calc( var(--grid_unit) * 10); height: calc( var(--grid_unit) * 10);} .about .bio_roll_wrapper{ padding-left : calc( var(--grid_unit) * 3); padding-bottom : calc( var(--grid_unit) * 1); } .about .diaporama{ margin: calc( var(--grid_unit) * 1) auto;; width: calc( var(--grid_unit) * 20); height: calc( var(--grid_unit) * 12);} .about .diaporama .swiper-wrapper{ width: calc( var(--grid_unit) * 20); height: calc( var(--grid_unit) * 12);} .about .diaporama .swiper-container{ width: calc( var(--grid_unit) * 20); height: calc( var(--grid_unit) * 12); } .about .diaporama .swiper-slide{ width: calc( var(--grid_unit) * 20); height: calc( var(--grid_unit) * 12); } .about .diaporama .swiper-slide img{ width: 100%; height: 100% ; object-fit: contain;} .about .diaporama .description{ padding: 1em 2em; max-width:80%; display: inline-block; margin: auto; left: 50%; transform: translateX(-50%); text-align: center; color: aliceblue; position: absolute; top: 1em; background: rgba(0,0,0,0.6) ; } .about .slider_courses{ padding:var(--grid_unit); width: 100vw; ; } .about .slider_courses img{ width: calc( var(--grid_unit) * 2); height: calc( var(--grid_unit) * 2); object-fit: contain; } .about .slider_courses .swiper-slide{ display: flex; align-content: center; flex-direction: column; }  .medias .cover_title.dark{ min-height: 50vh; } .medias .media{ width: 50%; padding: calc( var(--grid_unit) * 0.5) } .medias .cover_wrapper{ position: fixed; top: 0; } .medias .media_title{ padding: 1em 0; } .medias .media_cover{ border:2px solid rgba(0,0,0,0) } .medias .media_cover:hover { border:2px solid var(--color_alt) } .medias .media.photos::after{ z-index: 2; background-image: url('../images/icon_photo.svg'); background-size: cover; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: var(--grid_unit) ; width: var(--grid_unit) ; } .medias .media.video::after{ z-index: 2; background-image: url('../images/icon_video.svg'); background-size: cover; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: var(--grid_unit) ; width: var(--grid_unit) ; } .medias .media_cover_wrapper{ padding: calc( var(--grid_unit) * 2); padding-left: calc( var(--grid_unit) * 4); padding-top:0; margin: 0 auto; display: flex; justify-content: space-between; flex-flow: row wrap; } .medias .media_cover_wrapper::before{ content: ''; position: absolute; bottom: calc( var(--grid_unit) * 0.5 ); width: 1px; height: calc( 100% - var(--grid_unit) * 1.5 ); background: white;; left: calc( var(--grid_unit) * 1.5); } .medias .media_cover_wrapper .title{ position: absolute; top: 0; left: calc( var(--grid_unit) * 1.5); transform: translateX(-50%); } .media .intro{ opacity: 0.75; padding: calc( var(--grid_unit) * 1); max-width:calc( var(--grid_unit) * 15); padding-right: calc( var(--grid_unit) * 3); } .media .cover_wrapper{ position: fixed; top: 0; } .media .diaporama{ margin: calc( var(--grid_unit) * 1) auto; margin-top: 0; width: 80vw; height: 60vw; } .media .diaporama .swiper-wrapper{ width: 80vw; height: 60vw; } .media .diaporama .swiper-container{ width: 80vw; height: 60vw; } .media .diaporama .swiper-slide{ width: 80vw; height: 60vw; } .media .diaporama .swiper-slide img{ padding: calc( var(--grid_unit) * 2); width: 100%; height: 100% ; object-fit: contain;} .media .diaporama .description{ padding: 1em 2em; display: inline-block; margin: auto; left: 50%; transform: translateX(-50%); text-align: center; color: aliceblue; position: absolute; bottom: calc( var(--grid_unit) * 1); opacity: 0.5; background: rgba(0,0,0,0.6) ; } .media .diaporama .swiper-container-horizontal>.swiper-pagination-bullets, .media .diaporama .swiper-pagination-custom, .media .diaporama .swiper-pagination-fraction{ bottom: 40px } .media .diaporama .swiper-button-next, .media .diaporama .swiper-button-prev{ transform: scale(0.9); transition:all .3s; } .media .diaporama .swiper-button-next:hover, .media .diaporama .swiper-button-prev:hover{ opacity: 0.8; } .media .video_container{ margin: calc( var(--grid_unit) * 1) auto; width: calc( var(--grid_unit) * 16); height: calc( var(--grid_unit) * 9); } .media .video_container iframe{ width: 100%; height: 100%; } .media .swiper-pagination{ opacity: 0.5; } .media .intro a{ text-decoration: underline; color: white; } .legals .txt_page{ max-width: 800px; margin: auto; } /* /^^ /^^ /^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^^ /^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^^ */ @media ( max-width: 1200px){ .footer { height: 400px;} .footer .footer_social_wrapper { top: 70%; } .footer .content_wrapper{ flex-direction: column; } } @media screen and (max-aspect-ratio: 3/4) { /* ecran + vertical / grid_unit calcule sur VW */ :root { --grid_unit: 10vw; --fontSize_unit: 0.75vw; --content_max : 100%; } body{ font-size: 12px; } .menu a.link{ font-size: 6vw; } .footer { height: auto; min-height: none; padding-bottom: 34vw;} .footer .footer_nav{ text-align: center; } .footer .footer_nav a{ margin: 5px; display: inline-block; opacity: 0.7;} .footer .mention a{ margin: 5px; display: inline-block; opacity: 0.7;} .footer .mention span{ margin: 5px; display: inline-block; opacity: 0.7;} .footer .logo_benoit_navigue_pour_la_chaine_de_lespoir{ width:20%; margin: 0 40% 1em 40%; } .footer .col1 p{ width: 100%; text-align: center; opacity: 0.7; } .footer .col1 a{ width: 100%; text-align: center; opacity: 0.7; } .content_wrapper { padding: 0 5%; overflow-x: hidden; } .txt_size_xxl { font-size: 5vw } .padding_unit { padding: var(--grid_unit) 0!important; } .txt_size_s{ font-size: 11px!important; } .txt_size_m{ font-size: 13px!important; } .rounded_button{ font-size: 10px!important; } .limit_height .cover_title.dark{ height: 50vh; padding: 0; } .zone_newsletter{ overflow-x: hidden; width:100%; padding: calc( var(--grid_unit) * 1 ) 0; } .cover_title{ height: 80vh; } .home .site_title{ top:19%;left: 38%; } .home .site_subtitle{ left:27%; top: 38%;} .home .skipper{ display: block; } .home .journaldebord{ display: block; } .home .skipper .col_right{ width: 100%; padding: var(--grid_unit); flex-direction: column; } .home .skipper .col_left{ width: 100%; height:80vw; } .home .journaldebord .col_right{ width: 100%; height: calc( var(--grid_unit) * 8); padding: calc( var(--grid_unit) * 1) } .home .journaldebord .col_left{ width: 100%; padding: calc( var(--grid_unit) * 1) } .home .cols_cde .col_right{ width: 100%; padding-bottom: 30vw; } .home .cols_cde .logo_cde{ left: 50%; height: auto; width: 33vw; } .home .cols_cde .col_left{ width: 100%; } .cover_title .appear_cover{ transform: translate3D(0,0,0); } .cover_title.dark{ display: flex; flex-direction: column; justify-content: center; } .cover_title { display: flex; flex-direction: column; justify-content: center; } .cover_title .title_top_right{ padding-bottom:4em; top: auto; right: auto; left: auto; width: 100%; position: relative; } .cover_title .appear_cover { opacity: 1; animation: none; transform: none } .sponsors .sponsors_cols{ flex-wrap: wrap ; width: 90%; margin: calc( var(--grid_unit) * 1 ) auto } .sponsors .sponsors_cols .logoSponsor{ max-width: 40%; margin: 2em 5%; } .sponsors_swiper .swiper-slide .left{ width: 100%; padding: calc( var(--grid_unit) * 1 ) 5%; height: auto; min-height: 100vw; ; } .sponsors_swiper .swiper-slide .right{ width: 100%; height: calc( var(--grid_unit) * 9 ); } .sponsors_swiper{ height: calc( var(--grid_unit) * 18 ); } .sponsors .partnrs{ padding: calc( var(--grid_unit) * 1 ) } .sponsors .partnrs_cols{ width: 100%; margin: var(--grid_unit) 0 0 0; } .sponsors .partnrs_cols .logo{ max-width: calc( var(--grid_unit) * 1.6 ); margin: 0.8em; max-height: calc( var(--grid_unit) * 1.6 ); } .about .bio_roll_wrapper{ padding: calc( var(--grid_unit) * 1 ) } .about .roue { top: 130vw; } .about .skipper_swiper .img_container{ top: 70vw; } .about .skipper_swiper .swiper-slide .text{ width: 90%; } .about .skipper_swiper{ height: 150vw } .about .diaporama{ width: 90vw; height: 60vw; margin:0; text-align: center;} .about .diaporama .swiper-container{ width: 100%; height: 60vw; margin:0} .about .diaporama .swiper-slide { width: 100%; height: 60vw; margin:0} .about .slider_courses{ padding: 0; } .legals { padding-top: 0 } .project .slider_courses{ padding: 0; height: 30vw; width: 100vw; margin: 0 0 4em 0; overflow: hidden; ;} .project .cols_cde .col_right{ width: 100%; padding-bottom: 40vw; } .project .cols_cde .logo_cde { left: 50% } .project .cols_mid .col{ width: 100%; } .project .slider_courses .swiper-slide .flex_content_img{ width:40%; height:40vw; object-fit: contain;} .project .slider_courses .swiper-slide .flex_content_img img{ margin : 0 auto; } .project .slider_courses .swiper-slide .flex_content_txt{ width:50%; justify-content: center;} .project .slider_courses .swiper-slide { padding: 0; } .project .slider_courses .swiper-slide .separation{ display: none; } .actus p{ font-size: 13px; } .actus .zone_actus .content_wrapper { max-width: var(--content_max) ; display: block; } .actus .diaporama { width: 100%; height:66vw; display: block; overflow: hidden; } .actus .diaporama .swiper-container{ width: 100%; height:66vw; display: block; overflow: hidden; } .actus .diaporama .swiper-container img{ width: 100%; height:66vw; object-fit: contain;} .actus .video_container{ width: 100%; height:66vw; } .actus .zone_actus article{ width: 90vw; font-size: 13px; } .actus .zone_actus{ padding:0; } .actus .zone_actus article{ overflow: hidden; padding-bottom: 40px; ; width: 90vw; } .medias .media_cover_wrapper{ display: block;padding: 3em 0 3em 0; margin-bottom: 3em; } .medias .media{ padding: 0; width: 100%; } .medias .media_cover_wrapper::before{ display: none; } .media .diaporama { width: 100vw;; height:110vw; margin-left: -5vw; } .media .diaporama .swiper-wrapper{ width: 100vw; height:110vw; } .media .diaporama .swiper-container{ width: 100vw; height:110vw; } .media .diaporama .swiper-slide{ width: 100vw; height:110vw; } .media .diaporama .swiper-slide img{ padding: 0 } .media .video_container{ width: 100vw; height:80vw; margin-left: -5vw; margin-top: 40vw; ; } .media .intro{ padding:5em 0; } } /* /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^ /^^^ /^^ /^^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^/^^ /^^^^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^^^^ /^^ /^^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^^ /^^ /^^^ /^^^ /^ /^^ /^^^^ /^^ /^^ /^^ */ @keyframes fadeOut{ to { opacity: 0; } } @keyframes fadeIn{ to { opacity: 1; } } @keyframes appear_cover{ to{ opacity: 1; transform:translate3D(0,0,0) } } @keyframes appear_cover_txt{ to{ opacity: 1; transform:translate3D(0,0,0) } }