/* header */ .header{ border-bottom: 1px solid #2573b3; margin: 0 0 40px 0; } .lienLogo{ position: absolute; left: 0; bottom: -1px; width: 27%; } .titreSite{ width: 65%; margin: 2% 0 2% 25%; } .main-nav{ margin: 0 0 0 25%; } .langList{ position: absolute; right: 2%; top: 25%; width: 6%; } .openDrapo{ box-sizing: border-box; padding: 0.2em 1.5em 0.2em .7em; border: 1px solid #2573b3; border-radius: 2px; font-size: 18px; } .openDrapo:after{ content: ""; position: absolute; right: 0.35em; top: 40%; display: block; border: 0.4em solid #2573b3; border-color: #2573b3 transparent transparent transparent; } .subLangList{ border-radius: 2px; top: 100%; right: 0; left: 0; text-align: center; max-height: 0; padding: 0 1em; position: absolute; overflow: hidden; background: rgba(37,115,179,0.6); -webkit-transition-property: max-height; -webkit-transition-duration: .3s; -webkit-transition-timing-function: ease-out; transition-property:max-height; transition-duration: .3s; transition-timing-function: ease-out; } .subLangList.open{ max-height: 500px; } .drapo{ padding: .5em 0; font-size: 1.2em; color: #fff; } .liMenu:first-child{ margin-left: 15px; } .lienMenu{ font-size: 1.2em; color: #3a4899; } .lienMenu:hover:before,.lienMenu.actif:before{ content: ""; position: absolute; top: 0; bottom: 0; left: -15px; width: 13px; background: url(../images/menuCross.png) no-repeat center center; background-size: contain; } .listeMenu{ display: flex; justify-content: space-between; } /* footer */ .footer{ border-top: 1px solid #2573b3; background: #6ca4d3; padding: 2em 0; } .figFooter{ position: absolute; right: 0; bottom: 0; width: 15%; } .adrFooter{ font-style: normal; } .footerTitle{ margin: 0; font-size: 1.2em; } .navFooter{ display: flex; flex-wrap: wrap; margin: 20px auto; width: 65%; justify-content: space-around; } /* index */ .visuIndexZone{ border: 1px solid #2573b3; border-radius: 2px; } .firstVisuIndex{ width: 40%; background: #6ca4d3; } .tileFirstVisuIndex{ display: flex; justify-content: center; align-items: center; margin: 0; width: 100%; height: 215.4px; background: url(../images/ceremonies.jpg) center center no-repeat; background-size: cover; } .dlCalendrier,.dlCalendrier2{ background: #2573b3; padding: 0.8em 0; } .listeCalendrier{ padding: 0 1em; } .afficheDate + .afficheDate{ border-top: 1px solid #fff; } .dateIndex{ width: 20%; margin: 15px 0; } .eventListDate{ width: 70%; margin: 15px 0 0 10%; } .liEventList{ margin: 0 0 8px 0; } .indexVisu2,.indexVisu3,.indexVisu4,.indexVisu5{ position: absolute; left: 40%; top: 0; bottom: 50%; width: 60%; display: flex; } .indexVisu3,.indexVisu4,.indexVisu5{ top: 50%; bottom: 0; width: 20%; } .indexVisu4{ left: 60%; } .indexVisu5{ left: 80%; } .visuIndexButton{ width: 100%; font-size: 1.3em; display: flex; justify-content: center; align-items: center; } .restaurationButton{ background: url(../images/restauration.jpg) no-repeat center center; background-size: cover; } .photosButton{ background: url(../images/photos.jpg) no-repeat center center; background-size: cover; } .historicButton{ background: url(../images/historique.jpg) no-repeat center center; background-size: cover; } .titleIndexVisu2{ width: 33.33%; display: flex; justify-content: center; align-items: center; margin: 0; background: url(../images/actus.jpg) no-repeat center center; background-size: cover; } .actuListIndex{ width: 66.67%; display: flex; justify-content: flex-start; align-items: stretch; } .liActuIndex{ width: 50%; display: flex; justify-content: center; align-items: center; } .visuActuIndex{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; opacity: 0.4; } .visuActuIndex a{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; } .imgActuIndex,.photosThumb{ flex: 1 1 auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: cover; } .actuTextIndex{ z-index: 1; display: flex; flex-direction: column; } .detailsLinkIndex,.detailsLinkList{ width: 100%; margin: 15px 0 0 0; background: #2573b3; padding: .6em 0; } .textContent{ margin: 4% 0; font-size: 1.2em; line-height: 1.6em; } .visuTextIndex,.figLeftText{ float: left; width: 40%; margin: 0 1% 0 0; } /* calendrier */ .visuDateList{ display: flex; justify-content: center; align-items: center; background: url(../images/ceremonies.jpg) center center no-repeat; background-size: cover; } .pageTitle{ width: 24%; overflow: visible; padding: 0 0 .5% 0; border-bottom: 1px solid #2573b3; } .dateList{ display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; margin: 0 0 50px 0; } .liDateList{ width: 20%; background-color: #6ca4d3; box-sizing: border-box; display: flex; flex-wrap: wrap; } .dlCalendrier2{ display: flex; justify-content: center; align-items: center; padding: 0; width: 100%; } .liDateContent{ padding: 2%; } .dateCalendar{ width: 100%; font-size: 1.2em; margin: 0 0 1em 0; flex-grow: 0; } .eventListCalendar{ width: 100%; border-bottom: 1px solid #fff; font-size: 1.1em; } .visuDate1,.visuDate2{ background: url(../images/date1.jpg) no-repeat center center; background-size: cover; } .visuDate2{ background-image: url(../images/date2.jpg); } /*historique*/ .figRightText{ width: 40%; margin: 0 0 0 1%; } .fig50{ width: 48%; margin: 60px 1%; } /* restauration */ .workList{ display: flex; flex-wrap: wrap; align-items: stretch; } .liWork{ width: 48.5%; margin: 0 0 3% 1.5%; } .liWork:nth-child(odd){ margin: 0 1.5% 3% 0; } .liWork:last-child{ width: 100%; margin: 0 0 3% 0; } .workTitle{ position: absolute; left: 0; right: 0; top: 0; margin: 0; background: rgba(255,255,255,0.8); padding: 1em; } .infoWorks{ padding: 0; margin: 0; } .ribLink,.boutonPaypal{ padding: .5em 2em; font-size: 1.1em; border-radius: 3px; background: #2573b3; } .boutonPaypal{ cursor: pointer; border: none; font-size: 1.3em; } /* photos */ .photosList{ display: flex; flex-wrap: wrap; margin: 0 0 50px 0; gap: 20px 20px; } .photosLi{ width: 22%; } .photoLink{ width: 100%; aspect-ratio: 4/3; margin: 0 0 3px 0; overflow: hidden; } .photosThumb{ width: 100%; height: 100%; object-fit: cover; transition-property:transform; transition-duration: .3s; transition-timing-function: ease-out; } .albumName{ text-align: center; color: #2573b3; display: block; } .photosLi:hover .photosThumb{ transform: scale(1.1); } /* contact */ .contactList{ display: flex; flex-wrap: wrap; justify-content: space-between; } .liContactWide{ width: 100%; margin: 0 0 50px 0; } .liContact{ width: 22%; background-color: #6ca4d3; } .adrContact{ font-style: normal; font-size: 1.3em; width: 24%; padding: 5% 1em; box-sizing: border-box; background-color: #6ca4d3; } .contactTitle{ font-size: 1.1em; } .contactAdr{ margin: 10px 0; } .mapContact{ position: absolute; right: 0; top: 0; bottom: 0; width: 76%; } .googleMap{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; } .formuModal{ z-index: 20; width: 80%; margin:auto; border-top: 1px solid #2573b3; padding: 12px 12px 80px 12px; background-color: #6ca4d3; } .titreModale{ margin: -12px -12px 12px -12px; padding: 1em; font-size: 1.4em; } .close{ position: absolute; right: 12px; top: 20px; } .labelModal{ width: 20%; } .champModal,.champNumber{ box-sizing: border-box; border: none; width: 80%; font-size: 1.2em; padding: 0.6em 1em; margin: 1em 0; } .textAModal{ height: 180px; } .submitModal{ padding: 1em 0; border: none; width: 40%; margin: 1em 0 1em 40%; font-size: 1.1em; background: #fff; cursor: pointer; } .exarchatLink{ margin: 50px auto 50px auto; width: 48%; font-size: 1.2em; color: #3a4899; background: #f3f2ee; padding: .8em 0; } .spokenLang{ display: flex; justify-content: center; margin: 10px 0 0 0; } .myLang{ width: 15%; margin: 0 2%; } /* actus */ .newsList{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: stretch; } .newsLi{ width: 22%; margin-bottom: 4%; background-color: #6ca4d3; padding: 0 0 45px 0; } .figNewsList{ height: 0; padding: 0 0 100% 0; } .imgActuLink{ display: flex; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .newsListTitle{ padding: 0 1em; margin: 15px 0; } .detailsLinkList{ position: absolute; left: 0; right: 0; bottom: 0; } .footerNews{ margin: 25px 0 0 0; border-top: 1px solid #2573b3; padding: 10px 0 0 0; font-size: 0.8em; } .partage{ font-size: 2em; margin: 10px 25px; } .shareZone{ border-top: 1px solid; margin-top: 30px; padding-top: 20px; } @media only screen and (max-width: 1000px){ .langList{ display: none; } .titreSite{ font-size: 1.4em; width: 50%; margin: 30px 0 30px 25%; } .listeMenu{ position: absolute; display: block; text-align: right; width: 60%; margin: 0 0 0 40%; background: rgba(255,255,255,0.95); z-index: 3; max-height: 0; overflow: hidden; -webkit-transition-property: max-height; -webkit-transition-duration: .3s; -webkit-transition-timing-function: ease-out; transition-property:max-height; transition-duration: .3s; transition-timing-function: ease-out; } .listeMenu.open{ max-height: 500px; } .mobileMenuButton{ display: inline-block; vertical-align: middle; width: 4%; margin: 5% 0 5% 21%; } .bar1,.bar2,.bar3{ background: #2573b3; height: 0; padding: 0 0 2px 0; -webkit-transition-property: transform; -webkit-transition-duration: .3s; -webkit-transition-timing-function: ease-out; transition-property:transform; transition-duration: .3s; transition-timing-function: ease-out; transform-origin: 0 50%; } .bar2{ margin: 15% 0; } .open .bar1{ transform: rotate(22deg); } .open .bar2{ display: none; } .open .bar3{ transform: rotate(-22deg); margin: 32% 0 0 0; } .liMenu{ margin: 0 2% 0 0; } .lienMenu{ display: inline-block; padding: .6em 0; } .liMenu.mobileOnly{ display: block; width: 10%; margin: 0 2% 0 88%; } .visuIndexZone{ display: flex; flex-wrap: wrap; } .firstVisuIndex{ width: 100%; } .indexVisu2,.indexVisu3,.indexVisu4,.indexVisu5{ position: static; width: 100%; min-height: 215px; } .indexVisu3,.indexVisu4,.indexVisu5,.liDateList{ width: 33.33%; } .liDateList{ min-height: 140px; } .newsLi{ width: 30%; } .navFooter{ justify-content: center; } .footerLink{ padding: 0 1em; } } @media only screen and (max-width: 650px){ .lienLogo{ width: 45%; z-index: 0; } .open .bar1{ transform: rotate(25deg); } .open .bar3{ transform: rotate(-25deg); } .titreSite{ position: relative; z-index: 1; width: 71%; margin: 35px 0 35px 15%; } .mobileMenuButton{ display: inline-block; vertical-align: middle; width: 5.5%; margin: 5% 0 5% 8.5%; } .main-nav,.listeMenu{ margin: 0; } .listeMenu,.indexVisu3,.indexVisu4,.indexVisu5,.actuListIndex,.liActuIndex,.titleIndexVisu2,.adrContact,.liWork,.liWork:nth-child(odd),.liWork:last-child,.figLeftText,.figRightText,.fig50,.mapContact,.labelModal,.champModal,.champNumber{ width: 100%; } .indexVisu2,.actuListIndex{ flex-wrap: wrap; } .liActuIndex,.titleIndexVisu2{ min-height: 215px; } .liMenu.mobileOnly{ display: block; width: 8%; margin: 0 2% 0 90%; } .liDateList{ width: 50%; } .figLeftText,.figRightText,.fig50{ float: none; margin: 0; } .fig50{ margin: 60px 0; } .liWork,.liWork:nth-child(odd),.liWork:last-child{ margin: 0 0 8% 0; } .liContact,.newsLi{ width: 47%; margin-bottom: 6%; } .mapContact{ position: relative; height: 250px; } .submitModal{ width: 70%; margin: 1em auto; } .champModal,.champNumber{ margin: 0 0 .8em 0; } .textAModal{ height: 150px; } .photosList{ justify-content: space-between; gap: 40px 0; } .photosLi{ width: 48%; } }