/*2500pixels (Computer) */
@media (max-width: 156.25em) {
  /*Mobile Bar Locations */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .locations-page-grid {
    grid-template-columns: 0.6fr 1fr 0.6fr;
  }

  .rubys-locations-logo {
    width: 40%;
  }

  .location-page-city-art,
  .location-page-menu-box {
    width: 70%;
  }

  .location-art-bar-img {
    width: 80%;
  }
}

/*2400pixels (Computer) */
@media (max-width: 150em) {
  /*homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .homepage-mobile-bar-box-2 {
    width: 65%;
    justify-content: flex-end;
  }
}

/*2200pixels (Computer) */
@media (max-width: 137.5em) {
  /*homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .homepage-mobile-bar-box-2 {
    width: 75%;
  }
  /*Cocktails & Mocktails */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .shaker-art,
  .het-art {
    width: 70%;
  }

  .c-m-img-grid-flex {
    margin: 0 4.8rem;
  }
}

/*2158 pixels (Computer) */
@media (max-width: 135em) {
  html {
    font-size: 60%;
  }

  /*homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .homepage-mobile-bar-box-2 {
    width: 80%;
  }

  .homepage-c7-icon,
  .homepage-c8-icon {
    width: 8rem;
  }

  .homepage-c5-icon,
  .homepage-c15-icon,
  .homepage-c9-icon {
    width: 7rem;
  }

  /*Cocktails */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .c-m-img-grid-flex {
    margin: 0 2.4rem;
  }

  .c-m-img-grid-container-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1.2rem;
  }

  .c-m-img-grid-container-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 0 8rem;
    column-gap: 1.2rem;
  }

  .cocktail-img-1,
  .cocktail-img-1:link,
  .cocktail-img-1:visited {
    width: 100%;

    transition: all 0.5s;
  }

  /*Mobile Bar Locations */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .rubys-locations-logo {
    width: 50%;
  }

  .location-page-city-art {
    width: 80%;
  }
}

/*2000 Pixels */
@media (max-width: 125em) {
  /*homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .home-page-img-p {
    width: 75%;
  }

  .grid-home {
    column-gap: 4.8rem;
  }

  /*homepage 2*/
  .homepage-mobile-bar-box-2 {
    width: 90%;
  }

  /*Homepage 3*/

  .locations-grid {
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /*Cocktails */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .cmd-mobile-bar-box-2 {
    width: 120%;
  }

  /*Mobile Bar Locations */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .locations-page-grid-1,
  .locations-page-grid-3 {
    height: 100%;
    background-size: auto;
  }

  .location-page-city-art,
  .location-art-bar-img {
    width: 40%;
  }

  .location-page-menu-box,
  .rubys-locations-logo {
    width: 50%;
  }

  .locations-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100rem 1fr 100rem;
    margin-bottom: 4.8rem;
  }

  .locations-page-grid-1 .locations-page-grid-3 {
    background-size: cover;
  }
}

/*1900 Pixels */
@media (max-width: 118.75em) {
  /*homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .homepage-mobile-bar-box-2 {
    width: 100%;
  }

  /*Cocktails / Mocktails Menu */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .cover {
    width: 65rem;
    /* height: 75vh; */
  }

  .btn-component {
    gap: 2.4rem;
  }

  .c-m-img-grid-container-1,
  .c-m-img-grid-container-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 1.2rem;
    row-gap: 1.2rem;
  }

  .c-m-img-box-fit {
    grid-column: 2;
  }

  /*Cocktails */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .cmd-mobile-bar-box-2 {
    width: 100%;
  }

  .cmd-info-grid-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 4.8rem;
  }

  .cmd-mobile-bar-box-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 45%;
    grid-column: span 2;
  }

  .cmd-info-right-2 {
    grid-column: 2;
    grid-row: 2;
  }

  .cmd-info-left-2 {
    grid-column: 1;
    grid-row: 2;
  }

  .mobile-bar-package-info-grid {
    grid-template-columns: 0.8fr 1fr 0.8fr;
  }

  .mobile-bar-gallery-componenets {
    gap: 0rem;
  }
}

/*1800 Pixels */
@media (max-width: 112.5em) {
  /*homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .homepage-info-grid-2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 3.2em;
  }

  .homepage-mobile-bar-box-2 {
    width: 55%;
  }
  /*Page 3*/

  /*Cocktails */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .shaker-art,
  .het-art {
    width: 85%;
  }
}

/*1700 Pixels */
@media (max-width: 106.25em) {
  /*homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .home-page-img-p {
    width: 85%;
  }

  .grid-home {
    margin: 0 4.8em;
  }

  /*Homepage 2*/

  .homepage-mobile-bar-outer-box-2 {
    margin: 0em 4.8em;
  }

  /*Homepage 3*/

  .events-poster {
    width: 90%;
  }

  .homepage-events-container {
    margin: 4.8em 4.8em;
  }

  .homepage-services-container {
    margin: 4.8em 4.8em;
  }
  /*Homepage 4*/

  .locations-grid {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .locations-box {
    margin: 0rem 4.8em;
  }

  /*Homepage 4*/

  .mobile-bar-booking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.4rem;
    row-gap: 2.4rem;
  }

  .desserts-catering-booking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.4rem;
    row-gap: 2.4rem;
  }

  .booking-box {
    margin: 0em 4.8em;
  }

  /*Homepage 5*/

  .homepage-slogan-container {
    margin: 0 4.8em;
  }

  .homepage-lips-art {
    width: 12%;
  }
  /*Cocktails */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .cocktails-intro-box-outer,
  .mocktails-intro-box-outer {
    margin: 4.8em 4.8em;
  }

  .cocktails,
  .mocktails {
    flex-direction: column;
  }

  .section-cocktails-menu,
  .mocktail-menu-container {
    height: 100%;
    margin-top: 2.4em;
    margin-bottom: 2.4em;
  }

  .c-m-img-grid-flex {
    margin: 0 4.8rem;
  }

  .c-m-img-grid-container-1,
  .c-m-img-grid-container-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 2.4rem;
    row-gap: 2.4rem;
  }

  .cocktail-img-1,
  .cocktail-img-1:link,
  .cocktail-img-1:visited {
    width: 90%;
  }

  .cocktail-img-2,
  .cocktail-img-2:link,
  .cocktail-img-2:visited {
    width: 100%;
  }

  .cmd-mobile-bar-box-2 {
    width: 55%;
  }

  /*Contact Us */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .contact-form-box {
    margin: 4.8em 4.8em;
  }

  .booking-box-contact-us {
    margin: 0em 4.8em;
  }

  .mobile-bar-booking-grid-contact-us,
  .desserts-catering-booking-grid-contact-us {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 2.4rem;
    column-gap: 2.4rem;
  }

  /*Locations Mobile Bar*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .locations-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60rem 1fr 60rem;
    margin-bottom: 4.8rem;
  }

  .location-page-city-art,
  .location-art-bar-img {
    width: 50%;
  }

  .location-page-menu-box {
    width: 60%;
  }

  /*Mobile Bar*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  .mobile-bar-container {
    margin: 0 4.8em;
  }

  .mobile-bar-grid-container {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    row-gap: 4.8em;
  }

  .mobile-bar-grid-4 {
    grid-row: 1;
    grid-column: 2;
  }

  .drawing-1,
  .drawing-2,
  .drawing-3 {
    width: 75%;
  }

  .small-cover-container {
    /* These properties do not work because we have an anchor element wrapped around an image 
    display: flex;
    align-items: center;
    justify-content: center; 
    */
    width: 90%; /*If we wanted the small-cover to be smaller we adjust this height and not the small-cover hieght because
    we used an acnhor element wrapped around the image so flex-box breaks down with this in this container */
  }

  .mobile-bar-booking-container-2 {
    margin: 0rem 4.8em;
  }

  .mobile-bar-slogan-container {
    margin: 0 4.8em;
  }

  .mobile-bar-booking-grid-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 2.4rem;
  }

  .mobile-bar-package-info-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 4.8rem;
  }

  .mobile-bar-package-info-left-main {
    grid-column: 1;
    grid-row: 2;
  }

  .mobile-bar-package-info-right-main {
    grid-column: 2;
    grid-row: 2;
  }

  .mobile-bar-package-box {
    grid-column: span 2;
  }

  .mobile-bar-art {
    width: 50%;
  }

  .mobile-bar-packages-outer-box {
    margin: 4.8em 4.8em;
  }

  .mobile-bar-packages-outer-box-2 {
    margin: 0em 4.8em;
  }

  .mobile-bar-gallery-container {
    margin: 0 4.8em;
  }

  .mobile-bar-gallery-componenets {
    flex-direction: column;
    gap: 6rem;
    margin: 0rem 0rem;
  }

  .mobile-bar-imgs-1,
  .mobile-bar-imgs-3 {
    width: 40%;
  }

  .mobile-bar-imgs-2 {
    width: 50%;
  }
}

/*1500 Pixels */
@media (max-width: 93.75em) {
  /*homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .home-page-img-p {
    width: 95%;
  }

  .homepage-mobile-bar-box-2 {
    width: 65%;
  }

  /*Cocktails */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .shaker-art,
  .het-art {
    width: 100%;
  }

  .cocktails-intro-text-box,
  .mocktails-intro-text-box {
    column-gap: 2.4rem;
  }
}

/*1400 Pixels */
@media (max-width: 87.5em) {
  /*Cocktails, Mocktails Page */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .cocktail-img-1,
  .cocktail-img-1:link,
  .cocktail-img-1:visited {
    width: 100%;
  }

  .cmd-info-grid-2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 4.8em;
  }

  .cmd-mobile-bar-box-2 {
    grid-column: 1;
    grid-row: 1;
  }

  .cmd-info-left-2 {
    grid-column: 1;
    grid-row: 2;
  }

  .cmd-info-right-2 {
    grid-column: 1;
    grid-row: 3;
  }

  .cmd-mobile-bar-box-2 {
    width: 60%;
  }
}
/*1300 Pixels */
@media (max-width: 81.25em) {
  /*homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .home-page-img-p {
    width: 105%;
  }
}

/*1200 Pixels (Mobile Navigation) */
@media (max-width: 75em) {
  .hidden-nav-open-box {
    display: inline-block;
  }

  /*Header for index/homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .header-box-index {
    display: none;
  }

  /*Homepage 1 */

  .grid-home {
    grid-template-rows: auto auto auto;
    margin: 0 4.8em;
    column-gap: 2.4em;
    row-gap: 12em;
  }

  .heading-1 {
    font-size: 4.8em;
  }

  .title-home {
    font-size: 4em;
  }

  .para-home {
    font-size: 2.2em;
  }

  .services-list {
    font-size: 2em;
  }

  .home-page-img-p {
    width: 80%;
  }

  .home-page-img-l {
    width: 100%;
  }

  /*Homepage Page 2 */

  .homepage-mobile-bar-outer-box-2 {
    margin: 0em 4.8em;
  }

  .homepage-world-rubys-heading {
    font-size: 4.2em;
  }

  .homepage-world-rubys-text,
  .homepage-world-rubys-text-2 {
    font-size: 2.2em;
  }

  .homepage-world-rubys-slogan {
    font-size: 4.8em;
  }

  .homepage-c7-icon,
  .homepage-c8-icon {
    width: 10rem;
  }

  .homepage-c9-icon,
  .homepage-c5-icon,
  .homepage-c15-icon {
    width: 9rem;
  }

  /*Homepage Page 3 */

  .homepage-events-container {
    margin: 4.8em 4.8em;
  }

  .homepage-events-heading {
    font-size: 4.8em;
  }

  .events-poster {
    width: 95%;
  }

  .homepage-events-type,
  .homepage-events-type:link,
  .homepage-events-type:visited {
    font-size: 4.2em;
  }

  /*Homepage Page 4 */

  .locations-box {
    margin: 0rem 4.8em;
  }

  .locations-heading {
    font-size: 4.8em;
  }

  .locations-text {
    font-size: 2.2em;
  }

  .grid-heading {
    font-size: 4.2em;
  }

  /*Homepage Page 5 */

  .booking-box {
    margin: 0rem 4.8em;
  }

  .mobile-bar-booking-grid,
  .desserts-catering-booking-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 2.4em;
  }

  .booking-heading {
    font-size: 4.8em;
  }

  .mobile-bar-booking-heading,
  .desserts-catering-booking-heading {
    font-size: 3.6em;
  }

  .booking-sub-heading,
  .booking-info-text {
    font-size: 2.2em;
  }

  .wedding-icon-hp {
    width: 16em;
  }

  .phone-icon-hp {
    width: 8em;
  }

  .cocktail-icon-hp {
    width: 7.5em;
  }

  .heart-icon-hp {
    width: 6em;
  }

  .flowers-wedding-icon-hp {
    width: 18em;
  }

  .cheesecake-icon-hp,
  .star-gif-hp {
    width: 7em;
  }

  /*Homepage Page 6 */

  .homepage-slogan-section {
    margin-left: 0em;
  }

  .homepage-slogan-container {
    margin: 0 4.8em;
  }

  .homepage-slogan-heading {
    font-size: 6em;
  }

  .homepage-lips-art {
    width: 15%;
  }

  /*Header for all pages except the index/homepage */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .header-box {
    display: none;
  }

  /*General Buutons */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .enquire-now-btn,
  .enquire-now-btn:link,
  .enquire-now-btn:visited,
  .desserts-btn-hp,
  .desserts-btn-hp:link,
  .desserts-btn-hp:visited,
  .desserts-btn-contact-us,
  .desserts-btn-contact-us:link,
  .desserts-btn-contact-us:visited,
  .mock-cock-des-btn,
  .mock-cock-des-btn:link,
  .mock-cock-des-btn:visited {
    font-size: 2.1em;
  }

  /*/ /////////////////////Cocktail Page///////////////////////////*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .footer {
    margin-left: 0em;
  }

  /*Cocktails Page 1*/

  .cocktails-intro-section,
  .mocktails-intro-section,
  .mocktail-menu-container {
    margin-left: 0em;
  }

  .cocktails-intro-heading,
  .mocktails-intro-heading {
    font-size: 4.8em;
  }

  .cocktails-intro-box-outer,
  .mocktails-intro-box-outer {
    margin: 4.8em 4.8em;
  }

  .cocktails-intro-text-box,
  .mocktails-intro-text-box {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 4.8em;
  }

  .shaker-flex-box,
  .het-flex-box {
    align-items: flex-start;
  }

  .shaker-art,
  .het-art {
    width: 60%;
  }

  .shaker-heading,
  .het-heading {
    font-size: 4.8em;
  }

  .cocktail-phrase,
  .mocktail-phrase-text,
  .mocktail-phrase {
    font-size: 2.4em;
  }

  .cocktail-phrase-text,
  .list-phrase-text {
    font-size: 2.2em;
  }

  /*Cocktails Page 2 */

  .cocktail-menu-container {
    margin-left: 0em;
  }

  .cocktails-mocktails-menu-heading {
    font-size: 4.8em;
  }

  .cocktail-type,
  .cocktail-type:link,
  .cocktail-type:visited {
    font-size: 4.2em;
  }

  .section-cocktails-menu {
    justify-content: flex-start;
    height: 100%;
    margin: 4.8em 0;
  }

  .section-mocktails-menu {
    margin-bottom: 4.8em;
  }

  .cocktails,
  .mocktails {
    flex-direction: column;
  }

  .cover {
    width: 80rem;
    /* height: 90vh; */
  }

  .btn-component {
    font-size: 7em;
  }

  /*Cocktails Page 3 */
  /*Repeated For the mocktails page*/

  .c-m-img-section {
    margin-left: 0em;
  }

  .c-m-img-grid-flex {
    margin: 0 4.8em;
  }

  .cm-gallery-heading {
    font-size: 4.8em;
  }

  .c-m-img-grid-container-1,
  .c-m-img-grid-container-2 {
    grid-template-columns: 1fr 1fr;
    gap: 2.4em;
  }

  /*Modal Gallery*/

  /*Cocktails Page 4 */
  /*Repeated For the mocktails page*/

  .cmd-mobile-bar-section-2 {
    margin-left: 0em;
  }

  .cmd-mobile-bar-outer-box-2 {
    margin: 4.8em 4.8em;
  }

  .cmd-mobile-bar-heading-2 {
    font-size: 4.8em;
  }

  .cmd-info-grid-2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 4.8em;
  }

  .cmd-mobile-bar-box-2 {
    text-align: center;
    grid-row: 1;
  }

  .world-rubys-heading {
    font-size: 4em;
  }

  .world-rubys-text,
  .cmd-locations-text {
    font-size: 2.2em;
  }

  .cmd-locations-flex-box {
    gap: 3.2em;
  }

  .cmd-locations-heading,
  .cmd-events-heading {
    font-size: 4.2em;
  }

  .cmd-locations-grid {
    row-gap: 2.4em;
    font-size: 3.6em;
  }

  .cmd-events-type-box {
    gap: 8em;
  }

  .cmd-events-type-headings,
  .cmd-events-type-headings:link,
  .cmd-events-type-headings:visited {
    font-size: 3.6em;
  }

  .cmd-mobile-bar-box-2 {
    width: 70%;
  }

  /*Desserts Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .desserts-coming-soon-box {
    margin-left: 0em;
  }

  /*Contact Us Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  /*Contact Us Page 1 */

  .form-container,
  .section-booking-contact-us {
    margin-left: 0em;
  }

  .form-heading {
    color: #1b3159;
    font-size: 4.8em;
    font-style: normal;
  }

  .form-para {
    font-family: "Playfair Display", serif;
    font-size: 2.2em;
    color: #16140e;
    margin-bottom: 4.8em;
  }

  .form-input-container input {
    font-size: 2.2em;
  }

  .form-btn,
  .form-btn:link,
  .form-btn:visited,
  .link-5,
  .link-5:link,
  .link-5:visited {
    font-size: 2.2em;
  }

  /*Contact Us Page 2 */

  .booking-box-contact-us {
    margin: 0rem 4.8em;
  }

  .booking-heading-contact-us {
    font-size: 4.8em;
  }

  .mobile-bar-booking-heading-contact-us,
  .desserts-catering-booking-heading-contact-us {
    font-size: 3.6em;
  }

  .booking-sub-heading-contact-us,
  .booking-info-text-contact-us {
    font-size: 2.2em;
  }

  .cheesecake-icon-contact-us {
    width: 6rem;
  }

  /*Contact Us Icons*/

  .wedding-icon-contact-us {
    width: 16em;
  }

  .phone-icon-contact-us {
    width: 8em;
  }

  .cocktail-icon-contact-us {
    width: 7.5em;
  }

  .heart-icon-contact-us {
    width: 6em;
  }

  .flowers-wedding-icon-contact-us {
    width: 18em;
  }

  .cheesecake-icon-contact-us,
  .star-gif-contact-us {
    width: 7em;
  }

  /*Mobile Bar Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .mobile-bar-section,
  .mobile-bar-slogan-section,
  .mobile-bar-packages-section,
  .mobile-bar-gallery-section,
  .mobile-bar-slogan-section {
    margin-left: 0em;
  }

  /*Mobile Bar Page 1 */

  .mobile-bar-container {
    margin: 0 4.8em;
  }

  .mobile-bar-grid-4 {
    grid-row: 1;
    grid-column: 2;
  }

  .mobile-bar-secondary-heading,
  .mobile-bar-cmd-slogan {
    font-size: 4.2em;
  }

  .small-cover-text,
  .small-cover-text-bold {
    font-size: 2.2em;
  }

  /*Mobile Bar Page 2 */

  .mobile-bar-packages-outer-box {
    margin: 4.8em 4.8em;
  }

  .mobile-bar-package-info-grid,
  .mobile-bar-package-info-grid-2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 4.8em;
  }

  .mobile-bar-package-info-left-main {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-bar-package-info-right-main {
    grid-column: 1;
    grid-row: 3;
  }

  .mobile-bar-package-box {
    grid-column: 1;
    grid-row: 2;
  }

  .all-inclusive-heading {
    font-size: 2.2rem;
  }

  .mobile-bar-package-info-left-heading,
  .mobile-bar-package-info-right-heading {
    font-size: 4.2em;
  }

  .mobile-bar-package-info-left-text,
  .mobile-bar-package-info-right-text {
    font-size: 2.2em;
  }

  .mobile-bar-art {
    width: 60%;
  }

  /*Mobile Bar Page 3 */

  .mobile-bar-gallery-container {
    margin: 0 4.8em;
  }

  .mobile-bar-gallery-componenets {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-items: center;
  }

  .flower-btn,
  .flower-btn:link,
  .flower-btn:visited {
    width: 40em;
  }

  .mobile-bar-imgs-1,
  .mobile-bar-imgs-3 {
    width: 50%;
  }

  .mobile-bar-imgs-2 {
    width: 60%;
  }

  /*Mobile Bar Page 4 */

  .mobile-bar-page-booking-section {
    margin-left: 0em;
  }

  .mobile-bar-booking-container-2 {
    margin: 0rem 4.8em;
  }

  .mobile-bar-booking-grid-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 2.4em;
  }

  .mobile-bar-booking-heading-2 {
    font-size: 3.6em;
  }

  .booking-sub-heading-2,
  .booking-info-text-2 {
    font-size: 2.2em;
  }

  .cocktail-icon-mb,
  .phone-icon-mb {
    width: 7em;
  }

  .wedding-icon-mb {
    width: 16em;
  }

  .heart-icon-mb {
    width: 6em;
  }

  /*Mobile Bar Page 5 */

  .mobile-bar-slogan-container {
    margin: 0 4.8em;
  }

  .mobile-bar-slogan-heading {
    font-size: 6em;
  }

  .lips-art {
    width: 15%;
  }

  /*Locations for mobile Bar*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .locations-page-container {
    margin-left: 0em;
  }

  .locations-page-grid {
    grid-template-columns: 0.4fr 1fr 0.4fr;
    grid-template-rows: auto;
  }

  .locations-page-grid-2 {
    margin: 2.4em;
    padding: 2.4em;
  }

  .locations-page-grid-1,
  .locations-page-grid-3 {
    height: 100%;
    background-size: auto;
  }

  .location-page-city-art {
    width: 80%;
  }

  /*Locations Page 1 */

  .mobile-bar-locations-main-heading {
    font-size: 4.6em;
  }

  .rubys-locations-logo {
    margin: 4em 0;
    width: 50%;
  }

  /*Locations Page 2 */

  .mobile-bar-locations-main-heading {
    font-size: 4.8em;
  }

  .mobile-bar-locations-secondary-heading {
    font-size: 4em;
  }

  .locations-page-para {
    font-size: 2.2em;
  }

  .occasions-list {
    font-size: 2.1em;
    line-height: 1.6em;
  }

  /*Cocktail Drawimgs */

  .cm10-icon {
    width: 7.5em;
  }

  .cm17-icon,
  .cm18-icon,
  .cm15-icon,
  .cm11-icon,
  .cm9-icon,
  .cm5-icon,
  .cm4-icon,
  .cm2-icon {
    width: 8em;
  }

  .cm3-icon,
  .cm12-icon {
    width: 8.5em;
  }

  .cm7-icon,
  .cm8-icon,
  .cm13-icon,
  .cm16-icon {
    width: 9em;
  }

  .cm14-icon,
  .cm19-icon,
  .cm1-icon {
    width: 10em;
  }

  .cm6-icon {
    width: 10.5em;
  }

  /*Locations Page 3 */

  /*Locations Page 4 */
  /*This section was a repeated section which follows the media queries 
which is was done in the mobile bar section */

  /*Locations Page 5 */

  .location-page-menu-box {
    width: 100%;
  }

  .location-view-menu-text {
    font-size: 2.2em;
  }

  .location-art-bar-img {
    width: 90%;
    border: 1px solid #1b3159;
  }

  /*Locations Page 6 */
  /*Repeated with same queries as page 5

  /*Locations Page 7 */

  .contact-form-box-lp {
    padding: 1.2em 1.2em;
    margin: 1.2em 1.2em;
    border: none;
  }

  .form-heading-lp {
    font-size: 4.8em;
  }

  .form-para-lp {
    font-size: 2.2em;
  }

  .form-input-container-lp input {
    font-size: 1.9em;
  }

  .form-btn-lp,
  .form-btn-lp:link,
  .form-btn-lp:visited {
    font-size: 1.9em;
  }

  /*Footer*/

  .footer {
    padding: 2.4em 0;
  }

  .footer-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 6.4em;
  }

  .logo-column {
    align-items: center;
  }

  .footer-logo {
    display: block;
    width: 20em;
  }

  .icon-i,
  .icon-w,
  .icon-t {
    width: 3.6em;
  }

  .sister-column,
  .address-column,
  .navigation-column {
    text-align: center;
  }

  .footer-heading {
    font-size: 2.2em;
    font-weight: bold;
  }

  .address {
    font-size: 2.2em;
    line-height: 1.8em;
  }

  .link-1,
  .link-1:link,
  .link-1:visited,
  .link-2,
  .link-2:visited,
  .link-2:link,
  .link-5,
  .link-5:visited,
  .link-5:link {
    font-size: 2.2rem;
  }

  .link-10,
  .link-10:link,
  .link-10:visited {
    font-size: 2.2rem;
  }
}

/*1104 Pixels */
@media (max-width: 69em) {
  /*Homepage Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  /*Homepage Page 5 */

  .mobile-bar-booking-heading,
  .desserts-catering-booking-heading {
    align-self: center;
  }

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .cocktails,
  .mocktails {
    margin-bottom: 0rem;
  }

  .btn-component {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }

  .right-btn {
    margin-top: 1.2rem;
  }

  .c-m-img-grid-flex {
    margin: 0 1.2em;
  }
  .cocktail-img-1,
  .cocktail-img-1:link,
  .cocktail-img-1:visited {
    width: 100%;
  }

  .cover {
    width: 75rem;
    /* height: 85vh; */
  }

  /*Contact Us Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .booking-box-contact-us {
    gap: 3.2em;
  }

  .mobile-bar-booking-heading-contact-us,
  .desserts-catering-booking-heading-contact-us {
    align-self: center;
  }

  /*Mobile Bar*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  /*Page 4 */
  .mobile-bar-booking-heading-2 {
    align-self: center;
  }
}

/*1000 Pixels */
@media (max-width: 62.5em) {
  /*Homepage Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .rubys-hero-logo {
    width: 110rem;
  }

  /*Page 1*/

  .grid-home {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    row-gap: 4.8rem;
  }

  .mobile-bar-grid-4 {
    grid-column: 1;
    grid-row: 2;
  }

  /*Page 3*/
  .events-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 2.4rem;
  }

  .events-grid-3 {
    grid-column: span 2;
  }

  .events-poster-3 {
    width: 50%;
  }
  /*Page 4*/

  .mobile-bar-img-box {
    grid-row: 4;
  }

  .slogan-img-box {
    grid-row: 8;
  }

  .home-page-img-p {
    width: 70%;
  }

  .home-page-img-l {
    width: 85%;
  }

  .locations-grid {
    grid-template-columns: 1fr 1fr;
  }

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*

  /*Cocktails Page 2 */

  .cocktail-options {
    gap: 4.8em;
  }

  /*Cocktails Page 3 */
  .c-m-img-grid-container-1,
  .c-m-img-grid-container-2 {
    grid-template-columns: 1fr;
  }

  .c-m-img-box-fit {
    grid-column: 1;
  }

  .cocktail-img-1,
  .cocktail-img-1:link,
  .cocktail-img-1:visited {
    width: 80%;
  }

  .cocktail-img-2,
  .cocktail-img-2:link,
  .cocktail-img-2:visited {
    width: 85%;
  }

  .cmd-mobile-bar-box-2 {
    width: 75%;
  }

  .homepage-mobile-bar-box-2 {
    width: 80%;
  }

  /*Mobile Bar*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  /*Page 1 */

  .mobile-bar-grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .small-cover-container {
    /* These properties do not work because we have an anchor element wrapped around an image 
    display: flex;
    align-items: center;
    justify-content: center; 
    */
    width: 70%; /*If we wanted the small-cover to be smaller we adjust this height and not the small-cover hieght because
    we used an acnhor element wrapped around the image so flex-box breaks down with this in this container */
  }

  .mobile-bar-art {
    width: 70%;
  }

  .drawing-1,
  .drawing-2,
  .drawing-3 {
    width: 65%;
  }

  /*Page 4 */

  .mobile-bar-imgs-1,
  .mobile-bar-imgs-3 {
    width: 65%;
  }

  .mobile-bar-imgs-2 {
    width: 75%;
  }

  .small-flower-1,
  .small-flower-4,
  .small-flower-1-mirror,
  .small-flower-4-mirror {
    width: 35%;
  }

  .small-flower-2-mirror,
  .small-flower-3-mirror {
    align-self: flex-start;
    width: 35%;
  }

  .small-flower-2,
  .small-flower-3 {
    align-self: flex-end;
    width: 35%;
  }

  /*Loactions*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .locations-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80rem 1fr 80rem;
    margin-bottom: 4.8rem;
  }

  .locations-page-grid-1,
  .locations-page-grid-3 {
    background-size: cover;
  }
}

/*900 Pixels */
@media (max-width: 56.25em) {
  .homepage-rubys-icon-box {
    gap: 5rem;
  }

  .homepage-c7-icon,
  .homepage-c8-icon {
    width: 8em;
  }

  .homepage-c9-icon,
  .homepage-c5-icon,
  .homepage-c15-icon {
    width: 7em;
  }

  .mobile-bar-art {
    width: 70%;
  }

  .cover {
    width: 70rem;
  }
}

/*800 Pixels */
@media (max-width: 50em) {
  /*Homepage Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .btn-component {
    gap: 1.2rem;
  }

  .cover {
    width: 65rem;
  }

  .mav-homepage-logo {
    width: 50%;
  }
}

/*720 Pixels */
@media (max-width: 45em) {
  /*Homepage Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  /*Page 1 */
  .grid-home {
    margin: 0 1.2em;
  }

  .home-page-img-p {
    width: 75%;
  }

  .home-page-img-l {
    width: 90%;
  }
  /*Page 2*/

  .homepage-mobile-bar-outer-box-2 {
    margin: 0em 1.2em;
  }

  .homepage-rubys-icon-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .homepage-c15-icon {
    grid-row: 2;
  }

  .homepage-c5-icon {
    grid-row: 2;
    grid-column: 3;
  }

  .homepage-rubys-icon-box {
    gap: 5rem;
  }

  .homepage-c7-icon,
  .homepage-c8-icon {
    width: 7.5em;
  }

  .homepage-c9-icon,
  .homepage-c5-icon,
  .homepage-c15-icon {
    width: 6.5em;
  }

  .homepage-mobile-bar-box-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 85%;
  }

  /*Homepage page 3 */

  .homepage-events-container {
    margin: 4.8em 1.2em;
  }

  .homepage-services-container {
    margin: 4.8em 1.2em;
  }

  .events-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 2.4rem;
  }

  .events-grid-3 {
    grid-column: 1;
  }

  .events-poster {
    width: 70%;
  }

  .events-poster-3 {
    width: 70%;
  }

  /*Homepage Page 4 */

  .locations-box {
    margin: 0rem 1.2em;
  }

  .locations-grid {
    grid-template-columns: 1fr;
  }

  .city-art,
  .city-art:visited,
  .city-art:link {
    width: 65%;
  }

  /*Homepage Page 5 */

  .booking-box {
    margin: 0rem 1.2em;
  }

  .mobile-bar-booking-grid,
  .desserts-catering-booking-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }

  /*Homepage Page 6 */

  .homepage-slogan-container {
    margin: 0 1.2em;
  }

  .homepage-lips-art {
    width: 20%;
  }

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  /*Page 1 */
  .cocktails-intro-box-outer,
  .mocktails-intro-box-outer {
    margin: 4.8em 1.2em;
  }

  .shaker-art,
  .het-art {
    width: 80%;
    padding: 1.2rem;
    border: 1px solid #1b3159;
  }

  /*Page 2 */

  .cocktail-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    text-align: center;
    column-gap: 4.8rem;
    gap: 1.2rem;
  }

  .cover {
    width: 60rem;
  }

  /*Page 3 */

  .c-m-img-grid-flex {
    margin: 0em 0em;
  }

  .cmd-locations-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  }

  .cmd-events-type-box {
    display: flex;
    flex-direction: column;
  }

  /*Page 4 */

  .cmd-mobile-bar-outer-box-2 {
    margin: 4.8em 1.2em;
  }

  /*Desserts Page*/
  /*This is also repeated for the desserts catering page */
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .coming-soon-text {
    font-size: 8rem;
  }

  /*Contact Us Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .contact-form-box {
    margin: 1.2em 1.2em;
  }

  .booking-box-contact-us {
    margin: 0rem 1.2em;
  }

  .mobile-bar-booking-grid-contact-us,
  .desserts-catering-booking-grid-contact-us {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }

  /*Mobile Bar Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  /*Page 1*/

  .mobile-bar-container {
    margin: 0 1.2em;
  }

  /*Page 2 */
  .mobile-bar-packages-outer-box {
    margin: 4.8em 1.2em;
  }

  .mobile-bar-packages-outer-box-2 {
    margin: 0em 1.2em;
  }

  /*Page 3 */

  .mobile-bar-gallery-container {
    margin: 0 1.2em;
  }

  .flowers-flex,
  .flowers-flex-mirror {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
  }

  .small-flower-1,
  .small-flower-4,
  .small-flower-1-mirror,
  .small-flower-4-mirror {
    width: 60%;
  }

  .small-flower-2-mirror,
  .small-flower-3-mirror {
    align-self: flex-start;
    width: 60%;
  }

  .small-flower-2,
  .small-flower-3 {
    align-self: flex-end;
    width: 60%;
  }

  /*Page 4 */

  .mobile-bar-booking-container-2 {
    margin: 0rem 1.2em;
  }

  .mobile-bar-booking-grid-2 {
    grid-template-columns: 1fr;
  }

  /*Page 5 */

  .mobile-bar-slogan-container {
    margin: 0 1.2em;
  }

  .lips-art {
    width: 20%;
  }

  /*Loactions*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .locations-page-grid {
    grid-template-rows: 40rem 1fr 40rem;
  }

  .location-page-city-art,
  .location-art-bar-img {
    width: 100%;
  }

  .mobile-bar-packages-outer-box-location {
    margin: 4.8rem 1.2rem;
  }
}

/*620 Pixels */
@media (max-width: 38.75em) {
  /*Homepage Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  /*Hero */

  .rubys-hero-logo {
    width: 100rem;
  }

  .home-page-img-p {
    width: 85%;
  }

  .home-page-img-l {
    width: 100%;
  }

  /*Page 2 */
  .rubys-homepage-mobile-bar-logo {
    width: 40%;
  }

  .homepage-mobile-bar-box-2 {
    width: 85%;
  }

  .events-poster {
    width: 80%;
  }

  .events-poster-3 {
    width: 80%;
  }

  /*Page 4*/
  .city-art,
  .city-art:visited,
  .city-art:link {
    width: 80%;
  }

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  /*Page1 */
  .cocktail-img-1,
  .cocktail-img-1:link,
  .cocktail-img-1:visited {
    width: 100%;
  }

  .btn-component {
    font-size: 7em;
  }

  .cover {
    width: 55rem;
  }

  .cmd-mobile-bar-box-2 {
    width: 85%;
  }

  /*Loactions*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .location-page-city-art-box,
  .location-page-art-bar-box,
  .location-page-menu-box {
    padding: 2.4em 1.2em;
  }

  /*Mobile Bar*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .mobile-bar-imgs-1,
  .mobile-bar-imgs-3 {
    width: 75%;
  }

  .mobile-bar-imgs-2 {
    width: 85%;
  }

  .mav-homepage-logo {
    width: 70%;
  }
}

/*530 Pixels */
@media (max-width: 33.125em) {
  .cover {
    width: 50rem;
  }
}

/*496 Pixels */
@media (max-width: 31em) {
  /*Hero */
  .rubys-hero-logo {
    width: 85rem;
  }

  /*Page 2 */
  .rubys-homepage-mobile-bar-logo {
    width: 50%;
  }

  .homepage-mobile-bar-box-2 {
    width: 90%;
  }

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .cmd-locations-grid {
    row-gap: 2.4rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }

  .cover {
    width: 40rem;
  }

  .cocktail-img-1,
  .cocktail-img-1:link,
  .cocktail-img-1:visited {
    width: 130%;
  }

  .cocktail-img-2,
  .cocktail-img-2:link,
  .cocktail-img-2:visited {
    width: 98%;
  }

  .mobile-bar-art {
    width: 90%;
  }

  .small-cover-container {
    /* These properties do not work because we have an anchor element wrapped around an image 
    display: flex;
    align-items: center;
    justify-content: center; 
    */
    width: 80%; /*If we wanted the small-cover to be smaller we adjust this height and not the small-cover hieght because
    we used an acnhor element wrapped around the image so flex-box breaks down with this in this container */
  }

  /*Loactions*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .location-page-city-art-box,
  .location-page-art-bar-box,
  .location-page-menu-box {
    padding: 1.2em 0em;
  }
}

/*400 Pixels */
@media (max-width: 25em) {
  html {
    font-size: 50%;
  }

  .homepage-mobile-bar-box-2 {
    width: 95%;
  }

  .events-poster {
    width: 90%;
  }

  .events-poster-3 {
    width: 90%;
  }

  /*Page 4*/
  .city-art,
  .city-art:visited,
  .city-art:link {
    width: 90%;
  }

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .cocktail-img-1,
  .cocktail-img-1:link,
  .cocktail-img-1:visited {
    width: 130%;
  }

  .cocktail-img-2,
  .cocktail-img-2:link,
  .cocktail-img-2:visited {
    width: 98%;
  }

  .cmd-mobile-bar-box-2 {
    width: 95%;
  }

  .small-cover-container {
    /* These properties do not work because we have an anchor element wrapped around an image 
    display: flex;
    align-items: center;
    justify-content: center; 
    */
    width: 90%; /*If we wanted the small-cover to be smaller we adjust this height and not the small-cover hieght because
    we used an acnhor element wrapped around the image so flex-box breaks down with this in this container */
  }

  .mobile-bar-art {
    width: 100%;
  }

  .mobile-bar-packages-outer-box-location {
    margin: 2.4em 0em;
  }

  .cm2-icon,
  .cm4-icon,
  .cm5-icon,
  .cm9-icon,
  .cm11-icon,
  .cm15-icon,
  .cm17-icon,
  .cm18-icon {
    width: 5.5rem;
  }

  .cm7-icon,
  .cm8-icon,
  .cm13-icon,
  .cm16-icon {
    width: 6.5rem;
  }

  .cm3-icon,
  .cm12-icon {
    width: 6rem;
  }

  .cm14-icon,
  .cm19-icon,
  .cm1-icon {
    width: 7.5rem;
  }

  .cm6-icon {
    width: 8rem;
  }

  .cm10-icon {
    width: 5.5rem;
  }

  .all-inclusive-grid-1,
  .all-inclusive-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
  }

  /*Mobile Bar*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .mobile-bar-imgs-1,
  .mobile-bar-imgs-3 {
    width: 85%;
  }

  .mobile-bar-imgs-2 {
    width: 100%;
  }
}

/* 300 Pixels */
@media (max-width: 20.625em) {
  .cover {
    width: 35rem;
  }

  .mav-homepage-logo {
    width: 85%;
  }
}

/* 300 Pixels */
@media (max-width: 18.75em) {
  html {
    font-size: 40%;
  }

  /*Hero */
  .rubys-homepage-mobile-bar-logo {
    width: 55%;
  }

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/
  .cover {
    width: 38rem;
  }

  .btn-component {
    font-size: 7em;
  }
}

/*250 Pixels*/
@media (max-width: 15.625em) {
  html {
    font-size: 30%;
  }

  /*Hero */

  .rubys-homepage-mobile-bar-logo {
    width: 65%;
  }

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .cover {
    width: 41rem;
  }

  .btn-component {
    font-size: 9em;
  }
}

/*200 Pixels */
@media (max-width: 12.5em) {
  html {
    font-size: 25%;
  }

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .cover {
    width: 36rem;
  }

  .btn-component {
    font-size: 10em;
  }
}

/*150 Pixels */
@media (max-width: 9.375em) {
  html {
    font-size: 20%;
  }

  /*Hero */

  .cover {
    width: 34rem;
  }

  .btn-component {
    font-size: 11em;
  }
}

/*120 Pixels */
@media (max-width: 7.5em) {
  html {
    font-size: 15%;
  }

  /*Hero */

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .btn-component {
    font-size: 13em;
  }
}

/*100 Pixels*/
@media (max-width: 6.25em) {
  html {
    font-size: 10%;
  }

  /*Hero */

  /*Cocktails / Mocktails Page*/
  /*///////////////////////////////////////////////////*/
  /*/ //////////////////////////////////////////////////*/
  /*///////////////////////////////////////////////////*/

  .btn-component {
    font-size: 14em;
  }
}

/*80 Pixels*/
@media (max-width: 5em) {
}

/*MAX HEIGHTS*/
/*///////////////////////////////////////////////////*/
/*/ //////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////*/

/*950 Pixels */
@media (max-height: 59.5em) {
  /*Hidden Navigation */
  .rubys-hidden-nav-logo {
    width: 50%;
  }

  .hidden-x-style,
  .hidden-x-style:link,
  .hidden-x-style:visited {
    font-size: 7.5em;
    margin-right: 1.2rem;
    margin-top: 1.2rem;
  }
}

/*900 Pixels */
@media (max-height: 56.25em) {
  .hidden-nav-link,
  .hidden-nav-link:link,
  .hidden-nav-link:visited {
    font-size: 4.6em;
  }

  .hidden-nav-list {
    margin-top: 1rem;
  }

  .hidden-icon-header-i {
    width: 3.9em;
  }

  .hidden-icon-header-t {
    width: 3.9em;
  }

  .hidden-icon-header-w {
    width: 3.9em;
  }
}

/*850 Pixels */
@media (max-height: 53.125em) {
  .hidden-nav {
    align-items: flex-start;
  }
}

/*800 Pixels */
@media (max-height: 50em) {
  .rubys-hidden-nav-logo {
    width: 40%;
  }

  .hidden-x-style,
  .hidden-x-style:link,
  .hidden-x-style:visited {
    font-size: 6.5em;
  }

  .hidden-nav-link,
  .hidden-nav-link:link,
  .hidden-nav-link:visited {
    font-size: 3.6em;
  }

  .hidden-icon-header-i {
    width: 3.7em;
  }

  .hidden-icon-header-t {
    width: 3.7em;
  }

  .hidden-icon-header-w {
    width: 3.7em;
  }
}

/* 750 Pixels */
@media (max-height: 46.875em) {
  .hidden-x-style,
  .hidden-x-style:link,
  .hidden-x-style:visited {
    font-size: 6.5em;
  }

  .rubys-hidden-nav-logo-box {
    padding-bottom: 4em;
  }

  .hidden-social-link-box {
    margin-top: 6em;
  }

  .hidden-nav-list {
    gap: 4.2rem;
  }

  .hidden-nav-link,
  .hidden-nav-link:link,
  .hidden-nav-link:visited {
    font-size: 4.4rem;
  }
}

/* 700 Pixels */
@media (max-height: 43.75em) {
  .hidden-x-style,
  .hidden-x-style:link,
  .hidden-x-style:visited {
    font-size: 6.5em;
  }

  .rubys-hidden-nav-logo-box {
    padding-bottom: 4em;
  }

  .hidden-social-link-box {
    margin-top: 6em;
  }

  .hidden-nav-list {
    gap: 4.2rem;
  }

  .hidden-nav-link,
  .hidden-nav-link:link,
  .hidden-nav-link:visited {
    font-size: 4.2rem;
  }
}

/*620 Pixels */
@media (max-height: 38.75em) {
  .rubys-hidden-nav-logo {
    width: 30%;
  }

  .hidden-nav-list {
    gap: 2.8rem;
  }

  .hidden-icon-header-i,
  .hidden-icon-header-t,
  .hidden-icon-header-w {
    width: 3em;
  }

  .rubys-hidden-nav-logo-box {
    padding-bottom: 1.2rem;
  }

  .hidden-social-link-box {
    margin-top: 4em;
  }

  .hidden-x-style,
  .hidden-x-style:link,
  .hidden-x-style:visited {
    font-size: 5em;
  }
}

/*550 Pixels */
@media (max-height: 35em) {
  .hidden-x-style,
  .hidden-x-style:link,
  .hidden-x-style:visited {
    font-size: 7em;
  }

  .hidden-nav-list {
    flex-direction: row;
    gap: 6rem;
    text-align: center;
  }

  .rubys-hidden-nav-logo-box {
    padding-bottom: 4.4rem;
  }

  .hidden-social-link-box {
    margin-top: 6em;
  }
}

/*400 Pixels */
@media (max-height: 25em) {
  .rubys-hidden-nav-logo {
    width: 25%;
  }

  .hidden-x-style,
  .hidden-x-style:link,
  .hidden-x-style:visited {
    font-size: 6em;
  }

  .rubys-hidden-nav-logo-box {
    padding-bottom: 2.5rem;
  }

  .hidden-social-link-box {
    margin-top: 4em;
  }
}