/* ====== GLOBAL ====== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap');
* {box-sizing: border-box}
html,body {margin: 0;padding: 0;min-width: 320px;scroll-behavior: smooth;font-family: 'Raleway', sans-serif;background:#f4d7e2}
::selection {color: #151515;background: #6ec7b4}
a {text-decoration: none;transition: all 0.3s}
p.link {display: inline-block;font-size: 16px;text-transform: uppercase;padding-bottom: 10px;position: relative;color: #f9b2a2 !important;z-index: 9;margin-top: 40px}
p.link:before {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background-color: #f9b2a2;transition: all 0.4s ease-in-out}
p.link:hover:before {width: 0}
p {font-size: 19px;line-height: 1.8;margin: 0;padding: 0}
p.small {font-size: 17px;line-height: 1.7;margin: 0;padding: 0}
h1,h2,h3,h4,h5,h6 {margin: 0;padding: 0}
h2 {font-size: 22px;font-family: 'Baloo 2', cursive}
h3 {font-size: 40px}
h4 {font-size: 28px;line-height: 1.8}
h5 {font-size: 20px;letter-spacing: 0.5px;}
ul {list-style: none; margin: 0; padding: 0}
button {outline: none;border:none}
section.pad {padding: 12vh 0}
@media (max-width:1024px){}
@media (max-width:680px){
	h3 {font-size: 8vw}
	h4 {font-size: 6vw}
}
/* Titre */
.titre {text-align: center;margin-bottom: 50px}
/* ToTop */
#totop {position:fixed;background:#222;padding:15px 15px 10px 15px;bottom: 10px;right: 10px;z-index: 99;border-radius: 3px;cursor: pointer;transition: all 0.3s}
#totop:hover {background: #111;transition: all 0.3s}
#totop .arrow {border: solid #6ec7b4;border-width: 0 4px 4px 0;display: inline-block;padding: 4px;transform: rotate(-135deg);-webkit-transform: rotate(-135deg)}
/* Container */
.container {width: 1280px; margin: 0 auto}
.container-fluid {width: 90%; margin: 0 5%}
@media (max-width:1920px){}
@media (max-width:1680px){.container {width: 1124px;}}
@media (max-width:1440px){.container-fluid{width: 95%;margin: 0}}
@media (max-width:1366px){.container {width: 90%;margin: 0 auto}}
@media (max-width:1024px){.container {width: 95%}}

/* ====== MENU ====== */
#menu {position: fixed;height: 80px;width:100%;top: 0;background: #69b9a8;z-index: 99;transition: all 0.3s}
#menu img.logo {height: 40px;width: 156px;float: left;margin-top: 20px}
#menu nav {float: right}
#menu nav ul li {display: inline-block}
#menu nav ul li a {font-family: 'Baloo 2', cursive;font-size: 18px;font-weight: 600;padding: 28px 20px 22px 20px;display: block;color: rgba(0, 0, 0, .8)}
#menu nav ul li a:hover,#menu nav ul li a.active {color: #fff}
#menu nav ul li:last-child a {color: #fff}
#menu nav ul li a img {height: 20px;width: 20px;margin-right: 5px;}
.hamburger {display: none}
@media (max-width:1366px){#menu .container {width: 95%}#menu nav ul li a{padding: 28px 15px 22px 20px}}
@media (max-width:1024px){
	#menu .container {width: 90%}
	#menu nav {margin-top: 80px;float: none;position: absolute;right: 0}
	#menu nav ul li {display: block;background: #151515}
	#menu nav ul li a {padding: 18px 100px 18px 50px;color:#fff}
	#menu nav ul li a:hover,#menu nav ul li a.active {color: #6ec7b4}
	#menu nav ul li:not(:last-child) a {border-bottom: 1px solid #111}
	.hamburger {margin:12px 10px 0 0;padding:0 0 0 20px;position: absolute;right:0;top:0;display: inline;border: none;background: #69b9a8;}
	.hamburger-box {width: 55px;height: 53px;display: inline-block;position: relative;z-index: 99}
	.hamburger-inner {display: block;top: 50%}
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 33px;height: 3px;background-color: #fff;border-radius: 4px;position: absolute;transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease}
	.hamburger-inner::before, .hamburger-inner::after {content: "";display: block}
	.hamburger-inner::before {top: -10px}
	.hamburger-inner::after {bottom: -10px}
	.hamburger--arrow.is-active .hamburger-inner {transform: rotate(45deg) scale(1, 1)}
	.hamburger--arrow.is-active .hamburger-inner::before {opacity: 0;}
	.hamburger--arrow.is-active .hamburger-inner::after {transform: translate3d(0,-10px, 0) rotate(-90deg) scale(1, 1)}
	.hamburger-collapse {margin-right:-80% !important;margin-top: -80px;transition:all .2s;display: none;}
}

/* ====== HERO ====== */
.hero {display: flex;flex-direction: column;background: url("../img/hero.webp") no-repeat left center;height: 110vh;align-self: center;background-size: cover;background-attachment: fixed;align-items: center;justify-content: center}
.hero .container .content {text-align: center;display: block;float: right;transform: skewY(-5deg)}
.hero .container .content h1 {font-family: 'Baloo 2', cursive;letter-spacing: -3px;color:#222;line-height: 1.5;z-index: 1;position: relative}
.hero .container .content h1 span.bg-1 {background: #6ec7b4;color:#fff;font-size: 4vw;padding: 0 60px}
.hero .container .content h1 span.bg-2 {background: #f9b2a2;color:#fff;font-size: 3vw;padding: 0 80px}
.hero .container .content h2 {font-size: 1vw;background: rgba(255,255,255,1);color:#222;padding: 20px 30px;font-family: 'Baloo 2', cursive;font-weight: 400;z-index: 0;display: inline-block;}
@media (max-width:1680px){
	.hero .container .content h2 {font-size: 1.2vw;padding: 15px 25px}
}
@media (max-width:1366px){
	.hero {background: url("../img/hero-mini.webp") no-repeat left center;height: 100vh;background-size: cover;background-attachment: fixed}
	.hero .container .content {float: none;margin-left:50%;margin-top: 0px}
	.hero .container .content h1 span.bg-1 {font-size: 5vw}
	.hero .container .content h1 span.bg-2 {font-size: 4vw;padding: 0 80px}
	.hero .container .content h2 {font-size: 1.8vw;padding: 15px 25px;margin-top: 3px}
}
@media (max-width:1024px){
	.hero .container .content {float: none;text-align: center;margin: 0 auto}
	.hero .container .content h1 {line-height: 1.6}
	.hero .container .content h1 span.bg-1 {font-size: 3rem;background: rgba(110, 199, 180, .9)}
	.hero .container .content h1 span.bg-2 {font-size: 3rem;background: rgba(249, 178, 162, .9)}
	.hero .container .content h2 {font-size: 1.5rem;letter-spacing: -.5px;background: rgba(255,255,255,.9);padding: 12px 25px;margin-top: -1px}
}
@media (max-width:680px){
	.hero .container .content h1 {line-height: 1.65}
	.hero .container .content h1 span.bg-1 {font-size: 10vw;letter-spacing: -1px;padding: 0 40px}
	.hero .container .content h1 span.bg-2 {font-size: 8vw;letter-spacing: -1px;padding: 5px 40px}
	.hero .container .content h2 {font-size: 4vw;margin-top: 4px}
}

/* ====== DIGUET SPORT EVENT ====== */
#section1 {transform: skewY(-5deg);background: #f4d7e2;margin-top: -80px}
#section1 .container {transform: skewY(5deg)}
#section1 .container h3 {color: #000}
#section1 .container h4 {color:#fff;background: #6ec7b4;display: inline;padding: 0 10px}
#section1 .container p {opacity: .8;text-align: center;margin-bottom: 65px;color:#000}
#section1 ul {display: flex}
#section1 ul li {flex: 1}
#section1 ul li:nth-child(1) {padding: 30px 30px 30px 0}
#section1 ul li:nth-child(2) {padding: 30px}
#section1 ul li:nth-child(3) {padding: 30px 0 30px 30px}
#section1 ul li .content {padding: 50px 10px 60px 10px;height: 100%;border-radius: 0px;transform: skewY(-5deg);text-align: center;background: #fff}
#section1 ul li .content:hover {box-shadow: 2px 2px 15px #C2ABB4;transition: all 0.4s}
#section1 ul li .content img {width: 80px;height: 80px;transform: skewY(5deg);margin-bottom: 20px}
#section1 ul li .content h5 {color: #6ec7b4;line-height: 1.4;transform: skewY(5deg);margin-bottom: 15px}
#section1 ul li .content p.small {color: #000;padding: 0 10%;transform: skewY(5deg);opacity:.8;margin-bottom: 0}
@media (max-width:1440px){
   #section1 ul li:nth-child(1) {padding: 10px 10px 10px 20px}
   #section1 ul li:nth-child(2) {padding: 10px}
   #section1 ul li:nth-child(3) {padding: 10px 20px 10px 10px}
   #section1 ul li .content p {padding: 0 2%}
}
@media (max-width:1366px){
   #section1 p {padding: 20px 100px 40px 100px}
   #section1 ul li .content p.small {padding: 0 2%}
}
@media (max-width:1024px){   
   #section1 p {padding: 0px 5% 20px 5%}
   #section1 ul {display: block;text-align: center;margin-top: 0;}
   #section1 ul li {width: 90%;display: inline-block;margin-bottom: 20px;vertical-align: top}
   #section1 ul li .content {padding: 50px 10px 60px 10px}
   #section1 ul li .content h4 {font-size: .9rem}
   #section1 ul li:nth-child(1) {padding: 0}
   #section1 ul li:nth-child(2) {padding: 0}
   #section1 ul li:nth-child(3) {padding: 0}
}

/* ====== PHOTOBOOTH RING CIRCLE ======*/
#section2 {margin: 0px auto;transform: skewY(-5deg);background: #6ec7b4;}
#section2 .container {transform: skewY(5deg)}
#section2 .container .titre h3 {color:#151515}
#section2 .container .titre h4 {color:#6ec7b4;background: #fff;display: inline;padding: 0 10px}
#section2 .left {display: inline-block;width: 50%;vertical-align: top;margin-top: 0px}
#section2 .left h4 {margin-top: 10px}
#section2 .left p {margin-bottom: 28px}
#section2 .left ul {padding: 20px;list-style-type:disc}
#section2 .left ul li {margin: 0px 20px 5px 20px}
#section2 .left ul li {line-height: 1.8}
#section2 b {background: #fff;color:#6ec7b4;padding: 10px;margin-top: 50px;display: inline-block}
#section2 .right {display: inline-block;width: 45%;margin: 15px 0 0 5%;vertical-align: top;background:#fff;padding: 60px 0;text-align: center;box-shadow: 40px 40px 0 #151515;border: 10px solid #6ec7b4}
#section2 .right img {height: 600px;width: 291px}
#section2 .lightgallery {margin-top: 120px}
#section2 .lightgallery .galerie-item {display: inline-block;width: 25%;margin: 0%;cursor: pointer}
#section2 .lightgallery .galerie-item img {width: 100%;transition:all .2s}
#section2 .lightgallery .galerie-item:hover img {opacity: .8}
@media (max-width:1366px){
	#section2 .container {padding: 0}
	#section2 .container .left {margin-top: 30px}
	#section2 .left p {line-height: 1.35}
	#section2 .left ul li {margin: 0}
	#section2 .right {box-shadow: none;border: none;margin-top: 30px}
	#section2 .lightgallery {margin-top: 80px}
	#section2 .lightgallery .galerie-item {width: 50%;margin-top: -4px}
}
@media (max-width:1024px){
	#section2 {padding-bottom: 150px}
    #section2 .container {padding: 0 5%}
    #section2 .left {display: block;width: 100%}
    #section2 .right {display: block;width: 50%;margin: 30px 0}
}
@media (max-width:680px){
	#section2 {display: block;padding-bottom: 0px}
	#section2 .right {display: block;width: 100%;margin: 30px 0}
    #section2 .lightgallery .galerie-item {width: 100%;margin: 0 auto;display: block;}
}

/* ====== LA LOCATION ====== */
#section3 {transform: skewY(-5deg);background: url("../img/diguet-sport-event.webp") center no-repeat;margin-top: -80px;background-size: cover;}
#section3 .container {transform: skewY(5deg);padding-bottom: 50px}
#section3 .container h3 {color: #f9b2a2}
#section3 .container h4 {color: #fff}
#section3 .item-content {display: flex;margin-top: 80px}
#section3 article .item{background-color: rgba(0, 0, 0, .25);padding: 60px 50px 100px 80px;height: 100%}
#section3 article .item h5 {font-size: 45px;line-height: 1;color: #fff}
#section3 article .item h5 small{color: #f9b2a2;font-size: 25px}
#section3 article .item h5 span {color: #f9b2a2;font-size: 50px}
#section3 article .item ul li p {color: #fff}
#section3 article .item ul li p.small {opacity: .8;padding: 40px 0;width: 50%}
#section3 article .item ul li a.tarif {color: #f9b2a2;font-size: 20px;font-weight: 700}
#section3 article .item ul li p.link {color: #f9b2a2;font-size: 20px}
#section3 article .item ul li p.secondary {color: #fff;margin-bottom: 40px}
#section3 article .item.item2 {background: #f9b2a2;color:#151515;padding: 60px 40px}
#section3 article .item.item2 ul li {border-bottom: 1px solid rgba(0, 0, 0, .25);padding: 10px 0}
#section3 article .item.item2 h5 small,
#section3 article .item.item2,
#section3 article .item.item2 ul li p,
#section3 article .item.item2 ul li p.tarif {color: #151515}
#section3 article:nth-child(1) {padding: 0 20px 0 0;flex: 1}
#section3 article:nth-child(2)	{padding: 0 20px;flex: 2}
@media (max-width:1024px){
	#section3 .item-content {display: block}
	#section3 article .item {padding: 60px 50px 80px 50px}
	#section3 article .item ul li p.small {width: 100%}
	#section3 article:nth-child(1) {padding: 0 5%;flex: 0}
	#section3 article:nth-child(2)	{padding: 0 5%;flex: 0}
	#section3 article .item.item2 {background: rgba(249, 178, 162, .9);padding: 40px 60px 60px 60px}
}
@media (max-width:680px){
	#section3 {margin-top: 80px}
	#section3 .container {padding-bottom: 50px;padding-top: 0px}
	#section3 article .item {padding: 60px 40px 80px 40px}
	#section3 article .item h5 {font-size: 6vw}
	#section3 article .item h5 small{font-size: 5vw}
	#section3 article .item h5 span {color: #6ec7b4;font-size: 50px}
	#section3 article .item.item2 {padding: 60px 40px}
}

/* ====== INFOS & CONTACT ====== */
#section4 {padding:12vh 0 0 0;transform: skewY(-5deg);background:#f4d7e2;margin-top:-1px}
footer .footer {display: flex;transform: skewY(5deg)}
footer .left {flex: 1;width: 50%;padding-right: 5%}
footer .left .titre {text-align: left}
footer .left .titre h3 {color:#151515}
footer .left .titre h3::before {content: '';height: 5px;width: 50px;background: #e4496f;position: absolute;margin:80px auto 0 auto}
footer .left .titre p {padding-top:80px}
footer .left ul {margin-top: 40px;margin-bottom: 80px}
footer .left ul li {margin-bottom: 30px}
footer .left ul li a {color: #151515;display: block}
footer .left ul li a img {display: inline-block;vertical-align: middle;width: 55px;padding: 15px;background: #e4496f}
footer .left ul li a p{display: inline-block;vertical-align: middle;margin-left: 20px;line-height: 1.5;transition: all .2s}
footer .left ul li a:hover p {text-decoration: underline}
footer .left p.small {font-size: 15px}
footer .right {flex: 1;width: 50%}
footer .right .formulaire {width :100%;text-align: left;display: inline-block;vertical-align: top}
footer .right .formulaire h4 {color:#fff;background: #151515;display: inline;padding: 5px 10px 4px 20px;font-size: 22px;margin:20px 0;display: block;}
footer .right .formulaire h4 small {color:#e4496f}
footer .right .formulaire form {margin-top: 50px}
footer .right .formulaire form label {display: block;color:#000;margin-bottom: -10px;margin-top:20px;font-size: 1rem;margin-left: 0%}
footer .right .formulaire form label span {color:#cc3333}
footer .right .formulaire form input[type=text] {border: 1px solid #e4496f;border-radius: 0px;transition:all .2s;background: rgba(255,255,255,.5);font-size: 1rem;width: 100%;padding:12px;margin-left: 0%}
footer .right .formulaire form input[type=text]:focus {border: 1px solid #e4496f;outline: none;background: rgba(255,255,255,.8)}
footer .right .formulaire form textarea {padding: 12px;border: 1px solid #e4496f;border-radius: 3px;background: rgba(255,255,255,.5);font-size: 1rem;box-sizing: border-box;max-width: 100%;margin-left: 0%;transition:all .2s}
footer .right .formulaire form textarea:focus {border: 1px solid #e4496f;background: rgba(255,255,255,.8);outline: none}
footer .right .formulaire .button {color: #fff;background: #e4496f;display: block;width: 100%;border: 1px solid #000;padding: 20px 40px;font-size: 15px;letter-spacing: 1px;font-weight:600;text-transform: uppercase;margin-top: 60px;transition:all .2s}
footer .right .formulaire .button:hover {color: #fff;background: #6ec7b4;cursor: pointer}
#ajaxResponseFail {display:none;width:100%;padding: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0%;text-align: center;border: 1px solid #cc3333;border-radius: 3px;background: #ffcccc;color:#cc3333}
#ajaxResponseSuccess {display:none;width:100%;padding: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0%;text-align: center;border: 1px solid #669933;border-radius: 3px;background: #ccff99;color:#669933}
#ajaxResponseFail a {color:#cc3333;font-size: 1.1rem}
.footer-bottom {border-top: 1px solid #151515;padding: 50px 0;margin-top: 120px}
.footer-bottom img {width: 200px;height: 76px}
.footer-bottom .widget {display: inline-block;width: 25%;vertical-align: top}
.footer-bottom .widget h6 {font-size: 16px;color: #151515;font-weight: 700;margin-bottom: 20px}
.footer-bottom .widget p {font-size: 14px;letter-spacing: .65px;color: #151515}
.footer-bottom .widget.widget1 a {margin: 10px 0;padding: 2px 20px;background: #151515;color: #6ec7b4;font-size: 1rem;text-decoration: none;display: block;display: inline-block;}
.copyright {text-align: center;font-size: .8rem;background: #151515;color: #f1f1f1;padding: 10px 5%;letter-spacing: 1px;line-height: 1.5}
.copyright a {color: #6ec7b4}
.copyright span {color: #6ec7b4}
@media (max-width:1024px){
   #section4 {padding:12vh 5% 0 5%;text-align: center;}
	footer .footer {display: block;transform: skewY(5deg)}
	footer .left {width: 100%}
	footer .left .titre {text-align: center}
	footer .left .titre h3::before {display: none}
	footer .left .titre p {padding-top:50px}
	footer .left ul li {margin-bottom: 30px;border-top: 1px solid rgba(34, 34, 34, .5);padding: 40px 0 0px 0}
	footer .left ul li a img {display: block;margin: 0 auto 20px auto}
	footer .left ul li a p{margin-left: 0px}
	footer .right {width: 100%;margin-top: 50px}
	.footer-bottom {border-top: 1px solid rgba(34, 34, 34, .5);padding: 50px 0;width: 90%;margin:80px auto 0 auto;text-align: center}
    .footer-bottom .widget {display: block;width: 100%;margin-bottom: 40px}
    .footer-bottom .widget h6 {margin-bottom: 10px}
}

/* ====== MENTIONS LEGALES ====== */
.mentions-legales {display: flex;flex-direction: column;background: url("../img/diguet-sport-event.webp") no-repeat center;height: 100%;align-self: center;background-size: cover;align-items: center;justify-content: top;background-attachment: fixed}
.mentions-legales .container {margin: 50px 0}
.mentions-legales a.retour {font-size: 1.2rem;color: #6ec7b4;border: 1px solid #6ec7b4;opacity: .9;padding: 18px 40px 20px 40px;float:right}
.mentions-legales h1 {color: #6ec7b4;margin-bottom: 40px}
.mentions-legales p {color: #eee}
.mentions-legales p strong {color: #fff}
.mentions-legales a {color:#6ec7b4}
/* ====== CONNECT ====== */
.connect {display: flex;flex-direction: column;background: url("../img/diguet-sport-event.webp") no-repeat center;height: 100vh;align-self: center;background-size: cover;align-items: center;justify-content: center;text-align: center}
.connect h1 {font-size: 4rem;color: #6ec7b4}
.connect h2 {font-size: 2rem;color:#fff;margin-bottom: 50px}
.connect form {margin-top: 50px}
.connect form input[type=password] {border: 1px solid rgba(0, 0, 0, 0);border-radius: 0px;transition:all .2s;background: rgba(255,255,255,.25);font-size: 3rem;letter-spacing: 10px;width: 320px;padding:12px;margin-left: 0%;text-align: center;}
.connect form input[type=password]:focus {border: 1px solid #6ec7b4;outline: none;background: rgba(255,255,255,.8)}
.connect form textarea {padding: 12px;border: 1px solid #6ec7b4;border-radius: 3px;background: rgba(255,255,255,.5);font-size: 1rem;box-sizing: border-box;max-width: 100%;margin-left: 0%;transition:all .2s}
.connect form textarea:focus {border: 1px solid #6ec7b4;background: rgba(255,255,255,.8);outline: none}
.connect .button {color: #151515;background: #6ec7b4;display: inline-block;border: 1px solid #000;padding: 20px 40px;font-size: 15px;letter-spacing: 1px;font-weight:600;text-transform: uppercase;margin: 60px 0 40px 0;transition:all .2s}
.connect .button:hover {color: #6ec7b4;background: #151515;cursor: pointer}
.connect a.retour {font-size: 1rem;color: #6ec7b4;opacity: .9;padding: 18px 40px 20px 40px}
/* ====== 404 ====== */
.erreur404 {display: flex;flex-direction: column;background: url("../img/diguet-sport-event.webp") no-repeat center;height: 100vh;align-self: center;background-size: cover;align-items: center;justify-content: center;text-align: center}
.erreur404 h1 {font-size: 5rem;color: #6ec7b4}
.erreur404 h2 {font-size: 2rem;color:#fff;margin-bottom: 150px}
.erreur404 a {font-size: 1.2rem;color: #6ec7b4;border: 1px solid #6ec7b4;opacity: .9;padding: 18px 40px 20px 40px}