@media (orientation: portrait) {
    body {
        overflow:hidden; 
        flex-direction: column;
    }

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

    .container{
      width: 100vw;
      height: 100vh;
      }

    .fill-img {
      display: none;
  }
  

    .typo1 {
    padding-top: 5%;
		color: rgb(0, 0, 0); 
		font-size: calc(var(--font-size));
		font-weight: bold; 
		font-family: 'Times New Roman', Times, serif, sans-serif; 
	}

	.typo2 {
		color: rgb(255, 0, 0); 
    font-size: calc(var(--font-size)*2.5); 
		font-family: "coeur", sans-serif;
	}
	
	.typo-3 {
		color: #000000; 
    font-size: calc(var(--font-size)*2);
		font-style: italic; 
		font-family: "baloo",sans-serif;
	}

	.top-right-box {
	  width: 50%; 
	  height: 15%;
	  right: 15; 
	  bottom: 18%;
	}

  .card1Responsive {
    display: block;
    position: fixed;
    right: 5%;
    width: 35%;
    top: 5%;
    height: 13%;
    background-color: rgb(255, 0, 0);
    z-index:5;
	}

  .card2Responsive {
    display: block;
    position: fixed;
    right: 5%;
    width: 35%;
    height: 13%;
    top:20%;
    background-color: rgb(107, 0, 0);
    z-index: 5;
	}

  .card1Responsive img{
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .card2Responsive img{
    width: 100%;
    height: 100%;
    object-fit: fill;
  }


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

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


    .postcards {
        display: none
      }


	  .pancarte-stresa{
		bottom:-5%;
	  }

    .pancarte-stresa img{
      scale: 1.2;
    }

	  .street-img{
		width: 100%;
		z-index: 1;
    bottom: 0%;
	  }

	  .next{
		width: 20%;
		height: 20%;
		bottom: 0%;
    right: 10%;
	  }

    .next img{
      scale: 1.5;
    }

	  .middle-right-box {
        position: absolute;
		width: 90%;
        left: 50%;
        top: 37%; 
        transform: translateX(-50%);
        overflow:hidden; 
        z-index: 8;
	  }

    .flag-img {
      position: absolute;
      min-width: 100%;
      min-height: 100vh;
      z-index: 0;
      }
      
      .flag-img img {
      width: 100%;
        height: 100vh;
        object-fit: cover;
      }
    

	  .top-left-box{
        width: 90%;
        position: absolute;
        left: 50%; 
        transform: translateX(-50%);
        top: 1%;
        overflow:hidden; 
	  }

      .typo-link {
        color: #46aaec;
        font-size: calc(var(--font-size) * 1.5);
        font-family: 'Times New Roman', Times, serif, sans-serif;
        text-decoration: none;
        transition: text-decoration 0.3s ease;
        margin-left: 5%;
        margin-top: 70px;
        line-height: calc(var(--font-size) * 2);
    }

	  .plateau-fromage{
		width: 50%;
		height: 30%;
		top: -2%;
		left:-30%;
    z-index: 9;
	  }

	  .fleche{
		bottom: 20%;
		left: 10%;
		height: 20%;
		width: 20%;
    z-index: 10;

	  }

	  .appelation{
		top: 83%;
		left: 45%;
		height: 10%;
		width: 20%;
	  }


      .popupFromages {
       display: none;
       z-index: -10;
          /*position: fixed;
        width: 90%;
        padding-bottom: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgb(255, 255, 255);
        text-align: center;
        z-index: 10;
        border: 1px solid #000000; */
      }

      /* .zonephotoFromage{
        position: absolute;
        width: 100%;
        padding-bottom: 68%;
        left: 0px;
        background-color: rgb(129, 36, 36);
        z-index: 7;
        }

        .zonephotoFromage img{
          width: 100%;
          height: 90%;
          object-fit: fill;
        } */

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

      .popupStresass img{
        top: 10%;
        position: fixed;
        width: 100%;
        height: 90%;
        object-fit: fill;
     }

     .grid-container {
      display: none;
    }

    .grid-item{
      display: none;
    }

     .popupConventionss {
        display: none;
        position: fixed;
        width: 100%;
        height: 80%;
        bottom: 0%;
        left: 50%;
        background-color: #ffffff;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 10;
        border: 1px solid #000000;
      }

      .popupDefinitionss {
        display: none;
        position: fixed;
        width: 90%;
        padding-bottom: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgb(0, 0, 0);
        text-align: center;
        z-index: 10;
        border: 1px solid #000000;
      }
    
      .zonephotoDefinition p {
        margin-top: 10%;
        margin-left: -10%;
        font-size: calc(var(--font-size) * 1.5);
        color: #ffffff;
        overflow: hidden;
        width: 90%;
        height: 100%;
    }
    

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

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

  }