@charset "UTF-8";

@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

@font-face {
  font-display: auto;
  font-family: "tk-proxima-nova-n7";
  font-stretch: normal;
  font-style: normal;
  font-weight: 700;
  src:
    url("https://use.typekit.net/af/71f83c/00000000000000003b9b093b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
    url("https://use.typekit.net/af/71f83c/00000000000000003b9b093b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
    url("https://use.typekit.net/af/71f83c/00000000000000003b9b093b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
}

@font-face {
  font-display: auto;
  font-family: "tk-proxima-nova-i7";
  font-stretch: normal;
  font-style: italic;
  font-weight: 700;
  src:
    url("https://use.typekit.net/af/86b539/00000000000000003b9b093a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),
    url("https://use.typekit.net/af/86b539/00000000000000003b9b093a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),
    url("https://use.typekit.net/af/86b539/00000000000000003b9b093a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
}

@font-face {
  font-display: auto;
  font-family: "tk-proxima-nova-n4";
  font-stretch: normal;
  font-style: normal;
  font-weight: 400;
  src:
    url("https://use.typekit.net/af/4838bd/00000000000000003b9b0934/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
    url("https://use.typekit.net/af/4838bd/00000000000000003b9b0934/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
    url("https://use.typekit.net/af/4838bd/00000000000000003b9b0934/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
}

@font-face {
  font-display: auto;
  font-family: "tk-proxima-nova-i4";
  font-stretch: normal;
  font-style: italic;
  font-weight: 400;
  src:
    url("https://use.typekit.net/af/6aec08/00000000000000003b9b0935/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),
    url("https://use.typekit.net/af/6aec08/00000000000000003b9b0935/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),
    url("https://use.typekit.net/af/6aec08/00000000000000003b9b0935/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
}

@font-face {
  font-display: auto;
  font-family: "tk-priori-sans-i4";
  font-stretch: normal;
  font-style: italic;
  font-weight: 400;
  src:
    url("https://use.typekit.net/af/f70fd6/00000000000000003b9adcd4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),
    url("https://use.typekit.net/af/f70fd6/00000000000000003b9adcd4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),
    url("https://use.typekit.net/af/f70fd6/00000000000000003b9adcd4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
}

@font-face {
  font-display: auto;
  font-family: "tk-priori-sans-n4";
  font-stretch: normal;
  font-style: normal;
  font-weight: 400;
  src:
    url("https://use.typekit.net/af/fcfd7c/00000000000000003b9adcd6/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
    url("https://use.typekit.net/af/fcfd7c/00000000000000003b9adcd6/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
    url("https://use.typekit.net/af/fcfd7c/00000000000000003b9adcd6/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
}

@font-face {
  font-display: auto;
  font-family: "tk-priori-sans-n7";
  font-stretch: normal;
  font-style: normal;
  font-weight: 700;
  src:
    url("https://use.typekit.net/af/ca7a65/00000000000000003b9adcd3/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
    url("https://use.typekit.net/af/ca7a65/00000000000000003b9adcd3/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
    url("https://use.typekit.net/af/ca7a65/00000000000000003b9adcd3/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
}

@font-face {
  font-display: swap;
  font-family: "HCo Gotham SSm";
  font-style: normal;
  font-weight: 300;
  src:
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/DAA4246EA09234CD5.eot");
  src:
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/DAA4246EA09234CD5.eot?#hco") format("embedded-opentype"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/DAA4246EA09234CD5.woff2") format("woff2"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/DAA4246EA09234CD5.woff") format("woff"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/DAA4246EA09234CD5.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "HCo Gotham SSm";
  font-style: normal;
  font-weight: 400;
  src:
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/ACF16F17E3EC88B9B.eot");
  src:
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/ACF16F17E3EC88B9B.eot?#hco") format("embedded-opentype"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/ACF16F17E3EC88B9B.woff2") format("woff2"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/ACF16F17E3EC88B9B.woff") format("woff"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/ACF16F17E3EC88B9B.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "HCo Gotham SSm";
  font-style: normal;
  font-weight: 500;
  src:
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/5BCF2ABFB7C42C0A0.eot");
  src:
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/5BCF2ABFB7C42C0A0.eot?#hco") format("embedded-opentype"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/5BCF2ABFB7C42C0A0.woff2") format("woff2"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/5BCF2ABFB7C42C0A0.woff") format("woff"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/5BCF2ABFB7C42C0A0.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "HCo Gotham SSm";
  font-style: normal;
  font-weight: 700;
  src:
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/9994974EA95A317F1.eot");
  src:
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/9994974EA95A317F1.eot?#hco") format("embedded-opentype"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/9994974EA95A317F1.woff2") format("woff2"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/9994974EA95A317F1.woff") format("woff"),
    url("https://www.wyndhamhotels.com/etc/designs/wyndham-tablet/fonts/gotham/9994974EA95A317F1.ttf") format("truetype");
}

@font-face {
  font-family: "Montserrat";
  src:
    url("https://fonts.google.com/specimen/Montserrat");
}

:root {
  --custom-transition: all 0.5s ease-in-out;
  
  --img-ratio-rate-primary: 4 / 3;
  --img-ratio-rate-primary-mobile: 4 / 3;
  --img-ratio-rate-secondary: 4 / 3;
  --img-ratio-rate-secondary-mobile: 4 / 3;
  --img-ratio-mda-secondary-rate: 4 / 3;
  --img-ratio-mda-secondary-rate-mobile: 4 / 3;
  
  --branding-default: #0975BB; /* Brand color */
  --brand-color-rgb: 9, 117, 187;
  --branding-pressed: #003353; /* Darker shade */
  --branding-hovered: #007DC3;
  
  --brand-background: #F8F8F8;
  --branding-base: #007DC314;
  --brand-bg50: #007DC380;
  --brand-bg60: #007DC399;
  --brand-bg70: #007DC3B3;
  
  --brand-border: #0975BB;
  --brand-footer: #003353;
  
  --brand-white: #FFFFFF;
  --brand-light-grey: #555555;
  --brand-black: #000000;
}



/*------------------------------------------------------------------------------------------------------*/
/* - Wyndham Hotels and Resorts - */
:root:has(body[title="Wyndham Hotels and Resorts"]) {
  --branding-default: #0975BB; /* Brand color */
  --brand-color-rgb: 9, 117, 187;
  --branding-pressed: #003353; /* Darker shade */
  --branding-hovered: #007DC3;
  
  --brand-background: #F8F8F8;
  --branding-base: #007DC314;
  --brand-bg50: #007DC380;
  --brand-bg60: #007DC399;
  --brand-bg70: #007DC3B3;
  
  --brand-border: #0975BB;
  --brand-footer: #003353;
  
  --font-stack-sans-serif: "HCo Gotham SSm", "Montserrat", "Arial", arial, sans-serif, system-ui;
}



/*------------------------------------------------------------------------------------------------------*/
/* - Tryp by Wyndham - */
:root:has(body[title="TRYP"]) {
  --branding-default: #D0007B; /* Brand color */
  --brand-color-rgb: 208, 0, 123;
  --branding-pressed: #BC006F; /* Darker shade */
  --branding-hovered: #007DC3;
  
  --brand-background: #F4F4F4;
  --branding-base: #D0007B14;
  --brand-bg50: #D0007B80;
  --brand-bg60: #D0007B99;
  --brand-bg70: #D0007BB3;
  
  --brand-border: #E2D500;
  --brand-footer: #21304D;
  
  --font-stack-sans-serif: "proxima-nova", "Montserrat", "Arial", arial, sans-serif, system-ui;
}



/*------------------------------------------------------------------------------------------------------*/
/* - Wyndham Grand - */
:root:has(body[title="Wyndham Grand"]) {
  --branding-default: #3D717F; /* Brand color */
  --brand-color-rgb: 61, 113, 127;
  --branding-pressed: #084650; /* Darker shade */
  --branding-hovered: #3F717F;
  
  --brand-background: #2F3035;
  --branding-base: #3F717F14;
  --brand-bg50: #3F717F80;
  --brand-bg60: #3F717F99;
  --brand-bg70: #3F717FB3;
  
  --brand-border: #D9D9D9;
  --brand-footer: #1E1F21;
  
  --font-stack-sans-serif: "HCo Gotham SSm", "Montserrat", "Arial", arial, sans-serif, system-ui;
}



/*------------------------------------------------------------------------------------------------------*/
/* - Wyndham Garden - */
:root:has(body[title="Wyndham Garden"]) {
  --branding-default: #006B00; /* Brand color */
  --brand-color-rgb: 0, 107, 0;
  --branding-pressed: #005400; /* Darker shade */
  --branding-hovered: #54B948;
  
  --brand-background: #E6E2DC;
  --branding-base: #54B94814;
  --brand-bg50: #54B94880;
  --brand-bg60: #54B94899;
  --brand-bg70: #54B948B3;
  
  --brand-border: #FDAA63;
  --brand-footer: #54585A;
  
  --font-stack-sans-serif: "HCo Gotham SSm", "Montserrat", "Arial", arial, sans-serif, system-ui;
}



@media screen {
  
  ::selection {
    color: var(--brand-white);
    background: var(--brand-color);
  }
  
  .footer *::selection {
    color: var(--brand-color);
    background: var(--brand-white);
  }
  
  .header a i,
  .backtotop a i,
  .footer a i {
    margin-right: 0px;
  }
  
  html[lang="en_DE"] .germanSite {
    display: none !important; /* hide German if user language is English */
  }
  
  html[lang="de_DE"] .englishSite {
    display: none !important; /* hide English if user language is German */
  }
  
  body {
    background-color: var(--brand-background);
  }
  
  .main-be-area {
    background-color: transparent;
  }
  
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--brand-white);
    /* box-shadow: var(--brand-shadow); */
    
    min-height: 80px;
    padding-block: 0px;
    border-bottom: 2px solid var(--brand-border);
    z-index: 4;
  }
  
  .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    
    width: min(1332px, 100%);
    padding-inline: 16px;
  }
  
  .header .invisible-flex-item {
    display: none;
    align-self: stretch;
    
    width: 125px;
    height: 100%;
  }
  
  .header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
  }
  
  body[title="TRYP"] .header .logo {
    align-items: flex-start;
  }
  
  .header .logo img {
    display: block;
    
    width: 155px;
    height: auto;
    
    transition: var(--custom-transition);
  }
  
  .header .logo:hover img {
    opacity: 80%;
  }
  
  body[title="TRYP"] .header .logo img {
    width: 72px;
  }
  
  body[title="Wyndham Grand"] .header .logo img {
    width: 207.75x;
  }
  
  /* --- Back to Site --- */
  .header .backtosite a {
    display: flex;
    justify-content: center;
    align-items: center;
    
    color: var(--brand-white);
    background-color: var(--brand-color);
    
    font-family: "HCo Gotham SSm", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    text-transform: uppercase;
    
    min-width: 172px;
    max-height: 46px;
    padding-block: 12px;
    padding-inline: 24px;
    
    transition: var(--custom-transition);
  }
  
  .header .backtosite:hover a {
    background-color: var(--brand-pressed);
  }
  
  .header .backtosite:active a {
    position: relative;
    top: 1px;
  }
  
  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    color: var(--brand-white);
    background-color: var(--brand-footer);
    
    font-size: 15px;
    font-weight: 300;
    letter-spacing: -0.15px;
    line-height: 21.75px;
    text-align: start;
    
    padding-top: 76px;
    padding-bottom: 102px;
  }
  
  .footer .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    width: min(1500px, 100%);
    gap: 10px;
    padding-inline: 100px;
  }
  
  .footer h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.18px;
    line-height: 21.6px;
    
    padding-bottom: 8px;
    margin-block: 0px;
  }
  
  .footer a {
    color: var(--brand-white);
    
    transition: var(--custom-transition);
  }
  
  .footer a:hover {
    /* color: var(--brand-secondary); */
  }
  
  .footer .left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    
    row-gap: 52px;
  }
  
  .footer .links {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    
    row-gap: 12px;
  }
  
  .footer .links a {
    opacity: 85%;
    
    transition: var(--custom-transition);
  }
  
  .footer .links a:hover {
    opacity: 100%;
  }
  
  .footer .links a[href="N/A"] {
    display: none !important;
  }
  
  .footer .contact {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    
    row-gap: 12px;
  }
  
  .footer .contact a {
    opacity: 85%;
    
    transition: var(--custom-transition);
  }
  
  .footer .contact a:hover {
    opacity: 100%;
  }
  
  .footer .right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    
    row-gap: 45px;
  }

  .contact:has(div.care a[href="N/A"]) {
  display: none;
}
  
  .footer .socials {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    gap: 37.5px;
    padding-bottom: 32px;
  }
  
  .footer .socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: transparent;
    color: var(--brand-white);
    
    font-size: 33px;
    
    width: 65px;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--brand-white);
    border-radius: 50%;
    
    transition: var(--custom-transition);
  }
  
  .footer .socials a:hover {
    background-color: var(--brand-white);
    color: var(--brand-footer);
  }
  
  .footer .socials a[href="N/A"] {
    display: none !important;
  }
  
  .footer small {
    font-size: inherit;
    line-height: inherit;
  }

  .footer small a {
    opacity: 85%;
    
    transition: var(--custom-transition);
  }
  
  .footer small a:hover {
    opacity: 100%;
  }
  
}



@media screen and (max-width: 999px) {
  
  .header .logo img {
    width: 145px;
  }
  
  body[title="TRYP"] .header .logo img {
    width: 62px;
  }
  
  body[title="Wyndham Grand"] .header .logo img {
    width: 197.75x;
  }
  
  .footer .container {
    padding-inline: 25px;
  }
  
}



@media screen and (max-width: 699px) {
  
  .footer {
    text-align: center;
  }
  
  .footer .container {
    flex-direction: column;
    align-items: center;
    
    padding-inline: 0px;
  }
  
  .footer .left {
    align-items: center;
  }
  
  .footer .links {
    align-items: center;
  }
  
  .footer .contact {
    align-items: center; 
  }
  
  .footer .right {
    align-items: center; 
  }
  
  .footer .socials {
    justify-content: center;
  }
  
}



@media screen and (max-width: 499px) {
  
  .header .container {
    justify-content: center;
  }
  
  .header .logo img {
    width: 135px;
  }
  
  body[title="TRYP"] .header .logo img {
    width: 52px;
  }
  
  body[title="Wyndham Grand"] .header .logo img {
    width: 187.75x;
  }
  
  .header .backtosite {
    display: none;
  }
  
}