@import url('https://fonts.cdnfonts.com/css/telegrafico');
*{margin:0;padding:0;max-width: 100%; position: relative; display: block; font-size:14px;font-family: 'Telegrafico', sans-serif;}
title{display: none;}
body{background: #333333;}
body>*:last-child{margin-bottom:2rem;}
h1{font-size: 4rem;}
h2, h2 a { font-size: 2rem; margin: 1rem 0; color: #f6f6f6; text-decoration: none;}
h3{color: #dddddd; font-size:1.25rem; margin: 1rem 0; text-align: center; line-height: 1.75rem;}
p { color: #dddddd;}
.btn{ display: block; margin: 2rem auto; float: left; left: 50%; transform: translateX(-50%); padding: 1rem; color: #ffffff; text-decoration: none; background: #495252; border-radius: 4px; border: thin solid #999999;transition: all 0.4s;}
.btn:hover{border: thin solid #495252;}
nav {position: fixed; display: flex; justify-content: space-around; padding: 1rem;width: 100%; z-index: 10; background: #f1f1f1; align-items: center; box-sizing: border-box;}
nav img{width:230px;}
nav a{ font-size: 1.5rem; color: #000000; text-decoration: none;}
.main{transition: 0.5s linear;}
.banner { overflow: hidden; margin-bottom: 50px;position: relative;}
.banner:after{display:block;content: '';position: absolute;bottom: 0;left: 0; width: 100%;box-shadow: inset 0px 0px 30px rgba(0,0,0,0.5);}
.banner figure{height: 100%; position: absolute; width: 100%;background: url("./img/9-1.png") no-repeat; background-size:cover;}
.banner figure img{ position: absolute;left: 50%; top:50%; opacity: 0; width:0; height:auto; transition: 30s linear; transition-property: left, top, width, filter; transform: translate(-50%, -50%);}
.banner figure img.scale{width:125%;}
.banner figure:before{content:''; z-index: 1; position: absolute;width:100%;height: 100%;background:rgba(0,0,0,0.6);}
.banner .container{ top: 50%; transform: translateY(-50%); color:#ffffff; text-align: center; z-index: 2;}
.container {width: 1260px; box-sizing: border-box;margin: 0 auto;}
.container:after{display: block;clear: both;content: '';}
.self-align figure img{max-width: 600px; margin:0 auto;}
.self-align ul{display: flex;justify-content: space-around;margin-top: 1rem;}
.self-align li, .competences li:before{padding:0 0.5rem; border-radius:10.5px; background: #f1f1f1; line-height: 1.5rem;}

.slider { width: 100%;}
.slider input { display: none;}
.testimonials {display: flex; align-items: center; justify-content: center; position: relative; min-height: 350px; perspective: 1000px; overflow: hidden; padding-bottom: 4rem;}
.testimonials .item { width: 80%; padding: 30px; border-radius: 5px; background-color: #232626; position: absolute; top: 3rem; box-sizing: border-box; text-align: center; transition: all 0.4s; box-shadow: 0 0 4rem rgba(0,0,0,0.3); user-select: none; cursor: pointer;}
.testimonials .item img { width: 50%; object-fit: cover; border-radius: 50%; border: 13px solid #495252; box-sizing: border-box;}
.testimonials .item a{ pointer-events: none;}
.testimonials .item figure a{ border-radius: 50%;}

.dots { display: flex; justify-content: center; align-items: center;}
.dots label { height: 5px; width: 5px; border-radius: 50%; cursor: pointer; background-color: #495252; margin: 7px; transition-duration: 0.2s;}

.home #t-1:checked ~ .dots label[for="t-1"],.home #t-2:checked ~ .dots label[for="t-2"],
.home #t-3:checked ~ .dots label[for="t-3"],.home #t-4:checked ~ .dots label[for="t-4"],.home #t-5:checked ~ .dots label[for="t-5"] { transform: scale(2); background-color: #fff;}
.home #t-1:checked ~ .dots label[for="t-2"],.home #t-2:checked ~ .dots label[for="t-1"],
.home #t-2:checked ~ .dots label[for="t-3"],.home #t-3:checked ~ .dots label[for="t-2"],
.home #t-3:checked ~ .dots label[for="t-4"],.home #t-4:checked ~ .dots label[for="t-3"],
.home #t-4:checked ~ .dots label[for="t-5"],.home #t-5:checked ~ .dots label[for="t-4"] { transform: scale(1.5);}
.home #t-1:checked ~ .testimonials label[for="t-3"],.home #t-2:checked ~ .testimonials label[for="t-4"],
.home #t-3:checked ~ .testimonials label[for="t-5"],.home #t-4:checked ~ .testimonials label[for="t-1"],
.home #t-5:checked ~ .testimonials label[for="t-2"] { transform: translate3d(600px, 0, -180px) rotateY(-25deg); z-index: 2;}
.home #t-1:checked ~ .testimonials label[for="t-2"],.home #t-2:checked ~ .testimonials label[for="t-3"],
.home #t-3:checked ~ .testimonials label[for="t-4"],.home #t-4:checked ~ .testimonials label[for="t-5"],
.home #t-5:checked ~ .testimonials label[for="t-1"] { transform: translate3d(300px, 0, -90px) rotateY(-15deg); z-index: 3;}
.home #t-2:checked ~ .testimonials label[for="t-1"],.home #t-3:checked ~ .testimonials label[for="t-2"],
.home #t-4:checked ~ .testimonials label[for="t-3"],.home #t-5:checked ~ .testimonials label[for="t-4"],
.home #t-1:checked ~ .testimonials label[for="t-5"] { transform: translate3d(-300px, 0, -90px) rotateY(15deg); z-index: 3;}
.home #t-3:checked ~ .testimonials label[for="t-1"],.home #t-4:checked ~ .testimonials label[for="t-2"],
.home #t-5:checked ~ .testimonials label[for="t-3"],.home #t-2:checked ~ .testimonials label[for="t-5"],
.home #t-1:checked ~ .testimonials label[for="t-4"] { transform: translate3d(-600px, 0, -180px) rotateY(25deg);}
.home #t-1:checked ~ .testimonials label[for="t-1"],.home #t-2:checked ~ .testimonials label[for="t-2"],
.home #t-3:checked ~ .testimonials label[for="t-3"],.home #t-4:checked ~ .testimonials label[for="t-4"],
.home #t-5:checked ~ .testimonials label[for="t-4"],.home #t-5:checked ~ .testimonials label[for="t-5"] { z-index: 4; cursor: initial;}
.home #t-4:checked ~ .testimonials label[for="t-1"],.home #t-5:checked ~ .testimonials label[for="t-2"],.home #t-6:checked ~ .testimonials label[for="t-3"], 
.home #t-1:checked ~ .testimonials label[for="t-4"],.home #t-2:checked ~ .testimonials label[for="t-5"],.home #t-3:checked ~ .testimonials label[for="t-6"]{opacity: 0;}

.web #t-1:checked ~ .dots label[for="t-1"],.web #t-2:checked ~ .dots label[for="t-2"],.web #t-3:checked ~ .dots label[for="t-3"],
.web #t-4:checked ~ .dots label[for="t-4"],.web #t-5:checked ~ .dots label[for="t-5"],.web #t-6:checked ~ .dots label[for="t-6"] { transform: scale(2); background-color: #fff;}
.web #t-1:checked ~ .dots label[for="t-2"],.web #t-2:checked ~ .dots label[for="t-1"],.web #t-2:checked ~ .dots label[for="t-3"],.web #t-3:checked ~ .dots label[for="t-2"],
.web #t-3:checked ~ .dots label[for="t-4"],.web #t-4:checked ~ .dots label[for="t-3"],.web #t-4:checked ~ .dots label[for="t-5"],.web #t-5:checked ~ .dots label[for="t-4"],
.web #t-5:checked ~ .dots label[for="t-6"],.web #t-6:checked ~ .dots label[for="t-5"]  { transform: scale(1.5);}
.web #t-1:checked ~ .testimonials label[for="t-3"],.web #t-2:checked ~ .testimonials label[for="t-4"],
.web #t-3:checked ~ .testimonials label[for="t-5"],.web #t-4:checked ~ .testimonials label[for="t-6"],
.web #t-5:checked ~ .testimonials label[for="t-1"],.web #t-6:checked ~ .testimonials label[for="t-2"]  { opacity: 1; transform: translate3d(600px, 0, -180px) rotateY(-25deg); z-index: 2;}
.web #t-1:checked ~ .testimonials label[for="t-2"],.web #t-2:checked ~ .testimonials label[for="t-3"],
.web #t-3:checked ~ .testimonials label[for="t-4"],.web #t-4:checked ~ .testimonials label[for="t-5"],
.web #t-5:checked ~ .testimonials label[for="t-6"],.web #t-6:checked ~ .testimonials label[for="t-1"] { transform: translate3d(300px, 0, -90px) rotateY(-15deg); z-index: 3;}
.web #t-2:checked ~ .testimonials label[for="t-1"],.web #t-3:checked ~ .testimonials label[for="t-2"],
.web #t-4:checked ~ .testimonials label[for="t-3"],.web #t-5:checked ~ .testimonials label[for="t-4"],
.web #t-6:checked ~ .testimonials label[for="t-5"],.web #t-1:checked ~ .testimonials label[for="t-6"] { transform: translate3d(-300px, 0, -90px) rotateY(15deg); z-index: 3;}
.web #t-3:checked ~ .testimonials label[for="t-1"],.web #t-4:checked ~ .testimonials label[for="t-2"],
.web #t-5:checked ~ .testimonials label[for="t-3"],.web #t-6:checked ~ .testimonials label[for="t-4"],
.web #t-1:checked ~ .testimonials label[for="t-5"],.web #t-2:checked ~ .testimonials label[for="t-6"] { opacity: 1; transform: translate3d(-600px, 0, -180px) rotateY(25deg);}
.web #t-1:checked ~ .testimonials label[for="t-1"],.web #t-2:checked ~ .testimonials label[for="t-2"],
.web #t-3:checked ~ .testimonials label[for="t-3"],.web #t-4:checked ~ .testimonials label[for="t-4"],
.web #t-5:checked ~ .testimonials label[for="t-5"],.web #t-6:checked ~ .testimonials label[for="t-6"] { z-index: 4; cursor: initial;}
.web #t-4:checked ~ .testimonials label[for="t-1"],.web #t-5:checked ~ .testimonials label[for="t-2"],
.web #t-6:checked ~ .testimonials label[for="t-3"],.web #t-1:checked ~ .testimonials label[for="t-4"],
.web #t-2:checked ~ .testimonials label[for="t-5"],.web #t-3:checked ~ .testimonials label[for="t-6"] { opacity: 0;}

#t-1:checked ~ .testimonials label[for="t-1"] a, #t-2:checked ~ .testimonials label[for="t-2"] a,
#t-3:checked ~ .testimonials label[for="t-3"] a, #t-4:checked ~ .testimonials label[for="t-4"] a,
#t-5:checked ~ .testimonials label[for="t-5"] a, #t-6:checked ~ .testimonials label[for="t-6"] a{ pointer-events:initial;}

.contact h2, .competences h2{text-align: center;}
.contact a{color:#ffffff; float: left; left: 50%; transform: translateX(-50%); clear: both;}
.competences{margin: 4rem auto;}
.competences .row-2{display: flex; gap:2rem; justify-content: center;}
.row-2>div{min-width:30%;}
.competences ul{color:#dddddd; margin: 1rem 0;}
.competences li{clear: both; width: 100%; font-size: 1.1rem;margin-bottom: 0.5rem; position: relative; line-height: 1.25rem;}
.competences li:before,
.competences li:after{content:'';display:block;position: absolute; width: 100%; height: 100%; top:0; transition: width 0.5s linear;z-index: 0; box-sizing: border-box;}
.competences li:after{width: 0; z-index: 1;background: #05a5a5; border-radius:10.5px;}
.competences ul span{z-index: 2; padding: 0 0.5rem;}
.competences li.w100:after{width: 100%;}
.competences li.w98:after{width: 98%;}
.competences li.w95:after{width: 95%;}
.competences li.w90:after{width: 90%;}
.competences li.w75:after{width: 75%;}

.hoof{ position:absolute; z-index: 2;opacity: 0; transition: 0.5s ease-in-out; top: 0; left: 50%; transform: translateX(-50%);}
.hoof.active{opacity: 1;}
.pricing h2{text-align: center;}
.pricing .row-2{display: flex; gap:2rem; justify-content: center;}
.pricing ul{color:#dddddd; margin: 1rem 0;}
.pricing li{clear: both; width: 100%; font-size: 1.1rem;margin-bottom: 0.5rem; line-height: 1.25rem;}
.pricing ul span{float: right; padding-left: 1rem;}


.mariage {display: flex; gap : 1rem; flex-wrap: wrap; box-sizing: border-box; justify-content: center; padding: 2rem;  align-items: stretch; height: 100vh;}
.mariage.home>div { display: flex;  flex-wrap: wrap; background: url(../mariage/mairie/photographe/097.jpg) -70px center no-repeat; background-size: contain; width: 1200px; height: 800px; justify-content: center; padding: 2rem; box-sizing: border-box; align-items: center;}
.mariage.home>div>* {top: -340;}
.mariage.home>div h1{flex-grow: 2; width: 100%; top: -106px; text-align: center;color:#fffcee}
.mariage.home>div img{margin: 0 auto;}
.mariage>figure{width:20%;flex-grow: 1; cursor: pointer;}
.mariage>figure img{ object-fit: cover; height: 100%;}
.mariage a{  color: #fff; text-align: center;}
.mariage nav{background: none; display: block; right: 0; width: auto;z-index:1; top: 0;}
.mariage nav>*{width: 5rem;display: inline-block;position: relative;}
.mariage nav>*:before, .popin .nav span:before{width: 5rem; height: 5rem; background:#ffffff; filter: blur(2rem); content:'';  position: absolute;  left: 50%; top:50%; transform: translate(-50%, -50%); border-radius: 50%;}
.popin{ top:0; left:0; position: fixed; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); display: flex;flex-wrap: wrap; justify-content: center; align-items: center;z-index: 10;}
.popin>figure{z-index: 1;padding: 1rem;}
.popin>figure img{width: 80vw;  object-fit: contain;}
.popin .nav{ position: absolute;  width: 100%; height: 100%; top: 0; left: 0;z-index: 2; pointer-events: none;}
.popin .nav span{position: absolute; border-radius: 50%; width:5rem; height:5rem; display:flex; justify-content: center; cursor: pointer; pointer-events: all; text-align: center;}
.popin .nav span p{ font-size: 4rem;color: #000000; line-height: 5rem;}
.popin .nav span:first-child{ right: 80px; top: 1rem;}
.popin .close{top: 1rem; right: 1rem;}
.popin .prev{left: 10%; top:50%;}
.popin .next{right: 10%; top:50%;}
.lazy-waiting,.lazy-loading {display: block;visibility: hidden;min-height: 300px;}
@media (max-width: 1250px) {
  .mariage>figure{width:45%;}
  .popin .nav span p { font-size: 2rem; line-height: 3rem; display: inline-block; height: 3rem; width: 3rem;}
  .mariage nav>*, .popin .nav span, .mariage nav>*:before, .popin .nav span:before {width: 3rem; height: 3rem;}
  .mariage nav>*:before, .popin .nav span:before { filter: blur(1rem);}
  .popin .nav span:first-child{right:60px}
}