@font-face {
        font-family: 'FrederickatheGreat-Regular';
        src: url('fonts/FrederickatheGreat-Regular.ttf');
 
 }
@font-face {
  font-family: 'LibreBaskerville-Regular';
       src: url('fonts/LibreBaskerville-Regular.ttf');
}




* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
  list-style: none;

}
body{
  background: white;
}
/* Mon menu navigation */
header{
  margin-bottom: 10%;
}
.main-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
 
}
.logo img{
width: 100%;


}
.nav-links {
  display: flex;
  width: 100%;
  justify-content: space-around;
  color: red;
  font-family: 'FrederickatheGreat-Regular';
  font-size: 1.4em;
}


.burger {
  display: none;
  padding: 0.5rem;
  cursor: pointer;
}
.line {
  height: 2px;
  width: 35px;
  margin: 0.5rem 0;
  background: red;
  transition: transform 0.5s ease, opacity 0.5s ease;
  
}
.nav-links li a:hover{
 text-decoration: underline;

}


@media screen and (max-width: 900px) {
  .nav-links {
    width: 60%;
    
  }
 
  }

.main-nav.show .line1 {
  transform: translate(-10px) rotate(45deg) translate(15px);
}
.main-nav.show .line2 {
  opacity: 0;
}
.main-nav.show .line3 {
  transform: translate(-10px) rotate(-45deg) translate(15px);
}
.main-nav.show .nav-links {
  transform: translateX(0%);
}
@media screen and (max-width: 900px) {
  .nav-links {
    width: 60%;
   flex-direction: column;
   text-align: center;
  
  }
.nav-links li{
  padding: 2%;
  
}
}
@media screen and (max-width: 600px) {

  .burger {
    display: block;
    
  }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 90%;
    justify-content: space-evenly;
    
    background: #ffffff;
    transform: translateX(100%);
    transition: transform 0.5s ease;
    
  }
.nav-links img{
  width: 25px;
  margin-left: 2%;
}


}
/* Mon main de pade d'accueil*/
article h1{
  width: 100%;
  margin-top: 5%;
  margin-bottom: 5%;
  text-align: center;
  font-size: 1.8em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
  
}
.presentation{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

}

.text1{
  width: 50%;
  text-align: center
}
.text1 h2{
  width: 90%;
  margin: auto;
  text-align: center;
  font-size: 1.8em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
  padding-top: 8%;
  padding-bottom: 8%;
  color: dimgrey;
}
.text1 p {
  width: 80%;
  margin: auto;
  font-family: 'LibreBaskerville-Regular';
  font-size: 1.2em;
  padding: 5%;
  line-height: 2;
  
}
 .text1 a:hover{
text-decoration: underline;
  
}

.photo1{
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.photo1 img{
 width: 100%;
}

.photo1 p {
  
  width: 100%;
  text-align: center;
  font-family: 'LibreBaskerville-Regular';
  font-size: 0.6em;
  
}

.photo1 p:hover{
  text-decoration: underline;
}
.histoire{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
margin-top: 5%;
}
.text2{
  width: 50%;
  text-align: center
}
.text2 h2{
  width: 90%;
  margin: auto;
  text-align: center;
  font-size: 1.8em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
  margin-bottom: 5%;
  color: dimgrey;
}
.text2 p {
  width: 80%;
  margin: auto;
  font-family: 'LibreBaskerville-Regular';
  font-size: 1.2em;
 padding-top: 5%;
 word-spacing: 2px;
 line-height: 2;

 
}

.photo2{
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.photo2 img{
 width: 100%;
}
.photo2 p {
  
  width: 100%;
  text-align: center;
  font-family: 'LibreBaskerville-Regular';
  font-size: 0.6em;
 
}
.photo2 p:hover{
  text-decoration: underline;
}
.pedigree{
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
margin-top: 5%;
}
.text3{
  width: 50%;
  text-align: center
}
.text3 h2{
  width: 80%;
  margin: auto;
  text-align: center;
  font-size: 1.8em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
  padding-top: 8%;
  padding-bottom: 8%;
  color: dimgrey;
}
.text3 h2 a:hover{
  opacity: 0.6;
}
.text3 p {
  width: 80%;
  margin: auto;
  font-family: 'LibreBaskerville-Regular';
  font-size: 1.2em;
  padding: 5%;
}

.photo3{
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  

}

.photo3 img{
 width: 100%;
}

.photo3 p {
  
  width: 100%;
  text-align: center;
  font-family: 'LibreBaskerville-Regular';
  font-size: 0.6em;
  
}
.photo3 p:hover{
  text-decoration: underline;
}

.gen img{
  width: 30%;
  
}
.gen img:hover{
opacity: 0.6;
}

@media screen and (max-width: 600px){
.presentation {
  width: 100%;
  display: flex;
  flex-direction:column-reverse;
}
.photo1 {
  width: 100vw;
  
}
.text1{
  width: 90%;
  text-align: center;
  padding: 5%;
}
.text1 h2{
  width: 90%;
  margin: auto;
  text-align: center;
  font-size: 1.8em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
  padding: 20%;
 
  color: dimgrey;
}
.text1 p {
  width: 100%;
  margin: auto;
  line-height: 1.5;
  font-size: 1em;
  text-align: justify;
}
.histoire {
  width: 100%;
  display: flex;
  flex-direction:column;
  
}
.photo2 {
  width: 100vw;
  
}
.text2{
  width: 90%;
  text-align: center
}
.text2 h2{
  width: 90%;
  margin: auto;
  text-align: center;
  font-size: 1.8em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
  padding: 20%;
}
.text2 p {
  width: 100%;
  margin: auto;
  font-size: 1em;
 padding-top: 5%;
 word-spacing: 1px;
 line-height: 1.5;
 text-align: justify;
 padding: 10%;

}
.pedigree{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.text3{
  width: 90%;
  text-align: center
}
.text3 h2{
  width: 90%;
  margin: auto;
  text-align: center;
  font-size: 1.8em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
  padding: 20%;
  color: dimgrey;
}
.text3 p {
  
  width: 100%;
  margin: auto;
  font-family: 'LibreBaskerville-Regular';
  font-size: 1em;
 padding-top: 5%;
 word-spacing: 1px;
 line-height: 1;
 text-align: justify;
}
.photo3{
  width: 100vw;
}



}



/*Ma formule de contact*/

.container {
	max-width:400px;
	width:100%;
	margin:0 auto;

}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
	background:#ffffff;
	padding:25px;
	margin:50px 0;

}

#contact h3 {
  width: 100%;
  margin-top: 1%;
  margin-bottom: 10%;
  text-align: center;
  font-size: 1.8em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
  color: dimgrey;
}



fieldset {
	border: medium none !important;
	margin: 0 0 10px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:100%;
	border:1px solid rgb(255, 1, 1);
	background:rgb(255, 255, 255);
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid rgb(134, 0, 0);
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:rgb(255, 0, 0);
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size:15px;
}

#contact button[type="submit"]:hover {
	background:#09C;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:2px solid rgb(255, 0, 0);
}
::-webkit-input-placeholder {
 color:rgb(255, 0, 0);
}
:-moz-placeholder {
 color:rgb(255, 0, 0);
}
::-moz-placeholder {
 color:rgb(255, 0, 0);
}
:-ms-input-placeholder {
 color:rgb(255, 0, 0);
}
.bull{
  width: 100%;
  display: flex;
  justify-content: center;
 
  
}
.bull img{
max-width: 400px;

}
@media screen and (max-width: 600px){
  .bull{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -15%;
  margin-bottom: 10%;
  }
  .bull img{
    width: 60%;
    
    }
}
/* Mon asside */ 
aside{
  width: 90%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: auto;
  margin-bottom: 10%;
  margin-top: 10%;
  
}

aside p{
  width: 90%;
  margin: auto;
  text-align: center;
  font-size: 1.8em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
  padding: 5%;
  color: dimgrey;
  margin-bottom: 10%;
  
}
aside img{
  width: 100%;
margin-bottom: 30%;
}
aside ul{
  width: 50%;
  
}
aside img:hover{
  opacity: 0.6;
}





/* Mon footer */


footer{
width: 100%;
background: linear-gradient(white, black);

}
.logo-footer{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.logo-footer ul{
width: 50%;

}
.logo-footer ul li{
  text-align: center;
  font-size: 1.3em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
 letter-spacing: 2px;
 color:black;
line-height: 3;
margin-top: 3%;
}

.logo-footer ul li:hover{
 text-decoration: underline; 
}


.logo-footer img{
width: 50%;
margin-left: 10%;
}
.copyright{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
 margin-top: 10%;
 font-size: 0.7em;
 font-weight: 100;
 font-family: 'LibreBaskerville-Regular';
 color: white;

}
.copyright p{
  line-height: 2;
}
.copyright p a:hover{
  text-decoration: underline;
}
hr{
  width: 70%;
  margin:auto;
  margin-top: 5%;
}

@media screen and (max-width: 600px){
  .logo-footer {
    width: 90%;
    margin:auto;
    display: flex;
    justify-content: space-around;
  align-items: center;
    
  }
  .logo-footer img{
   
    width: 60%;
  
   margin: 0;
  }
  
.logo-footer ul li{
  text-align: center;
  font-size: 0.8em;
  font-family: 'FrederickatheGreat-Regular';
  font-weight: lighter;
  color: black;
line-height: 3;
margin-top: 3%;
}
.copyright{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
 padding: 5%;
 font-size: 0.6em;
 font-family: 'LibreBaskerville-Regular';
 color: white;
}
}


/* Mentions légales*/
.baseball{
  width: 70%;
  margin:auto;
  margin-bottom: -10%;
  margin-top: 5%;
  
}
.mentions{
  width: 80%;
  margin: auto;
  
  font-family: 'LibreBaskerville-Regular';
  font-size: 0.7em;
  margin-top: 5%;
  line-height: 2.5;
}
.mentions h2, h3{
  text-align: center;
  padding: 2%;
  
}
/* Ma galerie images*/


.gallery input{
	
	position:absolute;
	left:-9999px
	
	}/*on cache tous les input*/
	
	label{
		overflow: hidden;
	cursor: pointer	
		
	}

.diaporama{

display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
grid-auto-rows: 240px;
grid-gap: 1rem;

	}

.diaporama li label{
	width: 100%;
  height: 100%;
  margin: auto;
display: flex;
justify-content: center;

	}
	


.diaporama li img{
margin:0; 

object-fit: cover;
transition: all .2s ease-in;
	padding: 1%;
}

    
.sous-couche,
.fenetre{

		
position:fixed;
		
	}
   
.suivant,
.precedent,
.fermer,
.fenetre img{
	
position:absolute;
	
	}
 
    
.fermer,	
.suivant,
.precedent{
display:flex;
justify-content: center;	
width: 3.125rem;
height: 3.125rem;
z-index: 2;
	
	}	
	
.suivant{
	bottom: 0;
	right: 0;
	
	}

.precedent{
	
	bottom: 0;
	left: 0;
	
	}
	

@media (min-width:62.75rem){
	
	
	.precedent,	
	.suivant	{

	top:50%;
	transform:translatey(-50%);
		
	}
	}
	
.fenetre{

z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform:scale(0);
visibility: hidden;
opacity: 0;
	
	}
    
.fermer{

right: 0;
top:.55rem;

	
	}
    
.fenetre img{
	
max-height: 90%;
max-height: 100vmin;
max-width: 100%;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
	
	}
    
#fenetre1:checked ~ .fenetre1,
#fenetre2:checked ~ .fenetre2,
#fenetre3:checked ~ .fenetre3,
#fenetre4:checked ~ .fenetre4,
#fenetre5:checked ~ .fenetre5,
#fenetre6:checked ~ .fenetre6,
#fenetre7:checked ~ .fenetre7,
#fenetre8:checked ~ .fenetre8,
#fenetre9:checked ~ .fenetre9,
#fenetre10:checked ~ .fenetre10,
#fenetre11:checked ~ .fenetre11,
#fenetre12:checked ~ .fenetre12
{
visibility: visible;
opacity: 1;
transform:scale(1);
transition: .2s opacity linear,transform .2s;
}
    
    
    
.sous-couche{
opacity: 0;
left: 0;
top: 0;
background: hsla(0, 0%, 0%, 0.8);
transition:.2s opacity linear;
z-index: 1;
	}
    
.cache:checked~.sous-couche{
	
height: 100%;
width: 100%;
opacity: 1;
	
	}   
  
  /* Ma page blog */
 

  .main{
   width: 90%;
    margin: 0 auto;
    
  }
  
  .main h1 {
    width: 80%;
    margin: auto;
    text-align: center;
    font-size: 1.8em;
    font-family: 'FrederickatheGreat-Regular';
    font-weight: lighter;
    color: dimgrey; 
    padding: 1%;
  }
  .date{
     font-size: 0.6em;
 font-family: 'LibreBaskerville-Regular';
color: rgb(103, 103, 103);
  }
  .card_content h2{
        font-size: 1em;
 font-family: 'LibreBaskerville-Regular';
 

  }
  
  img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
  }
  

  
  .cards {
   
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .cards_item {
    display: flex;
    padding: 1rem;
    justify-content: space-around;
   width: 100%;
   
  }
  
  @media (min-width: 40rem) {
    .cards_item {
      width: 50%;
    }
  }
  
  @media (min-width: 56rem) {
    .cards_item {
      width: 33.3333%;

    }
  }
  
  .card {
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    overflow: hidden
  }
  
  .card_content {
    padding: 1rem;
    background: rgb(255, 255, 255)
  }
  
  .card_title {
    color: #000000;
    font-size: 1.1rem;
    font-family: 'LibreBaskerville-Regular';
    margin: 0px;
   
  }
  
  .card_text {
    color: #000000;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 2rem;
    margin-bottom: 1.25rem;    
    font-weight: 200;
    font-family: 'LibreBaskerville-Regular';
  }