:root{
	--font-size: calc(0.6rem + 0.8vw);
	/* font-size: calc(var(--font-size) * 2); */
  }

.popupCartepostale1 {
	display: none;
	position: fixed;
	width: 30%;
	padding-bottom: 20%;
	top: 50%;
	left: 20%;
	transform: translate(-50%, -50%) rotate(15deg);;
	background-color: rgb(255, 255, 255);
	z-index: 9;
  }

  .card1Responsive{
	display: none;
  }

  .card2Responsive{
	display: none;
  }

  .card3Responsive{
	display: none;
  }


  .popupCartepostale2 {
	display: none;
	position: fixed;
	width: 30%;
	padding-bottom: 20%;
	top: 70%;
	left: 80%;
	transform: translate(-50%, -50%) rotate(-15deg);
	background-color: rgb(8, 3, 79);
	z-index: 6;
  }

  .popupCartepostale3 {
	display: none;
	position: fixed;
	width: 30%;
	padding-bottom: 20%;
	top: 70%;
	left: 20%;
	transform: translate(-50%, -50%) rotate(30deg);
	background-color: #00ff9d;
	z-index: 6;
  }

  .popupCartepostale4 {
	display: none;
	position: fixed;
	width: 30%;
	padding-bottom: 20%;
	top: 30%;
	left: 80%;
	transform: translate(-50%, -50%) rotate(10deg);
	background-color: #ff0000;
	z-index: 6;
  }

  .popupCartepostale5 {
	display: none;
	position: fixed;
	width: 30%;
	padding-bottom: 20%;
	top: 60%;
	left: 20%;
	transform: translate(-50%, -50%) rotate(20deg);
	background-color: #f700ff;
	z-index: 6;
  }

  .popupCartepostale6 {
	display: none;
	position: fixed;
	width: 30%;
	padding-bottom: 20%;
	top: 50%;
	left: 20%;
	transform: translate(-50%, -50%) rotate(-15deg);
	background-color: #ff9100;
	z-index: 6;
  }

  .popupCartepostale7 {
	display: none;
	position: fixed;
	width: 30%;
	padding-bottom: 20%;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(20deg);
	background-color: #e5ff00;
	z-index: 6;
  }

  .popupCartepostale8 {
	display: none;
	position: fixed;
	width: 30%;
	padding-bottom: 20%;
	top: 70%;
	left: 55%;
	transform: translate(-50%, -50%) rotate(-10deg);
	background-color: #00ff9d;
	z-index: 6;
  }

  .popupCartepostale9 {
	display: none;
	position: fixed;
	width: 30%;
	padding-bottom: 20%;
	top: 30%;
	left: 70%;
	transform: translate(-50%, -50%) rotate(10deg);
	background-color: #00ff9d;
	z-index: 6;
  }

  .popupCartepostale10 {
	display: none;
	position: fixed;
	width: 30%;
	padding-bottom: 20%;
	top: 50%;
	left: 30%;
	transform: translate(-50%, -50%) rotate(-20deg);
	background-color: #e1ff00;
	z-index: 6;
  }

/* //////////////////////////////////////// */

  .popupCartepostale1 img{
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: fill;
 }

 .popupCartepostale2 img{
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: fill;
 }

 .popupCartepostale3 img{
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: fill;
 }

 .popupCartepostale4 img{
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: fill;
 }

 .popupCartepostale5 img{
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: fill;
 }

 .popupCartepostale6 img{
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: fill;
 }

 .popupCartepostale7 img{
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: fill;
 }

 .popupCartepostale8 img{
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: fill;
 }

 .popupCartepostale9 img{
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: fill;
 }

 .popupCartepostale10 img{
	position: fixed;
	width: 100%;
	height: 100%;
	object-fit: fill;
 }

 /* //////////////////////////////////////// */


.popupFromages {
	display: none;
	overflow: hidden;
	position: fixed;
	width: 60%;
	padding-bottom: 40%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
	text-align: center;
	z-index: 6;
	border: 1px solid #000000;
  }

  .grid-container {
	width: 98%;
	display: grid;
	position: fixed;
	grid-template-columns: repeat(10, 1fr);
	gap: 1%;
	margin-left: 1%;
	margin-top: 1%;
	justify-content: center;
    align-items: center;
	overflow: hidden;
}

.grid-item {
	padding: 10px; 
	
}

.grid-item img{
	width: 90%;
	height: 50%;
	object-fit: contain;
}

 /* //////////////////////////////////////// */

  .popupStresass {
	display: none;
	position: fixed;
	width: 60%;
	padding-bottom: 40%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
	text-align: center;
	z-index: 6;
	border: 1px solid #000000;
  }

  .popupStresass img{
	position: fixed;
	width: 100%;
	height: 93%;
	object-fit: cover;
 }

 .video-container {
	width: 80%;
	margin: auto;
}

video {
	width: 100%;
	height: auto;
	display: block;
}

 /* //////////////////////////////////////// */

  .popupConventionss {
	display: none;
	position: fixed;
	width: 60%;
	padding-bottom: 40%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 6;
	border: 1px solid #000000;
  }

   /* //////////////////////////////////////// */
  
  .popupDefinitionss {
	display: none;
	position: fixed;
	width: 60%;
	padding-bottom: 40%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 6;
	border: 1px solid #000000;
	background-color: #ffffff;
  }

  .barre-grise-popup{
	position: absolute;
	width: 100%;
	padding-bottom: 5%;
	left: -1px;
	top: -1px;
	background-color: #666666;
	z-index: 7;
	border: 1px solid #000000;
  }

  .zonephoto{
	position: absolute;
	width: 100%;
	padding-bottom: 62%;
	left: -1px;
	bottom: -1px;
	background-color: rgb(171, 0, 233);
	z-index: 7;
	border: 1px solid #000000;
  }

  .zonephoto{
	width: 0%;
	height: 0%;
	object-fit: cover;
  }

  .zonephotoConvention{
	position: fixed;
    width: 100%;
    height: 100%;
    left: -1px;
    top: 0;
    background-color: rgb(255, 255, 255);
    border: 1px solid #000000;
	overflow: auto;
  }

  .zonephotoConvention img{
	width: 100%;
    height: auto;
    display: block;
  }

  .zonephotoDefinition {
    position: fixed;
    width: 100%;
    padding-bottom: 40%;
    left: 3%;
    top: 10%;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: left;
	overflow: hidden;
}

.zonephotoDefinition p {
    margin-top: 1%;
	margin-left: -10%;
	font-size: calc(var(--font-size) * 2);
    color: #000000;
    overflow: hidden;
	width: 90%;
	height: 100%;
}

.popupFromagesResponsive{
	display: none;
}

.titre {
	color: rgb(0, 47, 255); 
	font-size: calc(var(--font-size) * 2);
}

  .zonephotoFromage{
	position: absolute;
	width: 100%;
	padding-bottom: 62%;
	left: -1px;
	bottom: -1px;
	background-color: rgb(255, 255, 255);
	z-index: 7;
  }

  .zonephotoFromage img{
  }


  .fermer-popup{
	position: absolute;
	width: 5%;
	padding-bottom: 4%;
	right: 0%;
	top: 1%;
	z-index: 7;
	opacity: 0.5;
  }

  .fermer-popup:hover{
	opacity: 1;
  }

  .fermer-popup:before, .fermer-popup:after {
	position: absolute;
	left: 50%;
	content: ' ';
	height: 100%;
	width: 10%;
	background-color: #ff0000;
  }

  
  .fermer-popup:before {
	transform: rotate(45deg);
  }
  .fermer-popup:after {
	transform: rotate(-45deg);
  }