@font-face {
    font-family: 'Arial Rounded MT';
    src: url('polices/ArialRoundedMTBold.eot');
    src: url('polices/ArialRoundedMTBold.eot?#iefix') format('embedded-opentype'),
        url('polices/ArialRoundedMTBold.woff2') format('woff2'),
        url('polices/ArialRoundedMTBold.woff') format('woff'),
        url('polices/ArialRoundedMTBold.ttf') format('truetype'),
        url('polices/ArialRoundedMTBold.svg#ArialRoundedMTBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'source_sans_prolight';
    src: url('polices/sourcesanspro-light-webfont.woff2') format('woff2'),
         url('polices/sourcesanspro-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*{
margin : 0 auto;
padding : 0;
outline : 0;
position : relative;
z-index : auto;
text-decoration : none;
color : white;
text-align : center;
vertical-align : middle;
}

html{
width : 100%;
height : 100%;
font-size : 19px;
font-family : 'Arial Rounded MT','source_sans_prolight', helvetica;
background-color : black;
position : relative;
padding : 0;
margin : 0;
overflow-x: hidden;
}

html a {
  font-family: 'Arial Rounded MT';
  font-size : 2rem;
  color : #fff;
  text-shadow : 0.10rem 0.10rem 0.10rem #000, -0.10rem 0.10rem 0.10rem #000, 0.10rem -0.10rem 0.10rem #000, -0.10rem -0.10rem 0.10rem #000;
}

html a:hover {
opacity : 0.5;
}

html h1 {
font-family: 'Arial Rounded MT';
font-size : 2.4rem;
color : #fd0606;
text-shadow : 0.10rem 0.10rem 0.10rem #000, -0.10rem 0.10rem 0.10rem #000, 0.10rem -0.10rem 0.10rem #000, -0.10rem -0.10rem 0.10rem #000;
}

html h2 {
font-family: 'Arial Rounded MT';
font-size : 2.4rem;
color : #fff;
text-shadow : 0.10rem 0.10rem 0.10rem #000, -0.10rem 0.10rem 0.10rem #000, 0.10rem -0.10rem 0.10rem #000, -0.10rem -0.10rem 0.10rem #000;
}

html h3 {
font-family: 'Arial Rounded MT';
font-size : 2rem;
color : #fa05a3;
text-shadow : 0.10rem 0.10rem 0.10rem #000, -0.10rem 0.10rem 0.10rem #000, 0.10rem -0.10rem 0.10rem #000, -0.10rem -0.10rem 0.10rem #000;
}

html h4 {
font-family: 'Arial Rounded MT';
font-size : 2rem;
color : #ee6911;
text-shadow : 0.10rem 0.10rem 0.10rem #000, -0.10rem 0.10rem 0.10rem #000, 0.10rem -0.10rem 0.10rem #000, -0.10rem -0.10rem 0.10rem #000;
}

html p {
font-family: 'source_sans_prolight';
font-size : 1.5rem;
color : black;
}

html img {
display : block;
width : 100%;
border-radius : 0rem;
}

body {
width : 100%;
height : 100%;
padding : 0;
margin : 0;
}

header {
display : block;
background-color: #fff;
width : 100%;
position : fixed;
top:0;
z-index : 99;
box-shadow : 0.10rem 0.10rem 0.10rem #000, -0.10rem 0.10rem 0.10rem #000, 0.10rem -0.10rem 0.10rem #000, -0.10rem -0.10rem 0.10rem #000;
}

nav {
display : block;
background-color: #fff;
width : 100%;
}

nav a {
font-size: 1.6rem;
display : inline-block;
margin-left: 1%;
margin-right: 1%;
color : #fff;
}

nav a:focus {
color : #fd0606;
}

#menuOnglets1 {
display : inline-block;
width : 5%;
}

#menuOnglets1:focus  #petanqueLogo{
opacity : 0;
}

#menuOnglets1:focus  #petanqueLogoFocus{
opacity : 1;
}

#petanqueLogo {
display : block;
width : 100%;
opacity : 1;
}

#petanqueLogoFocus {
display : block;
position : absolute;
top : 0;
left: 0%;
width : 100%;
opacity : 0;
}

#menuOngletsPortrait1 {
display : inline-block;
width : 14%;
position : relative;
top : 0%;
left: -50%;
}

#menuOngletsPortrait1:hover {
opacity : 0.6;
}

#menuOngletsPortrait1:focus  #petanqueLogoPortrait{
opacity : 0;
}

#menuOngletsPortrait1:focus  #petanqueLogoFocusPortrait{
opacity : 1;
}

#petanqueLogoPortrait {
display : block;
width : 100%;
position : relative;
top : -10%;
left : 1%;
opacity : 1;
}

#petanqueLogoFocusPortrait {
display : block;
width : 100%;
position : absolute;
top : 0;
left : 1%;
opacity : 0;
}



#buttonMenuPortrait {
display : inline-block;
width : 15%;
cursor : pointer;
position : absolute;
top : 8%;
right : 0.8%;
z-index: 100;
}

#barre1 {
position :absolute;
top : 0%;
}

#barre2 {
position :absolute;
top : 100%;
}

#barre3 {
position :absolute;
top : 200%;
}

#buttonMenuPortrait img {
display : block;
width : 100%;
}

#menuPortraitSlide {
position : fixed;
top : -100%;
background: rgba(0, 0, 0, 0.9);
z-index: 50;
}

#menuPortraitSlide a {
display : block;
position : absolute;
font-size: 5rem;
}

#menuPortraitSlide2 {
  top : 20%;
  left : 50%;
  transform: translate(-50%, -50%);
}

#menuPortraitSlide3 {
  top : 32%;
  left : 50%;
  transform: translate(-50%, -50%);
}

#menuPortraitSlide4 {
  top : 44%;
  left : 50%;
  transform: translate(-50%, -50%);
}

#menuPortraitSlide5 {
  top : 56%;
  left : 50%;
  transform: translate(-50%, -50%);
}

#menuPortraitSlide6 {
  top : 68%;
  left : 50%;
  transform: translate(-50%, -50%);
}

#menuPortraitSlide7 {
  top : 80%;
  left : 50%;
  transform: translate(-50%, -50%);
}

#menuPortraitSlide8 {
  top : 92%;
  left : 50%;
  transform: translate(-50%, -50%);
}

nav .orientationPortrait {
position : absolute;
top : 50%;
left : 50%;
transform: translate(-50%, -50%);
opacity : 0;
font-size: 5rem;
}

section {
display : block;
width : 100%;
background:  url('images/fondSectionPetanqueLandscape.jpg') no-repeat fixed;
background-size : cover;
background-position : 50% 0%;
z-index: 40;
}

section .landscape {
background:  url('images/fondSectionPetanqueLandscape.jpg') no-repeat fixed;
}

section .portrait {
background:  url('images/fondSectionPetanquePortrait.jpg') no-repeat fixed;
}

.sectionOnglets {
display : block;
width : 100%;
}

.bgSection {
display : block;
width : 100%;
opacity : 0.7;
position : absolute;
width : 100%;
height : 100%;
top : 0%;
}

.logoSectionNoClass {
position : relative;
display : block;
top : 12%;
width : 40%;
}

.logoSectionPortrait {
display : block;
position : absolute;
top : 55%;
left : 50%;
transform: translate(-50%, -50%);
width : 90%;
}

.logoSectionLandscape {
  display : block;
  position : absolute;
  top : 55%;
  left : 50%;
  transform: translate(-50%, -50%);
  width : 40%;
}

.sectionContainers {
display : block;
width : 60%;
border-radius: 1rem;
padding : 2%;
}

.titreContainersEven {
display : block;
width : 60%;
position : relative;
padding-top: 2%;
padding-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
text-align: left;
left: 50%;
transform: translate(-100%);
}

.sousTitreContainersEven, .texteContainersEven {
display : block;
width : 60%;
position : relative;
padding: 1%;
text-align: left;
left: 50%;
transform: translate(-100%);
}


.photoContainersEven {
display : block;
width : 40%;
border-radius: 1rem;
box-shadow : 0.30rem 0.30rem 0.30rem #fd0606, -0.30rem 0.30rem 0.30rem #fd0606, 0.30rem -0.30rem 0.30rem #fd0606, -0.30rem -0.30rem 0.30rem #fd0606;
position : relative;
left: 50%;
margin-top: 2%;
margin-bottom: : 2%;
transform: translate(-180%, 0%);
}

.titreContainersOdd {
display : block;
width : 60%;
position : relative;
padding-top: 2%;
padding-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
text-align: right;
left: 80%;
transform: translate(-100%);
}

.sousTitreContainersOdd, .texteContainersOdd {
display : block;
width : 60%;
position : relative;
padding: 1%;
text-align: right;
left : 80%;
transform: translate(-100%);
}


.photoContainersOdd {
display : block;
width : 40%;
border-radius: 1rem;
box-shadow : 0.30rem 0.30rem 0.30rem #fd0606, -0.30rem 0.30rem 0.30rem #fd0606, 0.30rem -0.30rem 0.30rem #fd0606, -0.30rem -0.30rem 0.30rem #fd0606;
position : relative;
left : 80%;
margin-top: 2%;
margin-bottom: : 2%;
transform: translate(-130%, 0%);
}

.membres img{
  position :relative;
  display : inline-block;
  width : 20%;
  top : 0;
  left:0;
  vertical-align: middle;
  transform: translate(-90%);
}

.texteContainers.membres {
  display : inline-block;
  width : 25%;
  top : 0;
  left:0;
  vertical-align: middle;
  margin-top: 2%;
  transform: translate(-55%);
}

.texteContainers.membres h1, .texteContainers.membres h2 {
  display : block;
  position: relative;
  top:0;
  left:0%;
  width : 100%;
  vertical-align: middle;
  transform: translate(0%);
}


.sectionContainersPhotos {
  display : inline-block;
  width : 20%;
  margin-top: 10%;
  margin-left: 3%;
  margin-right: 3%;
  cursor: pointer;
}

.logosFolder {
  display :block;
  width : 100%;
}

.titreContainersPhotos {
  display :block;
  position : absolute;
  top : 55%;
  left : 50%;
  width : 100%;
  transform: translate(-50%, -50%);
}

#sectionOnglets6 h1{
  color : #fff;
  font-size: 1.5rem;
}

#dossiersContainer {
  display: block;
  position: relative;
  width : 70%;
  left : 20%;
  transform: translate(-50%);
}

.sliderPhotoContainers {
  position : fixed;
  width : 100%;
  top : 0%;
  left : 0%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 70;
  display:none;
  visibility: hidden;
  overflow-x:hidden;
  overflow-y:hidden;
}

.sliderPhotoContainers ul {
display : block;
   width: 200%; /*(mettre à 200 pour slider)*/
   height:100%;
   padding:0; margin:0;
   list-style: none;
   white-space : nowrap;
}

.sliderPhotoContainers li {
display : inline-block;
width : 100%;
height:100%;
top : 0%;

}



.photoSlidersDivs {
  position : relative;
  display: inline-block;
  width : 100%;
  height:100%;
  top:0%;
  left:0%;
  z-index: 80;
  vertical-align: bottom;
}

.sliderPhotoDossiers {
  position : relative;
  width : 100%;
  height:100%;
  top : 0;
  left:0;
  z-index: 70;
}

/*.photoSliders{
  display : block;
  position : relative;
  width : 86%;
  z-index: 81;
  top:50%;
  left : 43%;
  transform: translate(-50%,-50%);
}*/

.photoSliders {
width : 86%;
height:100%;
display : block;
position : relative;
object-fit: contain;
z-index: 81;
top:50%;
left : 43%;
transform: translate(-50%,-50%);
}

.inputPhotoSliders {
  display:block;
  position:absolute;
  z-index: 81;
  width:100%;
  top: 15%;
  left : 12.5%;
  transform: translate(-50%, -50%);
}

.titreSliders {
  display:block;
  position:absolute;
  z-index: 81;
  width:100%;
  top: 10%;
  left : 50%;
  transform: translate(-50%, -50%);
  color:#fd0606;
}

.folderContainers {
  display : block;
  width : auto;
}

.folderLiens {
  display : block;
  width : 25%;
  cursor:pointer;
}

.croixSliders {
  position : absolute;
  width : 2.5%;
  top : 10%;
  right : 1%;
  z-index: 85;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.croixSliders:hover, .boutonsPlay:hover, .boutonsPause:hover, .flechesDroites:hover, .flechesGauches:hover {
  opacity : 0.5;
}

.flechesDroites {
  display : block;
  position : absolute;
  width : 3%;
  top : 80%;
  right : 0%;
  z-index: 85;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.flechesGauches {
  display : block;
  position : absolute;
  width : 3%;
  top : 80%;
  left: 2.5%;
  z-index: 85;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.boutonsPlay {
  display : block;
  position : absolute;
  width : 3%;
  top : 10%;
  left: 2.5%;
  z-index: 85;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.boutonsPause {
  display : none;
  visibility:hidden;
  position : absolute;
  width : 3%;
  top : 10%;
  left: 2.5%;
  z-index: 85;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

#sponsorsContainerBis {
display :block;
position : relative;
width : 70%;
left : 20%;
transform: translate(-50%);
}

.sectionContainersEvensponsors {
display : inline-block;
width :15%;
margin-left:5%;
margin-right: 5%;
}

.lienInternetSponsors{
  display : block;
  width : 100%;
}

.lienInternetSponsors:hover {
opacity : 1;
}
.flip-card {
  background-color: transparent;
  width: 100%;
  perspective: 1000px;
  position:relative;

}

.flip-card-inner {
  position: relative;
  width: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 1rem;
  box-shadow : 0.30rem 0.30rem 0.30rem #fd0606, -0.30rem 0.30rem 0.30rem #fd0606, 0.30rem -0.30rem 0.30rem #fd0606, -0.30rem -0.30rem 0.30rem #fd0606;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front {
  position: relative;
  width: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 1rem;
}

.flip-card-front img {
  border-radius: 1rem;
}

.flip-card-back {
  position: absolute;
  width: 100%;
  height : 100%;
  top :0;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 1rem;
}

.flip-card-back p {
  position: relative;
  top : 10%;
  color : #000;
  text-shadow:none;
  border-radius: 1rem;
  font-size: 2.2rem;
}

.flip-card-front {
  background-color: white;
  color: black;
}

.flip-card-back {
  background-color: white;
  color: white;
  transform: rotateY(180deg);
}

footer {
  width : 100%;
  background:  url('images/fondSectionPetanqueLandscape.jpg') no-repeat fixed;
  background-size : cover;
  background-position : 50% 0%;
  position : relative;
  z-index: 1;
}

footer .landscape {
background:  url('images/fondSectionPetanqueLandscape.jpg') no-repeat fixed;
}

footer .portrait {
background:  url('images/fondSectionPetanquePortrait.jpg') no-repeat fixed;
}

footer img{
  display : block;
  width : 100%;
  opacity : 0.5;
}

footer a {
  color : #fff;
}

#bgFooter {
display : block;
width : 100%;
opacity : 0.7;
position : absolute;
width : 100%;
height : 100%;
top : 0;
}

#lienAdmin {
  display :block;
  position : absolute;
  top : 95%;
  left : 50%;
  z-index: 85;
  transform: translate(-50%, -50%);
}

.footerContainers {
  display:inline-block;
  position:absolute;
  width : 50%;
  top :0%;
  left:50%;
  transform: translate(-50%,125%);
}

#mentionsLegalesContainer {
  left:75%;
  transform: translate(-50%,125%);
}

#contactsContainer {
  left:25%;
  transform: translate(-50%,105%);
}