/* MEDIA QUERY COLLECTION */
@media screen and (max-width: 1200px) { /* regole per schermi tra 1200 e 993 px (laptops/desktop) */
  html {
    font-size: 5.75%
  }
  section.hero .heading {
    padding: 20rem 0 32rem 0;
  }
  section#destinations {
    min-height: unset;
  }
  section#destinations .heading {
    margin-top: 44rem;
  }
  section#destinations .destination-cards .destination-card {
    min-width: 328rem;
    margin-top: 16rem;
  }
  section#offers .offer-cards .offer-card a {
    padding: 8rem 16rem;
    font-size: 15.2rem
  }
  section#offers .offer-cards .offer-card .offer-card-content h3 {
    color: var(--redgate);
    font-size: 15.6rem;
  }
  footer {
    padding: 16rem 4%;
  }
  footer .popup .popup-content p {
    margin-bottom: 4rem;
  }
}

@media screen and (max-width: 992px) { /* regole per schermi tra 992 e 769 px (landscape tablet) */
  html {
    font-size: 5.25%
  }
  header {
    padding: 0 4%;
  }
  section#destinations .destination-cards .destination-card {
    min-width: 300rem;
    max-width: 340rem;
  }
  section#offers .offer-cards .offer-card {
    flex: 0 0 calc(48% - 8rem);
  }
  section#offers .offer-cards .offer-card a {
    font-size: 18.4rem
  }
  section#offers .offer-cards .offer-card .offer-card-content h3 {
    color: var(--redgate);
    font-size: 18.8rem;
  }
  footer .panels {
    flex-direction: column;
  }
  footer .panels .leftish,
  footer .panels .rightish {
    width: 100%;
    margin: 0;
  }
  footer .panels .rightish {
    margin-top: 16rem;
  }
  footer .panels .rightish .reasons .reasons-content {
    min-height: 92rem;
    padding: 8rem 16rem 0 16rem;
  }
  footer .btn-container {
    flex-flow: row;
  }
  footer .btn-container a {
    width: calc(50% - 4rem);
    font-size: 13.6rem;
  }
  section#bottega.hero .tour-container .tour-box {
    flex: 1 1 calc(50% - 28rem) !important;
    max-width: calc(50% - 28rem) !important;
  }
}

@media screen and (max-width: 768px) { /* regole per schermi tra 768 e 661 px (portrait tablet and large phone) */
  html {
    font-size: 5%
  }
  header {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header #menu-bar {
    position: absolute;
    left: 4%;
    cursor: pointer;
    display: initial;
    z-index: 2;
  }
  header .navbar {
    width: 160rem;
    position: absolute;
    top: 64rem;
    right: 0;
    left: 0;
    background: var(--cornflower_light50);
    padding: 0 16rem;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  header .navbar.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  header .navbar a {
    display: block;
    border-radius: 8rem;
    padding: 8rem;
    margin: 8rem 0;
    background-color: var(--cornflower_light90);
  }
  .fa-times {
    width: 50.8rem;
  }
  .fa-times::before {
    margin: 0 4rem;
  }
	#knowUs {
		transform: translateY(0);
    top: 64rem;
		height: 36rem;
    z-index: 1000;
	}
  section.hero .heading {
    text-align: center;
    padding: 20rem 0 8rem 0;
  }
  section#destinations .heading {
    margin-top: 4rem;
  }
  section#destinations .destination-cards .destination-card {
    min-width: 400rem;
    max-width: 400rem;
  }
  section#offers .offer-cards {
    gap: 32rem 0;
  }
  section#offers .offer-cards .offer-card a {
    font-size: 14.4rem
  }
  section#offers .offer-cards .offer-card .offer-card-content h3 {
    color: var(--redgate);
    font-size: 16.4rem;
  }
  section#offers .offer-cards .offer-card .offer-card-content p {
    font-size: 12.8rem;
  }
  footer {
		transform: translateY(-100vh);
		padding: 76rem 32rem 0 32rem;
		bottom: auto;
		top: 36rem;
	}
	footer.active {
		transform: translateY(-36rem);
	}
  footer .btn-container {
    flex-direction: column;
  }
  footer .btn-container a {
    width: 80%;
  }
  footer .copyright {
    margin-bottom: 16rem;
  }
  footer .closer {
    top: 64rem;
  }
  section#contacts.hero .contact-box {
    margin: 48rem auto;
  }
}

@media screen and (max-width: 660px) { /* regole per schermi tra 660 e 481 px (landscape phones) */
  html {
    font-size: 4.75%
  }
  section.hero .heading span {
    font-size: 23.6rem;
    padding: 4rem 4rem;
  }
  section#destinations .destination-cards .destination-card {
    min-width: 280rem;
  }
  section#offers .offer-cards .offer-card {
    min-width: 100%;
    margin: 0 auto;
  }
  section#offers .offer-cards .offer-card a {
    font-size: 19.6rem
  }
  section#offers .offer-cards .offer-card .offer-card-content h3 {
    color: var(--redgate);
    font-size: 21.6rem;
  }
  section#offers .offer-cards .offer-card .offer-card-content p {
    font-size: 17.6rem;
  }
  footer .panels .rightish .reasons .reasons-content {
    min-height: 100rem;
  }
  section#contacts.hero {
    display: flex;
    justify-content: center;
  }
  section#contacts.hero .contact-box {
    margin: 48rem 32rem;
    padding: 16rem;
  }
  section#bottega.hero .tour-container .tour-box {
    flex: 1 1 calc(100% - 28rem) !important;
    max-width: calc(100% - 28rem) !important;
  }
}

@media screen and (max-width: 480px) { /* regole per schermi tra 480 e 427 px (portrait phones) */
  html {
    font-size: 4.5%
  }
  section.hero {
    padding: 0 120rem;
  }
  #knowUs a {
    background-color: var(--cornflower_light80) !important;
    color: var(--redgate) !important;
  }
  footer {
    max-height: calc(84vh - 4rem);
  }
  footer .popup {
    top: 52%;
  }
  footer p.address {
    font-size: 13.2rem;
  }
  footer .panels .rightish .reasons .reasons-content {
    min-height: 140rem;
  }
  footer .btn {
    padding: 8rem;
  }
  section#contacts.hero .contact-box {
    margin: 32rem;
  }
  section#contacts.hero .tcpp table th,
  section#contacts.hero .tcpp table td {
    padding: 4rem;
    font-size: 11.6rem;
  }
}

@media screen and (max-width: 426px) { /* regole per schermi tra 426 e 376 px (phones L) */
  section.hero {
    padding: 0 64rem;
  }
}

@media screen and (max-width: 375px) { /* regole per schermi tra 375 e 321 px (phpnes M) */
  html {
    font-size: 4.25%
  }
  footer .panels .rightish .reasons .reasons-labels label p {
    font-size: 12.4rem;
  }
  footer .panels .rightish .reasons .reasons-content {
    min-height: 148rem;
  }
  footer a.btn {
    font-size: 13.2rem;
  }
  section#contacts.hero .contact-box {
    padding: 8rem;
  }
  section#policies.hero .tcpp table th,
  section#policies.hero .tcpp table td {
    padding: 4rem;
    font-size: 10rem;
  }
  section#home.hero .content p {
    font-size: 21.6rem;
  }
}

@media screen and (max-width: 320px) { /* regole per schermi inferiori a 320 px (phones S) */
  html {
    font-size: 4%
  }
}