````
*/
.lists__horizontal--buttons {
margin-top: 0;
overflow: hidden;
}
.lists__horizontal--buttons li {
display: block;
float: left;
}
.lists__horizontal--buttons a {
display: block;
}
/*
Ratios
Ratios are used primarily for objects that must scale in both width and height
proportionally, such as embedded videos.
See: (http://daverupert.com/2012/04/uncle-daves-ol-padded-box/)
The `.ratios__` dimension class is placed on a wrapping element, with
its child contents wrapped by the `.ratios__content` class.
...
For embedded videos, use the `.ratios__video` class, and it will assume an
`iframe` is the direct child:
*/
.ratios__base:before,
.ratios__video:before,
.ratios__1x1:before,
.ratios__square:before,
.ratios__2x1:before,
.ratios__1x2:before {
content: "";
}
.ratios__video:before {
padding-top: 56.25%;
}
.ratios__1x1:before,
.ratios__square:before {
padding-top: 100%;
}
.ratios__2x1:before {
padding-top: 50%;
}
.ratios__1x2:before {
padding-top: 200%;
}
.ratios__content,
.ratios__video > iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
/*
Figures
Great for integrating images into bodies of text, the `.media__figure` class is
modified by the `--left` and `--right` keywords depending on where you would
like it placed.
````plain-media
````
````captioned-media
This caption enhances the photo above. It should only be a brief sentence or two long.
````
*/
.media__figure,
[class*="media__figure--"] {
margin-top: 1.25em;
}
@media all and (min-width: 30em) {
[class*="media__figure--"] {
margin-top: 0;
max-width: 50%;
}
.media__figure--left,
.media__figure--right {
padding-bottom: 0.625rem;
}
.media__figure--left {
float: left;
padding-right: 2rem;
}
.media__figure--right {
float: right;
padding-left: 2rem;
}
}
.icons__icon,
.icons__icon--spaced-right,
.icons__icon--spaced-left,
.button__primary--icon svg,
.button__secondary--icon svg,
.input__validation-icon--success,
.input__validation-icon--error,
.packages__card-icon--spaced-right,
.packages__card-icon--spaced-left,
.icons__icon--spaced-right--spaced-left,
.icons__icon--spaced-left--spaced-right,
.button__primary--icon svg--spaced-right,
.button__primary--icon svg--spaced-left,
.button__secondary--icon svg--spaced-right,
.button__secondary--icon svg--spaced-left,
.input__validation-icon--success--spaced-right,
.input__validation-icon--success--spaced-left,
.input__validation-icon--error--spaced-right,
.input__validation-icon--error--spaced-left,
.packages__card-icon--spaced-right--spaced-right,
.packages__card-icon--spaced-right--spaced-left,
.packages__card-icon--spaced-left--spaced-right,
.packages__card-icon--spaced-left--spaced-left,
.button__primary--icon svg--spaced-right--spaced-left,
.button__primary--icon svg--spaced-left--spaced-right,
.button__secondary--icon svg--spaced-right--spaced-left,
.button__secondary--icon svg--spaced-left--spaced-right,
.input__validation-icon--success--spaced-right--spaced-left,
.input__validation-icon--success--spaced-left--spaced-right,
.input__validation-icon--error--spaced-right--spaced-left,
.input__validation-icon--error--spaced-left--spaced-right,
.packages__card-icon--spaced-right--spaced-right--spaced-left,
.packages__card-icon--spaced-right--spaced-left--spaced-right,
.packages__card-icon--spaced-left--spaced-right--spaced-left,
.packages__card-icon--spaced-left--spaced-left--spaced-right {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: text-bottom;
fill: currentColor;
}
.no-svg .icons__icon,
.no-svg .icons__icon--spaced-right,
.no-svg .icons__icon--spaced-left,
.no-svg .button__primary--icon svg,
.no-svg .button__secondary--icon svg,
.no-svg .input__validation-icon--success,
.no-svg .input__validation-icon--error,
.no-svg .packages__card-icon--spaced-right,
.no-svg .packages__card-icon--spaced-left,
.no-svg .icons__icon--spaced-right--spaced-left,
.no-svg .icons__icon--spaced-left--spaced-right,
.no-svg .button__primary--icon svg--spaced-right,
.no-svg .button__primary--icon svg--spaced-left,
.no-svg .button__secondary--icon svg--spaced-right,
.no-svg .button__secondary--icon svg--spaced-left,
.no-svg .input__validation-icon--success--spaced-right,
.no-svg .input__validation-icon--success--spaced-left,
.no-svg .input__validation-icon--error--spaced-right,
.no-svg .input__validation-icon--error--spaced-left,
.no-svg .packages__card-icon--spaced-right--spaced-right,
.no-svg .packages__card-icon--spaced-right--spaced-left,
.no-svg .packages__card-icon--spaced-left--spaced-right,
.no-svg .packages__card-icon--spaced-left--spaced-left,
.no-svg .button__primary--icon svg--spaced-right--spaced-left,
.no-svg .button__primary--icon svg--spaced-left--spaced-right,
.no-svg .button__secondary--icon svg--spaced-right--spaced-left,
.no-svg .button__secondary--icon svg--spaced-left--spaced-right,
.no-svg .input__validation-icon--success--spaced-right--spaced-left,
.no-svg .input__validation-icon--success--spaced-left--spaced-right,
.no-svg .input__validation-icon--error--spaced-right--spaced-left,
.no-svg .input__validation-icon--error--spaced-left--spaced-right,
.no-svg .packages__card-icon--spaced-right--spaced-right--spaced-left,
.no-svg .packages__card-icon--spaced-right--spaced-left--spaced-right,
.no-svg .packages__card-icon--spaced-left--spaced-right--spaced-left,
.no-svg .packages__card-icon--spaced-left--spaced-left--spaced-right {
display: none;
}
.icons__icon--spaced-right,
.icons__icon--spaced-left--spaced-right,
.button__primary--icon svg--spaced-right,
.button__secondary--icon svg--spaced-right,
.input__validation-icon--success--spaced-right,
.input__validation-icon--error--spaced-right,
.packages__card-icon--spaced-right--spaced-right,
.packages__card-icon--spaced-left--spaced-right,
.button__primary--icon svg--spaced-left--spaced-right,
.button__secondary--icon svg--spaced-left--spaced-right,
.input__validation-icon--success--spaced-left--spaced-right,
.input__validation-icon--error--spaced-left--spaced-right,
.packages__card-icon--spaced-right--spaced-left--spaced-right,
.packages__card-icon--spaced-left--spaced-left--spaced-right {
margin-right: 0.5rem;
}
.icons__icon--spaced-left,
.icons__icon--spaced-right--spaced-left,
.button__primary--icon svg--spaced-left,
.button__secondary--icon svg--spaced-left,
.input__validation-icon--success--spaced-left,
.input__validation-icon--error--spaced-left,
.packages__card-icon--spaced-right--spaced-left,
.packages__card-icon--spaced-left--spaced-left,
.button__primary--icon svg--spaced-right--spaced-left,
.button__secondary--icon svg--spaced-right--spaced-left,
.input__validation-icon--success--spaced-right--spaced-left,
.input__validation-icon--error--spaced-right--spaced-left,
.packages__card-icon--spaced-right--spaced-right--spaced-left,
.packages__card-icon--spaced-left--spaced-right--spaced-left {
margin-left: 0.5rem;
}
svg:not(:root) {
overflow: hidden;
}
img {
max-width: 100%;
border: 0;
transition: opacity 250ms ease;
}
.lte7 img {
-ms-interpolation-mode: bicubic;
}
img.lazyload {
opacity: 0;
}
img.lazyloaded {
opacity: 1;
}
.images__image-as-bg,
.navigationFooter__logos img,
.navExperience__img-container img,
.navExperience__sidebar--figure img,
.navCelebrations__img-container img,
.heroHeader__background img,
.ctaNav__nav-img-wrap img,
.storyBlock__chapter-img img,
.carousel__figure img,
.simpleSlider__slide--figure img,
.promotionsBlock__slide img,
.featured__background img,
.featured__figure img,
.featuredCard__image-container img,
.experienceRoyalCourts__figure img,
.castleVisit__card-figure img,
.promotionHeader__figure img,
.castleHeader__figure img,
.castleHeader__slide img,
.castleDetails__meta-map img,
.castleShows__figure img,
.navCastles__img-container img,
.textMedia__img img,
.castleDetails__slide--figure img,
.castleMessage__figure img,
.idme__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center;
position: absolute;
top: 0;
left: 0;
}
.no-objectfit .images__image-as-bg,
.no-objectfit .navigationFooter__logos img,
.no-objectfit .navExperience__img-container img,
.no-objectfit .navExperience__sidebar--figure img,
.no-objectfit .navCelebrations__img-container img,
.no-objectfit .heroHeader__background img,
.no-objectfit .ctaNav__nav-img-wrap img,
.no-objectfit .storyBlock__chapter-img img,
.no-objectfit .carousel__figure img,
.no-objectfit .simpleSlider__slide--figure img,
.no-objectfit .promotionsBlock__slide img,
.no-objectfit .featured__background img,
.no-objectfit .featured__figure img,
.no-objectfit .featuredCard__image-container img,
.no-objectfit .experienceRoyalCourts__figure img,
.no-objectfit .castleVisit__card-figure img,
.no-objectfit .promotionHeader__figure img,
.no-objectfit .castleHeader__figure img,
.no-objectfit .castleHeader__slide img,
.no-objectfit .castleDetails__meta-map img,
.no-objectfit .castleShows__figure img,
.no-objectfit .navCastles__img-container img,
.no-objectfit .textMedia__img img,
.no-objectfit .castleDetails__slide--figure img,
.no-objectfit .castleMessage__figure img,
.no-objectfit .idme__img img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.images__figure-as-bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
margin: 0;
background: #040D13;
}
.images__figure-as-bg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center;
position: absolute;
top: 0;
left: 0;
}
.no-objectfit .images__figure-as-bg img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.images__figure-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, #7300D5 0%, #006FFF 100%);
mix-blend-mode: multiply;
}
audio,
canvas,
video {
display: inline-block;
}
.lte7 audio,
.lte7 canvas,
.lte7 video {
display: inline;
zoom: 1;
}
/*
Audio
From Normalize.css:
> Prevents modern browsers from displaying `audio` without controls.
> Remove excess height in iOS5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
/*
Font Classes
Each font family and weight used in the site is given its own LEGO-block class
to enable quick use and modularity.
*/
.styles__baskerville {
font-family: 'berthold-baskerville-pro', "Times New Roman", Times, Georgia, serif;
font-weight: 400;
}
.styles__baskerville--bold {
font-family: 'berthold-baskerville-pro', "Times New Roman", Times, Georgia, serif;
font-weight: 700;
}
.styles__avenir--light {
font-family: 'avenir-lt-pro', Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 200;
}
.styles__avenir--lightItalic {
font-family: 'avenir-lt-pro', Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: italic;
font-weight: 200;
}
.styles__avenir--medium {
font-family: 'avenir-lt-pro', Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 500;
}
.styles__avenir--black {
font-family: 'avenir-lt-pro', Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 800;
}
/*
Heading Styles
In Motif, typography is broken into pieces that separate skin from structure.
In this case, that means the font sizing (structure) is separate from the
styling (skin) -- which includes font family, color, etc.
Heading styles are some of the type skins, and we start out with
`.primary-heading` (which is also the `h`-tag default) and
`.secondary-heading`. Add as necessary.
````primary-heading