/* COMMON */

@font-face{font-family:'ProximaNova-Regular';
src:url("https://www.royalcaribbean.com/etc/designs/royal/fonts/ProximaNova-Regular.eot");
src:url("https://www.royalcaribbean.com/etc/designs/royal/fonts/ProximaNova-Regular.woff2") format("woff2"),url("https://www.royalcaribbean.com/etc/designs/royal/fonts/ProximaNova-Regular.woff") format("woff"),url("https://www.royalcaribbean.com/etc/designs/royal/fonts/ProximaNova-Regular.ttf") format("truetype"),url("fonts/ProximaNova-Regular.svg#ProximaNova-Regular") format("svg"),url("https://www.royalcaribbean.com/etc/designs/royal/fonts/ProximaNova-Regular.eot?#iefix") format("embedded-opentype");font-weight:normal;font-style:normal;}


@font-face {
    font-family: 'Kapra';
    src: url('fonts/kapra-regular-webfont.eot');
    src: url('fonts/kapra-regular-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/kapra-regular-webfont.woff2') format('woff2'),url('fonts/kapra-regular-webfont.woff') format('woff'),url('fonts/kapra-regular-webfont.ttf') format('truetype'),url('fonts/kapra-regular-webfont-webfont.svg#kapraregular') format('svg');font-weight: normal;font-style: normal;}

/* AEM OVERIDES */

.page_main {
background: none;
}


/* GENERIC STYLES */

html {
font-size: 16px;
}

.mdc-typography {
margin: 0 !important;
padding: 0 !important;
}

h1,h2 {
font-weight: normal;
margin: 0;
padding: 0;
}

p {
  margin: 5px auto;
}

.proxima {
font-family:'ProximaNova-Regular',Arial,sans-serif !important;
}

.kapra {
font-family:'Kapra',Impact,'Arial Narrow',Arial,sans-serif !important;
}

.large-text {
font-size: 2.5rem;
text-transform: uppercase;
}

.medium-text {
  font-size: 1.5rem;
}

.small-text {
font-size: 1rem;
}

.p-text {
  font-size: 1rem;
  width: 75%;
  margin: 0px;
}

.spaced {
text-transform: uppercase;
letter-spacing: .125rem;
}

.center {
text-align: center;
}

.right {
text-align: right;
}

.left {
text-align: left;
}

.teal-text {
color: #8BFAFF;
}

.navy-text {
  color: #001A63;
}

.white-text {
  color: #FFF;
}

.mdc-layout-grid {
position: relative;
z-index: 1;
}

.outlined-button {
  border: 1px solid #fff;
  color: #fff;
  background-color: transparent;
  padding: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 20px;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}

.hyperlink {
  color: #005edc;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 20px;
}

/* BACKGROUND IMAGE & SLANT STYLES */


.slant_tiles {
  background: url('https://www.royalcaribbean.com/content/dam/royal/content/oasis-class/symphony-of-the-seas-aerial-view-newest-biggest-cruise-ship.png') no-repeat center center transparent;
  background-size: cover;
  width: 100%;
  height: calc(4vw+420px;);
  color: white;
  padding-top: 100px;
}


.slanted {
  position: relative;
  z-index: 2;
  margin: 100px 0;
  padding: 2.5% 0;
  min-height: 120px;
  -ms-transform: skewY(-6deg); /* IE 9 */
  -webkit-transform: skewY(-6deg); /* Safari */
  transform: skewY(-6deg); /* Standard syntax */
}

.slant_tiles .mdc-layout-grid {
  -ms-transform: skewY(6deg); /* IE 9 */
  -webkit-transform: skewY(6deg); /* Safari */
  transform: skewY(6deg); /* Standard syntax */
}/* FOR IPAD TO HAVE BACKGROUND HEIGHT */

.safe-space {
  margin: 10% 10% 0% 5%;
}

.mobileOnly {
  display: none;
}

.space {
  margin-top: 1500px;
  margin-right: 50px;
  margin-left: 50px;
}

.right-column {
  position: relative;
}

/* NEW FLAG */

.new-flag-bg {
  color: white;
  background-color: #F20EA7;
  text-align: center;
  text-transform: uppercase;
  padding: 8px 12px;
  margin-bottom: 20px;
  display: inline-block;
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.new-flag-text {
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  display: inline-block;
  font-size: 1rem;
}

/* NEIGHBORHOODS ALT TEXT SECTIONÍ */

.weekend-section {
  width: 100%;
  color: #15264c;
}

.weekend-section div div div img {
  width: 100%;
}

.alt-text-copy{
  padding: 10px;
}

.spacer {
  height: 20px;
}

.boardwalk {
  background: url('https://www.royalcaribbean.com/content/dam/royal/data/activity/carousel/oasis-carousel-boardwalk-man-girls-activity.jpg') no-repeat center center transparent;
  background-size: cover;
  width: 100%;
  height: 20vw;
}

.onboard-activities {
  background: url('https://www.royalcaribbean.com/content/dam/royal/data/activity/the-perfect-storm/perfect-storm-guest-selfie-water-slide-riding-activity.JPG') no-repeat center center transparent;
  background-size: cover;
  width: 100%;
  height: 20vw;
}

.dining {
  background: url('https://www.royalcaribbean.com/content/dam/royal/data/dining/jamies-italian/Jamies-Italian-Lobster-Al-Forno-food.jpg') no-repeat center center transparent;
  background-size: cover;
  width: 100%;
  height: 20vw;
}

/* MEDIA QUERIES */

@media screen and (max-width: 1920px){

}


@media screen and (max-width: 1280px){
  .boardwalk {
    height: 25vw;
  }

  .onboard-activities {
    height: 25vw;
  }

  .dining {
    height: 25vw;
  }
}

@media screen and (max-width: 1024px){

  .large-text {
    font-size: 1.8rem;
  }

  .mdc-layout-grid__inner {
    margin: 0;
  }

  .p-text {
    font-size: 0.9rem;
  }

  .small-text {
  font-size: 0.85rem;
  }

  .hyperlink {
  font-size: 0.8rem;
  }

  .boardwalk {
    height: 25vw;
  }

  .onboard-activities {
    height: 25vw;
  }

  .dining {
    height: 25vw;
  }
}

@media screen and (max-width: 839px){
  .p-text {
    width: 42%;
    font-size: 0.9rem;
  }

  .mobileOnly {
    display: block;
  }

  .desktopOnly {
    display: none;
  }

  .boardwalk {
    height: 40vw;
  }

  .onboard-activities {
    height: 40vw;
  }

  .dining {
    height: 40vw;
  }
}

@media screen and (max-width: 768px){

  .slant_tiles {
    background: url('https://www.royalcaribbean.com/content/dam/royal/content/oasis-class/symphony-all-new.png') no-repeat center center transparent;
    background-size: cover;
    height: 323px;
  }

  .large-text {
    font-size: 2.75rem;
    line-height: 2.4rem;
  }

  .small-text {
    font-size: .9rem;
  }

  .p-text {
    width: 100%;
  }

  .right-column {
    height: 250px;
  }

  .safe-space {
    margin: 5% 0% 0% 0%;
    text-align: center;
  }

  .p-text {
    width: 70%;
    margin: 0 auto;
    font-size: 0.9rem;
  }

  .new-flag-text {
    font-size:
  }
}

@media screen and (max-width: 750px){

}

@media screen and (max-width: 479px) {
  .mobileOnly {
    display: block;
  }
  .desktopOnly {
    display: none;
  }

  .slant_tiles {
    height: 377px;
  }


}

@media screen and (max-width: 375px){

}