* { box-sizing:border-box; }

h1, h2, h3 { margin:0; padding:0 0 16px; font-size:48px; font-weight:700; }
h2 { font-size:32px; }
h3 { font-size:24px; }
p { margin:0; padding:0 0 16px; font-size:16px; line-height:21px; font-weight:400; }
a { text-decoration:none; }

/* Common */
*:after, *:before { display:block; content:''; position:absolute; }
.openMobileMenu, .closeMobileMenu, .mobileImg { display:none; }
img.rsp { width:100%; }
.ctaOpfeel { display:inline-block; text-decoration:none; font-size:16px; font-weight:400; text-align:center; padding:8px 24px; border-radius:8px 8px 8px 0; transform:skewX(-10deg); transition:all 0.3s ease-out; }
.ctaOpfeel span { transform:skewX(10deg); display:block; }
.row { display:block; position:relative; overflow:hidden; }
.rowInside { max-width:1180px; display:block; margin:0 auto; position:relative; }
.armor { display:block; padding:0 5%; margin:0 0 40px; }
#opfeel .spacer5, #opfeel .spacer3, #opfeel .spacer1 { width:5%; min-height:10px; }
#opfeel .spacer3 { width:3%; }
#opfeel .spacer1 { width:1%; }
.flexBox { display:flex; flex:1; align-items:center; position:relative; z-index:3; }
.flexTextBox { flex-direction:column; }
.flexImgBox, .flexTextBox { flex:1; }
.clearfloor, .separatorRange { width:100%; height:0px; display:block; position:relative; overflow:hidden; margin:0; padding:0; }
.alignRight { text-align:right; }
.paddingSize { padding-top:40px; }
.alignCenter { text-align:center; display:block; }
.marginSpace { margin:50px 0; }
.marginbottom { margin-bottom:32px; }
.paddingtop { padding-top:32px; }
.ctaOpfeel.Yellowcta { background:#FFEA28; color:#2A2A26; }
.ctaOpfeel.Yellowcta:hover { background:#FFCD20; }
.contentAware { max-width:700px; display:block; margin:0 auto; }

/* Header */
#headerOpfeel { transition:all 0.3s ease-out; position:fixed; top:0; left:0; z-index:10; width:100%; height:80px; background:linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); display:flex; align-items:center; }
.menuRight, .menuLeft { flex:1; padding-left:3%; }
.menuRight { padding-left:0; padding-right:3%; text-align:right; }
.myNav a { font-size:14px; color:#ffffff; padding:7px; display:inline-block; position:relative;	 }
.myNav a.eshop { color:#E7FB00; }
.myNav a:after { width:0%; bottom:-2px; left:50%; z-index:1; height:1px; transform:translateX(-50%); background:#ffffff; transition:all 0.2s ease-out; }
.myNav a.eshop:after { background:#E7FB00; }
.myNav a:hover:after { width:50%; }
.logoOpfeel { width:119px; height:40px; background:url('../img/opfeel-squash.png') 0 0 no-repeat; background-size:100%; }
#headerOpfeel .logoOpfeel { display:block; position:absolute; top:20px; left:50%; z-index:1; transform:translateX(-50%); }
.insideMobileMenu { display:flex; flex:1; }
#headerOpfeel.stickyHead { background:linear-gradient(to bottom right, rgba(6,32,48,1) 0%,rgba(3,16,25,1) 100%); box-shadow:0 2px 31px rgba(0,0,0,0.2); }

/* Footer */
#footerOpfeel { display:flex; align-items:center; position:relative; padding:20px 5% 5%; background:#2A2A26; }
.introFooter { display: block; width: 100%; clear: both; position: relative; padding: 10%; overflow: hidden; background: #ffffff; }
.introFooter:after { width: 60%; height: 250px; background:#E7FB00; top: 15%; right: -5%; z-index: 1; transform-origin: 100% 0px; transform: rotate(-10deg); }
.introFooter:before { width: 120%; height: 500px; background:#2A2A26; top: 0; left: -5%; z-index: 2; transform-origin: 0px 0px; transform: rotate(10deg); }
.logoDecathlon { width:100px; height:25px; display:block; background:url('../img/decathlon-logo.png') 0 0 no-repeat; background-size:100%; }
#footerOpfeel .myNav { flex:1; text-align:center; }

/* Index */
.teasing { display:block; position:relative; color:#ffffff; }
.teasing h1 { text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.teasing p { margin:0 auto; font-size:24px; line-height:28px; max-width:700px; }
.teasing img { z-index:1; }
.teasing .boxText {  position:absolute; top:54%; transform:translateY(-50%); left:0; z-index:2; text-align:center; width:100%; padding:0 20px; }
.teasing .ctaOpfeel { background:rgba(255,255,255,0.3); color:#ffffff; }
.teasing .ctaOpfeel:hover { background:#ffffff; color:#2A2A26; }
.spacer1, .spacer3, .cartridge { width:30%; float:left; display:inline; position:relative; }
.cartridge { background:#000000; transform-origin:0 0; border-radius:8px; padding:30px; transform:skewX(10deg); position:relative; z-index:5; overflow:hidden; }
.cartridge h2, .cartridge img { transform:skewX(-10deg); } .cartridge img { max-height:220px; width:auto; float:right; z-index:1; position:relative; }
.cartridge a, .cartridge h2 { color:#ffffff; } .cartridge h2 { font-style:italic; }
.cartridge h2 { position:absolute; display:block; width:75%; padding:0; top:20px; left:30px; z-index:3; } .cartridge h2 span { display:none; }
.cartridge h2:after { width:75%; height:2px; background:#ffffff; bottom:-8px; left:0; }
.cartridge:before { width:100%; height:100%; background:linear-gradient(to bottom right, rgba(0,130,195,1) 0%,rgba(0,64,97,1) 100%); z-index:2; left:0; top:0; opacity:0.25; filter:alpha(opacity=25); transition:all 0.3s ease-out; }
.cartridge:hover:before { opacity:0; filter:alpha(opacity=0); }
.racket { margin-top:-40px; }
.bags { margin-top:60px; }
.accessories { margin-top:20px; }
.blueBtn { background:#0082C3; color:#ffffff; }
.blueBtn:hover { background:#004061; color:#ffffff; }
.fatSize { font-size:48px; }
.flexImgBox img { margin:0 auto; display:block; max-width:85%; }
.rowReverse { flex-direction: row-reverse; }
.visu-pourquoi { max-width:493px; }
.visu-equipe { max-width:580px; }
.visu-camille { max-width:544px; }
.band1 { width:120%; height:85%; display:block; position:absolute; top:0; left:5%; z-index:1; background:#F5F5F6; border-radius:8px; transform-origin:0 100%; transform:skewX(-10deg); }
.band2 { width:25%; height:35%; display:block; position:absolute; bottom:-5%; left:-10%; z-index:2; background:#E9EBED; border-radius:8px; transform-origin:0 100%; transform:skewX(-10deg); }
.band3 { width:120%; height:50%; display:block; position:absolute; bottom:-10%; left:65%; z-index:1; background:#F5F5F6; border-radius:8px; transform-origin:0 100%; transform:skewX(-10deg); }
.band4 { width:120%; height:45%; display:block; position:absolute; top:20%; left:5%; z-index:1; background:#F5F5F6; border-radius:8px; transform-origin:0 100%; transform:skewX(-10deg); }
.band5 { width:65%; height:45%; display:block; position:absolute; top:20%; left:-5%; z-index:1; background:#F5F5F6; border-radius:8px; transform-origin:0 100%; transform:skewX(-10deg); }

/* gamme */
#selektor { padding:30px 0; }
#selektor .ctaOpfeel { margin:0 8px; }
.ctaOpfeel.selektor { border:1px solid #E9EBED; color:#6A6B6D; }
.ctaOpfeel.selektor:hover { background:#E9EBED; }
.ctaOpfeel.overselected { border:1px solid #ffffff; background:#E7FB00; color:#2A2A26; font-weight:700; }
.tplProduct { position:relative; color:#2A2A26; display:block; padding-top:380px; box-sizing:border-box; }
.tplProduct img { max-width:400px; display:block; margin:0 auto; position:absolute; top:0; left:50%; z-index:1; transform:translateX(-50%); }
.boxInfoProduct { transform:skewX(-10deg); border-radius:8px 8px 8px 0; background-color:#eeeeee; background:linear-gradient(to bottom right, rgba(245,245,245,1) 0%,rgba(240,240,240,1) 100%); display:block; position:relative; z-index:3; padding:30px; }
.shadowProduct { width:80%; height:20px; display:block; background:#2A2A2A; box-shadow:0 0 16px rgba(0,0,0,0.2); position:absolute; top:380px; left:10%; z-index:2; border-radius:80%; }
h2.titleProduct, .boxSpec, .priceProduct span  { transform:skewX(10deg); }
.priceProduct { border-radius:8px 8px 8px 0; transform:skewX(-10deg); background:#FFEA28; padding:7px 10px; display:inline-block; position:absolute; top:-14px; right:10%; z-index:2; font-size:12px; font-weight:700; }
.titleProduct { font-size:16px; line-height:19px; text-align:center; padding:0 0 20px; }
.boxSpec { display:block; max-width:80%; margin:0 auto; }
.labelColumn, .specColumn, .boxSpec p { width:75%; display:inline-block; float:left; font-size:12px; line-height:25px; color:#6A6B6D; }
.specColumn { width:25%; text-align:right; color:#2A2A26; }
.column3, .column2 { width:33.333%; float:left; display:inline-block; margin:0 0 20px; }
.column2 { width:50%; }
.armorColumn { padding:0 30px; }
.boxSpec p { width:100%; float:none; text-align:center; line-height:16px; }
.alignCenter.marginSpace .ctaOpfeel + .ctaOpfeel { margin-left:10px; }

/* EQUIPE OPFEEL */
.shoesopfeel { max-width:695px; }

/* Contact */
.encoreEmail { font-size:24px; font-weight:bold; color:#E7FB00; text-shadow:0 2px 31px rgba(231,251,0,0.7); }

/* Country */
.contentBOXCountry { position:absolute; top:50%; left:50%; z-index:2; transform:translateX(-50%) translateY(-50%); width:100%; display:block; max-width:700px; height:auto;
	box-sizing:border-box; text-align:center; background-color:#191919; background:rgba(0,0,0,0.48); border-radius:16px 0 16px 0; padding:24px; }
.teasing .contentBOXCountry h1, .teasing .contentBOXCountry p  { text-shadow:none; }
.teasing .contentBOXCountry h1 { font-size:32px; line-height:32px; margin:0 0 10px; }
.teasing .contentBOXCountry p { font-size:16px; line-height:20px; margin:0; }
a.ctaCountry { display:inline; float:left; width:33.333%; padding:12px; color:#ffffff; position:relative; }
a.ctaCountry:after { width:24px; height:1px; display:block; position:absolute; bottom:0; left:50%; z-index:1; transform:translateX(-50%); background:#777777; }
a.ctaCountry:hover { color:#E7FB00; } a.ctaCountry:hover:after { background:#E7FB00; }
.margeCountry { margin:0 0 10px; padding:10px 0 0; }

/* Responsive */
@media(max-width:1024px){
	.cartridge img { max-height:190px; }
	.column3 { width:50%; }
	.separatorRange { display:none; }
	.armorColumn { padding:0 20px; }
	#headerOpfeel .myNav a { font-size:13px; padding:7px 5px; }
}
@media(max-width:801px){
	.openMobileMenu, .closeMobileMenu { width:35px; height:35px; display:block; cursor:pointer; padding-top:9px; position:absolute; left:3%; top:10px; z-index:1; }
	.traitMenu { width:24px; height:2px; display:block; margin:3px auto; background:#ffffff; }
	.closeMobileMenu .traitMenu { transform:rotate(45deg); transform-origin:0px 0px; padding:0; margin:0 0 0 9px; }
	.closeMobileMenu .traitMenu.secondOne { transform:rotate(-45deg); transform-origin:100% 100%; margin:-2px 0 0 2px; }
	.insideMobileMenu { display:block; z-index:10; position:fixed; top:0; left:-100vw; overflow:hidden; width:100%; height:100vh; background:#2A2A26; padding:15vh 20px 0; transition:all 0.3s ease-out; }
	.insideMobileMenu .myNav { padding:0; text-align:center; display:block; }
	.insideMobileMenu .myNav a { text-align:center; display:block; padding:10px 0; }
	#headerOpfeel { height:60px; }
	#headerOpfeel .logoOpfeel { width:89px; height:30px; top:15px; }
	.insideMobileMenu:after { background:#E7FB00; width:120%; height:80px; transform-origin:100% 100%; transform:rotate(-10deg); bottom:0; left:-5%; }  
	.insideMobileMenu.openUp { left:0; }
	.mobileImg { display:block; }
	.teasing h1, .fatSize { font-size:32px; }
	.teasing p { font-size:16px; line-height:20px; }
	#footerOpfeel .logoOpfeel, #footerOpfeel .myNav, .logoDecathlon, #footerOpfeel { display:block; flex:inherit; }
	#footerOpfeel .logoOpfeel, .logoDecathlon, #footerOpfeel .myNav { margin:0 auto 15px; }
	.logoDecathlon { margin-bottom:0; width:55px; }
	#footerOpfeel .myNav a { display:block; text-align:center; }
	.cartridge { float:none; display:block; width:80%; margin:0 auto 20px; transform-origin:0 0; }
	.cartridge.racket { margin-top:-40px; }
	.cartridge img { max-height:inherit; max-width:25%; }
	.flexBox, .flexTextBox { flex-direction:column; text-align:center; }
	.flexImgBox img { max-width:55%; margin-bottom:20px; }
	.band3 { bottom:inherit; top:20%; left:10%; }

	.myNav a.eshop { color:#0082C3; }
	.myNav a:after, .desktopImg, .hideMobile, .band2 { display:none; }
	.column3, .column2 { width:100%; }
	.tplProduct img { max-width:200px; }
	.tplProduct { padding-top:190px; }
	.shadowProduct { top:190px; }
	.armorColumn { padding:0; }
	.boxSpec { max-width:90%; }
	.boxInfoProduct, h2.titleProduct, .boxSpec, .priceProduct span { transform:skewX(0deg); }
	.marginSpace { margin:25px 0; }
	#headerOpfeel .myNav a { font-size:14px; padding:7px; }
	.contentAware { width:100%; }
}

@media(max-width:480px){
	.band5 { left:-15%; }
	.encoreEmail { font-size:16px; }
	#selektor .filterTitle { display:block; text-align:center; margin:0 0 5px; }
	#selektor .ctaOpfeel { display:block; width:80%; margin:0 auto 5px; box-sizing:border-box; }
	#opfeel .teasing h1, .fatSize { font-size:24px; }
	.flexImgBox img { max-width:85% }
	.cartridge, .cartridge h2, .cartridge img { transform:skewX(0); }
	.cartridge { margin-bottom:10px; }
	.cartridge { width:100%; }
	.smoothy { margin-bottom:16px; }
	.boxInfoProduct { padding:20px; }
}