/***** banner *****/
.banner 							{ position: relative; width:100%; background:#000000; z-index:20; padding-top: 140px;}
.banner .chapo                      { font: 500 20px/30px "Barlow";}
.banner::before                     {content: ""; background-color: #fff; width: 100%; height: 135px; position: absolute; bottom: 0; left: 0; border-top: 10px solid #16c1f3; z-index: -1;}
.banner::after                      { content: ""; background-color: #000; width: 100%; height: 150px; position: absolute; top: -150px; left: 0; z-index: -1;}
.banner .wrapper                    { position:relative;}
.banner .content					{ position: relative; color: #fff;}
.banner .content .titre_main		{ color: #fff; font-size: 45px; line-height: 55px; margin-bottom: 20px; position: relative;}
.banner_texte                       { display: grid;  padding-top: 125px; height: 100%;}
.banner_two                         { display: grid; grid-template-columns: 520px auto; gap: 100px;}
.arrownav_next                      { position: absolute; background: url(../images/next.svg) no-repeat center #000; width: 60px; height: 60px; right: 0; top: 50%; z-index: 50; transform: translateY(-50%); cursor: pointer; }
.banner_slide                       { position: relative;}
.banner_slide .item                 { max-width: 360px; height: auto; position: relative;  transition: all ease-in-out;  top: 0;}
.banner_slide .item video           { width: 100%; object-fit: cover; border: 10px solid #000;}
.video1:after                       { content: url(../images/lunette.svg); position: absolute; top: 160px; left: -20px; transform: rotate(-20deg); filter: drop-shadow(3px 5px 0 rgba(0,0,0,0.4)) }
.video1::before                     { content: url(../images/peace.svg); position: absolute; bottom: 40px; right: 100px; filter: drop-shadow(3px 5px 0 rgba(0,0,0,0.4))}
.video2                             { margin-top: 60px;}
.video2:after                       { content: url(../images/skate.svg); position: absolute; left: -40px; top: -50px; transform: rotate(-20deg); filter: drop-shadow(3px 5px 0 rgba(0,0,0,0.4))}
.video3::after                      { content: url(../images/slash.svg); position: absolute; bottom: 25px; left: 50px; width: 60px; filter: drop-shadow(3px 5px 0 rgba(0,0,0,0.4))}
.banner_grid                        { width: 1165px; padding-left: 30px;} 

@media (max-width:1700px) {

}
@media (min-width:1201px) { 
.banner .content .link:hover		{ color: #1f1f1f;}
}
@media (max-width:1200px) { 
.banner_two                         { grid-template-columns: 420px auto; gap: 60px;}
.banner_texte                       { padding-top: 110px;}
.banner .content .titre_main        { font-size: 35px; line-height: 45px;}
}
@media (max-width:1000px) {
.banner                             { margin-bottom: 50px;}
.banner .wrapper                    { max-width: 100%; width: 100%;}
.banner_two                         { grid-template-columns: 1fr;}
.banner_grid                        { width: 1165px; padding-left: 0; position: relative; left: 50%; margin-left: -537px; align-items: center; height: 600px;}
.banner_grid .swiper-wrapper        { align-items: center;}
.video2                             { margin-top: 0;}
.banner_texte                       { order: 2; text-align: center; padding: 0;}
.banner_slide .item::before,
.banner_slide .item::after          { display: none;}
.banner_slide .item                 { height: 400px; transition: all ease-in-out 200ms;}
.banner_slide .item video           { transition: all ease-in-out 200ms; height: 100%;}
.banner_slide .item.swiper-slide-next    { height: 600px;}
.banner .arrownavwrap               { display: none;}
.banner::before                     { height: 50%;}
.banner .content .titre_main        { color: #000000; max-width: 600px; margin: 0 auto; padding: 0;}
.banner .content .titre_main br     { display: none;}
.banner .content .titre_main:after  { display: none;}
.banner .chapo                      {display: none;}
}
@media (max-width:600px) {
.banner                             { padding-top: 120px; margin-bottom: 30px;}
.banner_two                         { gap: 30px;}
.banner .content .titre_main        { font-size: 25px; line-height: 35px; max-width: 400px;}
.banner_grid                        { width: 960px; margin-left: -530px; height: 530px;}
.banner_slide .item video           { border-width: 5px;}
.banner_slide .item                 { height: 300px;}
.banner_slide .item.swiper-slide-next{ max-width: 300px; height: 530px;}
}



.equipement                         { gap: 100px;}
.equipement .link                   { margin-top: 40px;}
.equipement .texte                  { max-width: 560px;}
.notice                             { position: relative; padding: 20px 50px; color: #1f1f1f; background-color: #f1f1f1; text-align: center; margin-top: 30px;}

@media (max-width:1200px) {
.equipement                         { gap: 30px;}
}

.partenaires                        { margin: 100px -100px 140px;}
.partenaires img                    { display: block; width: 100%; object-fit: cover;}

@media (max-width:1000px) {
.partenaires                        { margin: 60px -50px;}
}

/***** types *****/
.link-moins,.link-plus              { cursor:pointer; color: #16c1f3; border-bottom: 1px solid transparent;}
.textMore                           { display: none;}
.types                              { position: relative; margin: 30px 0 60px; }
.types .bkg                         { max-width: 2600px; width: 100%; height: 905px; transform: skewY(-20deg); border-top: 10px solid #16c1f3;  border-bottom: 10px solid #16c1f3; position: absolute; top: 475px; left: 0; right: 0; margin: auto; overflow: hidden;}
.types .bkg img                     { transform: skewY(20deg); position: absolute; top: 0; left: 0; transform-origin: right; object-fit: cover;}
.types .bkg .img_mob                { display: none;}
.shape                              { position: relative;}
.shape::after                       { content: ""; position: absolute; width: 100%; height: 100%; background: #fff;}
.types_grid                         { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;}
.types_texte                        { grid-column: 1 / -1; width: calc(50% - 40px);}
.types_grid .item                   { border: 10px solid #000000; position: relative;}
.types_grid>div:nth-of-type(3),
.types_grid>div:nth-of-type(5)      { margin-top: -185px;}
.types_grid .item img               { display: block; width: 100%; object-fit: cover;}
.types_grid .item .content          { position: absolute; left: 0; top: 0; background-color:rgba(0,0,0,0.8); color: #fff; width: 100%; height: 100%; padding: 50px 70px 140px; display: grid; align-items: center; opacity: 0; transition: all ease-in-out 400ms;}
.types_grid .item .link             { position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; padding:0 10px; font-size: 45px; line-height: 60px; height: 60px; width: max-content; background-image: linear-gradient(to top, #000000 0%, #000000 50%, #16c1f3 50%, #16c1f3 100%);}
.types_grid .info .titre_main       { font-size: 30px; line-height: 40px; padding-bottom: 0;}
.types_grid .info .titre_main::after{ display: none;}
.types_grid .info                   { text-align: center; grid-column: 1 / -1; width: 50%; margin-left: auto; margin-top: -165px;}
.swiper-grid .item                  { border: 10px solid #000000; position: relative;} 

@media (min-width:1201px) {
.types .item:hover .content         { opacity: 1;}
.link-moins:hover,.link-plus:hover  { border-color: #16c1f3;}
}
@media (max-width:1200px) {
.types .bkg                         { top: 210px;}
.types_grid                         { gap: 40px;}
}
@media (max-width:1000px) {
.types .bkg                         { height: 600px; top: 300px;}
.types_grid                         { gap: 30px;}
.types_grid .item .link             { font-size: 30px; line-height: 45px; height: 45px;}
.types_grid .info .titre_main       { font-size: 25px; line-height: 25px;}
.types .bkg .img_mob                { display: block;}
.types .bkg .img_desktop            { display: none;}
}
@media (max-width:700px) {
.types_texte                        { display: none;}
.types_grid>div:nth-of-type(3),
.types_grid>div:nth-of-type(5)      { margin-top: 0;}
.types_grid                         { grid-template-columns: 1fr;}
.types_grid .info                   { margin-top: 30px; grid-column: auto; width: 100%;}
.types_grid .item                   { border-width: 5px; max-width: 400px; }
.types_grid>div:nth-of-type(3),
.types_grid>div:nth-of-type(5)      { display: grid; justify-self: end;}
.types_grid .item:nth-child(2)::after { content: ''; top: 130px; position: absolute; right: -60px; height: 65px; width: 90px; background: url(../images/lunette.svg) no-repeat center; background-size: contain;}
.types_grid .item:nth-child(3)::after { content:"" ; top: 70px; position: absolute; left: -80px; transform: rotate(-20deg); height: 115px; width: 100px; background: url(../images/skate.svg) no-repeat center; background-size: contain;}
.types_grid .item:nth-child(4)::after { content: ""; top: 115px; position: absolute; right: -40px; transform: rotate(5deg); height: 70px; width: 60px; background:  url(../images/peace.svg) no-repeat center; background-size: contain;}
.types_grid .item:nth-child(5)::after { content:'' ; top: 85px; position: absolute; left: -30px; height: 70px; width: 50px; background:  url(../images/slash.svg) no-repeat center; background-size: contain;}
.types .bkg                         { top: 120px; height: 1400px; }
.types .bkg img                     { height: 2000px;}
.types                              { margin: 30px 0;}
.info_img                           { display: none;}
.types_grid .item .link             { font-size: 25px; }
}

@media (max-width:500px) {
.types_grid .item                   { max-width: 300px;}
.types .bkg                         {  height: 1060px; }
.types .bkg img                     { height: 2200px;}
.types_grid                         { gap: 20px;}
.types_grid .info                   { margin-top: 20px;}
.types_grid .info img               { display: none;}
}



/***** moving photos *****/
.galerie                                {  margin: 50px 0 120px; text-align: center; position: relative; z-index: 2;}
.galerie .link                          { margin-top: 50px;}
.moving_gal 						    { width: 100%; font-size: 0; line-height: 0; letter-spacing: 0; text-align: left; position: relative;}
.moving_gal .row						{ width: 9000px; display: inline-block; vertical-align: middle; position: relative; z-index: 5;}
.moving_gal .row .item 					{ display: inline-block; vertical-align: middle; animation: sliding 60s linear infinite; }
.moving_gal .row .item img 				{  max-height: 400px; display: inline-block; vertical-align: middle; position: relative; transition: all 400ms ease-in-out; margin-left: 30px; object-fit: cover; border: 10px solid #000;}

@keyframes sliding {
0%										{ transform: translateX(0);}
100% 									{ transform: translateX(-100%);}
}

@media (max-width: 1000px){
.moving_gal .row .item img 				{ margin-left: 40px;}
}
@media (max-width: 600px){
.galerie                                { margin: 30px 0 60px;}
.moving_gal .row .item img 				{ margin-left: 20px; height: 300px; border-width: 5px;}
}


.cta                                    { display: block; text-align: center; font: 700 20px/30px "barlow"; text-transform: uppercase; margin: 90px 0 50px; }
.cta a                                  { color: #16c1f3;}
@media (max-width:1000px) {
.cta                                    { margin: 60px 0;}
}
@media (max-width:600px) {
.cta                                    { font-size: 15px; margin: 40px 0 30px;}
}
.apropos                                { display: grid; grid-template-columns: 50% 50%; gap: 80px; align-items: center; margin: 120px 0;}
.apropos .item                          { width: 600px; }
.apropos .item img                      { width: 100%; height: auto; border: 10px solid #000;}
.apropos .slider                        { position: relative; width: calc(50vw - 82px);}
.apropos .photo                         { position: relative;}
.apropos .photo::after                  { position: absolute; content: ""; width: 4000px; height: 100%; top: 120px; left: calc(100% - 260px); background: #000;}


@media (max-width:1000px) {
.apropos                                { grid-template-columns: 100%; margin: 60px 0; gap: 20px;}
.apropos .photo                         { grid-area: 1;}
.apropos .photo::after                  { display: none;}
.apropos .arrownav_next                 { display: none;}
.apropos .slider                        { width: 100%;}
.apropos .item                          { width: 100%;}
.apropos .item img                      { border: 5px solid #000;}
}


.services                           { position: relative; padding: 110px 0 120px; text-align: center;  color: #fff; border: 10px solid #16c1f3; border-inline: none; background: #000000;}
.services::before                   { content: ""; background: url(../images/bgk.webp) no-repeat center; background-size: cover; width: 100%; height: 100%; left: 0; top: 0; position: absolute; opacity: 0.3;}
.services .titre_main               { position: relative; color: #fff; padding-bottom: 0;}
.services .titre_main::after        { display: none;}
.services_grid                      { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin-top: 50px; gap: 30px;}
.services .text_content             { max-width: 900px; margin: 0 auto;}
.services_grid .stitre              { font:500 18px/25px "Barlow"; }
.services_grid .icn                 { height: 120px; display: grid; align-items: center; justify-content: center;}
.services_grid .item                { display: grid; gap: 15px;}

@media (max-width:1200px) {
.services_grid                      { gap: 15px; }
.services_grid .stitre              { font-size: 16px;}
}
@media (max-width:1000px) {
.services                           { padding: 60px 0;}
.services_grid                      { grid-template-columns: 1fr 1fr; gap: 30px; width: fit-content; margin: 50px auto 0;}

}
@media (max-width:600px) {
.services .titre_main               { display: none;}
.services .text_content             { display: none;}
.services                           { padding: 60px 0;}
.services .stitre                   { font-size: 15px; line-height: 25px;}
.services_grid                      { margin: 0; width: 100%;}
}