.croppie-container { width: 100%; height: 100%; } .croppie-container .cr-image { z-index: -1; position: absolute; top: 0; left: 0; transform-origin: 0 0; max-height: none; max-width: none; } .croppie-container .cr-boundary { position: relative; overflow: hidden; margin: 0 auto; z-index: 1; width: 100%; height: 100%; } .croppie-container .cr-viewport, .croppie-container .cr-resizer { position: absolute; border: 2px solid #fff; margin: auto; top: 0; bottom: 0; right: 0; left: 0; box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5); z-index: 0; } .croppie-container .cr-resizer { z-index: 2; box-shadow: none; pointer-events: none; } .croppie-container .cr-resizer-vertical, .croppie-container .cr-resizer-horisontal { position: absolute; pointer-events: all; } .croppie-container .cr-resizer-vertical::after, .croppie-container .cr-resizer-horisontal::after { display: block; position: absolute; box-sizing: border-box; border: 1px solid black; background: #fff; width: 10px; height: 10px; content: ''; } .croppie-container .cr-resizer-vertical { bottom: -5px; cursor: row-resize; width: 100%; height: 10px; } .croppie-container .cr-resizer-vertical::after { left: 50%; margin-left: -5px; } .croppie-container .cr-resizer-horisontal { right: -5px; cursor: col-resize; width: 10px; height: 100%; } .croppie-container .cr-resizer-horisontal::after { top: 50%; margin-top: -5px; } .croppie-container .cr-original-image { display: none; } .croppie-container .cr-vp-circle { border-radius: 50%; } .croppie-container .cr-overlay { z-index: 1; position: absolute; cursor: move; touch-action: none; } .croppie-container .cr-slider-wrap { width: 75%; margin: 15px auto; text-align: center; } .croppie-result { position: relative; overflow: hidden; } .croppie-result img { position: absolute; } .croppie-container .cr-image, .croppie-container .cr-overlay, .croppie-container .cr-viewport { transform: translateZ(0); } /*************************************/ /***** STYLING RANGE INPUT ***********/ /*************************************/ /*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */ /*************************************/ .cr-slider { -webkit-appearance: none; /*removes default webkit styles*/ /*border: 1px solid white; *//*fix for FF unable to apply focus style bug */ width: 300px; /*required for proper track sizing in FF*/ max-width: 100%; padding-top: 8px; padding-bottom: 8px; background-color: transparent; } .cr-slider::-webkit-slider-runnable-track { width: 100%; height: 3px; background: rgba(0, 0, 0, 0.5); border: 0; border-radius: 3px; } .cr-slider::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: #ddd; margin-top: -6px; } .cr-slider:focus { outline: none; } /* .cr-slider:focus::-webkit-slider-runnable-track { background: #ccc; } */ .cr-slider::-moz-range-track { width: 100%; height: 3px; background: rgba(0, 0, 0, 0.5); border: 0; border-radius: 3px; } .cr-slider::-moz-range-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: #ddd; margin-top: -6px; } /*hide the outline behind the border*/ .cr-slider:-moz-focusring { outline: 1px solid white; outline-offset: -1px; } .cr-slider::-ms-track { width: 100%; height: 5px; background: transparent; /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */ border-width: 6px 0; color: transparent;/*remove default tick marks*/ } .cr-slider::-ms-fill-lower { background: rgba(0, 0, 0, 0.5); border-radius: 10px; } .cr-slider::-ms-fill-upper { background: rgba(0, 0, 0, 0.5); border-radius: 10px; } .cr-slider::-ms-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: #ddd; margin-top:1px; } .cr-slider:focus::-ms-fill-lower { background: rgba(0, 0, 0, 0.5); } .cr-slider:focus::-ms-fill-upper { background: rgba(0, 0, 0, 0.5); } /*******************************************/ /***********************************/ /* Rotation Tools */ /***********************************/ .cr-rotate-controls { position: absolute; bottom: 5px; left: 5px; z-index: 1; } .cr-rotate-controls button { border: 0; background: none; } .cr-rotate-controls i:before { display: inline-block; font-style: normal; font-weight: 900; font-size: 22px; } .cr-rotate-l i:before { content: '\21BA'; } .cr-rotate-r i:before { content: '\21BB'; } fieldset[disabled] .multiselect{pointer-events:none}.multiselect__spinner{position:absolute;right:1px;top:1px;width:40px;height:38px;background:#fff;display:block}.multiselect__spinner:after,.multiselect__spinner:before{position:absolute;content:"";top:50%;left:50%;margin:-8px 0 0 -8px;width:16px;height:16px;border-radius:100%;border:2px solid transparent;border-top-color:#41b883;box-shadow:0 0 0 1px transparent}.multiselect__spinner:before{animation:spinning 2.4s cubic-bezier(.41,.26,.2,.62);animation-iteration-count:infinite}.multiselect__spinner:after{animation:spinning 2.4s cubic-bezier(.51,.09,.21,.8);animation-iteration-count:infinite}.multiselect__loading-enter-active,.multiselect__loading-leave-active{transition:opacity .4s ease-in-out;opacity:1}.multiselect__loading-enter,.multiselect__loading-leave-active{opacity:0}.multiselect,.multiselect__input,.multiselect__single{font-family:inherit;font-size:16px;touch-action:manipulation}.multiselect{box-sizing:content-box;display:block;position:relative;width:100%;min-height:40px;text-align:left;color:#35495e}.multiselect *{box-sizing:border-box}.multiselect:focus{outline:none}.multiselect--disabled{background:#ededed;pointer-events:none;opacity:.6}.multiselect--active{z-index:50}.multiselect--active:not(.multiselect--above) .multiselect__current,.multiselect--active:not(.multiselect--above) .multiselect__input,.multiselect--active:not(.multiselect--above) .multiselect__tags{border-bottom-left-radius:0;border-bottom-right-radius:0}.multiselect--active .multiselect__select{transform:rotate(180deg)}.multiselect--above.multiselect--active .multiselect__current,.multiselect--above.multiselect--active .multiselect__input,.multiselect--above.multiselect--active .multiselect__tags{border-top-left-radius:0;border-top-right-radius:0}.multiselect__input,.multiselect__single{position:relative;display:inline-block;min-height:20px;line-height:20px;border:none;border-radius:5px;background:#fff;padding:0 0 0 5px;width:100%;transition:border .1s ease;box-sizing:border-box;margin-bottom:8px;vertical-align:top}.multiselect__input::-moz-placeholder{color:#35495e}.multiselect__input::placeholder{color:#35495e}.multiselect__tag~.multiselect__input,.multiselect__tag~.multiselect__single{width:auto}.multiselect__input:hover,.multiselect__single:hover{border-color:#cfcfcf}.multiselect__input:focus,.multiselect__single:focus{border-color:#a8a8a8;outline:none}.multiselect__single{padding-left:5px;margin-bottom:8px}.multiselect__tags-wrap{display:inline}.multiselect__tags{min-height:40px;display:block;padding:8px 40px 0 8px;border-radius:5px;border:1px solid #e8e8e8;background:#fff;font-size:14px}.multiselect__tag{position:relative;display:inline-block;padding:4px 26px 4px 10px;border-radius:5px;margin-right:10px;color:#fff;line-height:1;background:#41b883;margin-bottom:5px;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}.multiselect__tag-icon{cursor:pointer;margin-left:7px;position:absolute;right:0;top:0;bottom:0;font-weight:700;font-style:normal;width:22px;text-align:center;line-height:22px;transition:all .2s ease;border-radius:5px}.multiselect__tag-icon:after{content:"\D7";color:#266d4d;font-size:14px}.multiselect__tag-icon:focus,.multiselect__tag-icon:hover{background:#369a6e}.multiselect__tag-icon:focus:after,.multiselect__tag-icon:hover:after{color:#fff}.multiselect__current{min-height:40px;overflow:hidden;padding:8px 30px 0 12px;white-space:nowrap;border-radius:5px;border:1px solid #e8e8e8}.multiselect__current,.multiselect__select{line-height:16px;box-sizing:border-box;display:block;margin:0;text-decoration:none;cursor:pointer}.multiselect__select{position:absolute;width:40px;height:38px;right:1px;top:1px;padding:4px 8px;text-align:center;transition:transform .2s ease}.multiselect__select:before{position:relative;right:0;top:65%;color:#999;margin-top:4px;border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 0;content:""}.multiselect__placeholder{color:#adadad;display:inline-block;margin-bottom:10px;padding-top:2px}.multiselect--active .multiselect__placeholder{display:none}.multiselect__content-wrapper{position:absolute;display:block;background:#fff;width:100%;max-height:240px;overflow:auto;border:1px solid #e8e8e8;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:50;-webkit-overflow-scrolling:touch}.multiselect__content{list-style:none;display:inline-block;padding:0;margin:0;min-width:100%;vertical-align:top}.multiselect--above .multiselect__content-wrapper{bottom:100%;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:none;border-top:1px solid #e8e8e8}.multiselect__content::webkit-scrollbar{display:none}.multiselect__element{display:block}.multiselect__option{display:block;padding:12px;min-height:40px;line-height:16px;text-decoration:none;text-transform:none;vertical-align:middle;position:relative;cursor:pointer;white-space:nowrap}.multiselect__option:after{top:0;right:0;position:absolute;line-height:40px;padding-right:12px;padding-left:20px;font-size:13px}.multiselect__option--highlight{background:#41b883;outline:none;color:#fff}.multiselect__option--highlight:after{content:attr(data-select);background:#41b883;color:#fff}.multiselect__option--selected{background:#f3f3f3;color:#35495e;font-weight:700}.multiselect__option--selected:after{content:attr(data-selected);color:silver;background:inherit}.multiselect__option--selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--selected.multiselect__option--highlight:after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect--disabled .multiselect__current,.multiselect--disabled .multiselect__select{background:#ededed;color:#a6a6a6}.multiselect__option--disabled{background:#ededed!important;color:#a6a6a6!important;cursor:text;pointer-events:none}.multiselect__option--group{background:#ededed;color:#35495e}.multiselect__option--group.multiselect__option--highlight{background:#35495e;color:#fff}.multiselect__option--group.multiselect__option--highlight:after{background:#35495e}.multiselect__option--disabled.multiselect__option--highlight{background:#dedede}.multiselect__option--group-selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--group-selected.multiselect__option--highlight:after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect-enter-active,.multiselect-leave-active{transition:all .15s ease}.multiselect-enter,.multiselect-leave-active{opacity:0}.multiselect__strong{margin-bottom:8px;line-height:20px;display:inline-block;vertical-align:top}[dir=rtl] .multiselect{text-align:right}[dir=rtl] .multiselect__select{right:auto;left:1px}[dir=rtl] .multiselect__tags{padding:8px 8px 0 40px}[dir=rtl] .multiselect__content{text-align:right}[dir=rtl] .multiselect__option:after{right:auto;left:0}[dir=rtl] .multiselect__clear{right:auto;left:12px}[dir=rtl] .multiselect__spinner{right:auto;left:1px}@keyframes spinning{0%{transform:rotate(0)}to{transform:rotate(2turn)}}@charset "UTF-8";/*! * animate.css - https://animate.style/ * Version - 4.1.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2020 Animate.css */ :root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; } .animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animate__animated.animate__infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animate__animated.animate__repeat-1 { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-iteration-count: var(--animate-repeat); animation-iteration-count: var(--animate-repeat); } .animate__animated.animate__repeat-2 { -webkit-animation-iteration-count: calc(1 * 2); animation-iteration-count: calc(1 * 2); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2); animation-iteration-count: calc(var(--animate-repeat) * 2); } .animate__animated.animate__repeat-3 { -webkit-animation-iteration-count: calc(1 * 3); animation-iteration-count: calc(1 * 3); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); animation-iteration-count: calc(var(--animate-repeat) * 3); } .animate__animated.animate__delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay); } .animate__animated.animate__delay-2s { -webkit-animation-delay: calc(1s * 2); animation-delay: calc(1s * 2); -webkit-animation-delay: calc(var(--animate-delay) * 2); animation-delay: calc(var(--animate-delay) * 2); } .animate__animated.animate__delay-3s { -webkit-animation-delay: calc(1s * 3); animation-delay: calc(1s * 3); -webkit-animation-delay: calc(var(--animate-delay) * 3); animation-delay: calc(var(--animate-delay) * 3); } .animate__animated.animate__delay-4s { -webkit-animation-delay: calc(1s * 4); animation-delay: calc(1s * 4); -webkit-animation-delay: calc(var(--animate-delay) * 4); animation-delay: calc(var(--animate-delay) * 4); } .animate__animated.animate__delay-5s { -webkit-animation-delay: calc(1s * 5); animation-delay: calc(1s * 5); -webkit-animation-delay: calc(var(--animate-delay) * 5); animation-delay: calc(var(--animate-delay) * 5); } .animate__animated.animate__faster { -webkit-animation-duration: calc(1s / 2); animation-duration: calc(1s / 2); -webkit-animation-duration: calc(var(--animate-duration) / 2); animation-duration: calc(var(--animate-duration) / 2); } .animate__animated.animate__fast { -webkit-animation-duration: calc(1s * 0.8); animation-duration: calc(1s * 0.8); -webkit-animation-duration: calc(var(--animate-duration) * 0.8); animation-duration: calc(var(--animate-duration) * 0.8); } .animate__animated.animate__slow { -webkit-animation-duration: calc(1s * 2); animation-duration: calc(1s * 2); -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); } .animate__animated.animate__slower { -webkit-animation-duration: calc(1s * 3); animation-duration: calc(1s * 3); -webkit-animation-duration: calc(var(--animate-duration) * 3); animation-duration: calc(var(--animate-duration) * 3); } @media print, (prefers-reduced-motion: reduce) { .animate__animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } .animate__animated[class*='Out'] { opacity: 0; } } /* Attention seekers */ @-webkit-keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } .animate__bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .animate__flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .animate__shakeX { -webkit-animation-name: shakeX; animation-name: shakeX; } @-webkit-keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } @keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } .animate__shakeY { -webkit-animation-name: shakeY; animation-name: shakeY; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .animate__headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .animate__swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .animate__jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } .animate__heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: calc(1s * 1.3); animation-duration: calc(1s * 1.3); -webkit-animation-duration: calc(var(--animate-duration) * 1.3); animation-duration: calc(var(--animate-duration) * 1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } /* Back entrances */ @-webkit-keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInDown { -webkit-animation-name: backInDown; animation-name: backInDown; } @-webkit-keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInLeft { -webkit-animation-name: backInLeft; animation-name: backInLeft; } @-webkit-keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInRight { -webkit-animation-name: backInRight; animation-name: backInRight; } @-webkit-keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInUp { -webkit-animation-name: backInUp; animation-name: backInUp; } /* Back exits */ @-webkit-keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } @keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } .animate__backOutDown { -webkit-animation-name: backOutDown; animation-name: backOutDown; } @-webkit-keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } .animate__backOutLeft { -webkit-animation-name: backOutLeft; animation-name: backOutLeft; } @-webkit-keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } .animate__backOutRight { -webkit-animation-name: backOutRight; animation-name: backOutRight; } @-webkit-keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } @keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } .animate__backOutUp { -webkit-animation-name: backOutUp; animation-name: backOutUp; } /* Bouncing entrances */ @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__bounceIn { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } /* Bouncing exits */ @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .animate__bounceOut { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } .animate__bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } .animate__bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } .animate__bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } .animate__bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } /* Fading entrances */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate__fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInTopLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInTopLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInTopLeft { -webkit-animation-name: fadeInTopLeft; animation-name: fadeInTopLeft; } @-webkit-keyframes fadeInTopRight { from { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInTopRight { from { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInTopRight { -webkit-animation-name: fadeInTopRight; animation-name: fadeInTopRight; } @-webkit-keyframes fadeInBottomLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInBottomLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInBottomLeft { -webkit-animation-name: fadeInBottomLeft; animation-name: fadeInBottomLeft; } @-webkit-keyframes fadeInBottomRight { from { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInBottomRight { from { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInBottomRight { -webkit-animation-name: fadeInBottomRight; animation-name: fadeInBottomRight; } /* Fading exits */ @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .animate__fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .animate__fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .animate__fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .animate__fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .animate__fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutTopLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } @keyframes fadeOutTopLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } .animate__fadeOutTopLeft { -webkit-animation-name: fadeOutTopLeft; animation-name: fadeOutTopLeft; } @-webkit-keyframes fadeOutTopRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } @keyframes fadeOutTopRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } .animate__fadeOutTopRight { -webkit-animation-name: fadeOutTopRight; animation-name: fadeOutTopRight; } @-webkit-keyframes fadeOutBottomRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } @keyframes fadeOutBottomRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } .animate__fadeOutBottomRight { -webkit-animation-name: fadeOutBottomRight; animation-name: fadeOutBottomRight; } @-webkit-keyframes fadeOutBottomLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } @keyframes fadeOutBottomLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } .animate__fadeOutBottomLeft { -webkit-animation-name: fadeOutBottomLeft; animation-name: fadeOutBottomLeft; } /* Flippers */ @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animate__animated.animate__flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .animate__flipOutX { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .animate__flipOutY { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } /* Lightspeed */ @-webkit-keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .animate__lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } .animate__lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /* Rotating entrances */ @-webkit-keyframes rotateIn { from { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateIn { from { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Rotating exits */ @-webkit-keyframes rotateOut { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .animate__rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateOutDownLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .animate__rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutDownRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .animate__rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOutUpLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .animate__rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutUpRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .animate__rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Specials */ @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .animate__hinge { -webkit-animation-duration: calc(1s * 2); animation-duration: calc(1s * 2); -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); -webkit-animation-name: hinge; animation-name: hinge; -webkit-transform-origin: top left; transform-origin: top left; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .animate__jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .animate__rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* Zooming entrances */ @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } /* Zooming exits */ @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } .animate__zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; -webkit-transform-origin: left center; transform-origin: left center; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } .animate__zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; -webkit-transform-origin: right center; transform-origin: right center; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; -webkit-transform-origin: center bottom; transform-origin: center bottom; } /* Sliding entrances */ @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } /* Sliding exits */ @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @charset "UTF-8"; @font-face { font-family: "Bureau Grot Bk"; font-weight: normal; font-style: normal; font-display: swap; src: url("/fonts/Bureau Grot Book.woff2") format("woff2"), url("/fonts/Bureau Grot Book.woff") format("woff"); } @font-face { font-family: "Bureau Grot Compressed"; src: url("/fonts/OLD/Bureau Grot Compressed Book.otf") format("woff2"); font-weight: normal; font-style: normal; } @font-face { font-family: "Bureau Grot Comp Bk"; font-weight: normal; font-style: normal; font-display: swap; src: url("/fonts/Bureau Grot Compressed Book.woff2") format("woff2"), url("/fonts/Bureau Grot Compressed Book.woff") format("woff"); } @font-face { font-family: "Plantin"; src: url("/fonts/3B18E1_1_0.eot"); src: url("/fonts/3B18E1_1_0.eot?#iefix") format("embedded-opentype"), url("/fonts/3B18E1_1_0.woff2") format("woff2"), url("/fonts/3B18E1_1_0.woff") format("woff"), url("/fonts/3B18E1_1_0.ttf") format("truetype"); font-weight: normal; font-style: normal; unicode-range: U+000-5FF; /* Latin glyphs */ } @font-face { font-family: "FoundersGrotesk-Regular"; src: url("/fonts/founders-grotesk-web-regular.woff2") format("woff2"), url("/fonts/founders-grotesk-web-regular.woff") format("woff"), url("/fonts/founders-grotesk-web-regular.eot") format("embedded-opentype"); font-weight: normal; font-style: normal; unicode-range: U+000-5FF; /* Latin glyphs */ } @font-face { font-family: "Clearface"; src: url("/fonts/3B18E1_0_0.eot"); src: url("/fonts/3B18E1_0_0.eot?#iefix") format("embedded-opentype"), url("/fonts/3B18E1_0_0.woff2") format("woff2"), url("/fonts/3B18E1_0_0.woff") format("woff"), url("/fonts/3B18E1_0_0.ttf") format("truetype"); font-weight: normal; font-style: normal; unicode-range: U+000-5FF; /* Latin glyphs */ } @font-face { font-family: "Altissima"; src: url("/fonts/Altissima-Condensed.eot"); src: url("/fonts/Altissima-Condensed.woff") format("woff"), url("/fonts/Altissima-Condensed.ttf") format("ttf"); font-weight: normal; font-style: normal; unicode-range: U+000-5FF; /* Latin glyphs */ } .text-uppercase { text-transform: uppercase; } .lightpick { position: absolute; z-index: 99999; padding: 24px; border-radius: 25px; background-color: #000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); color: #fff; font-family: "Grotesk", helvetica; line-height: 1.125em; } .lightpick--inlined { position: relative; display: inline-block; } .lightpick, .lightpick *, .lightpick::after, .lightpick::before { box-sizing: border-box; } .lightpick.is-hidden { display: none; } .lightpick__months { display: grid; background-color: #eee; grid-template-columns: auto; grid-gap: 1px; } .lightpick--2-columns .lightpick__months { grid-template-columns: auto auto; } .lightpick--3-columns .lightpick__months { grid-template-columns: auto auto auto; } .lightpick--4-columns .lightpick__months { grid-template-columns: auto auto auto auto; } .lightpick--5-columns .lightpick__months { grid-template-columns: auto auto auto auto auto; } .lightpick__month { max-width: 332px; width: calc(100vw - 48px - 40px); background-color: #000; } .lightpick__month-title-bar { display: flex; margin-bottom: 24px; justify-content: space-between; align-items: center; } .lightpick__month-title { margin-left: 24px; font-size: 16px; font-weight: normal; line-height: 24px; cursor: default; padding: 0 24px; border-radius: 25px; font-family: "Bureau Grot Bk", helvetica; text-transform: uppercase !important; } @media (max-width: 960px) { .lightpick__month-title { margin-left: 0; padding: 0; } } .lightpick__month-title > .lightpick__select { border: none; background-color: transparent; outline: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; text-transform: uppercase; } .lightpick__month-title > .lightpick__select:disabled { color: #333; } .lightpick__month-title > .lightpick__select-months { font-size: 1em; margin-right: 0.5em; text-transform: uppercase; } .lightpick__toolbar { display: flex; text-align: right; justify-content: flex-end; } .lightpick__previous-action, .lightpick__next-action, .lightpick__close-action { display: flex; margin-left: 6px; width: 32px; height: 32px; outline: none; border: none; border-radius: 50%; background-color: #E8E0CC; justify-content: center; align-items: center; color: #000; } .lightpick__previous-action:active, .lightpick__next-action:active, .lightpick__close-action:active { color: inherit; } .lightpick__previous-action, .lightpick__next-action { font-size: 12px; } .lightpick__close-action { font-size: 18px; } .lightpick__days-of-the-week { display: grid; grid-template-columns: repeat(7, 1fr); } .lightpick__day-of-the-week { display: flex; font-size: 11px; font-weight: normal; justify-content: center; align-items: center; font-family: "Bureau Grot Bk", helvetica; text-transform: uppercase; } .lightpick__days { display: grid; grid-template-columns: repeat(7, 1fr); } .lightpick__day { display: flex; height: 40px; background-position: center center; background-size: contain; background-repeat: no-repeat; font-size: 15px; justify-content: center; align-items: center; cursor: default; } .lightpick__day:not(.is-disabled):hover { background-size: contain; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='%23E8E0CC' cx='16' cy='16' r='16'/%3E%3C/svg%3E"); color: #000; } .lightpick__day.is-disabled { opacity: 0.38; pointer-events: none; } .lightpick__day.is-disabled.is-forward-selected { opacity: 1; } .lightpick__day.is-disabled.is-forward-selected:not(.is-start-date) { background-color: rgba(229, 200, 154, 0.9); background-image: none; } .lightpick__day.disabled-tooltip { pointer-events: auto; } .lightpick__day.is-previous-month, .lightpick__day.is-next-month { opacity: 0.38; } .lightpick__day.lightpick__day.is-in-range:not(.is-disabled) { opacity: 1; } .lightpick__day.is-in-range { border-radius: 0; background-color: rgba(229, 200, 154, 0.9); background-image: none; color: #000; } .lightpick__day.is-in-range:hover { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='rgba(38, 139, 210, 0.5)' cx='16' cy='16' r='16'/%3E%3C/svg%3E"); } .lightpick__day.is-start-date.is-in-range, .lightpick__day.is-end-date.is-in-range.is-flipped { border-top-left-radius: 50%; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 50%; background-color: #E5C89A; background-image: none; } .lightpick__day.is-end-date.is-in-range, .lightpick__day.is-start-date.is-in-range.is-flipped { border-top-left-radius: 0; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 0; background-color: #E5C89A; background-image: none; } .lightpick__day.is-start-date.is-end-date { background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='%23E5C89A' cx='16' cy='16' r='16'/%3E%3C/svg%3E"); } .lightpick__day.is-start-date, .lightpick__day.is-end-date, .lightpick__day.is-start-date:hover, .lightpick__day.is-end-date:hover { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='%23E5C89A' cx='16' cy='16' r='16'/%3E%3C/svg%3E"); background-size: auto; background-position: center; color: #000; font-weight: normal; } .lightpick__tooltip { position: absolute; margin-top: -4px; padding: 4px 8px; border-radius: 25px; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); white-space: nowrap; font-size: 11px; pointer-events: none; color: #000; } .lightpick__tooltip::before { position: absolute; bottom: -5px; left: calc(50% - 5px); border-top: 5px solid rgba(0, 0, 0, 0.12); border-right: 5px solid transparent; border-left: 5px solid transparent; content: ""; } .lightpick__tooltip::after { position: absolute; bottom: -4px; left: calc(50% - 4px); border-top: 4px solid #fff; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } .lightpick__footer { display: flex; justify-content: space-between; } .lightpick__reset-action, .lightpick__apply-action { border-radius: 5px; font-size: 12px; border: none; } .lightpick__reset-action { color: #fff; background-color: #aeacad; } .lightpick__apply-action { color: #fff; background-color: #2495f3; } .text-uppercase { text-transform: uppercase; } html { font-family: sans-serif; /* 1 */ } body { margin: 0; font-size: 100%; } * { box-sizing: border-box; } /* HTML5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } /* Links ========================================================================== */ a { background: transparent; } @media (min-width: 961px) { a:active, a:hover { outline: 0; } } /* Text-level semantics ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ img { border: 0; } svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } button { overflow: visible; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type=checkbox], input[type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; /* 1 */ padding: 0; /* 2 */ } textarea { overflow: auto; } optgroup { font-weight: bold; } /* Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } .city-tips-section .city-tips-info, .city-tips-section .city-tips-title, .grid-pullout, .post-grid .post, .hp-slider__content, .hp-hero-feed, .footer-grid .footer-col { width: calc(20% - 19.2px); } .post-grid .large-post { width: calc(40% - 14.4px); } .city-tips-section .city-tips-wrap { width: calc(60% - 9.6px); } .hp-hero-feature { width: calc(80% - 4.8px); } .post-widget__title h3, .rec-sidebar-inner .content h3, .profile-sidebar-inner .content h3, .map-post .content h3, .post-grid .large-post .content h3, .post-grid .post .content > h3, .hp-hero-feature .feature-post .content h3, .search-modal .search-place .content h3 { margin: 0; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; line-height: 1; text-transform: uppercase; display: inline-block; padding-bottom: 4px; letter-spacing: 0.1px; transition: all 0.3s; } .post-widget__title h3 span, .rec-sidebar-inner .content h3 span, .profile-sidebar-inner .content h3 span, .map-post .content h3 span, .post-grid .large-post .content h3 span, .post-grid .post .content > h3 span, .hp-hero-feature .feature-post .content h3 span, .search-modal .search-place .content h3 span { font-family: "Plantin", serif; text-transform: none; font-style: italic; font-size: 11px; line-height: 10px; display: inline-block; vertical-align: bottom; } .post-widget__title h3 a, .rec-sidebar-inner .content h3 a, .profile-sidebar-inner .content h3 a, .map-post .content h3 a, .post-grid .large-post .content h3 a, .post-grid .post .content > h3 a, .hp-hero-feature .feature-post .content h3 a, .search-modal .search-place .content h3 a { color: #000; } .cat-eat { box-shadow: inset 0 -2px 0 #FFC296; } .cat-eat:hover { box-shadow: inset 0 -8px 0 #FFC296; } .cat-sleep { box-shadow: inset 0 -2px 0 #ACDDF4; } .cat-sleep:hover { box-shadow: inset 0 -8px 0 #ACDDF4; } .cat-play { box-shadow: inset 0 -2px 0 #F5C9D1; } .cat-play:hover { box-shadow: inset 0 -8px 0 #F5C9D1; } .bg-alt { background: #E5C89A; } .bg-eat { background: #FFC296; } .bg-sleep { background: #ACDDF4; } .bg-play { background: #F5C9D1; } .sticky.fixed { position: fixed !important; bottom: 0; } .sticky.fixed-top { position: fixed !important; top: 0; transition: all 0.3s; } .sticky.stuck { position: absolute !important; bottom: 0; } body { transition: all 0.2s ease-in-out; background-color: #FCFAF5; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; -webkit-font-smoothing: antialiased !important; } .sprite-hide { display: none; } .site-wrap { overflow: hidden; min-height: calc(100vh - 66px); margin-top: 66px; } @media (max-width: 800px) { .site-wrap { margin-top: 51px; min-height: calc(100vh - 51px); } } .wrapper { padding: 50px; } @media (max-width: 1450px) { .wrapper { padding: 30px; } } @media (max-width: 960px) { .wrapper { padding: 20px; } } img { max-width: 100%; } a { text-decoration: none; } svg.location-pin, svg.large-arrow, svg.arrow-right { stroke: #000; } svg.arrow-down { stroke: #000; stroke-width: 1.5; } svg.close { stroke-width: 2; stroke: #000; } svg.save { fill: #E8E0CC; stroke: #000; stroke-width: 1.5; } svg.comment, svg.share, svg.heart { stroke: #000; } svg.search { stroke: #000; stroke-width: 1.5; } svg.twitter { fill: #000; } svg.verified-badge { width: 12px; height: 12px; display: inline-block; vertical-align: middle; margin-left: 3px; } .no-scroll { overflow: hidden; } .no-touch { touch-action: none; } .accessible { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .pw-gate { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 10000000000000000000; } .pw-gate h2 { margin: 0 0 34px; font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 72px; line-height: 1; } @media (max-width: 800px) { .pw-gate h2 { font-size: 54px; } } .pw-gate button.button { background: #E5C89A !important; color: #000 !important; } .pw-gate button.button.disabled { color: #000 !important; opacity: 0.7; } .pw-gate button.button svg { fill: #000 !important; } .pw-gate p { font-size: 14px; line-height: 20px; margin: 35px 0 -5px; font-family: "Grotesk", helvetica; } .pw-gate p a, .pw-gate p button, .pw-gate p span { display: inline-block; position: relative; text-transform: none; color: #fff; cursor: pointer; } .pw-gate p a::after, .pw-gate p button::after, .pw-gate p span::after { content: ""; position: absolute; bottom: 2px; left: 0; width: 100%; height: 1px; background-color: #E5C89A; transition: bottom 0.2s; } .pw-gate input { background: #E8E0CC !important; color: #000 !important; } .pw-gate-inner { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border-radius: 30px; background: #000; color: #fff; text-align: center; display: flex; } @media (max-width: 800px) { .pw-gate-inner { top: 24px; right: 24px; bottom: 24px; left: 24px; } } .paywall-content { align-self: center; max-width: 682px; margin: 0 auto; width: 100%; padding: 24px; } .paywall-content p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 16px; line-height: 1.375; margin: 0; } .paywall-content p + p { margin-top: 16px; } .paywall-content .register-cta { width: 229px; margin-top: 30px; background: #E5C89A; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; color: #000; text-align: left; padding: 24px; border: 0; border-radius: 30px; transition: all 0.3s; display: block; margin: 26px auto 0; cursor: pointer; transition: all 0.3s; } .paywall-content .register-cta:hover { background: #E8E0CC; } .paywall-content .register-cta svg { float: right; width: 8px; height: 8px; transform: translateY(1px); } .paywall-content .login-cta-wrap { font-family: "Plantin", serif; font-weight: normal; font-style: italic; font-size: 13px; line-height: 19px; letter-spacing: 0.1px; margin-top: 18px; } .paywall-content .login-cta-wrap span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-style: normal; cursor: pointer; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; font-size: 13px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; transition: all 0.3s; } .paywall-content .login-cta-wrap span:hover { -webkit-text-decoration-color: white; text-decoration-color: white; } .paywall-login { align-self: center; max-width: 682px; margin: 0 auto; width: 100%; padding: 24px; display: none; } .paywall-apply, .paywall-password { align-self: center; max-width: 682px; margin: 0 auto; width: 100%; padding: 24px; display: none; } .paywall-apply .form__row, .paywall-password .form__row { justify-content: center; } .generic-main.fourohfour-content { text-align: center; padding: 100px 0 100px; margin: 0 auto; } .account-image { position: relative; } .account-image__alert { font-size: 10px; font-weight: 300; padding: 8px; border-radius: 5px; background-color: black; color: #E8E0CC; position: absolute; top: -18px; left: 110%; width: 90px; opacity: 0; pointer-events: none; transform: translateX(-10px); transition: transform 0.35s; } .account-image__alert::before { content: ""; border-style: solid; border-width: 4px 6px 4px 0; border-color: transparent black transparent transparent; position: absolute; left: -6px; top: 10px; } .is-active .account-image__alert { opacity: 1; transform: translateX(10px); } @media (min-width: 800px) { .account-image__alert { width: 175%; } } .price-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #000; padding: 12px 12px 11px; border-radius: 20px; margin-bottom: 15px; width: 145px; text-align: center; color: #fff; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 1; } .price-tooltip::after { content: " "; display: block; border-top: solid 7px #000; border-left: solid 6px transparent; border-right: solid 6px transparent; position: absolute; top: 100%; left: 0; right: 0; margin: auto; width: 0; height: 0; } .price-tooltip p { font-family: "Plantin", serif; font-style: italic; font-size: 11px; line-height: 1.2; margin: 0 0 4px; letter-spacing: 0; } .price-tooltip span { font-family: "Grotesk", helvetica; font-size: 14px; line-height: 1; letter-spacing: 0; color: #fff !important; } .price-tooltip.alt { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 15px; } .price-tooltip.alt::after { top: auto; bottom: 100%; transform: rotate(180deg); } .price-tooltip.table { width: 350px; padding: 1rem; top: 100%; bottom: auto; left: 0; transform: none; margin-top: 16px; text-align: left; max-width: calc(100vw - 60px); } .price-tooltip.table::after { top: auto; bottom: 100%; transform: rotate(180deg); right: auto; left: 42px; } .price-tooltip.table .price-tooltip-close { display: none; position: absolute; top: 13.5px; right: 15px; width: 8px; height: 8px; } @media (max-width: 960px) { .price-tooltip.table .price-tooltip-close { display: block; cursor: pointer; } } .price-tooltip.table .price-tooltip-close svg { display: block; width: 100%; height: 100%; stroke: #fff; } .price-tooltip.table table { width: 100%; } .price-tooltip.table table th, .price-tooltip.table table td { vertical-align: top; padding: 6px 0; } .price-tooltip.table table th:first-child, .price-tooltip.table table td:first-child { border-right: solid 1px rgba(255, 255, 255, 0.47); padding-right: 18px; } .price-tooltip.table table th:not(:first-child), .price-tooltip.table table td:not(:first-child) { padding-left: 18px; } .price-tooltip.table table tr:first-child { border-bottom: solid 1px rgba(255, 255, 255, 0.47); } .price-tooltip.table table tr:not(:first-child) + tr { background-position: top; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .price-tooltip.table table tr:not(:first-child) + tr { border-top: 1px dotted #fff; } .price-tooltip.table table th { font-family: "Plantin", serif; font-weight: normal; font-size: 13px; line-height: 1; font-style: italic; } .price-tooltip.table table th span { display: block; font-family: "Grotesk", helvetica; font-size: 12px; font-weight: normal; line-height: 1; opacity: 0.7; margin-top: 2px; } .price-tooltip.table table td { font-family: "Grotesk", helvetica; font-size: 13px; font-weight: normal; line-height: 1; } .price-tooltip.table table td span { font-size: 10px; opacity: 0.2; } .interests-section { position: relative; text-align: left; padding-bottom: 44px; } .interests-section h3 { position: absolute; top: -4px; right: 100%; margin: 0; font-family: "Bureau Grot Bk", helvetica; font-size: 12px; font-weight: 400; line-height: 26px; text-transform: uppercase; margin-right: 20px; } @media (max-width: 960px) { .interests-section h3 { position: static; margin-right: 0; } } @media (max-width: 600px) { .interests-section h3 { text-align: center; } } .interests-section p { margin: 0 0 24px; font-size: 12px; line-height: 15px; max-width: 354px; } @media (max-width: 600px) { .interests-section p { margin: 0 auto 24px; } } .interests-section h4 { font-family: "Grotesk", helvetica; font-weight: 600; font-size: 12px; line-height: 15px; margin: 26px 0 11px; } @media (max-width: 600px) { .interests-section h4 { text-align: center; } } .interests-section h4:first-child { margin-top: 12px; } .interests-section .interest-wrap { display: inline-block; margin: 0 6px 8px 0; position: relative; width: auto; } .interests-section .interest-wrap input { position: absolute; top: 0; opacity: 0; } .interests-section .interest-wrap input:checked + span { background: #000; color: #fff; } .interests-section .interest-wrap span:not(.error) { background: #E8E0CC; display: flex; height: 40px; align-items: center; padding: 0 15px !important; border-radius: 30px; cursor: pointer; transition: all 0.3s; font-family: "Grotesk", helvetica; font-size: 14px; line-height: 15px; position: static !important; letter-spacing: 0; text-transform: none; width: auto; min-width: auto; } @media (max-width: 600px) { .interests-section .interest-wrap span:not(.error) { font-size: 12px; } } .interests-section .interest-wrap span:not(.error):hover { transform: translateY(-3px); } .interests-section .form__button { margin-top: 20px; } form.interests-section h4 { text-align: left; } .setup-anchor { padding-top: 75px !important; margin-top: -75px !important; } @inlcude breakpoint($max: 800px) { .setup-anchor { padding-top: 65px !important; margin-top: -65px !important; } } /*************************************************************** These styles are subject to the following license agreement(s): http://store.typenetwork.com/cart/eula/font-bureau http://store.typenetwork.com/cart/eula/font-bureau ***************************************************************/ /** * @license * MyFonts Webfont Build ID 3872993, 2020-02-27T18:45:58-0500 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: ClearfaceSerial-Light by SoftMaker * URL: https://www.myfonts.com/fonts/softmaker/clearface-serial/light/ * Copyright: Copyright (c) 2012 by SoftMaker Software GmbH and its licensors. All rights reserved. * Licensed pageviews: 2,000,000 * * Webfont: PlantinMTStd-LightItalic by Monotype * URL: https://www.myfonts.com/fonts/mti/plantin/light-italic/ * Copyright: Copyright © 2015 The Monotype Corporation. All rights reserved. * Licensed pageviews: 250,000 * * * * © 2020 MyFonts Inc */ /* @import must be at top of file, otherwise CSS will not work */ @font-face { font-family: "Clearface"; src: url("/fonts/3B18E1_0_0.eot"); src: url("/fonts/3B18E1_0_0.eot?#iefix") format("embedded-opentype"), url("/fonts/3B18E1_0_0.woff2") format("woff2"), url("/fonts/3B18E1_0_0.woff") format("woff"), url("/fonts/3B18E1_0_0.ttf") format("truetype"); font-weight: normal; font-style: normal; unicode-range: U+000-5FF; /* Latin glyphs */ } @font-face { font-family: "Plantin"; src: url("/fonts/3B18E1_1_0.eot"); src: url("/fonts/3B18E1_1_0.eot?#iefix") format("embedded-opentype"), url("/fonts/3B18E1_1_0.woff2") format("woff2"), url("/fonts/3B18E1_1_0.woff") format("woff"), url("/fonts/3B18E1_1_0.ttf") format("truetype"); font-weight: normal; font-style: normal; unicode-range: U+000-5FF; /* Latin glyphs */ } @font-face { font-family: "Altissima"; src: url("/fonts/Altissima-Condensed.eot"); src: url("/fonts/Altissima-Condensed.woff") format("woff"), url("/fonts/Altissima-Condensed.ttf") format("ttf"); font-weight: normal; font-style: normal; unicode-range: U+000-5FF; /* Latin glyphs */ } @font-face { font-family: "Grotesk"; src: url("/fonts/founders-grotesk-web-medium.woff2") format("woff2"), url("/fonts/founders-grotesk-web-medium.woff") format("woff"), url("/fonts/founders-grotesk-web-medium.eot") format("embedded-opentype"); font-weight: bold; font-style: normal; unicode-range: U+000-5FF; /* Latin glyphs */ } @font-face { font-family: "Grotesk"; src: url("/fonts/founders-grotesk-web-regular.woff2") format("woff2"), url("/fonts/founders-grotesk-web-regular.woff") format("woff"), url("/fonts/founders-grotesk-web-regular.eot") format("embedded-opentype"); font-weight: normal; font-style: normal; unicode-range: U+000-5FF; /* Latin glyphs */ } .generic-main { max-width: 676px; width: 100%; padding: 0 20px; margin: 50px auto 84px; } .generic-main + .main-footer { border-top: solid 1px #000; } .generic-hero { margin: 0 0 30px; } .generic-hero h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; text-align: center; font-size: 80px; line-height: 1; margin: 0 0 38px; } @media (max-width: 960px) { .generic-hero h2 { font-size: 60px; margin: 0 0 24px; } } @media (max-width: 600px) { .generic-hero h2 { font-size: 50px; } } .generic-hero img { display: block; width: 100%; height: auto; } .article-content { font-family: "Grotesk", helvetica; font-weight: 400; font-size: 18px; line-height: 1.3; } @media (max-width: 600px) { .article-content { font-size: 16px; } } .article-content h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 49px; line-height: 1; letter-spacing: 0.1px; margin: 24px 0 12px; } @media (max-width: 600px) { .article-content h2 { font-size: 36px; } } .article-content h3 { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.4px; text-transform: uppercase; margin: 24px 0 12px; } .article-content a { color: #000; border-bottom: solid 1px #E5C89A; line-height: 1; display: inline-block; transition: all 0.3s; font-weight: bold; } .article-content a:hover { border-bottom: solid 1px #000; } .article-content p { margin: 0 0 24px; } .article-content ul { padding: 0; margin: 0 0 24px; } .article-content ul li { list-style: none; padding-left: 30px; position: relative; } .article-content ul li::before { content: " "; display: block; width: 14px; height: 2px; position: absolute; top: 7px; left: 0; background: #E5C89A; } .article-content ul li + li { margin-top: 6px; } .article-content ol { padding: 0; margin: 0 0 24px; counter-reset: orderedList; } .article-content ol li { list-style: none; padding-left: 30px; position: relative; counter-increment: orderedList; } .article-content ol li::before { content: counter(orderedList) "."; display: block; position: absolute; top: 0; left: 0; color: #96907F; } .article-content ol li + li { margin-top: 6px; } .article-content b, .article-content strong { font-weight: bold; } .article-content abbr[title], .article-content acronym { border-bottom: 1px dotted #000; cursor: help; } .article-content cite { color: #E6E6E6; font-size: 0.875em; padding-left: 0.5em; } .article-content code, .article-content kbd, .article-content tt, .article-content var, .article-content samp, .article-content pre { -webkit-hyphens: none; hyphens: none; font-family: monospace, serif; } .article-content dfn, .article-content em, .article-content i { font-style: italic; } .article-content pre { box-sizing: border-box; background: white; padding: 1em 2em; margin-bottom: 24px; overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } .article-content small { font-size: smaller; } .article-content big { font-size: 125%; } .article-content sup, .article-content sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } .article-content sup { bottom: 1ex; } .article-content sub { top: 0.5ex; } .article-content img { image-rendering: optimizeSpeed; max-width: 100%; height: auto; vertical-align: middle; width: 100%; height: auto; margin: 48px 0; display: block; } .article-content img.full { width: calc(100vw - 60px); margin-left: 50%; transform: translateX(-50%); max-width: none; } @media (max-width: 600px) { .article-content img.full { width: 100vw; } } .article-content figure.image:not(.image-style-align-center):not(.image-style-align-left):not(.image-style-align-right) img { width: calc(100vw - 60px); margin-left: 50%; transform: translateX(-50%); max-width: none; } @media (max-width: 600px) { .article-content figure.image:not(.image-style-align-center):not(.image-style-align-left):not(.image-style-align-right) img { width: 100vw; } } .article-content figure { margin: 0; } .article-content fieldset { border: 1px solid rgba(0, 0, 0, 0.1); margin: 0 0 24px; padding: 11px 12px 0; } .article-content legend { white-space: normal; } .article-content hr { background-color: #E6E6E6; border: 0; height: 1px; margin-bottom: 23px; } .article-content embed, .article-content iframe, .article-content object, .article-content video { margin-bottom: 2em; width: 100%; } .article-content p > embed, .article-content p > iframe, .article-content p > object, .article-content span > embed, .article-content span > iframe, .article-content span > object { margin-bottom: 0; } .article-content blockquote, .article-content q { -webkit-hyphens: none; hyphens: none; quotes: none; text-align: center; font-size: 1.875em; font-style: normal; font-weight: normal; margin: 0; padding: 1em 2em; font-weight: 300; line-height: 32px; letter-spacing: 2px; } .article-content blockquote cite, .article-content blockquote small, .article-content q cite, .article-content q small { font-size: 0.625em; display: block; margin-top: 0.5em; padding: 0; } .article-content blockquote em, .article-content blockquote i, .article-content blockquote cite, .article-content q em, .article-content q i, .article-content q cite { font-style: normal; } .article-content blockquote strong, .article-content blockquote b, .article-content q strong, .article-content q b { font-weight: 400; } .article-content table { margin-bottom: 2em; width: 100%; border: 1px solid white; border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; } .article-content th, .article-content td { border: 1px solid white; font-size: 1em; } .article-content caption, .article-content th, .article-content td { font-weight: normal; text-align: left; padding: 0.5em 0.8em; } .article-content th { border-width: 0 1px 1px 0; } .article-content td { border-width: 0 1px 1px 0; } .article-content thead th { font-size: 1em; font-style: italic; font-weight: normal; line-height: 1.6em; text-align: center; } .article-content tbody th { font-size: 1em; text-align: right; } .article-content tbody tr:nth-of-type(even) { background-color: white; } .article-content dl { margin-bottom: 48px; } .article-content dt { font-size: 1em; font-style: italic; font-weight: normal; line-height: 1.6em; } .article-content dd { margin-bottom: 1em; } .invite-cancelled .article-content { text-align: center; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ""; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir=rtl] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } button, [tabindex="0"] { padding: 0; background-color: transparent; border: none; outline: none; text-transform: uppercase; cursor: pointer; } .button { position: relative; display: block; background-color: #000; border: none; color: #E5C89A !important; border-radius: 25px; font-family: "Bureau Grot Bk", helvetica; font-size: 12px; line-height: 15px; letter-spacing: 0.1px; text-transform: uppercase; padding: 17px 55px 17px 25px; text-align: left; height: 50px; width: 100%; max-width: 230px; margin: auto; outline: none; cursor: pointer; transition: 0.3s background-color; } .button.booking-submit { max-width: 235px; } .button.disabled { background-color: rgba(0, 0, 0, 0.3); color: #FCFAF5 !important; cursor: default; } .button.disabled svg { fill: #FCFAF5; } .button.submitting { text-align: center; pointer-events: none; padding-right: 25px; } .button:not(.disabled):hover, .button:not(.disabled):focus, .button:not(.disabled):active { background-color: #333333; } .button svg { position: absolute; top: 47.5%; transform: translateY(-50%); right: 25px; width: 11px; height: 8px; fill: #E5C89A; transition: 0.2s fill; } button.button { padding-top: 15px; } .form p { font-size: 14px; line-height: 20px; margin-bottom: 0 !important; } .form p.bottom-cta { font-size: 18px; } @media (max-width: 600px) { .form p.bottom-cta { font-size: 16px; } } .form .hidden { display: none; opacity: 0; } .form__section { text-align: left; position: relative; margin-bottom: 20px; } .form__section:after { content: ""; position: absolute; bottom: 0; left: auto; right: 0; width: 100%; height: 1px; background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .form__section:after { border-bottom: 1px dotted #000; } @media (max-width: 600px) { .form__section:after { left: 0; width: 100% !important; } } .form__accordion { position: relative; } @media (max-width: 600px) { .form__accordion { padding: 20px 0; } } .form__accordion#questions.disable-inactive .accordion:not(.is-active) { pointer-events: none; opacity: 0.25; } .form__accordion#questions.disable-inactive .accordion:not(.is-active) .accordion__title__toggle { opacity: 0; pointer-events: none; } .form__accordion#questions .accordion { transition: opacity 300ms; } .form__accordion#questions .accordion.show-counter.is-open .counter { opacity: 1; pointer-events: all; } .form__accordion#questions .accordion .counter { opacity: 0; pointer-events: none; position: absolute; top: 15px; left: calc(100% + 25px); width: 35px; font-family: "Plantin", serif; font-style: italic; font-size: 12px; line-height: 14px; transition: opacity 300ms; } @media (max-width: 900px) { .form__accordion#questions .accordion .counter { opacity: 0 !important; pointer-events: none; } } .form__accordion:before { content: ""; position: absolute; top: 0; left: auto; right: 0; width: 100%; height: 1px; background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .form__accordion:before { border-top: 1px dotted #000; } @media (max-width: 600px) { .form__accordion:before { left: 0; width: 100% !important; } } .form__accordion .form__row__left { align-items: flex-start; margin-top: 11px; } @media (max-width: 600px) { .form__accordion .form__row__left { margin-top: 0; } } .form__accordion .form__field--checkbox { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; flex-wrap: wrap; margin-bottom: 0 !important; } .ie9 .form__accordion .form__field--checkbox { border-bottom: 1px dotted #000; } .form__accordion .accordion { width: 100%; } .form__accordion .accordion.is-open .accordion__title__toggle:after { transform: rotate(180deg) !important; } .form__accordion .accordion.is-open-default .accordion__body { display: block; opacity: 1; } .form__accordion .accordion__title { display: flex; } .form__accordion .accordion__title__label { display: inline-block; transition: 300ms opacity; } .form__accordion .accordion__title__toggle { flex-grow: 1; position: relative; cursor: pointer; } .form__accordion .accordion__title__toggle:after { content: ""; position: absolute; top: 17px; right: 0; width: 8px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.203' height='7.075' viewBox='0 0 9.203 7.075'%3E%3Cpath id='Path_22' data-name='Path 22' d='M14248.705,45.055l4.07-5.367,3.93,5.367' transform='translate(14257.311 45.508) rotate(180)' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E%0A"); background-size: 100%; pointer-events: none; transition: transform 400ms; } .form__accordion .accordion__title label { padding-top: 12px; padding-bottom: 8px; padding-right: 22px; width: 100%; } .form__accordion .accordion__title label:before, .form__accordion .accordion__title label:after { top: 11px !important; } .form__accordion .accordion__body { opacity: 0; display: none; width: 100%; padding-bottom: 10px; } .form__accordion .accordion__body textarea { min-height: 90px; } .form__row { display: flex; justify-content: flex-end; align-items: flex-start; width: 100%; } @media (max-width: 600px) { .form__row { flex-wrap: wrap; } } @media (max-width: 600px) { .form__row--no-wrap { flex-wrap: nowrap; } } .form__row--no-wrap .form__field label, .form__row--no-wrap .form__field .legend { margin-left: 15px; margin-right: 15px; } @media (max-width: 600px) { .form__row--no-wrap .form__field label, .form__row--no-wrap .form__field .legend { margin-left: 0; margin-right: 0; } } .form__row--input-button { flex-wrap: wrap; } .form__row--input-button .form__field { max-width: 420px; flex-wrap: nowrap; } .form__row--input-button .form__field input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } @media (max-width: 600px) { .form__row--input-button .form__field input { border-top-right-radius: 25px !important; border-bottom-right-radius: 25px !important; } } .form__row--input-button .form__field button { border-top-left-radius: 0; border-bottom-left-radius: 0; width: 160px; } @media (max-width: 600px) { .form__row--input-button .form__field button { border-top-left-radius: 25px; border-bottom-left-radius: 25px; width: 100%; margin-top: 12px; } } @media (max-width: 600px) { .form__row__left, .form__row__right { width: 100% !important; } } .form__row__left { display: flex; justify-content: flex-end; margin-top: 15px; } @media (max-width: 600px) { .form__row__left { margin-top: 0 !important; } } .form__row__left--double { margin-top: 6px; } .form__row__left--top { margin-top: 0; } .form__field { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; text-align: left; width: 100%; min-width: 88px; margin-bottom: 20px; } @media (max-width: 600px) { .form__field { display: block; min-width: 78px; } } @media (max-width: 600px) { .form__field:not(:last-of-type) { margin-right: 0; } } .form__field--no-wrap { flex-wrap: nowrap; } .form__field--no-wrap label { margin-top: 15px; } @media (max-width: 600px) { .form__field--no-wrap label { margin-top: 0; } } .form__field--quarter { width: 25%; } .form__field--half { width: 50%; } .form__field--full { width: 100%; } @media (max-width: 600px) { .form__field--mobile-full { width: 100% !important; } } .form__field--small-margin { margin-bottom: 13px; } .form__field--file input[type=file] + label { width: 100% !important; display: flex; align-items: center; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; overflow: hidden; margin: 0; padding: 10px 13px !important; } .form__field--file input[type=file] + label strong { font-family: "Bureau Grot Bk", helvetica; font-size: 10px; line-height: 13px; text-transform: uppercase; font-weight: 400; text-align: center; padding: 8px 15px; background-color: #D1C9B5; display: inline-block; border-radius: 25px; margin-right: 15px; height: 30px; width: 90px; } .form__field--file input[type=file] + label span { margin-top: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-transform: none; } .form__field--select:before { content: ""; position: absolute; top: 22px; right: 25px; width: 8px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.203' height='7.075' viewBox='0 0 9.203 7.075'%3E%3Cpath id='Path_22' data-name='Path 22' d='M14248.705,45.055l4.07-5.367,3.93,5.367' transform='translate(14257.311 45.508) rotate(180)' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E%0A"); background-size: 100%; pointer-events: none; } .form__field--select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 55px !important; } .form__field--radio input[type=radio], .form__field--checkbox input[type=checkbox] { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .form__field--radio input[type=radio] + label { background-color: #E8E0CC; color: #000; border-radius: 25px; font-size: 10px !important; line-height: 14px !important; padding: 17px 25px; text-align: center !important; height: 50px; width: 100%; margin: 0 !important; cursor: pointer; transition: 0.3s background-color; } .form__field--radio input[type=radio]:checked + label { background-color: #000; color: #E8E0CC; } .form__field--checkbox:not(:last-of-type) { margin-bottom: 13px; } .form__field--checkbox input[type=checkbox] + label { position: relative; font-family: "Grotesk", helvetica; font-size: 14px; line-height: 20px; text-transform: none; margin: 0; padding-left: 33px; text-align: left; cursor: pointer; } .form__field--checkbox input[type=checkbox] + label:before { content: ""; position: absolute; top: -1px; left: 0; width: 18px; height: 18px; background: #E8E0CC; border-radius: 50%; } .form__field--checkbox input[type=checkbox] + label:after { content: ""; position: absolute; top: -1px; left: 0; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.218' height='8.284' viewBox='0 0 10.218 8.284'%3E%3Cpath id='Path_198' data-name='Path 198' d='M-2022.686,332.311l4.008,3.081,5.366-7.078' transform='translate(2023.052 -327.952)' fill='none' stroke='%23000000' stroke-miterlimit='10' stroke-width='1.2'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: 5px 4px; background-size: 9px; opacity: 0; transition: 300ms opacity; } .form__field--checkbox input[type=checkbox]:checked + label:after { opacity: 1; } .form__field--image { display: inline-flex; justify-content: center; width: 106px; } .form__field--image.is-active { margin-bottom: 28px; } .form__field--image.is-active .crop-wrapper { display: block; pointer-events: all; } .form__field--image.is-active .crop-wrapper + .error { margin-top: 15px; } .form__field--image.is-active .edit { display: none; } .form__field--image label { position: relative; width: 100px !important; height: 100px; margin: 0 !important; padding: 3px; border-radius: 50%; cursor: pointer; } .form__field--image label:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg id='Ellipse_28' data-name='Ellipse 28' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='2 5'%3E%3Ccircle cx='50' cy='50' r='50' stroke='none'/%3E%3Ccircle cx='50' cy='50' r='49.5' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A"); background-size: 100%; background-repeat: no-repeat; transform: rotate(30deg); } .form__field--image__img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .form__field--image .edit { position: absolute; bottom: 6px; right: -6px; z-index: 1; } .form__field--image .edit svg { width: 26px; height: 22px; } .form__field--image .crop-wrapper { width: 106px; height: 106px; margin: 0 auto; position: absolute; top: -3px; left: 0; pointer-events: none; display: none; } .form__field--image .crop-wrapper .cr-slider-wrap { position: absolute; top: 11px; left: -15px; width: 75px; height: 18px; transform: rotate(90deg); transform-origin: 0 0; margin: 0; } .form__field--image .crop-wrapper .cr-slider-wrap .cr-slider { width: 75px; } .form__field--image .crop-wrapper .smaller, .form__field--image .crop-wrapper .bigger { position: absolute; width: 9px; left: -28px; z-index: 2; } .form__field--image .crop-wrapper .smaller svg, .form__field--image .crop-wrapper .bigger svg { position: absolute; width: 100%; height: 100%; } .form__field--image .crop-wrapper .smaller { height: 1px; top: 0; } .form__field--image .crop-wrapper .smaller svg { top: 0; } .form__field--image .crop-wrapper .bigger { height: 9px; bottom: 0; } .form__field--image .crop-wrapper .bigger svg { bottom: 0; } .form__field--image .crop-wrapper .reference { position: absolute; top: 3px; left: 3px; width: 100px; height: 100px; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg id='Ellipse_28' data-name='Ellipse 28' fill='none' stroke='%23FCFAF5' stroke-width='1' stroke-dasharray='2 5'%3E%3Ccircle cx='50' cy='50' r='50' stroke='none'/%3E%3Ccircle cx='50' cy='50' r='49.5' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A"); background-size: 100%; transform: rotate(30deg); } .form__field--image .crop-wrapper .yes, .form__field--image .crop-wrapper .no { position: absolute; width: 22px; height: 22px; right: -11px; z-index: 2; } .form__field--image .crop-wrapper .yes svg, .form__field--image .crop-wrapper .no svg { width: 100%; height: 100%; } .form__field--image .crop-wrapper .yes { top: -11px; } .form__field--image .crop-wrapper .no { bottom: -11px; } .form__field--image .crop-wrapper .cr-viewport { border: none; } @media (max-width: 600px) { .form__field__not-mobile { display: none !important; } } .form__field__mobile { display: none !important; } @media (max-width: 600px) { .form__field__mobile { display: block !important; } } .form__button { position: relative; } .form__button .error, .form__button .success, .form__button .description { position: absolute; bottom: -21px; left: 50%; transform: translateX(-50%); margin-top: 0; } .form .error, .form .success, .form .description, .form #card-errors, .form .promo-error { display: block; width: 100%; text-align: center; font-family: "Grotesk", helvetica; font-size: 12px; line-height: 14px; margin-top: 7px; } .form .description { font-family: "Plantin", serif !important; font-style: italic; text-align: left; } @media (max-width: 600px) { .form .description { text-align: center; } } .form .description a { font-family: "Grotesk", helvetica; font-style: normal; border-bottom: none; } .form .description a:hover, .form .description a:focus, .form .description a:active { opacity: 0.7; } .form .description--center { text-align: center; margin: 0 auto; } .form .error, .form #card-errors, .form .promo-error { color: red; } .form .button-error { border: 1px solid red !important; } .form #how_hear.button-error, .form #legal-info.button-error { border: none !important; color: red; } .form #legal-info.button-error a { color: red; } .form .error-message { color: red; font-size: 12px; margin-left: 25px; margin-top: 5px; font-family: "Grotesk", helvetica; } .form .has-error .form__row--no-wrap + .error { margin-top: -13px; margin-bottom: 20px; } .form .has-error .form__field--checkbox:last-of-type { margin-bottom: 0; } .form .has-error .form__field--checkbox:last-of-type + .error { margin-top: 2px; } .form .has-error.form__field--checkbox .error { margin-top: 2px; } .form .form__accordion .has-error .error { margin-top: 7px !important; } .form label, .form .legend { display: block; font-family: "Bureau Grot Bk", helvetica; font-size: 12px; line-height: 19px; font-weight: normal; text-transform: uppercase; text-align: right; margin-right: 25px; } @media (max-width: 600px) { .form label, .form .legend { width: 100%; margin-right: 0; margin-bottom: 12px; text-align: center; } } .form label span, .form .legend span { display: block; font-family: "Grotesk", helvetica; line-height: 15px; text-transform: none; margin-top: 3px; } @media (max-width: 600px) { .form label br, .form .legend br { display: none; } } .form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=password], .form input[type=number], .form input[type=url], .form .form__field--file input[type=file] + label, .form textarea, .form select { background: #E8E0CC; min-height: 50px; font-family: "Grotesk", helvetica; font-size: 14px; line-height: 26px; border-radius: 25px; padding: 12px 25px; border: none; outline: none; width: 100%; } .form input[type=text]::-webkit-input-placeholder, .form input[type=email]::-webkit-input-placeholder, .form input[type=tel]::-webkit-input-placeholder, .form input[type=password]::-webkit-input-placeholder, .form input[type=number]::-webkit-input-placeholder, .form input[type=url]::-webkit-input-placeholder, .form .form__field--file input[type=file] + label::-webkit-input-placeholder, .form textarea::-webkit-input-placeholder, .form select::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.5); opacity: 1; height: inherit; vertical-align: middle; } .form input[type=text]::-moz-placeholder, .form input[type=email]::-moz-placeholder, .form input[type=tel]::-moz-placeholder, .form input[type=password]::-moz-placeholder, .form input[type=number]::-moz-placeholder, .form input[type=url]::-moz-placeholder, .form .form__field--file input[type=file] + label::-moz-placeholder, .form textarea::-moz-placeholder, .form select::-moz-placeholder { color: rgba(0, 0, 0, 0.5); opacity: 1; height: inherit; vertical-align: middle; } .form input[type=text]:-moz-placeholder, .form input[type=email]:-moz-placeholder, .form input[type=tel]:-moz-placeholder, .form input[type=password]:-moz-placeholder, .form input[type=number]:-moz-placeholder, .form input[type=url]:-moz-placeholder, .form .form__field--file input[type=file] + label:-moz-placeholder, .form textarea:-moz-placeholder, .form select:-moz-placeholder { color: rgba(0, 0, 0, 0.5); opacity: 1; height: inherit; vertical-align: middle; } .form input[type=text]:-ms-input-placeholder, .form input[type=email]:-ms-input-placeholder, .form input[type=tel]:-ms-input-placeholder, .form input[type=password]:-ms-input-placeholder, .form input[type=number]:-ms-input-placeholder, .form input[type=url]:-ms-input-placeholder, .form .form__field--file input[type=file] + label:-ms-input-placeholder, .form textarea:-ms-input-placeholder, .form select:-ms-input-placeholder { color: rgba(0, 0, 0, 0.5); opacity: 1; height: inherit; vertical-align: middle; } .form input[type=text]:-webkit-autofill, .form input[type=text]:-webkit-autofill:hover, .form input[type=text]:-webkit-autofill:focus, .form input[type=text]:-webkit-autofill:active, .form input[type=email]:-webkit-autofill, .form input[type=email]:-webkit-autofill:hover, .form input[type=email]:-webkit-autofill:focus, .form input[type=email]:-webkit-autofill:active, .form input[type=tel]:-webkit-autofill, .form input[type=tel]:-webkit-autofill:hover, .form input[type=tel]:-webkit-autofill:focus, .form input[type=tel]:-webkit-autofill:active, .form input[type=password]:-webkit-autofill, .form input[type=password]:-webkit-autofill:hover, .form input[type=password]:-webkit-autofill:focus, .form input[type=password]:-webkit-autofill:active, .form input[type=number]:-webkit-autofill, .form input[type=number]:-webkit-autofill:hover, .form input[type=number]:-webkit-autofill:focus, .form input[type=number]:-webkit-autofill:active, .form input[type=url]:-webkit-autofill, .form input[type=url]:-webkit-autofill:hover, .form input[type=url]:-webkit-autofill:focus, .form input[type=url]:-webkit-autofill:active, .form .form__field--file input[type=file] + label:-webkit-autofill, .form .form__field--file input[type=file] + label:-webkit-autofill:hover, .form .form__field--file input[type=file] + label:-webkit-autofill:focus, .form .form__field--file input[type=file] + label:-webkit-autofill:active, .form textarea:-webkit-autofill, .form textarea:-webkit-autofill:hover, .form textarea:-webkit-autofill:focus, .form textarea:-webkit-autofill:active, .form select:-webkit-autofill, .form select:-webkit-autofill:hover, .form select:-webkit-autofill:focus, .form select:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 25px #E8E0CC inset !important; } .form input[type=number]::-webkit-inner-spin-button, .form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .form textarea { resize: none; } @media (max-width: 600px) { .form .button { max-width: none; } } input[type=range] { -webkit-appearance: none; outline: none; } input[type=range]::-webkit-slider-runnable-track { height: 2px; cursor: pointer; background: #E5C89A; border-radius: 2px; } input[type=range]::-webkit-slider-thumb { height: 18px; width: 18px; border-radius: 50%; background: #E5C89A; cursor: pointer; -webkit-appearance: none; margin-top: -8px; } input[type=range]:focus::-webkit-slider-runnable-track { background: #E5C89A; } input[type=range]::-moz-range-track { height: 2px; cursor: pointer; background: #E5C89A; border-radius: 2px; } input[type=range]::-moz-range-thumb { height: 18px; width: 18px; border-radius: 50%; background: #E5C89A; cursor: pointer; } input[type=range]::-ms-track { height: 2px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-ms-fill-lower { background: #E5C89A; border-radius: 2px; } input[type=range]::-ms-fill-upper { background: #E5C89A; border-radius: 2px; } input[type=range]::-ms-thumb { height: 18px; width: 18px; border-radius: 50%; background: #E5C89A; cursor: pointer; height: 2px; } input[type=range]:focus::-ms-fill-lower { background: #E5C89A; } input[type=range]:focus::-ms-fill-upper { background: #E5C89A; } .iti--separate-dial-code .iti__selected-flag { background: none !important; } .iti--allow-dropdown { width: 100%; } .social-row { display: none; } .pain-points { margin-bottom: 52px; } .pain-points > p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 19px; line-height: 20px; margin: 0 0 24px !important; text-align: left; } @media (max-width: 600px) { .pain-points > p { text-align: center; margin: 0 0 36px !important; } } .pain-points .form__row__left { display: block; margin-top: 0; text-align: right; align-self: center; } @media (max-width: 600px) { .pain-points .form__row__left { padding-top: 15px; } } .pain-points .form__row__left small { display: block; text-transform: none; font-size: 12px; font-family: "Grotesk", helvetica; margin-top: -3px; } .pain-points .form__row__right { display: flex; justify-content: space-around; } .pain-points .form__row__right.pain-points-header { border-bottom: solid 1px #000; padding-bottom: 14px; } .pain-points .form__row__right.pain-points-header span { text-align: center; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 11px; line-height: 1; text-transform: uppercase; } @media (max-width: 600px) { .pain-points .form__row__right.pain-points-header span { font-size: 12px; line-height: 1.2; } } .pain-points .form__row__right:not(.pain-points-header) { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding: 15px 0; } .ie9 .pain-points .form__row__right:not(.pain-points-header) { border-bottom: 1px dotted #000; } @media (max-width: 600px) { .pain-points .form__row__right:not(.pain-points-header) { padding-top: 0; } } .pain-points .radio-wrap input { display: none; } .pain-points .radio-wrap label { display: block; width: 18px; height: 18px; border-radius: 50%; background: #E8E0CC; transition: all 0.3s; margin-right: 0; cursor: pointer; margin-bottom: 0 !important; } .pain-points .radio-wrap input:checked + label { background: #000; } .form__date { position: relative; margin-bottom: 20px; } .form__date > label { position: absolute; right: 100%; top: 36px; white-space: nowrap; } @media (max-width: 960px) { .form__date > label { position: static; width: 100%; margin-right: 0; text-align: center; margin-bottom: 10px; } } .form__date__inner { background: #E8E0CC; border-radius: 30px; padding: 24px; display: flex; justify-content: space-between; position: relative; } .form__date__inner::before { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: " "; display: block; width: 1px; height: auto; position: absolute; top: 20px; left: 0; right: 0; bottom: 20px; margin: auto; } .ie9 .form__date__inner::before { border-left: 1px dotted #000; } .form__date__inner > div { width: calc(50% - 19px); position: relative; cursor: pointer; } .form__date__inner > div:hover svg { transform: translateY(3px); } .form__date__inner > div label { display: block; text-align: left; } .form__date__inner > div small { font-size: 11px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; } .form__date__inner > div span { display: block; font-family: "Grotesk", helvetica; font-size: 15px; line-height: 1; margin-top: 6px; } .form__date__inner > div svg { width: 8px; height: 8px; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; transition: all 0.3s; } .form__date__inner > div input { padding: 0; background: #fff; height: 0; opacity: 0; position: absolute; pointer-events: none; left: -24px; bottom: -10px; } .modal { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 24px; z-index: 1000; opacity: 0; pointer-events: none; transition: all 0.5s; } .modal.is-open { opacity: 1; pointer-events: all; } .modal__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.48; } .modal__content { position: relative; background-color: #FCFAF5; border-radius: 30px; padding: 75px 70px 90px; max-width: 730px; width: 100%; text-align: center; overflow-y: initial !important; } @media (max-width: 800px) { .modal__content { padding: 45px; } } .modal__content .form__row { justify-content: center; } .modal__content h2 { font-family: "Bureau Grot Comp Bk", helvetica; font-size: 72px; line-height: 76px; font-weight: 400; margin-bottom: 35px; margin-top: 0; } @media (max-width: 600px) { .modal__content h2 { font-size: 50px; line-height: 53px; } } .modal__content p { font-size: 14px; line-height: 22px; margin: 25px 0 0; font-family: "Grotesk", helvetica; } .modal__content p a, .modal__content p button { display: inline-block; text-transform: none; position: relative; font-weight: bold; } .modal__content p a:after, .modal__content p button:after { content: ""; position: absolute; bottom: 2px; left: 0; width: 100%; height: 1px; background-color: #E5C89A; transition: bottom 0.2s; } .modal__content p a:hover:after, .modal__content p button:hover:after { bottom: 0; } .modal__content p a:not(.button) { color: #000; } .modal__close { position: absolute; top: 27px; right: 27px; } .modal__close svg { width: 18px; height: 18px; } .modal .form__row .form__button .error, .modal .form__row .form__button .success, .modal .form__row .form__button .description { position: absolute; bottom: -21px; left: 50%; transform: translateX(-50%); margin-top: 0; z-index: 99999; } .modal.login .form__button .error { left: 0 !important; top: 100% !important; text-align: center !important; margin-top: 6px !important; } .modal--popup, .modal--popup-alt { z-index: 99999; } @media (max-width: 600px) { .modal--popup, .modal--popup-alt { align-items: flex-start; overflow-x: auto; } } @media (max-width: 600px) { .modal--popup .modal__overlay, .modal--popup-alt .modal__overlay { position: fixed; } } .modal--popup .modal__close, .modal--popup-alt .modal__close { position: absolute; top: -5px; right: -5px; width: 30px; height: 30px; background: #E8E0CC; border-radius: 50%; } .modal--popup .modal__close svg, .modal--popup-alt .modal__close svg { width: 11px; height: 11px; } .modal--popup .modal__content, .modal--popup-alt .modal__content { max-width: 587px; padding: 46px 24px 44px; border-radius: 26px; } .modal--popup .modal__content h3, .modal--popup-alt .modal__content h3 { font-family: "Bureau Grot Bk", helvetica; font-weight: 700; font-size: 10px; line-height: 1; margin: 0 0 15px; text-transform: uppercase; letter-spacing: 0.1px; } .modal--popup .modal__content h2, .modal--popup-alt .modal__content h2 { text-transform: uppercase; font-size: 58px; line-height: 1; margin: 0 0 19px; } @media (max-width: 600px) { .modal--popup .modal__content h2, .modal--popup-alt .modal__content h2 { font-size: 50px; } } .modal--popup .modal__content p, .modal--popup-alt .modal__content p { font-size: 15px; line-height: 19px; max-width: 370px; margin: 0 auto; padding: 0 22px; } @media (max-width: 600px) { .modal--popup .modal__content p, .modal--popup-alt .modal__content p { padding: 0; font-size: 14px; line-height: 17px; } } .modal--popup .single-image, .modal--popup-alt .single-image { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 35px; padding-bottom: 13px; } .ie9 .modal--popup .single-image, .ie9 .modal--popup-alt .single-image { border-bottom: 1px dotted #000; } .modal--popup .single-image img, .modal--popup-alt .single-image img { display: block; width: 100%; border-top-left-radius: 18px; border-top-right-radius: 18px; } .modal--popup .single-image + .button, .modal--popup-alt .single-image + .button { margin-top: 24px; } .modal--popup .button, .modal--popup-alt .button { margin-top: 57px; } .modal--popup-alt .modal__content { max-width: 675px; padding: 28px 52px 33px; } @media (max-width: 600px) { .modal--popup-alt .modal__content { padding: 28px 24px 33px; } } .modal--popup-alt .modal__content p { padding: 0 40px; max-width: auto; } @media (max-width: 600px) { .modal--popup-alt .modal__content p { padding: 0; } } .modal--popup-alt .multi-image { display: flex; justify-content: space-between; margin-top: 48px; } @media (max-width: 600px) { .modal--popup-alt .multi-image { display: block; } } .modal--popup-alt .multi-image figure { width: calc(33.333% - 26.666666667px); margin: 0; } @media (max-width: 600px) { .modal--popup-alt .multi-image figure { width: 100%; } } .modal--popup-alt .multi-image figure + figure { position: relative; } @media (max-width: 600px) { .modal--popup-alt .multi-image figure + figure { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 24px; padding-top: 24px; } .ie9 .modal--popup-alt .multi-image figure + figure { border-top: 1px dotted #000; } } .modal--popup-alt .multi-image figure + figure::before { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: ""; display: bock; position: absolute; top: 0; bottom: 0; width: 1px; right: 100%; margin-right: 19px; } .ie9 .modal--popup-alt .multi-image figure + figure::before { border-left: 1px dotted #000; } @media (max-width: 600px) { .modal--popup-alt .multi-image figure + figure::before { display: none; } } .modal--popup-alt .multi-image figure img { display: block; width: 100%; height: auto; border-radius: 18px; } .modal--popup-alt .multi-image figure figcaption { margin-top: 18px; font-size: 14px; font-family: "Plantin", serif; font-weight: 300; font-style: italic; text-align: left; } .win-back-modal .modal__content { padding-top: 82px; padding-bottom: 72px; } .win-back-modal .modal__content .modal__close { padding: 10px; display: flex; justify-content: center; align-items: center; } .win-back-modal .modal__content h2 { text-transform: none; } .win-back-modal .modal__content p { max-width: 100%; padding: 0; } .win-back-modal .modal__content p span { font-weight: bold; } .win-back-modal .modal__content .button { margin-top: 32px; color: #fff !important; text-align: center; max-width: 0; max-width: 100%; width: auto; display: inline-block; padding: 17px 36px; } .win-back-modal .modal__content .button svg { stroke: #fff; position: static; transform: none; margin-left: 12px; } .win-back-modal .modal__content .cta { text-transform: uppercase; display: block; margin-top: 20px; color: #000; font-size: 12px; } form.popup-newsletter { max-width: 400px; flex-shrink: 0; display: flex; height: 60px; position: relative; margin: 48px auto 0; } @media (max-width: 960px) { form.popup-newsletter { margin: 24px auto 0; height: 50px; } } @media (max-width: 600px) { form.popup-newsletter { display: block; height: auto; } } form.popup-newsletter input { height: 100%; width: 100%; border: 0; background: #E8E0CC; border-radius: 30px 0px 0px 30px; padding: 0 30px; font-family: "Grotesk", helvetica; font-style: normal; font-weight: normal; font-size: 15px; line-height: 100%; padding-bottom: 4px; } @media (max-width: 960px) { form.popup-newsletter input { padding: 0 20px 4px; } } @media (max-width: 600px) { form.popup-newsletter input { display: block; border-radius: 30px; height: 50px; } } form.popup-newsletter button { height: 100%; width: 144px; flex-shrink: 0; text-align: center; border-radius: 0px 30px 30px 0px; color: #E5C89A; font-family: "Bureau Grot Bk", helvetica; font-style: normal; font-weight: normal; font-size: 12px; line-height: 100%; letter-spacing: 0.03em; text-transform: uppercase; background: #000; } @media (max-width: 960px) { form.popup-newsletter button { width: 130px; } } @media (max-width: 600px) { form.popup-newsletter button { display: block; border-radius: 30px; width: 100%; margin-top: 12px; height: 50px; } } form.popup-newsletter button svg { margin-left: 8px; vertical-align: middle; width: 11px; height: 8px; fill: #E5C89A; transform: translateY(-1px); } form.popup-newsletter .message { position: absolute; top: 100%; left: 0; width: 100%; text-align: center; font-family: "Grotesk", helvetica; font-style: normal; font-weight: normal; font-size: 13px; line-height: 100%; margin-top: 6px; display: none; } .modal.join-the-club p { margin: 30px; font-size: 18px; } .modal.join-the-club .ctas { width: 70%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-direction: column; } .modal.join-the-club .ctas .btn-join-the-club { background: #F8AE38; color: #fff; color: #fff; width: 200px; border-radius: 50px; height: 50px; text-align: center; padding: 10px 5px; display: block; text-transform: uppercase; font-size: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .modal.join-the-club .ctas .btn-join-the-club svg { width: 15px; height: 15px; fill: white; margin-left: 10px; } .modal.join-the-club .ctas p { margin: 0px; font-family: "Plantin", serif; } .modal.join-the-club .ctas p a { font-family: "Grotesk", helvetica; text-transform: uppercase; } header.main-header { position: fixed; border-bottom: solid 1px #000; z-index: 900; width: 100%; background: #FCFAF5; top: 0; } @media (max-width: 800px) { header.main-header { display: none; } } header.main-header .logo-main-wrap { width: 174px; height: 65px; margin: 0 auto; display: block; padding: 18.5px; transition: all 0.3s; } @media (max-width: 800px) { header.main-header .logo-main-wrap { width: 120px; height: 24px; margin: 12px auto; } } header.main-header .logo-main-wrap svg { width: 100%; height: 100%; display: block; } .header-left { position: absolute; top: 18px; left: 50px; font-size: 0; } @media (max-width: 1450px) { .header-left { left: 30px; } } @media (max-width: 800px) { .header-left { display: none; } } .header-left .nav-menu-trigger { background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; padding-right: 26px; height: 28px; display: inline-flex; align-items: center; vertical-align: middle; } .ie9 .header-left .nav-menu-trigger { border-right: 1px dotted #000; } .header-left .nav-menu-trigger.alt { background: none; padding-right: 0; } .header-left .nav-menu-trigger svg { width: 14px; height: 12px; } .header-left > a { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; display: inline-block; vertical-align: middle; color: #000; padding: 8px 22.5px 8px 0; position: relative; background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .header-left > a { border-right: 1px dotted #000; } .header-left .search-trigger { background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; font-size: 0; padding: 6.5px 24px 6.5px 0; display: inline-block; cursor: pointer; vertical-align: middle; position: relative; margin-left: 20px; } .ie9 .header-left .search-trigger { border-right: 1px dotted #000; } .header-left .search-trigger > svg { width: 14px; height: 15px; display: block; position: relative; z-index: 2; } .header-left .search-trigger:hover::before { opacity: 1; } .header-left .cities-wrap { background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; display: inline-block; vertical-align: middle; padding: 8px 20px; position: relative; } .ie9 .header-left .cities-wrap { border-right: 1px dotted #000; } .header-left .cities-wrap::before { content: " "; display: block; position: absolute; top: -18px; left: -1px; width: calc(100% + 1px); height: calc(100% + 36px); background: #000; opacity: 0; transition: all 0.3s; } .header-left .cities-wrap span { text-align: center; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; display: block; width: 100%; position: relative; z-index: 2; transition: all 0.3s; white-space: nowrap; overflow: hidden; } .header-left .cities-wrap span svg { width: 9px; height: 100%; float: right; margin-top: 2px; transition: all 0.3s; position: relative; z-index: 3; position: absolute; top: 0; right: 0; transform: translateY(-3px); } .header-left .cities-wrap .cities-dd { background: #000; position: absolute; top: 28px; left: -1px; width: -moz-fit-content; width: fit-content; height: calc(100vh - 108px); max-height: 900px; margin-top: 18px; padding: 24px 0 36px; transition: all 0.3s; display: none; overflow-y: scroll; } .header-left .cities-wrap .cities-dd.is-guest { top: 28px; } .header-left .cities-wrap .cities-dd::-webkit-scrollbar { width: 0px; } .header-left .cities-wrap .cities-dd .cities-inner { display: flex; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; min-height: 100%; } .header-left .cities-wrap .cities-dd .cities-inner .col { width: 180px; padding: 0 18px; } @media (max-width: 1080px) { .header-left .cities-wrap .cities-dd .cities-inner .col { width: 150px; padding: 0 12px; } } .header-left .cities-wrap .cities-dd .cities-inner .col:first-of-type { width: 334px; -moz-column-count: 2; column-count: 2; -moz-column-gap: 30px; column-gap: 30px; } @media (max-width: 1080px) { .header-left .cities-wrap .cities-dd .cities-inner .col:first-of-type { width: 362px; -moz-column-gap: 12px; column-gap: 12px; } } @media (max-width: 880px) { .header-left .cities-wrap .cities-dd .cities-inner .col:first-of-type { width: 300px; } } .header-left .cities-wrap .cities-dd .cities-inner .col:first-of-type li:first-of-type { -moz-column-span: all; column-span: all; margin-bottom: 10px; transform: translateY(-9px); } .header-left .cities-wrap .cities-dd .cities-inner .col:not(:first-of-type) { background-position: left; background-image: linear-gradient(rgba(255, 255, 255, 0.47) 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .header-left .cities-wrap .cities-dd .cities-inner .col:not(:first-of-type) { border-left: 1px dotted rgba(255, 255, 255, 0.47); } .header-left .cities-wrap .cities-dd .cities-inner .col ul { margin: 0; padding: 0; } .header-left .cities-wrap .cities-dd .cities-inner .col ul + ul { margin-top: 38px; } .header-left .cities-wrap .cities-dd .cities-inner li { font-family: "Plantin", serif; font-weight: normal; font-size: 14px; font-style: italic; color: #fff; list-style: none; } .header-left .cities-wrap .cities-dd .cities-inner li + li { margin-top: 15px; } .header-left .cities-wrap .cities-dd .cities-inner a { display: inline-block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; letter-spacing: 0.41px; text-transform: uppercase; color: #fff; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: all 0.3s; font-style: normal; margin-right: 4px; } .header-left .cities-wrap .cities-dd .cities-inner a:hover { -webkit-text-decoration-color: #E8E0CC; text-decoration-color: #E8E0CC; } .header-left .cities-wrap .cities-dd .cities-inner small { display: inline-block; font-size: 8px; font-style: normal; font-family: "Bureau Grot Bk", helvetica; color: #000; background: #E5C89A; width: 30px; text-align: center; border-radius: 7px; padding: 1.5px 0; text-transform: uppercase; transform: translateY(-1px); } .header-left .cities-wrap:hover span, .header-left .cities-wrap.is-active span { color: #fff; } .header-left .cities-wrap:hover::before, .header-left .cities-wrap.is-active::before { opacity: 1; } .header-left .cities-wrap:hover .cities-dd, .header-left .cities-wrap.is-active .cities-dd { display: flex; pointer-events: all; } .header-right { position: absolute; top: 18px; right: 50px; } @media (max-width: 1440px) { .header-right { right: 30px; } } @media (max-width: 800px) { .header-right { display: none; } } .header-right .user-wrap { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; width: 202px; padding: 4px 0 4px 20px; position: relative; display: inline-block; vertical-align: middle; } .ie9 .header-right .user-wrap { border-left: 1px dotted #000; } .header-right .user-wrap::before { content: " "; display: block; position: absolute; top: -18px; right: -23px; width: calc(100% + 23px); height: calc(100% + 35px); background: #000; opacity: 0; transition: all 0.3s; } .header-right .user-wrap a { color: #000; } .header-right .user-wrap span { display: block; width: 100%; position: relative; z-index: 2; font-size: 0; } .header-right .user-wrap span svg { width: 9px; height: 8px; float: right; margin-top: 7px; transition: all 0.3s; } .header-right .user-wrap img { width: 22px; height: auto; display: inline-block; vertical-align: middle; border-radius: 50%; } .header-right .user-wrap small { display: inline-block; vertical-align: middle; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: 0.41px; line-height: 1; text-transform: uppercase; margin-left: 10px; transition: all 0.3s; } .header-right .user-wrap small svg { margin-top: 0; transform: none !important; stroke: transparent !important; float: none; width: 12px; height: 12px; } .header-right .user-wrap .img-wrap { width: 22px; height: 22px; position: relative; display: inline-block; margin: auto; } .header-right .user-wrap .img-wrap small { width: 15px; height: 15px; position: absolute; bottom: 12px; left: 16px; background: #E5C89A; border-radius: 50%; margin: 0; transition: all 0.3s; display: none; } .header-right .user-wrap .img-wrap small span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 9px; line-height: 1; display: block; text-align: center; color: #000; } .header-right .user-wrap .user-dd { position: absolute; top: 100%; right: 0; width: calc(100% + 23px); background: #000; right: -23px; margin-top: 17px; padding: 30px 23px; opacity: 0; pointer-events: none; transition: all 0.3s; } .header-right .user-wrap .user-dd a { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; letter-spacing: 0.41px; line-height: 1; text-transform: uppercase; color: #fff; transition: all 0.3s; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; position: relative; } .header-right .user-wrap .user-dd a.w-img { padding-left: 32px; } .header-right .user-wrap .user-dd a:hover { -webkit-text-decoration-color: #000; text-decoration-color: #000; } .header-right .user-wrap .user-dd a + a { margin-top: 26px; } .header-right .user-wrap .user-dd a img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .header-right .user-wrap .user-dd a svg { width: 15px; height: 15px; margin-top: -1px; fill: transparent; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .header-right .user-wrap .user-dd a svg.check, .header-right .user-wrap .user-dd a svg.save { stroke: #000; stroke-width: 1.5; fill: #E5C89A; } .header-right .user-wrap .user-dd a svg.pin { fill: #000; } .header-right .user-wrap .user-dd a svg.credit { fill: #000; } .header-right .user-wrap .user-dd a svg.message { transform: translateY(-67%) rotate(-25deg); } .header-right .user-wrap .user-dd a svg.person-alt { stroke: #E5C89A; fill: #E5C89A; } .header-right .user-wrap .user-dd a small { width: 15px; height: 15px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background: #E5C89A; border-radius: 50%; } .header-right .user-wrap .user-dd a small span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 9px; line-height: 1; display: block; text-align: center; color: #000; } .header-right .user-wrap:hover small { color: #fff; } .header-right .user-wrap:hover::before { opacity: 1; } .header-right .user-wrap:hover span svg { transform: rotate(180deg); stroke: #fff; } .header-right .user-wrap:hover .user-dd { opacity: 1; pointer-events: all; } .mobile-menu { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; background: #FCFAF5; border-bottom: solid 1px #000; display: none; padding: 0 6px 0 8px; } @media (max-width: 800px) { .mobile-menu { display: flex; justify-content: space-between; } } .mobile-menu .nav-menu-trigger { background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; padding-right: 19px; padding-left: 11px; height: 25px; display: inline-flex; align-items: center; vertical-align: middle; align-self: center; } .ie9 .mobile-menu .nav-menu-trigger { border-right: 1px dotted #000; } .mobile-menu .nav-menu-trigger.alt { background: none; padding-right: 0; } .mobile-menu .nav-menu-trigger svg { width: 14px; height: 12px; } .mobile-menu > div { background: #FCFAF5; transition: all 0.3s; flex-shrink: 0; } .mobile-menu > div.active { background: #000; z-index: 1; color: #fff; } .mobile-menu > div.active > svg { stroke: #fff; } .mobile-menu > div.active::before { content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: -1px; background: #000; } .mobile-menu > div.active::after { content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: -1px; background: #000; } .mobile-menu .search-trigger { width: 54px; height: 50px; align-self: center; position: relative; cursor: pointer; } .mobile-menu .search-trigger::before { content: " "; display: block; width: 1px; height: 25px; position: absolute; top: 12.5px; left: 0; bottom: 0; background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .mobile-menu .search-trigger::before { border-right: 1px dotted #000; } .mobile-menu .search-trigger svg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 16px; height: 16px; } .mobile-menu .profile-trigger { width: 54px; height: 50px; align-self: center; position: relative; cursor: pointer; } .mobile-menu .profile-trigger::before { content: " "; display: block; width: 1px; height: 25px; position: absolute; top: 12.5px; left: 0; bottom: 0; background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .mobile-menu .profile-trigger::before { border-right: 1px dotted #000; } .mobile-menu .profile-trigger img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 25px; height: 25px; border-radius: 50%; } .mobile-menu .profile-trigger span { width: 15px; height: 15px; position: absolute; top: 7px; right: 7px; background: #E5C89A; border-radius: 50%; margin: 0; transition: all 0.3s; } .mobile-menu .profile-trigger span small { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 9px; line-height: 1; display: block; text-align: center; color: #000; } .mobile-menu > .home-link { width: 50px; height: 50px; align-self: center; position: relative; } .mobile-menu > .home-link::before { content: " "; display: block; width: 1px; height: 25px; position: absolute; top: 12.5px; right: 0; bottom: 0; background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .mobile-menu > .home-link::before { border-left: 1px dotted #000; } .mobile-menu > .home-link a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mobile-menu > .home-link a svg.icon-star { position: absolute; width: 25px; height: 25px; margin: auto; top: 0; left: 13px; bottom: 0; } .mobile-menu > .home-link a svg.beta-text { position: absolute; top: 12.5px; right: 13px; width: 16px; width: 8px; height: 16px; } .mobile-menu .cities-trigger { width: calc(100% - 98px); height: 50px; align-self: center; padding: 19px 15px 15px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; letter-spacing: 0.2px; line-height: 1; text-transform: uppercase; cursor: pointer; position: relative; z-index: 1; flex-shrink: 1; } .mobile-menu .cities-trigger > span { text-decoration: none; color: black; position: relative; display: block; white-space: nowrap; overflow: hidden; } .mobile-menu .cities-trigger > span::before { content: " "; display: block; position: absolute; width: 13px; height: 100%; right: 0; top: 0; background: #FCFAF5; z-index: 2; transition: all 0.3s; } .mobile-menu .cities-trigger > span .dots { display: none; } .mobile-menu .cities-trigger.wide .extra { display: none; } .mobile-menu .cities-trigger.wide .dots { display: inline; } .mob-cities { position: fixed; top: 50px; height: calc(100vh - 50px); left: 0; width: 100%; background: #000; padding: 0; z-index: 99999; display: none; border-top: solid 1px #000; overflow-y: auto; overflow-x: hidden; } .mob-cities .mob-cities-inner { margin: 38px 22px 56px; -moz-column-count: 2; column-count: 2; -moz-column-gap: 40px; column-gap: 40px; position: relative; overflow: hidden; } @media (max-width: 600px) { .mob-cities .mob-cities-inner { margin: 38px 22px 162px; } } .mob-cities .mob-cities-inner::before { background-position: right; background-image: linear-gradient(rgba(255, 255, 255, 0.47) 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: " "; display: block; width: 1px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 100%; } .ie9 .mob-cities .mob-cities-inner::before { border-right: 1px dotted rgba(255, 255, 255, 0.47); } .mob-cities ul { margin: 0; padding: 0; -moz-column-break-inside: avoid; break-inside: avoid; position: relative; margin: 0 0 56px; } .mob-cities ul.line::before { background-position: top; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.47) 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; display: block; width: 100%; position: absolute; bottom: 100%; left: 0; right: 0; margin: auto; height: 1px; margin-bottom: 25px; } .ie9 .mob-cities ul.line::before { border-top: 1px dotted rgba(255, 255, 255, 0.47); } .mob-cities li { font-family: "Plantin", serif; font-weight: normal; font-size: 14px; font-style: italic; color: #fff; list-style: none; } .mob-cities li + li { margin-top: 18px; } .mob-cities a { display: inline-block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; letter-spacing: 0.41px; line-height: 1; text-transform: uppercase; color: #fff; font-style: normal; margin-right: 3px; } .mob-cities small { display: inline-block; font-size: 8px; font-style: normal; font-family: "Bureau Grot Bk", helvetica; color: #000; background: #E5C89A; width: 30px; text-align: center; border-radius: 7px; padding: 1.5px 0; text-transform: uppercase; transform: translateY(-1px); } .mob-profile { position: fixed; top: 51px; right: 0; width: 100%; background: #000; z-index: 9999; padding: 60px 25px; display: none; } .mob-profile a { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 14px; letter-spacing: 0.41px; line-height: 1; text-transform: uppercase; color: #fff; } .mob-profile a.w-img { padding-left: 32px; position: relative; } .mob-profile a img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: auto; border-radius: 50%; } .mob-profile a svg { width: 15px; height: 15px; margin-top: -1px; fill: transparent; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .mob-profile a svg.check, .mob-profile a svg.save { stroke: #000; stroke-width: 1.5; fill: #E5C89A; } .mob-profile a svg.pin, .mob-profile a svg.credit { fill: #000; } .mob-profile a svg.message { transform: translateY(-67%) rotate(-25deg); } .mob-profile a svg.person-alt { stroke: #E5C89A; fill: #E5C89A; } .mob-profile a + a { margin-top: 26px; } .mob-profile a small { width: 15px; height: 15px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background: #E5C89A; border-radius: 50%; } .mob-profile a small span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 9px; line-height: 1; display: block; text-align: center; color: #000; } .mobile-shade { position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background: #000; opacity: 0.27; z-index: 1; display: none; } .person-hover { position: fixed; top: 0; left: 0; transform: translateX(-50%) translateY(34px); width: 264px; background: #E8E0CC; z-index: 999; border-radius: 30px; text-align: center; padding: 0 24px 24px; opacity: 0; pointer-events: none; transition: opacity 0.3s, height 0.3s; } .person-hover.active { opacity: 1; pointer-events: all; } .person-hover a { color: #000 !important; text-transform: none !important; } .person-hover__image { width: 49px; height: auto; overflow: hidden; border-radius: 50%; margin: -16px auto 8px; display: block; } .person-hover__image img { display: block; width: 100%; height: auto; } .person-hover h3 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 32px; font-weight: normal; line-height: 1; letter-spacing: 0.1px; margin: 0; } .person-hover p { font-family: "Grotesk", helvetica; font-size: 14px; line-height: 16px; margin: 8px 0 12px; } .person-hover .follow-links a, .person-hover .follow-links span { display: inline-block; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 13px; line-height: 1; border-bottom: solid 1px #C1B9A8; cursor: inherit; } .person-hover .follow-links a:hover, .person-hover .follow-links span:hover { border-bottom: solid 1px #000; } .person-hover .follow-links a + a, .person-hover .follow-links a + span, .person-hover .follow-links span + a, .person-hover .follow-links span + span { margin-left: 20px; } .person-hover .button { margin-top: 20px; color: #fff !important; width: 132px; text-transform: uppercase !important; } .person-hover .button small { font-size: 100%; } .person-hover .button svg { stroke: #fff; } .person-hover .loading-text { text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; margin: 0; padding-top: 20px; transition: all 0.3s; } .person-hover .loaded-content { transition: all 0.3s; } .person-hover.transition .loading-text, .person-hover.transition .loaded-content { opacity: 0; } .header-notifications-trigger { width: 15px; height: 16px; position: relative; display: inline-block; vertical-align: middle; margin-right: 17px; } @media (max-width: 800px) { .header-notifications-trigger { margin-right: 0; width: 54px; height: 50px; } .header-notifications-trigger::after { content: " "; display: block; width: 1px; height: 25px; position: absolute; top: 12.5px; left: 0; bottom: 0; background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .header-notifications-trigger::after { border-right: 1px dotted #000; } } .header-notifications-trigger::before { content: " "; display: block; position: absolute; top: -25px; right: -22px; left: -22px; bottom: -25px; background: transparent; z-index: 1; transition: all 0.3s; } @media (max-width: 800px) { .header-notifications-trigger::before { top: 0; bottom: 0; left: 0; right: -1px; } } .header-notifications-trigger__badge { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); width: 15px; height: 15px; border-radius: 50%; background: #E5C89A; color: #000; z-index: 3; display: none; } @media (max-width: 800px) { .header-notifications-trigger__badge { top: 36%; left: 36%; right: auto; } } .header-notifications-trigger__badge span { font-family: "Bureau Grot Bk", helvetica; font-size: 9px; font-weight: 400; line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .header-notifications-trigger svg { width: 15px; height: 16px; stroke: #000; display: block; position: relative; z-index: 2; transition: all 0.3s; stroke-width: 1.5; } @media (max-width: 800px) { .header-notifications-trigger svg { margin: 0 auto; } } .header-notifications-trigger.active::before { background: #000; } .header-notifications-trigger.active svg { stroke: #fff; } .notification-centre { position: fixed; top: 66px; bottom: 0; right: 0; width: 310px; background: #000; color: #fff; z-index: 899; display: none; } @media (max-width: 1440px) { .notification-centre { width: 290px; } } @media (max-width: 800px) { .notification-centre { top: 0; bottom: 74px; width: 100%; z-index: 10000; } } .notification-centre__header { padding: 0 0 11.5px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: 0.41px; text-transform: uppercase; } @media (max-width: 800px) { .notification-centre__header { padding: 18px 0; display: flex; justify-content: space-between; } } .notification-centre__header.mob { display: none; } .notification-centre__header > h2.notif-heading { margin: 0; font-size: 13px; font-weight: normal; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; line-height: 1; letter-spacing: 0.41px; } .notification-centre__header button { display: none; } @media (max-width: 800px) { .notification-centre__header button { display: block; } } .notification-centre__header button svg { width: 14px; height: 14px; stroke: #fff; } .notification-centre__main { padding-top: 20px; display: flex; flex-direction: column; height: 100%; margin: 0 22px; } .notification-centre__main.w-setup { padding-bottom: 50vh; } @media (max-width: 800px) { .notification-centre__main.w-setup { padding-bottom: 45vh; } } .notification-centre__main #notifications-vue { height: 100%; position: relative; } .notification-centre__main .notifications-list { height: 100%; overflow: auto; padding-right: 50px; width: calc(100% + 50px); } .notification-centre__main .notifications-list .empty-state { margin: 0; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 36px; font-weight: 400; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; text-align: center; } @media (max-width: 800px) { .notification-centre__main .notifications-list .empty-state { font-size: 30px; } } .notification-centre__main .notifications-list::before { content: " "; display: block; width: 100%; height: 1px; background-position: bottom; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .notification-centre__main .notifications-list::before { border-bottom: 1px dotted #fff; } .notification-centre__main .notifications-list__single { background-position: bottom; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; display: flex; padding: 12px 0; position: relative; } .ie9 .notification-centre__main .notifications-list__single { border-bottom: 1px dotted #fff; } .notification-centre__main .notifications-list__single .avatar { flex-shrink: 0; width: 32px; } .notification-centre__main .notifications-list__single .avatar img { display: block; border-radius: 50%; width: 100%; height: auto; } .notification-centre__main .notifications-list__single > div { padding-left: 9px; padding-right: 34px; width: 100%; font-family: "Plantin", serif; font-style: italic; font-size: 13px; line-height: 15px; opacity: 0.75; } .notification-centre__main .notifications-list__single > div:hover { cursor: pointer; } .notification-centre__main .notifications-list__single > div span { color: #fff; font-family: "Bureau Grot Bk", helvetica; font-style: normal; font-size: 12px; } .notification-centre__main .notifications-list__single > div span:not(.name, .time) { text-transform: uppercase; } .notification-centre__main .notifications-list__single > div .time { font-family: "Plantin", serif; font-style: italic; font-size: 13px; display: inline-block; } .notification-centre__main .notifications-list__single__close { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 2; border-radius: 50%; background: #EAE5DB; width: 15px; height: 15px; opacity: 0; pointer-events: none; transition: all 0.3s; } .notification-centre__main .notifications-list__single__close svg { width: 6px; height: 6px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .notification-centre__main .notifications-list__single.new > div { opacity: 1; } .notification-centre__main .notifications-list__single.new::after { content: " "; display: block; width: 15px; height: 15px; background: #E5C89A; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 1; border-radius: 50%; } .notification-centre__main .notifications-list__single:hover .notifications-list__single__close { opacity: 1; pointer-events: all; } .notification-centre__setup { position: absolute; bottom: 0; left: 22px; right: 22px; background: #000; height: 50vh; border-top: solid 1px #fff; display: flex; align-items: center; z-index: 3; transition: all 0.3s; } @media (max-width: 800px) { .notification-centre__setup { height: 45vh; } } .notification-centre__setup.hide { transform: translateY(100%); opacity: 0; pointer-events: none; } .notification-centre__setup.hide::before { opacity: 0; } .notification-centre__setup::before { content: " "; display: block; width: 100%; height: 42px; background-image: linear-gradient(transparent, #000); position: absolute; bottom: 100%; left: 0; margin-bottom: 1px; pointer-events: none; transition: all 0.3s; } .notification-centre__setup > h2.notif-heading { position: absolute; top: 18px; font-family: "Bureau Grot Bk", helvetica; font-size: 13px; line-height: 1; letter-spacing: 0.41px; text-transform: uppercase; margin: 0; text-align: center; width: 100%; font-weight: normal; } .notification-centre__setup .inner { width: 100%; } .notification-centre__setup .notification-centre-track { width: 160px; height: 21px; margin: 0 auto 20px; display: flex; justify-content: space-between; position: relative; align-items: center; } .notification-centre__setup .notification-centre-track::before { background-position: top; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; display: block; width: 100%; height: 1px; position: absolute; top: 50%; } .ie9 .notification-centre__setup .notification-centre-track::before { border-top: 1px dotted #fff; } .notification-centre__setup .notification-centre-track > span { width: 15px; height: 15px; border-radius: 50%; border: solid 1px #E8E0CC; background: black; position: relative; z-index: 2; transition: all 0.3s; cursor: pointer; } .notification-centre__setup .notification-centre-track > span:hover { border: solid 1px #E5C89A; } .notification-centre__setup .notification-centre-track > span svg { display: none; width: 7px; height: 5px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .notification-centre__setup .notification-centre-track > span.completed { background: #E5C89A; border: solid 1px #E5C89A; } .notification-centre__setup .notification-centre-track > span.completed:hover { background: #E8E0CC; border: solid 1px #E8E0CC; } .notification-centre__setup .notification-centre-track > span.completed svg { display: block; } .notification-centre__setup .notification-centre-track > span.active { border: solid 1px #E5C89A; width: 21px; height: 21px; } .notification-centre__setup .slides { position: relative; } .notification-centre__setup .notification-slide { text-align: center; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; transition: all 0.3s; } .notification-centre__setup .notification-slide.active { position: static; opacity: 1; pointer-events: all; } .notification-centre__setup .notification-slide h3 { margin: 0; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 36px; font-weight: 400; line-height: 1; } @media (max-width: 800px) { .notification-centre__setup .notification-slide h3 { font-size: 30px; } } .notification-centre__setup .notification-slide p { margin: 10px 0 0; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 13px; line-height: 16px; } .notification-centre__setup .notification-slide .cta { color: #000; font-size: 12px; line-height: 1; letter-spacing: -0.2px; padding: 8px 16px; border-radius: 20px; background: #E8E0CC; display: block; max-width: 115px; margin: 22px auto; text-transform: uppercase; font-family: "Bureau Grot Bk", helvetica; transition: all 0.3s; } @media (max-width: 960px) { .notification-centre__setup .notification-slide .cta { padding: 16px; border-radius: 22px; } } .notification-centre__setup .notification-slide .cta .checkmark-black { width: 7px; height: 6px; margin-right: 6px; display: none; transform: translateY(-1px); } .notification-centre__setup .notification-slide .cta .arrow-right { width: 6px; height: 8px; margin-left: 6px; stroke-width: 1.5; } .notification-centre__setup .notification-slide .cta.dis { opacity: 0.46; } .notification-centre__setup .notification-slide .cta.dis .checkmark-black { display: inline; } .notification-centre__setup .notification-slide .cta.dis .arrow-right { display: none; } .notification-centre__setup .notification-slide.final { opacity: 1; pointer-events: all; position: static; } .notification-centre__setup .notification-slide.final .confetti { width: 52px; height: 32px; display: block; margin: 0 auto; } .notification-centre__setup .notification-slide.final .cta { cursor: pointer; } .notification-centre__setup .notification-slide.final .cta .close { width: 10px; height: 10px; margin-right: 6px; } .notification-centre__setup .controls { position: absolute; bottom: 48px; left: 0; right: 0; text-align: center; } .notification-centre__setup .controls button { margin: 0 7.5px; background: none; border: 0; font-family: "Bureau Grot Bk", helvetica; font-size: 11px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; } .notification-centre__setup .controls button svg { stroke-width: 1.5; width: 6px; height: 8px; display: inline-block; stroke: #fff; } .notification-centre__setup .controls button.notification-slide-prev svg { transform: rotate(180deg); margin-right: 6px; } .notification-centre__setup .controls button.notification-slide-next svg { margin-left: 6px; } .nav-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999999; display: none; } .nav-menu__shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .nav-menu__main { padding-top: 0; background: #000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; width: 25vw; min-width: 350px; overflow-y: auto; overflow-x: hidden; } @media (max-width: 800px) { .nav-menu__main { width: 100%; } } .nav-menu__main button { margin-top: 24px; margin-bottom: 46px; } @media (max-width: 800px) { .nav-menu__main button { margin-top: 15px; } } .nav-menu__main button svg { width: 13px; height: 13px; stroke: #fff; } .nav-menu__main ul { margin: 0; padding: 0; } .nav-menu__main ul li + li { margin-top: 1px; } .nav-menu__main ul li a { color: #fff; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 36px; line-height: 1.25; text-transform: uppercase; } .nav-menu__main ul + ul { margin-top: 34px; } .nav-menu__main ul + ul li + li { margin-top: 0px; } .nav-menu__main ul + ul li a { font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 12px; line-height: 1.8; letter-spacing: 0.4px; text-transform: uppercase; } .mobile-bar { display: none; position: fixed; bottom: 0; left: 0; background: #000; color: #fff; z-index: 9999; text-align: center; padding-top: 12.5px; padding-bottom: 12.5px; width: 100%; } @media (max-width: 800px) { .mobile-bar { display: flex; } } .mobile-bar__item { flex-grow: 1; } .mobile-bar__item + div { margin-left: 48px; position: relative; } @media (max-width: 350px) { .mobile-bar__item + div { margin-left: 24px; } } .mobile-bar__item + div::before { background-position: right; background-image: linear-gradient(#FCFAF5 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 100%; margin-right: 24px; opacity: 0.41; } .ie9 .mobile-bar__item + div::before { border-right: 1px dotted #FCFAF5; } @media (max-width: 350px) { .mobile-bar__item + div::before { margin-right: 12px; } } .mobile-bar__item .icon-wrap { position: relative; } .mobile-bar__item .icon-wrap::after { content: " "; display: block; width: 7px; height: 7px; border-radius: 50%; background: #E5C89A; position: absolute; top: 0; right: 0; opacity: 0; } .mobile-bar__item .icon-wrap.active::after { opacity: 1; } .mobile-bar__item .icon-wrap svg { width: 23px; height: 26px; } .mobile-bar__item .icon-wrap svg.icon-star { fill: #FCFAF5; stroke: transparent; } .mobile-bar__item .icon-wrap svg.search, .mobile-bar__item .icon-wrap svg.bell, .mobile-bar__item .icon-wrap svg.share { stroke: #FCFAF5; } .mobile-bar__item a { color: #FCFAF5; display: inline-block; } .mobile-bar__item small { font-size: 8px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; } .homepage-banner { position: fixed; top: 0; left: 0; width: 100%; text-align: center; font-family: "Grotesk", helvetica; font-size: 16px; line-height: 1; background: #E5C89A; padding: 0 12px; height: 41px; z-index: 900; transition: all 0.3s; } @media (max-width: 800px) { .homepage-banner { font-size: 14px; } } .homepage-banner p { margin: 0; text-align: left; padding-bottom: 2px; } @media screen and (-webkit-min-device-pixel-ratio: 2) { .homepage-banner p { padding-bottom: 0; } } .homepage-banner a { font-weight: bold; margin-left: 12px; color: #000; border-bottom: solid 1px #000; flex-shrink: 0; font-size: 15px; } @media screen and (-webkit-min-device-pixel-ratio: 2) { .homepage-banner a { font-size: 16px; } } .homepage-banner .inner { display: flex; align-items: center; justify-content: center; height: 100%; } body.w-hp-banner .site-wrap { margin-top: 107px; } @media (max-width: 800px) { body.w-hp-banner .site-wrap { margin-top: 92px; } } body.w-hp-banner .notification-centre { top: 107px; } body.w-hp-banner .main-header { top: 41px; } body.w-hp-banner .mobile-menu { top: 41px; } body.w-hp-banner .mob-cities, body.w-hp-banner .mob-profile { top: 92px; } .main-footer { padding-top: 54px; } @media (max-width: 800px) { .main-footer { padding-top: 115px; position: relative; padding-bottom: 74px; } } .footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; } .footer-grid .footer-col { text-align: center; } @media (max-width: 800px) { .footer-grid .footer-col { width: 50%; margin-bottom: 42px; } } .footer-grid .footer-col h3 { font-family: "Plantin", serif; font-weight: 300; font-size: 14px; line-height: 1; margin: 0 0 17px; } .footer-grid .footer-col a { display: block; color: #000; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; letter-spacing: 0.4px; line-height: 1; text-transform: uppercase; transition: all 0.3s; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; } .footer-grid .footer-col a + a { margin-top: 14px; } .footer-grid .footer-col a svg { width: 50px; height: 50px; display: block; margin: 0 auto; } @media (max-width: 960px) { .footer-grid .footer-col a svg { width: 40px; height: 40px; } } @media (max-width: 800px) { .footer-grid .footer-col.footer-logo { position: absolute; top: 46px; text-align: center; width: 100%; left: 0; } } .footer-credit { margin-top: 12px; text-align: center; } @media (max-width: 800px) { .footer-credit { margin-bottom: 50px; } } .footer-credit p { margin: 0 !important; font-family: "Plantin", serif !important; font-weight: 300 !important; font-size: 10px !important; line-height: 1 !important; } .footer-credit a svg { width: 101px; height: 7px; fill: #000; } .search-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 901; display: none; } @media (max-width: 800px) { .search-modal { top: 0px; height: calc(100vh - 74px); z-index: 10000; } } .search-modal .empty { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px !important; letter-spacing: 0.41px; line-height: 1; text-transform: uppercase; color: #000; display: inline-block; display: flex; } .search-modal .search-shade { position: fixed; top: 0; right: 0; width: 100%; z-index: 1; height: 100%; background: #000; opacity: 0.17; } @media (max-width: 800px) { .search-modal .search-shade { display: none; } } .search-modal .search-main { position: fixed; top: 0; left: 0; max-width: 567px; width: 100%; height: 100%; overflow: auto; padding: 143px 30px 50px; background: #000; z-index: 2; } @media (max-width: 800px) { .search-modal .search-main { padding: 80px 25px 50px; height: calc(100% - 74px); width: 100%; max-width: 100%; } } .search-modal .search-main form { position: fixed; top: 0; left: 30px; padding: 0; padding-top: 92px; width: 507px; display: flex; border-bottom: solid 1px #fff; padding-bottom: 2px; background: #000; z-index: 1; } @media (max-width: 800px) { .search-modal .search-main form { width: calc(100% - 90px); left: 25px; padding-top: 47px; } } .search-modal .search-main form input { background: none; padding: 0; margin: 0; width: calc(100% - 25px); border: 0; align-self: flex-end; font-size: 41px; font-family: "Clearface", serif; color: #fff; } .search-modal .search-main form input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.17); opacity: 1; height: inherit; vertical-align: middle; } .search-modal .search-main form input::-moz-placeholder { color: rgba(255, 255, 255, 0.17); opacity: 1; height: inherit; vertical-align: middle; } .search-modal .search-main form input:-moz-placeholder { color: rgba(255, 255, 255, 0.17); opacity: 1; height: inherit; vertical-align: middle; } .search-modal .search-main form input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.17); opacity: 1; height: inherit; vertical-align: middle; } @media (max-width: 800px) { .search-modal .search-main form input { font-size: 26px; } } .search-modal .search-main form input:focus { outline: 0; } .search-modal .search-main form button { width: 25px; align-self: flex-end; font-size: 0; line-height: 0; border: 0; background: none; padding: 0; margin-bottom: 10px; transition: all 0.3s; } @media (max-width: 800px) { .search-modal .search-main form button { display: none; } } .search-modal .search-main form button svg { width: 25px; height: 16px; display: block; stroke: #fff; } .search-modal .search-cols { margin-top: 50px; display: flex; justify-content: space-between; } @media (max-width: 800px) { .search-modal .search-cols { flex-wrap: wrap; } } .search-modal .search-cols h4 { margin: 0 0 12px; font-family: "Plantin", serif; font-style: italic; font-weight: normal; font-size: 15px; color: #fff; } .search-modal .search-cols p { color: #fff; } .search-modal .search-cols ul { margin: 0; padding: 0; list-style: none; } .search-modal .search-cols ul li { font-size: 0; color: #fff; } .search-modal .search-cols ul li + li { margin-top: 18px; } .search-modal .search-cols ul a, .search-modal .search-cols ul span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; letter-spacing: 0.41px; line-height: 1; text-transform: uppercase; color: #fff; display: inline-block; display: flex; transition: all 0.3s; cursor: pointer; } .search-modal .search-cols ul a:hover, .search-modal .search-cols ul span:hover { transform: translateY(-2px); } .search-modal .search-cols ul img { width: 21px; height: auto; border-radius: 50%; align-self: center; } .search-modal .search-cols ul a span { text-transform: none; align-self: center; width: calc(100% - 21px); padding-left: 7px; letter-spacing: 0; } .search-modal .search-cols .search-places { width: calc(66.666% - 25px); } @media (max-width: 800px) { .search-modal .search-cols .search-places { width: 100%; } } .search-modal .search-cols .search-extras { width: calc(33.333% - 25px); } @media (max-width: 800px) { .search-modal .search-cols .search-extras { width: 100%; order: -1; margin-bottom: 38px; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 25px; } } .search-modal .search-cols .search-extras div + div { margin-top: 42px; } @media (max-width: 800px) { .search-modal .search-cols .search-extras div + div { margin-top: 0; } } .search-modal .search-close { position: fixed; top: 0; left: 0; padding: 23px 30px; cursor: pointer; z-index: 2; } @media (max-width: 800px) { .search-modal .search-close { padding: 0; right: 0; padding-right: 25px; left: auto; top: 54px; padding-left: 16px; } } .search-modal .search-close svg { width: 14px; height: 14px; stroke: #fff; } .search-modal .search-place { display: flex; width: 100%; position: relative; } .search-modal .search-place + .search-place { margin-top: 24px; } .search-modal .search-place + .search-place::before { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; display: block; position: absolute; bottom: 100%; left: 0; width: 100%; height: 1px; margin-bottom: 12px; } .ie9 .search-modal .search-place + .search-place::before { border-top: 1px dotted #000; } .search-modal .search-place > a { width: 160px; align-self: center; color: #fff; } @media (max-width: 600px) { .search-modal .search-place > a { width: 124px; } } .search-modal .search-place > a img { display: block; width: 100%; height: auto; transition: all 0.3s; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .search-modal .search-place > a img:hover { opacity: 0.7; } .search-modal .search-place .content { width: calc(100% - 160px); align-self: center; padding-left: 15px; max-width: 253px; } .search-modal .search-place .content a { color: #fff; } .search-modal .search-place .content h3 a { color: #fff; } .search-modal .search-place .content h2 { margin: 6px 0 4px; font-family: "Clearface", serif; font-weight: normal; font-size: 22px; line-height: 1; transition: all 0.3s; } @media (max-width: 600px) { .search-modal .search-place .content h2 { font-size: 18px; } } .search-modal .search-place .content h2:hover { transform: translateY(-2px); } .search-modal .search-place .content > span { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 11px; line-height: 1; transition: all 0.3s; display: inline-block; color: #fff; } .search-modal .search-place .content > span:hover { transform: translateY(-2px); } @media (min-width: 601px) { .search-modal.hide .search-main { margin-left: -100%; } .search-modal.hide .search-main form { margin-left: -100%; } .search-modal.hide .search-close { margin-left: -100%; } .search-modal.hide .search-shade { left: -100%; } } .search-modal .endorsed-modal .endorsed-modal-shade { background: rgba(0, 0, 0, 0.7); } .search-results__top { background-position: bottom; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 52px; margin-bottom: 26px; } .ie9 .search-results__top { border-bottom: 1px dotted #fff; } .search-results__top h2, .search-results__top button { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 14px; letter-spacing: 0.3px; text-transform: uppercase; padding-bottom: 18px; margin: 0; color: #fff; position: relative; text-align: left; } .search-results__top h2::after, .search-results__top button::after { content: " "; display: block; background: #E5C89A; position: absolute; bottom: 0; width: 100%; height: 3px; opacity: 0; } .search-results__top h2.active::after, .search-results__top button.active::after { opacity: 1; } .search-results__top h2 span, .search-results__top button span { font-family: "Plantin", serif; } .search-results__top .tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: left; } .search-results ul { padding: 0; margin: 0; } .search-results ul + ul { margin-top: 14px; } .search-results ul + ul.search-results__spots { margin-top: 25px; } .search-results__locations, .search-results__members { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; font-size: 36px; line-height: 1; text-transform: uppercase; } .search-results__locations a, .search-results__members a { color: #fff; } .search-results__locations li, .search-results__members li { display: flex; align-items: center; } .search-results__locations li + li, .search-results__members li + li { margin-top: 14px; } .search-results__locations img, .search-results__members img { width: 35px; height: 35px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; margin-right: 11px; transform: translateY(3px); } .search-results__members { text-transform: none; } .search-results__posts li { display: flex; align-items: flex-start; } .search-results__posts li + li { margin-top: 14px; } .search-results__posts .img-wrap { width: 160px; margin-right: 15px; flex-shrink: 0; } .search-results__posts .img-wrap img { display: block; width: 100%; height: auto; border-top-left-radius: 7px; border-bottom-left-radius: 7px; } .search-results__posts .content a { color: #fff; } .search-results__posts .content small { font-family: "Bureau Grot Bk", helvetica; font-size: 12px; text-transform: uppercase; } .search-results__posts .content small em { font-family: "Plantin", serif; text-transform: capitalize; color: #fff; } .search-results__posts .content h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 36px; letter-spacing: -0.03px; font-weight: 400; line-height: 1.05; margin: 0; } .search-results__tags li { display: flex; align-items: center; } .search-results__tags li + li { margin-top: 14px; } .search-results__tags .content a { color: #fff; } .search-results__tags .content h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 36px; letter-spacing: -0.03px; font-weight: 400; line-height: 1.05; margin: 8px 0 0; } .search-results__lists li { display: flex; align-items: center; } .search-results__lists li + li { margin-top: 14px; } .search-results__lists .img-wrap { width: 160px; margin-right: 15px; flex-shrink: 0; } .search-results__lists .img-wrap img { display: block; width: 100%; height: auto; border-top-left-radius: 7px; border-bottom-left-radius: 7px; } .search-results__lists .content a { color: #fff; } .search-results__lists .content a em { text-transform: lowercase; } .search-results__lists .content small { font-family: "Bureau Grot Bk", helvetica; font-size: 12px; text-transform: uppercase; } .search-results__lists .content h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 36px; letter-spacing: -0.03px; font-weight: 400; line-height: 1.05; margin: 8px 0 0; } .search-results__tab-results { position: relative; } .search-results__tab-result { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; transition: all 0.3s; } .search-results__tab-result.active { opacity: 1; pointer-events: all; position: static; } .search-results .no-results { color: #fff; list-style: none; font-family: "Bureau Grot Bk", helvetica; font-size: 16px; } .hp-hero { display: flex; justify-content: space-between; border-bottom: solid 1px #000; position: relative; } @media (max-width: 960px) { .hp-hero { display: block; padding-left: 0; padding-right: 0; } } .hp-hero .hero-marker { position: absolute; top: 50px; left: 50px; } @media (max-width: 1440px) { .hp-hero .hero-marker { top: 30px; left: 30px; } } @media (max-width: 960px) { .hp-hero .hero-marker { left: auto; right: 10px; top: 10px; z-index: 1; } } .hp-hero .hero-marker > span { width: 50px; height: 50px; border-radius: 50%; background: #E5C89A; display: block; position: relative; } @media (max-width: 1350px) { .hp-hero .hero-marker > span { width: 2.5vw; height: 2.5vw; } } @media (max-width: 1170px) { .hp-hero .hero-marker > span { width: 3.5vw; height: 3.5vw; } } @media (max-width: 960px) { .hp-hero .hero-marker > span { width: 40px; height: 40px; } } .hp-hero .hero-marker > span svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 21px; height: 21px; display: block; } @media (max-width: 1350px) { .hp-hero .hero-marker > span svg { width: 1vw; height: 1vw; } } @media (max-width: 1170px) { .hp-hero .hero-marker > span svg { width: 1.5vw; height: 1.5vw; } } @media (max-width: 960px) { .hp-hero .hero-marker > span svg { width: 21px; height: 21px; } } .hp-hero .hero-marker > svg { width: 50px; height: 120px; margin-top: 10px; } @media (max-width: 1350px) { .hp-hero .hero-marker > svg { width: 2.5vw; height: 5.5vw; } } @media (max-width: 1170px) { .hp-hero .hero-marker > svg { width: 3.5vw; height: 8.8vw; } } @media (max-width: 960px) { .hp-hero .hero-marker > svg { display: none; } } .hp-hero-feature { position: relative; } @media (max-width: 1170px) { .hp-hero-feature { width: calc(75% - 6px); } } @media (max-width: 960px) { .hp-hero-feature { width: 100%; } } .hp-hero-feature::before { content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 100%; margin-right: 12px; background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .hp-hero-feature::before { border-left: 1px dotted #000; } @media (max-width: 960px) { .hp-hero-feature::before { display: none; } } .hp-hero-feature .hero-controls { width: calc(25% - 19.2px); position: absolute; bottom: 0px; right: 0; text-align: center; } @media (max-width: 1170px) { .hp-hero-feature .hero-controls { width: 100%; display: block; position: static; margin-top: 30px; } } @media (max-width: 600px) { .hp-hero-feature .hero-controls { font-size: 0; margin-top: 24px; } } .hp-hero-feature .hero-controls span { display: inline-block; vertical-align: middle; width: 21px; height: 21px; border-radius: 50%; position: relative; cursor: pointer; transition: all 0.3s; } @media (max-width: 600px) { .hp-hero-feature .hero-controls span { width: 7px; height: 7px; } } .hp-hero-feature .hero-controls span + span { margin-left: 9px; } @media (max-width: 600px) { .hp-hero-feature .hero-controls span + span { margin-left: 6px; } } .hp-hero-feature .hero-controls span:not(.active) { background: #E6E6E6; } .hp-hero-feature .hero-controls span:hover { transform: translateY(-3px); } .hp-hero-feature .hero-controls span svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; padding: 5px; } @media (max-width: 600px) { .hp-hero-feature .hero-controls span svg { display: none; } } .hp-hero-feature .feature-posts { position: relative; } .hp-hero-feature .feature-post { display: flex; justify-content: space-between; transition: all 0.5s; opacity: 0; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; } @media (max-width: 1170px) { .hp-hero-feature .feature-post { display: block; } } @media (max-width: 960px) { .hp-hero-feature .feature-post { display: inline-block; transition: none; opacity: 1; position: static; pointer-events: all; padding: 0 30px; } } @media (max-width: 960px) { .hp-hero-feature .feature-post { padding: 0 20px; } } .hp-hero-feature .feature-post.active { opacity: 1; position: static; pointer-events: all; } .hp-hero-feature .feature-post .feature-image { width: calc(75% - 4.8px); position: relative; } @media (max-width: 1170px) { .hp-hero-feature .feature-post .feature-image { width: 100%; display: block; } } .hp-hero-feature .feature-post .feature-image > a { display: block; font-size: 0; padding-top: 69%; position: relative; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; } @media (max-width: 1170px) { .hp-hero-feature .feature-post .feature-image > a { border-top-right-radius: 20px; border-bottom-left-radius: 0; } } @media (max-width: 600px) { .hp-hero-feature .feature-post .feature-image > a { border-top-left-radius: 12px; border-top-right-radius: 12px; } } .hp-hero-feature .feature-post .feature-image img { display: block; width: 100%; height: 100%; transition: all 0.3s; position: absolute; top: 0; left: 0; -o-object-fit: cover; object-fit: cover; } @media (min-width: 961px) { .hp-hero-feature .feature-post .feature-image:hover .post-wishlist-button { opacity: 1; } } .hp-hero-feature .feature-post .feature-image .post-wishlist-button { position: absolute; top: 12px; right: 12px; z-index: 3; opacity: 0; transition: all 0.3s; cursor: pointer; } .hp-hero-feature .feature-post .feature-image .post-wishlist-button svg { width: 21px; height: 25px; transition: all 0.3s; fill: #E8E0CC; } .hp-hero-feature .feature-post .feature-image .post-wishlist-button:hover svg, .hp-hero-feature .feature-post .feature-image .post-wishlist-button.active svg { fill: #E5C89A; } .hp-hero-feature .feature-post .feature-image .post-wishlist-button::after { content: " "; display: block; width: 7px; height: 2px; position: absolute; top: 9px; left: 7px; background: #000; opacity: 0; transition: all 0.3s; } .hp-hero-feature .feature-post .feature-image .post-wishlist-button.active::after { opacity: 1; } .hp-hero-feature .feature-post .feature-image .post-wishlist-button.active.active-Eat svg { fill: #FFC296; stroke: transparent; } .hp-hero-feature .feature-post .feature-image .post-wishlist-button.active.active-Sleep svg { fill: #ACDDF4; stroke: transparent; } .hp-hero-feature .feature-post .feature-image .post-wishlist-button.active.active-Play svg { fill: #F5C9D1; stroke: transparent; } .hp-hero-feature .feature-post .content { width: calc(25% - 19.2px); align-self: center; text-align: center; padding: 0 0 22px; } @media (max-width: 1170px) { .hp-hero-feature .feature-post .content { width: 100%; padding: 0; margin-top: 30px; } } .hp-hero-feature .feature-post .content a { color: #000; } .hp-hero-feature .feature-post .content h2 { font-family: "Clearface", serif; font-weight: normal; font-size: 40px; line-height: 44px; margin: 15px 0 19px; transition: all 0.3s; } @media (max-width: 1350px) { .hp-hero-feature .feature-post .content h2 { font-size: 2.9vw; line-height: 3.2vw; } } @media (max-width: 960px) { .hp-hero-feature .feature-post .content h2 { font-size: 30px; line-height: 44px; margin: 4px 0; } } .hp-hero-feature .feature-post .content h2:hover { transform: translateY(-3px); } .hp-hero-feature .feature-post .content h2 a { text-transform: none; } .hp-hero-feature .feature-post .content > span { display: block; font-family: "Grotesk", helvetica; font-size: 13px; line-height: 1; } .hp-hero-feature .feature-post .content > span a { transition: all 0.3s; display: block; text-transform: none; } .hp-hero-feature .feature-post .content > span a:hover { transform: translateY(-2px); } .hp-hero-feature .feature-post .content > a { margin-top: 66px; display: inline-block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: -0.2px; line-height: 1; text-transform: uppercase; } @media (max-width: 1170px) { .hp-hero-feature .feature-post .content > a { display: none; } } .hp-hero-feature .feature-post .content > a svg { width: 7px; height: 6px; margin-left: 6px; transform: translateY(-2px); transition: all 0.3s; } .hp-hero-feature .feature-post .content > a:hover svg { margin-left: 9px; } .hp-hero-feed { order: -1; align-self: flex-end; position: relative; } @media (max-width: 1170px) { .hp-hero-feed { width: calc(25% - 18px); } } @media (max-width: 960px) { .hp-hero-feed { width: 100%; margin-top: 30px; } } @media (max-width: 960px) { .hp-hero-feed { padding: 0 20px; } } .hp-hero-feed .feed-wrap { overflow: hidden; height: 295px; position: relative; } @media (max-width: 960px) { .hp-hero-feed .feed-wrap { height: auto; overflow: visible; border-top: solid 1px #000; } .hp-hero-feed .feed-wrap::after { content: " "; display: block; position: absolute; top: 0; right: -30px; width: 30px; height: 100%; background-image: linear-gradient(to right, rgba(252, 250, 245, 0), #fcfaf5 65%); } } .hp-hero-feed .prev-feed { top: -295px; pointer-events: none; } .hp-hero-feed .next-feed { top: 295px; pointer-events: none; } .hp-hero-feed .feed-controls { padding-top: 14px; border-top: solid 1px #000; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: -0.2px; line-height: 1; text-transform: uppercase; } .hp-hero-feed .feed-controls > div { float: right; font-size: 0; } .hp-hero-feed .feed-controls > div button { display: inline-block; cursor: pointer; transition: all 0.3s; margin-left: 0.5rem; } @media (max-width: 600px) { .hp-hero-feed .feed-controls > div button { padding: 16px 15px; margin: -16px -15px 0 0; } } .hp-hero-feed .feed-controls > div button + button { margin-left: 5px; } .hp-hero-feed .feed-controls > div button + button svg { transform: rotate(180deg); } .hp-hero-feed .feed-controls > div button:not(.inactive):hover { transform: translateY(-3px); } .hp-hero-feed .feed-controls > div button.inactive { opacity: 0.2; pointer-events: none; } @media (max-width: 960px) { .hp-hero-feed .feed-controls > div button.feed-prev { display: none; } } .hp-hero-feed .feed-controls > div svg { width: 8px; height: 14px; } .hp-grid-section { border-bottom: solid 1px #000; position: relative; } @media (max-width: 600px) { .hp-grid-section { padding-top: 50px; padding-bottom: 50px; } } .hp-grid-section .grid-dd-mob { display: none; width: auto; border-radius: 25px; text-align: center; margin: 24px auto 0; position: relative; padding: 12px 30px 9px; background: #EAE5DB; left: 50%; transform: translateX(-50%); cursor: pointer; } @media (max-width: 1170px) { .hp-grid-section .grid-dd-mob { display: inline-block; } } .hp-grid-section .grid-dd-mob span { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: -0.2px; line-height: 1; text-transform: uppercase; } .hp-grid-section .grid-dd-mob span small { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 15px; line-height: 1; text-transform: none; } .hp-grid-section .grid-dd-mob span svg { width: 8px; height: 7px; margin-left: 6px; transition: all 0.3s; } .hp-grid-section .grid-dd-mob select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .hp-grid-section .grid-dd-mob:hover svg { transform: translateY(2px); } .hp-grid-section .view-cta-mob { margin: 24px auto 0; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; color: #000; font-size: 12px; line-height: 1; text-transform: uppercase; display: none; width: 120px; text-align: center; border: solid 1px #000; border-radius: 25px; padding: 12.5px 0px; } @media (max-width: 1170px) { .hp-grid-section .view-cta-mob { display: block; } } .hp-grid-section .view-cta-mob svg { width: 8px; height: 6px; margin-left: 6px; transform: translateY(-1px); transition: all 0.3s; } .hp-grid-section .view-cta-mob:hover svg { transform: translateY(-1px) translateX(3px); } .hp-grid-section .view-cta-mob.alt { border: 0; background: #EAE5DB; } @media (max-width: 600px) { .hp-grid-section .view-cta-mob.alt { font-size: 10px; padding: 10px; width: 94px; } } .hp-trending-cities { border-bottom: solid 1px #000; padding: 54px 60px 72px; text-align: center; } @media (max-width: 960px) { .hp-trending-cities { padding: 54px 30px 72px; } } .hp-trending-cities > h3 { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 15px; line-height: 1; margin: 0; } @media (max-width: 600px) { .hp-trending-cities > h3 { margin-bottom: 24px; } } .hp-trending-cities a { display: inline-block; vertical-align: middle; color: #000; font-family: "Altissima", helvetica; font-weight: normal; font-size: 60px; letter-spacing: -0.1px; line-height: 1; margin: 20px 15px 0; transition: all 0.3s; } @media (max-width: 1350px) { .hp-trending-cities a { font-size: 4.4vw; margin: 1.9vw 1.1vw 0; } } @media (max-width: 960px) { .hp-trending-cities a { font-size: 48px; margin: 20px 12px 0; } } @media (max-width: 600px) { .hp-trending-cities a { margin: 0 20px 0 0; } } .hp-trending-cities a:hover { transform: translateY(-3px); } .hp-trending-cities a img { width: 50px; height: auto; border-radius: 50%; display: inline-block; margin-right: 12px; transition: all 0.3s; } @media (max-width: 1350px) { .hp-trending-cities a img { width: 3.7vw; } } @media (max-width: 960px) { .hp-trending-cities a img { width: 40px; } } .hp-trending-cities a svg { display: inline-block; vertical-align: top; width: 11px; height: 11px; margin-top: 4px; margin-left: -6px; } .hp-trending-cities .mob-trending-cities { text-align: left; font-size: 0; } @media (max-width: 600px) { .hp-trending-cities .mob-trending-cities { height: 50px; margin-top: 10px; } } .marquee-wrap { transition: all 0.3s; } .marquee-wrap.hidden { opacity: 0; } .hp-slider { border-bottom: solid 1px #000; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 1170px) { .hp-slider { display: block; overflow: hidden; } } @media (max-width: 600px) { .hp-slider { padding-top: 50px; padding-bottom: 50px; } } .hp-slider__content { position: relative; text-align: center; } @media (max-width: 1170px) { .hp-slider__content { width: 100%; margin-bottom: 24px; } } .hp-slider__content .icon-bg { width: 49px; height: 49px; background: #E5C89A; border-radius: 50%; display: block; margin: 0 auto; position: relative; } @media (max-width: 1170px) { .hp-slider__content .icon-bg { width: 40px; height: 40px; display: inline-block; vertical-align: middle; transform: translateY(3px); } } .hp-slider__content .icon-bg svg { width: 18px; height: 18px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .hp-slider__content > svg { width: 35px; height: 44px; } @media (max-width: 1170px) { .hp-slider__content > svg { width: 40px; height: 40px; display: inline-block; vertical-align: middle; transform: translateY(3px); } } .hp-slider__content h2 { margin: 10px 0 0; font-family: "Altissima", helvetica; font-size: 60px; line-height: 1; letter-spacing: -0.1px; text-transform: uppercase; font-weight: normal; } @media (max-width: 1170px) { .hp-slider__content h2 { font-size: 48px; display: inline-block; vertical-align: middle; margin-left: 6px; } } .hp-slider__content p { margin: 12.5px 0 0; font-family: "Plantin", serif; font-style: italic; font-size: 15px; line-height: 18px; padding: 0 36px; } .hp-slider__controls { width: 58px; height: 30px; border-radius: 20px; background: #EAE5DB; margin: 20px auto 0; } @media (max-width: 960px) { .hp-slider__controls { display: none; } } .hp-slider__controls > span { width: 50%; height: 100%; display: inline-flex; align-items: center; transition: all 0.3s; cursor: pointer; } .hp-slider__controls > span svg { width: 9px; height: 8px; margin: auto; } .hp-slider__controls > span.slick-prev svg { transform: rotate(180deg); } .hp-slider__controls > span.slick-disabled { opacity: 0.17; } .hp-slider__wrap { width: calc(80% - 5.8px + 50px + 15px); margin-right: -50px; margin-left: -14px; padding-left: 14px; overflow-x: hidden; overflow-y: visible; padding-top: 12px; padding-bottom: 12px; } @media (max-width: 1450px) { .hp-slider__wrap { width: calc(80% - 5.8px + 30px + 15px); margin-right: -30px; } } @media (max-width: 1170px) { .hp-slider__wrap { width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; overflow: visible; } } .hp-slider__slider { width: calc(80% - 5.8px + 50px); margin-right: -50px; position: relative; } @media (max-width: 1170px) { .hp-slider__slider { width: calc(100% + 16px); margin-right: -16px; } } .hp-slider__slider::after { content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 100%; margin-right: 12px; background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .hp-slider__slider::after { border-left: 1px dotted #000; } @media (max-width: 1170px) { .hp-slider__slider::after { display: none; } } @media (max-width: 1170px) { .hp-slider__slider .slick-list { overflow: visible; } } .hp-slider__slider--follow-slider { width: calc(100% - 50px + 25px); } @media (max-width: 1450px) { .hp-slider__slider--follow-slider { width: calc(100% - 30px + 25px); } } @media (max-width: 1170px) { .hp-slider__slider--follow-slider { width: calc(100% + 16px); margin-right: -16px; } } .hp-slider__slider--follow-slider .slick-list { overflow: visible; } .hp-slider .slick-track { margin-left: 0; } .hp-list { position: relative; margin-right: 25px; } @media (max-width: 800px) { .hp-list { margin-right: 20px; } } .hp-list + .hp-list::after { content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 100%; margin-right: 12px; background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .hp-list + .hp-list::after { border-left: 1px dotted #000; } @media (max-width: 800px) { .hp-list + .hp-list::after { margin-right: 10px; } } .hp-list > a { position: relative; display: block; height: 0; padding-top: 68.6893204%; background: #000; border-radius: 20px; overflow: hidden; } .hp-list > a img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0.65; } .hp-list .content { position: absolute; top: 50%; left: 0; width: 100%; padding: 0 12px; transform: translateY(-50%); text-align: center; color: #fff; } .hp-list .content h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 56px; line-height: 50px; letter-spacing: -0.1px; font-weight: normal; text-transform: none; margin: 0; } @media (max-width: 1170px) { .hp-list .content h2 { font-size: 34px; line-height: 32px; } } .hp-list .content h2 a { color: #fff; text-transform: none; } .hp-list .content span { font-family: "Plantin", serif; font-style: italic; font-size: 13px; margin-top: 10px; display: block; } .hp-list .content span img { margin-top: -3px; width: 18px; height: auto; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 3px; } .hp-list .content span a { font-family: "Bureau Grot Bk", helvetica; font-weight: normal; color: #fff; text-transform: none; font-style: normal; } .hp-list__details { position: absolute; bottom: 15px; left: 15px; display: flex; align-items: center; } .hp-list__details img { width: 30px; height: auto; border-radius: 50%; display: block; } .hp-list__details div { padding-left: 5px; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; line-height: 15px; color: #fff; } .hp-list__details div a, .hp-list__details div strong, .hp-list__details div span { font-family: "Bureau Grot Bk", helvetica; font-style: normal; font-weight: 400; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1px; color: #fff; } .hp-list__buttons { position: absolute; bottom: 15px; right: 15px; display: flex; align-items: center; } .hp-list__buttons > span { width: 30px; height: 30px; display: flex; align-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.5); } .hp-list__buttons > span svg { display: block; margin: 0 auto; width: 9px; height: 14px; } .hp-list__buttons > span + button { margin-left: 8px; } .hp-list__buttons > button { width: 30px; height: 30px; display: flex; align-items: center; border-radius: 50%; background: #E8E0CC; } .hp-list__buttons > button svg { display: block; margin: 0 auto; width: 16px; height: 3px; } .hp-list__buttons .lock-icon { width: 30px; height: 30px; border-radius: 50%; margin-right: 8px; background: rgba(0, 0, 0, 0.52); display: inline-flex; vertical-align: middle; align-items: center; } .hp-list__buttons .lock-icon svg { width: 9px; height: 14px; margin: auto; } .hp-list__menu { position: absolute; bottom: 0; right: 0; border-radius: 20px; width: 206px; background: #E8E0CC; text-align: left; opacity: 0; pointer-events: none; transform: translate(6px); transition: all 0.3s; } .hp-list__menu.active { opacity: 1; pointer-events: all; transform: translate(0); } .hp-list__menu button { padding: 18px 18px 18px 34px; position: relative; font-size: 12px; width: 100%; text-align: left; } .hp-list__menu button span { position: absolute; top: 0; left: 4px; width: 30px; display: flex; align-items: center; height: 100%; } .hp-list__menu button span svg { width: 14px; height: 14px; margin: 0 auto; } .hp-list__menu button span svg.pen { width: 10px; height: 10px; } .hp-list__menu button span svg.delete { width: 10px; height: 11px; transform: translateY(-1px); } .hp-list__menu button span svg.camera-alt { width: 12px; height: 10px; } .hp-list__menu button + button { border-top: solid 1px #fff; } .hp-follow { position: relative; margin-right: 25px; } .hp-follow a { text-transform: none !important; } @media (max-width: 800px) { .hp-follow { margin-right: 20px; } } .hp-follow + .hp-follow::after { content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 100%; margin-right: 12px; background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .hp-follow + .hp-follow::after { border-left: 1px dotted #000; } @media (max-width: 800px) { .hp-follow + .hp-follow::after { margin-right: 10px; } } .hp-follow .dismiss-follow { width: 24px; height: 24px; border-radius: 50%; position: absolute; top: -12px; right: -6px; background: #EAE5DB; cursor: pointer; z-index: 1; opacity: 0; transition: all 0.3s; } @media (max-width: 960px) { .hp-follow .dismiss-follow { opacity: 1; } } .hp-follow .dismiss-follow svg { position: absolute; width: 10px; height: 10px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; display: block; } .hp-follow__cover { background: #000; border-top-left-radius: 7px; border-top-right-radius: 7px; overflow: hidden; position: relative; padding-top: 50%; } .hp-follow__cover img { display: block; height: auto; opacity: 0.8; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hp-follow__cover p { position: absolute; top: 16.3px; left: 0; width: 100%; text-align: center; margin: 0; font-size: 11px; line-height: 1; } @media (max-width: 600px) { .hp-follow__cover p { font-size: 10px; } } .hp-follow__cover p span { color: #fff; font-family: "Plantin", serif; font-weight: 300; font-style: italic; } .hp-follow__cover p a { color: #fff; font-family: "Bureau Grot Bk", helvetica; } .hp-follow__content { text-align: center; padding-bottom: 40px; } @media (max-width: 600px) { .hp-follow__content { padding-bottom: 30px; } } .hp-follow__content h2 { margin: 12px 0; font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; font-size: 36px; line-height: 1; } @media (max-width: 600px) { .hp-follow__content h2 { font-size: 30px; } } .hp-follow__content h2 a { color: #000; } .hp-follow__content h2 .verified-badge { width: 14px; height: 14px; vertical-align: top; margin-top: 4px; } .hp-follow__content p { margin: 0; font-family: "Grotesk", helvetica; font-size: 13px; line-height: 16px; } .hp-follow__image { width: 80px; display: block; z-index: 2; position: relative; margin: -40px auto 0; } @media (max-width: 600px) { .hp-follow__image { width: 60px; margin: -30px auto 0; } } .hp-follow__image img { display: block; width: 100%; height: auto; border-radius: 50%; } .hp-follow__image > small { display: inline-block; font-size: 8px; font-style: normal; font-family: "Bureau Grot Bk", helvetica; color: #000; background: #E5C89A; width: 30px; text-align: center; border-radius: 7px; padding: 1.5px 0; text-transform: uppercase; position: absolute; bottom: 8px; right: -5px; } @media (min-width: 961px) { .hp-follow:hover .dismiss-follow { opacity: 1; } } .hp-testimonials { text-align: center; border-bottom: solid 1px #000; padding-top: 86px; padding-bottom: 93px; } @media (max-width: 600px) { .hp-testimonials { padding-top: 72px; padding-bottom: 72px; } } .hp-testimonials > h3 { font-family: "Plantin", serif; font-weight: normal; font-style: normal; font-size: 15px; } .hp-testimonials > svg { width: 40px; height: 42px; margin: 0 auto 6px; display: block; } @media (max-width: 600px) { .hp-testimonials > svg { margin: 0 auto 12px; } } .hp-testimonials .hp-testimonails-slider { position: relative; z-index: 1; } .hp-testimonials .hp-testimonails-slider .slick-arrow { width: 30px; height: 30px; position: absolute; top: calc(50% - 50px); transform: translateY(-50%); background: #EAE5DB; border-radius: 50%; cursor: pointer; z-index: 9; } @media (max-width: 600px) { .hp-testimonials .hp-testimonails-slider .slick-arrow { display: none !important; } } .hp-testimonials .hp-testimonails-slider .slick-arrow svg { width: 8px; height: 8px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; display: block; } .hp-testimonials .hp-testimonails-slider .slick-arrow.slick-next { right: 0; } .hp-testimonials .hp-testimonails-slider .slick-arrow.slick-prev { left: 0; } .hp-testimonials .hp-testimonails-slider .slick-arrow.slick-prev svg { transform: rotate(180deg); } .hp-testimonials .hp-testimonial-slide { position: relative; padding: 0 112px; } @media (max-width: 960px) { .hp-testimonials .hp-testimonial-slide { padding: 0 72px; } } @media (max-width: 600px) { .hp-testimonials .hp-testimonial-slide { padding: 0; } } .hp-testimonials .hp-testimonial-slide > p { font-family: "Clearface", serif; font-size: 51px; line-height: 1.2; margin: 0; } @media (max-width: 600px) { .hp-testimonials .hp-testimonial-slide > p { font-size: 26px; } } .hp-testimonials .hp-testimonial-slide__extras { margin-top: 16px; display: inline-flex; align-items: center; } @media (max-width: 600px) { .hp-testimonials .hp-testimonial-slide__extras { margin-top: 12px; } } .hp-testimonials .hp-testimonial-slide__extras .person img { width: 30px; heigth: 30px; display: inline-block; vertical-align: middle; border-radius: 50%; } @media (min-width: 961px) { .hp-testimonials .hp-testimonial-slide__extras:hover .person-hover { opacity: 1; pointer-events: all; } } .hp-testimonials .hp-testimonial-slide__content { padding-left: 10px; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; line-height: 15px; text-align: left; } .hp-testimonials .hp-testimonial-slide__content a, .hp-testimonials .hp-testimonial-slide__content .guest { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-style: normal; color: #000; text-transform: none; } .hp-testimonials .slick-dots { margin: 24px 0 0; padding: 0; list-style: none; } .hp-testimonials .slick-dots li { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #E8E0CC; transition: all 0.3s; } .hp-testimonials .slick-dots li.slick-active { background: #000; } .hp-testimonials .slick-dots li + li { margin-left: 10px; } .hp-testimonials .slick-dots li button { display: none; } .hp-outro { border-bottom: solid 1px #000; text-align: center; padding-top: 52px; padding-bottom: 76px; } @media (max-width: 600px) { .hp-outro { padding-top: 48px; padding-bottom: 60px; } } .hp-outro h2 { margin: 0 0 8px; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 79px; letter-spacing: -0.5px; font-weight: normal; } @media (max-width: 600px) { .hp-outro h2 { font-size: 66px; } } .hp-outro p { max-width: 510px; margin: 0 auto 32px; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 17px; line-height: 22px; } .hp-outro .button { height: 61px; border-radius: 30px; padding-top: 22px; } .hp-newsletter-app { padding: 90px; border-top: 1px solid #000; margin-bottom: none; } .hp-newsletter-app .hp-newsletter { border-bottom: none; } .hp-newsletter { border-bottom: solid 1px #000; } .hp-newsletter__inner { margin: 0 auto; display: flex; max-width: 768px; align-items: center; padding-bottom: 12px; } @media (max-width: 960px) { .hp-newsletter__inner { width: 100%; display: block; padding: 20px 0 40px; } } .hp-newsletter .content { text-align: right; } @media (max-width: 960px) { .hp-newsletter .content { text-align: center; } } .hp-newsletter .content h3 { font-family: "Grotesk", helvetica; font-style: normal; font-weight: bold; font-size: 27px; line-height: 33px; letter-spacing: 0.02em; margin: 0; } .hp-newsletter .content p { margin: 6px 0 0; font-family: "Grotesk", helvetica; font-style: normal; font-weight: normal; font-size: 15px; line-height: 18px; } .hp-newsletter form { max-width: 400px; flex-shrink: 0; margin-left: 66px; display: flex; height: 60px; position: relative; } @media (max-width: 960px) { .hp-newsletter form { margin: 24px auto 0; height: 50px; } } .hp-newsletter form input { height: 100%; width: 100%; border: 0; background: #E8E0CC; border-radius: 30px 0px 0px 30px; padding: 0 30px; font-family: "Grotesk", helvetica; font-style: normal; font-weight: normal; font-size: 15px; line-height: 100%; padding-bottom: 4px; } @media (max-width: 960px) { .hp-newsletter form input { padding: 0 20px 4px; } } .hp-newsletter form button { height: 100%; width: 144px; flex-shrink: 0; text-align: center; border-radius: 0px 30px 30px 0px; color: #E5C89A; font-family: "Bureau Grot Bk", helvetica; font-style: normal; font-weight: normal; font-size: 12px; line-height: 100%; letter-spacing: 0.03em; text-transform: uppercase; background: #000; } @media (max-width: 960px) { .hp-newsletter form button { width: 130px; } } .hp-newsletter form button svg { margin-left: 8px; vertical-align: middle; width: 11px; height: 8px; fill: #E5C89A; transform: translateY(-1px); } .hp-newsletter form .message { position: absolute; top: 100%; left: 0; width: 100%; text-align: center; font-family: "Grotesk", helvetica; font-style: normal; font-weight: normal; font-size: 13px; line-height: 100%; margin-top: 6px; display: none; } .hp-newsletter form .error { position: absolute; top: 100%; left: 0; width: 100%; text-align: center; font-family: "Grotesk", helvetica; font-style: normal; font-weight: normal; font-size: 13px; line-height: 100%; margin-top: 6px; color: #dc3545; } .gate-membership { text-align: center; padding: 72px 40px 80px; border-bottom: solid 1px #000; } @media (max-width: 1170px) { .gate-membership { padding: 50px 30px; } } @media (max-width: 960px) { .gate-membership { padding: 50px 20px; } } .gate-membership h2 { margin: 0; font-family: "Altissima", helvetica; font-weight: normal; font-size: 60px; letter-spacing: -0.1px; line-height: 1; text-transform: uppercase; } @media (max-width: 1350px) { .gate-membership h2 { font-size: 4.4vw; } } @media (max-width: 1170px) { .gate-membership h2 { font-size: 48px; display: inline-block; vertical-align: middle; } } .gate-membership__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; margin-top: 28px; margin-bottom: 32px; position: relative; } @media (max-width: 1170px) { .gate-membership__grid { grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 30px; } .gate-membership__grid::before { content: " "; height: 100%; width: 1px; background: #FCFAF5; position: absolute; top: 0; left: 0; } } @media (max-width: 600px) { .gate-membership__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1170px) { .gate-membership__perk:first-child::after { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; height: 1px; width: 100%; position: absolute; top: 107px; left: 0; } .ie9 .gate-membership__perk:first-child::after { border-top: 1px dotted #000; } } @media (max-width: 600px) { .gate-membership__perk:first-child::after { top: 97px; } .gate-membership__perk:first-child::before { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; height: 1px; width: 100%; position: absolute; bottom: 97px; left: 0; } .ie9 .gate-membership__perk:first-child::before { border-top: 1px dotted #000; } } .gate-membership__perk svg { display: block; margin: 0 auto; } .gate-membership__perk svg.check-diamond { width: 38px; height: 36px; } .gate-membership__perk svg.person-circle { width: 37px; height: 37px; } .gate-membership__perk svg.check-star { width: 42px; height: 42px; } .gate-membership__perk svg.check-tag { width: 40px; height: 35px; } .gate-membership__perk svg.list-plus { width: 29px; height: 36px; } .gate-membership__perk svg.loved-gate { width: 31px; height: 33px; } .gate-membership__perk h3 { font-family: "Clearface", serif; font-size: 22px; line-height: 1.2; margin: 9px 0 0; font-weight: normal; } @media (max-width: 1170px) { .gate-membership__perk h3 { font-size: 18px; } } @media (max-width: 600px) { .gate-membership__perk h3 { font-size: 16px; } } .gate-membership__perk + div { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .gate-membership__perk + div { border-left: 1px dotted #000; } .congrats-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; z-index: 999999; padding: 0 20px; } .congrats-modal__shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.33; z-index: 1; } .congrats-modal__close { width: 35px; height: 35px; display: block; position: absolute; bottom: 100%; left: 100%; cursor: pointer; background: #E8E0CC; border-radius: 50%; transform: translate(-70%, 65%); z-index: 4; transition: all 0.3s; } @media (max-width: 800px) { .congrats-modal__close { width: 26px; height: 26px; } } .congrats-modal__close svg { width: 14px; height: 14px; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } @media (max-width: 800px) { .congrats-modal__close svg { width: 11px; height: 11px; } } .congrats-modal__inner { position: relative; z-index: 2; background: #FCFAF5; border-radius: 20px; margin: 0 auto; max-width: 675px; height: 616px; width: 100%; text-align: center; display: flex; align-items: center; } @media (max-width: 800px) { .congrats-modal__inner { height: auto; } } .congrats-modal__intro { padding: 40px 20px 56px; width: 100%; } @media (max-width: 800px) { .congrats-modal__intro { height: 0; padding-top: 115%; padding-bottom: 0; } .congrats-modal__intro > div { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); padding: 0 24px; } } .congrats-modal__intro .congrats-glasses { display: block; width: 46px; height: 66px; margin: 0 auto 10px; } .congrats-modal__intro h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; font-size: 72px; line-height: 1; margin: 0; } .congrats-modal__intro p { margin-top: 10px; font-size: 16px; line-height: 22px; font-family: "Grotesk", helvetica; } .congrats-modal__intro .button { margin-top: 26px; padding-right: 25px; width: auto; color: #fff !important; } .congrats-modal__intro .button svg { position: static; stroke: #fff; margin-left: 17px; transform: translateY(0); } .congrats-modal__slideshow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 3; border-radius: 20px; display: none; } .congrats-modal__slideshow .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: all 0.3s; } .congrats-modal__slideshow .slide.active { opacity: 1; pointer-events: all; } .congrats-modal__slideshow .slide__top { height: 50%; width: 100%; position: relative; height: 336px; } @media (max-width: 800px) { .congrats-modal__slideshow .slide__top { height: 0; padding-top: 49.7%; } } .congrats-modal__slideshow .slide__top img, .congrats-modal__slideshow .slide__top video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-top-left-radius: 20px; border-top-right-radius: 20px; } .congrats-modal__slideshow .slide__bottom { height: 50%; width: 100%; padding: 34px 20px 0; text-align: center; color: #fff; height: 280px; } @media (max-width: 800px) { .congrats-modal__slideshow .slide__bottom { padding: 20px 20px 0; height: 100%; } } .congrats-modal__slideshow .slide__bottom h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; font-size: 72px; line-height: 1; margin: 0; } @media (max-width: 800px) { .congrats-modal__slideshow .slide__bottom h2 { font-size: 35px; } } @media (max-width: 350px) { .congrats-modal__slideshow .slide__bottom h2 { font-size: 28px; } } .congrats-modal__slideshow .slide__bottom p { font-family: "Grotesk", helvetica; font-size: 16px; line-height: 22px; max-width: 514px; margin: 5px auto 0; } @media (max-width: 800px) { .congrats-modal__slideshow .slide__bottom p { font-size: 13px; line-height: 16px; } } .congrats-modal .slideshow-controls { position: absolute; bottom: 40px; left: 0; width: 100%; text-align: center; color: #fff; z-index: 4; } @media (max-width: 800px) { .congrats-modal .slideshow-controls { bottom: 24px; } } .congrats-modal .slideshow-controls button { font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.3px; display: inline-block; vertical-align: middle; white-space: nowrap; transition: all 0.3s; } .congrats-modal .slideshow-controls button svg { width: 7px; height: 9px; stroke: #fff; } .congrats-modal .slideshow-controls button.congrats-slideshow-prev svg { transform: rotate(180deg); margin-right: 8px; } .congrats-modal .slideshow-controls button.congrats-slideshow-next svg { margin-left: 8px; } .congrats-modal .slideshow-controls button.dis { opacity: 0.48; pointer-events: none; } .congrats-modal .slideshow-controls p { display: inline-block; vertical-align: middle; margin: 0 14px; font-family: "Plantin", serif; font-weight: normal; font-size: 12px; line-height: 1; font-style: italic; } .congrats-modal .slideshow-controls .main-controls { opacity: 0; pointer-events: none; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s; } .congrats-modal .slideshow-controls .main-controls.active { opacity: 1; pointer-events: all; } @media (max-width: 800px) { .congrats-modal .slideshow-controls .main-controls button, .congrats-modal .slideshow-controls .main-controls p { display: none; } } .congrats-modal .slideshow-controls .main-controls ul { display: none; margin: 0; padding: 0; } @media (max-width: 800px) { .congrats-modal .slideshow-controls .main-controls ul { display: block; } } .congrats-modal .slideshow-controls .main-controls ul li { width: 12px; height: 12px; border: solid 1px #fff; background: transparent; display: inline-block; vertical-align: middle; margin: 0 4px; border-radius: 50%; } .congrats-modal .slideshow-controls .main-controls ul li.active { background: #fff; } .congrats-modal .slideshow-controls .cta-controls { display: inline-block; opacity: 0; pointer-events: none; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s; } .congrats-modal .slideshow-controls .cta-controls.active { opacity: 1; pointer-events: all; } .congrats-modal .slideshow-controls .cta-controls button { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 24px; white-space: nowrap; } @media (max-width: 800px) { .congrats-modal .slideshow-controls .cta-controls button { display: none; } } .congrats-modal .slideshow-controls .cta-controls .button { width: 229px; background: #E5C89A; color: #000 !important; } @media (max-width: 800px) { .congrats-modal .slideshow-controls .cta-controls .button { width: 166px; font-size: 10px; height: 46px; padding-top: 16px; } } .congrats-modal .slideshow-controls .cta-controls .button svg { fill: #000; } .congrats-modal .slideshow-controls-mob { display: none; } @media (max-width: 800px) { .congrats-modal .slideshow-controls-mob { display: block; } } .congrats-modal .slideshow-controls-mob button { width: 25px; height: 25px; background: #E8E0CC; border-radius: 50%; position: absolute; z-index: 3; top: 43%; margin-top: 25px; } .congrats-modal .slideshow-controls-mob button.congrats-slideshow-prev { left: 0; transform: translateX(-50%); } .congrats-modal .slideshow-controls-mob button.congrats-slideshow-prev svg { transform: rotate(180deg); } .congrats-modal .slideshow-controls-mob button.congrats-slideshow-next { right: 0; transform: translateX(50%); } .congrats-modal .slideshow-controls-mob button svg { width: 7px; height: 9px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .congrats-modal .slideshow-controls-mob button.dis svg { opacity: 0.15; } .post-grid { display: flex; justify-content: space-between; } @media (max-width: 800px) { .post-grid:not(.no-swipe) { width: auto; margin: 0 -20px; white-space: nowrap; padding: 0 0 0 20px; overflow-x: auto; overflow-y: hidden; } .post-grid:not(.no-swipe)::after { content: " "; display: block; width: 0px; min-width: 0px; } } @media (max-width: 800px) { .post-grid:not(.no-swipe) .post { width: 37vw; min-width: 37vw; margin-right: 20px; } } @media (max-width: 600px) { .post-grid:not(.no-swipe) .post { width: calc(50vw - 40px); min-width: calc(50vw - 40px); } } @media (max-width: 800px) { .post-grid:not(.no-swipe) .post + .post::before { margin-right: 10px; } } @media (max-width: 800px) { .post-grid:not(.no-swipe) .post:last-child { margin-right: 0; width: calc(37vw + 20px); min-width: calc(37vw + 20px); padding-right: 20px; } } @media (max-width: 600px) { .post-grid:not(.no-swipe) .post:last-child { width: calc(50vw - 20px); min-width: calc(50vw - 20px); } } .post-grid .post { position: relative; white-space: normal; } @media (max-width: 1170px) { .post-grid .post { width: calc(25% - 18px); } } @media (min-width: 961px) { .post-grid .post:hover .post-wishlist-button { opacity: 1; } } .post-grid .post > small { display: inline-block; font-size: 8px; font-style: normal; font-family: "Bureau Grot Bk", helvetica; color: #000; background: #E5C89A; width: 30px; text-align: center; border-radius: 7px; padding: 1.5px 0; text-transform: uppercase; position: absolute; top: 10px; left: 14px; } .post-grid .post .post-wishlist-button { position: absolute; top: 0; right: 0; padding: 12px; z-index: 3; opacity: 0; transition: all 0.3s; cursor: pointer; } .post-grid .post .post-wishlist-button svg { width: 21px; height: 25px; transition: all 0.3s; fill: #E8E0CC; } .post-grid .post .post-wishlist-button::after { content: " "; display: block; width: 7px; height: 2px; position: absolute; top: 9px; left: 7px; background: #000; opacity: 0; transition: all 0.3s; } .post-grid .post .post-wishlist-button.active::after { opacity: 1; } .post-grid .post .post-wishlist-button:hover svg, .post-grid .post .post-wishlist-button.active svg { fill: #E5C89A; } .post-grid .post .post-wishlist-button.active.active-eat svg { fill: #FFC296; stroke: transparent; } .post-grid .post .post-wishlist-button.active.active-sleep svg { fill: #ACDDF4; stroke: transparent; } .post-grid .post .post-wishlist-button.active.active-play svg { fill: #F5C9D1; stroke: transparent; } .post-grid .post > a { display: block; border-top-left-radius: 7px; border-top-right-radius: 7px; overflow: hidden; } .post-grid .post > a img { display: block; width: 100%; height: auto; transition: all 0.3s; } .post-grid .post::after { content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: 100%; margin-left: 12px; background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .post-grid .post::after { border-left: 1px dotted #000; } @media (max-width: 800px) { .post-grid .post::after { margin-left: 10px; } } .post-grid .post:last-of-type::after { display: none; } .post-grid .post .content { text-align: center; height: 120px; padding-top: 20px; } @media (max-width: 600px) { .post-grid .post .content { min-height: 90px; height: auto; padding-top: 10px; } } .post-grid .post .content.no-min { height: auto; } .post-grid .post .content a { color: #000; } .post-grid .post .content > h3 { display: inline-block; } .post-grid .post .content > h2 { font-family: "Clearface", serif; font-weight: 300; font-size: 22px; line-height: 1.2; margin: 7px 0 3px; transition: all 0.3s; } @media (max-width: 600px) { .post-grid .post .content > h2 { font-size: 16px; margin: 8px 0 2px 0; } } .post-grid .post .content > h2:hover { transform: translateY(-2px); } .post-grid .post .content > span { font-family: "Grotesk", helvetica; font-size: 13px; line-height: 1; } .post-grid .post .content > span.post-endorsements { font-family: "Grotesk", helvetica; font-size: 11px; font-style: normal; } .post-grid .post .content > span.post-endorsements svg { display: inline-block; width: 10px; height: 10px; transform: translateY(1px); fill: #E5C89A; } .post-grid .post .content > span.post-loved { font-family: "Bureau Grot Bk", helvetica; font-size: 11px; line-height: 1; cursor: pointer; margin-top: 8px; } .post-grid .post .content > span.post-loved > span { font-family: "Plantin", serif; font-weight: 300; font-size: 11px; line-height: 15px; font-style: italic; } .post-grid .post .content > span.post-loved > div { display: inline-block; vertical-align: middle; border-radius: 50%; border: solid 1px #FCFAF5; } .post-grid .post .content > span.post-loved > div img { display: block; border: none; transform: none; } .post-grid .post .content > span.post-loved > div + div { margin-left: -7px; } .post-grid .post .content > span.post-loved > div.last { position: relative; background: #000; } .post-grid .post .content > span.post-loved > div.last img { opacity: 0.8; } .post-grid .post .content > span.post-loved > div.last::before { content: "+"; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; position: absolute; z-index: 1; } .post-grid .post .content > span.post-loved img { width: 19px; height: auto; border: solid 1px #FCFAF5; display: inline-block; vertical-align: middle; border-radius: 50%; transform: translateY(-1px); } .post-grid .post .content > span.post-loved img + img { margin-left: -7px; } .post-grid .post .content > span.tag { font-family: "Plantin", serif; font-style: italic; } .post-grid .post .content > span a { display: inline-block; transition: all 0.3s; } .post-grid .post .content > span a:hover { transform: translateY(-2px); } .post-grid .post .recent-activity { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: auto; width: 100%; text-align: center; } @media (max-width: 1170px) { .post-grid .post .recent-activity { bottom: 0; } } @media (max-width: 800px) { .post-grid .post .recent-activity { position: static; margin-top: 6px; transform: none; } } .post-grid .large-post { position: relative; } @media (max-width: 1170px) { .post-grid .large-post { width: calc(50% - 12px); } } @media (max-width: 800px) { .post-grid .large-post { width: 100%; margin-bottom: 20px; } } @media (min-width: 961px) { .post-grid .large-post:hover .post-wishlist-button { opacity: 1; } } .post-grid .large-post > small { display: inline-block; font-size: 8px; font-style: normal; font-family: "Bureau Grot Bk", helvetica; color: #000; background: #E5C89A; width: 30px; text-align: center; border-radius: 7px; padding: 1.5px 0; text-transform: uppercase; position: absolute; top: 10px; left: 14px; } .post-grid .large-post .post-wishlist-button { position: absolute; top: 12px; right: 12px; z-index: 3; opacity: 0; transition: all 0.3s; cursor: pointer; } .post-grid .large-post .post-wishlist-button > svg { width: 21px; height: 25px; transition: all 0.3s; fill: #E8E0CC; } .post-grid .large-post .post-wishlist-button:hover > svg, .post-grid .large-post .post-wishlist-button.active > svg { fill: #E5C89A; } .post-grid .large-post .post-wishlist-button::after { content: " "; display: block; width: 7px; height: 2px; position: absolute; top: 9px; left: 7px; background: #000; opacity: 0; transition: all 0.3s; } .post-grid .large-post .post-wishlist-button.active::after { opacity: 1; } .post-grid .large-post .post-wishlist-button.active.active-eat svg { fill: #FFC296; stroke: transparent; } .post-grid .large-post .post-wishlist-button.active.active-sleep svg { fill: #ACDDF4; stroke: transparent; } .post-grid .large-post .post-wishlist-button.active.active-play svg { fill: #F5C9D1; stroke: transparent; } .post-grid .large-post::after { content: " "; width: 1px; height: 100%; position: absolute; top: 0; left: 100%; margin-left: 12px; z-index: 1; background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .post-grid .large-post::after { border-right: 1px dotted #000; } @media (max-width: 800px) { .post-grid .large-post::after { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-left: 0; top: 100%; left: 0; width: 100%; height: 1px; margin-top: 10px; } .ie9 .post-grid .large-post::after { border-bottom: 1px dotted #000; } } .post-grid .large-post > a { display: block; border-radius: 7px; overflow: hidden; } .post-grid .large-post > a img { display: block; width: 100%; height: auto; transition: all 0.3s; } .post-grid .large-post::before { content: " "; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; z-index: 1; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); pointer-events: none; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } .post-grid .large-post .content { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; padding: 24px; z-index: 2; pointer-events: none; } .post-grid .large-post .content a { color: #fff; pointer-events: all; } .post-grid .large-post .content h3 { margin: 0; } .post-grid .large-post .content h3 a { color: #fff; } .post-grid .large-post .content h2 { font-family: "Clearface", serif; font-weight: 300; font-size: 32px; line-height: 1.2; margin: 8px 0 13px; transition: all 0.3s; } .post-grid .large-post .content h2:hover { transform: translateY(-2px); } .post-grid .large-post .content > span { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 11px; line-height: 1; } @media (max-width: 800px) { .post-grid.no-swipe { flex-wrap: wrap; } } @media (max-width: 800px) { .post-grid.no-swipe .post { width: calc(50% - 10px); } } .post-grid.pull-2 .grid-pullout { order: 2; } .post-grid.pull-2 .grid-pullout + .post { order: 1; } .post-grid.pull-2 .post { order: 3; } .post-grid.pull-3 .grid-pullout { order: 3; } .post-grid.pull-3 .grid-pullout + .post { order: 1; } .post-grid.pull-3 .grid-pullout + .post + .post { order: 2; } .post-grid.pull-3 .post { order: 4; } .post-grid.pull-4 .grid-pullout { order: 4; } .post-grid.pull-4 .post { order: 1; } .post-grid.pull-4 .post:last-of-type { order: 5; } .grid-dd-mob-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; display: none; } .grid-dd-mob-modal .shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.27; } .grid-dd-mob-modal .content { position: fixed; bottom: 20px; left: 20px; right: 20px; max-height: calc(100vh - 40px); overflow: auto; padding: 24px 20px; background: #000; color: #fff; border-radius: 30px; } .grid-dd-mob-modal .content .modal-header { padding-bottom: 16px; border-bottom: solid 1px #fff; margin-bottom: 16px; display: flex; justify-content: space-between; } .grid-dd-mob-modal .content .modal-header > span { cursor: pointer; } .grid-dd-mob-modal .content .modal-header > span svg { display: block; width: 14px; height: 14px; align-self: center; stroke: #fff; } .grid-dd-mob-modal .content h2 { margin: 0; display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 20px; letter-spacing: -0.2px; line-height: 1; text-transform: uppercase; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 14px; line-height: 1; letter-spacing: 0.41px; } .grid-dd-mob-modal .content h2 span { display: inline-block; width: 16px; height: 16px; position: relative; border-radius: 50%; margin-right: 8px; margin-bottom: -3px; } .grid-dd-mob-modal .content h2 span svg { width: 8px; height: 8px; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .grid-dd-mob-modal .content .cities-list { display: grid; grid-template-columns: 1fr 1fr; grid-row-gap: 20px; grid-column-gap: 20px; } .grid-dd-mob-modal .content .cities-list a { display: block; font-family: "Bureau", "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 14px; letter-spacing: 0.41px; line-height: 1.4; text-transform: uppercase; color: #fff; } .grid-pullout { position: relative; text-align: center; } @media (max-width: 1170px) { .grid-pullout { display: none; } } .grid-pullout.mob-only { display: none; } @media (max-width: 1170px) { .grid-pullout.mob-only { display: block; width: 100%; margin-bottom: 24px; } } .grid-pullout::after { content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: 100%; margin-left: 12px; background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .grid-pullout::after { border-right: 1px dotted #000; } @media (max-width: 1170px) { .grid-pullout::after { display: none; } } .grid-pullout > .tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #E5C89A; height: 16px; z-index: 1; } @media (max-width: 1170px) { .grid-pullout > .tag { display: inline-block; position: relative; left: 0; margin-bottom: 12px; transform: none; } } .grid-pullout > .tag::before { display: block; content: " "; width: 16px; height: 16px; position: absolute; top: 0; right: 100%; transform: translateX(50%); border-radius: 50%; background: #E5C89A; z-index: 1; } .grid-pullout > .tag::after { display: block; content: " "; width: 16px; height: 16px; position: absolute; top: 0; left: 100%; transform: translateX(-50%); border-radius: 50%; background: #E5C89A; z-index: 1; } .grid-pullout > .tag span { position: relative; z-index: 2; font-size: 10px; display: block; padding-top: 2px; text-transform: uppercase; } .grid-pullout .pullout-top { width: 100%; height: 0; padding-top: 68.9%; position: relative; } @media (max-width: 1170px) { .grid-pullout .pullout-top { height: auto; padding-top: 0; } } .grid-pullout .pullout-top .content { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; } @media (max-width: 1170px) { .grid-pullout .pullout-top .content { position: static; } } .grid-pullout .pullout-top .content .img-wrap { width: 50px; margin: 0 auto; position: relative; } @media (max-width: 1350px) { .grid-pullout .pullout-top .content .img-wrap { width: 3.7vw; } } @media (max-width: 1170px) { .grid-pullout .pullout-top .content .img-wrap { width: 40px; display: inline-block; vertical-align: middle; transform: translateY(3px); } } .grid-pullout .pullout-top .content .img-wrap > small { display: inline-block; font-size: 8px; font-style: normal; font-family: "Bureau Grot Bk", helvetica; color: #000; background: #E5C89A; width: 30px; text-align: center; border-radius: 7px; padding: 1.5px 0; text-transform: uppercase; position: absolute; bottom: 9px; right: -9px; } .grid-pullout .pullout-top .content img { width: 100%; height: auto; display: block; border-radius: 50%; } .grid-pullout .pullout-top .content > span { width: 50px; height: 50px; display: block; margin: 0 auto; border-radius: 50%; position: relative; } @media (max-width: 1350px) { .grid-pullout .pullout-top .content > span { width: 3.7vw; height: 3.7vw; } } @media (max-width: 1170px) { .grid-pullout .pullout-top .content > span { width: 40px; height: 40px; display: inline-block; vertical-align: middle; transform: translateY(3px); } } .grid-pullout .pullout-top .content > span svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 20px; height: 20px; margin: auto; } @media (max-width: 960px) { .grid-pullout .pullout-top .content > span svg { width: 15px; height: 15px; } } .grid-pullout .pullout-top .content > span.no-bg { border-radius: 0; } .grid-pullout .pullout-top .content > span.no-bg svg { width: 41px; height: 41px; } .grid-pullout .pullout-top .content > small { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 11px; line-height: 1; display: block; margin: 0 0 2px; } .grid-pullout .pullout-top .content h2 { margin: 0; font-family: "Altissima", helvetica; font-weight: normal; font-size: 60px; letter-spacing: -0.1px; line-height: 1; text-transform: uppercase; transform: translateY(13%); } @media (max-width: 1350px) { .grid-pullout .pullout-top .content h2 { font-size: 4.4vw; } } @media (max-width: 1170px) { .grid-pullout .pullout-top .content h2 { font-size: 48px; display: inline-block; vertical-align: middle; margin-left: 6px; } } .grid-pullout .pullout-top .content h2 svg { display: inline-block; vertical-align: top; width: 11px; height: 11px; } .grid-pullout > span { display: block; text-align: center; margin-top: 24px; font-family: "Plantin", serif; font-weight: normal; font-style: italic; font-size: 15px; line-height: 1.3; position: relative; } @media (max-width: 1170px) { .grid-pullout > span { margin-top: 12px; } } .grid-pullout .view-all-cta { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); background: #EAE5DB; padding: 11px 14px; border-radius: 17px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; color: #000; } @media (max-width: 1170px) { .grid-pullout .view-all-cta { display: none; } } .grid-pullout .view-all-cta svg { width: 6px; height: 8px; margin-left: 12px; transition: all 0.3s; } .grid-pullout .view-all-cta:hover svg { transform: translateX(2px); } .grid-pullout .grid-dd-wrap { display: inline-block; margin-top: 53px; position: relative; } @media (max-width: 1170px) { .grid-pullout .grid-dd-wrap { display: none; } } .grid-pullout .grid-dd-wrap span { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; border-bottom: solid 1px #000; letter-spacing: -0.2px; } .grid-pullout .grid-dd-wrap span small { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 15px; line-height: 1; text-transform: none; } .grid-pullout .grid-dd-wrap span svg { width: 8px; height: 7px; margin-left: 6px; } .grid-pullout .grid-dd-wrap::after { content: " "; display: block; width: 400%; position: absolute; top: 100%; left: -150%; height: 20px; } .grid-pullout .grid-dd-wrap .grid-dd { position: absolute; top: 100%; width: 400%; left: -150%; background: #000; z-index: 1; margin-top: 12px; -moz-column-count: 2; column-count: 2; text-align: left; padding: 30px; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 10; border-radius: 25px; } .grid-pullout .grid-dd-wrap .grid-dd::before { content: " "; display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #000; position: absolute; bottom: 100%; right: 0; left: 0; margin: auto; } .grid-pullout .grid-dd-wrap .grid-dd a { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; text-transform: uppercase; color: #fff; margin-bottom: 12px; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: all 0.3s; } .grid-pullout .grid-dd-wrap .grid-dd a:hover { -webkit-text-decoration-color: #000; text-decoration-color: #000; } .grid-pullout .grid-dd-wrap:hover .grid-dd { opacity: 1; pointer-events: all; } .grid-pullout > p, .grid-pullout .centered-pullout p { text-align: center; font-family: "Grotesk", helvetica; font-size: 14px; line-height: 1.3; margin: 16px 0 0; padding: 0 10px; } @media (max-width: 1170px) { .grid-pullout > p, .grid-pullout .centered-pullout p { max-width: 600px; margin: 16px auto 0; } } .grid-pullout .view-cta { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); background: #E8E0CC; padding: 11px 14px; border-radius: 17px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; color: #000; transition: all 0.3s; } .grid-pullout .view-cta.discoveries-cta { display: flex !important; align-items: center; justify-content: space-around; width: -moz-fit-content; width: fit-content; } @media (max-width: 1170px) { .grid-pullout .view-cta { display: none; } } .grid-pullout .view-cta svg { width: 6px; height: 8px; margin-left: 12px; transition: all 0.3s; } .grid-pullout .view-cta:hover svg { transform: translateX(4px); } .grid-pullout .view-cta.alt { white-space: nowrap; margin-top: 24px; position: static; display: inline-block; margin-left: 50%; } .grid-pullout .centered-pullout { position: relative; top: 50%; transform: translateY(-50%); padding-bottom: 64px; } @media (max-width: 1170px) { .grid-pullout .centered-pullout { position: static; transform: none; padding-bottom: 0; } } .grid-pullout .centered-pullout .pullout-top { padding-top: 0; height: auto; } .grid-pullout .centered-pullout .pullout-top .content { position: static; } .post__person { position: relative; margin-top: 6px; } .post__person > span { font-family: "Plantin", serif; font-weight: 300; font-size: 11px; line-height: 15px; font-style: italic; } .post__person > a { display: inline-block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 15px; color: #000; } @media (max-width: 600px) { .post__person > a { display: block; } } .post__person > a img { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; transform: translateY(-1px); } .post__person > div { display: inline-block; } @media (max-width: 600px) { .post__person > div { display: block; } } .post__person > div > a { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 15px; color: #000; } .post__person > div > a img { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; transform: translateY(-1px); } @media (min-width: 961px) { .post__person:hover .person-hover { opacity: 1; pointer-events: all; } } .single-feed { padding: 0; margin: 0; list-style: none; height: 295px; position: absolute; top: 0; left: 0; width: 100%; transition: all 0.3s; } @media (max-width: 960px) { .single-feed { height: auto; position: static; display: none; transition: none; margin-top: -1px; } .single-feed.mob-feed, .single-feed:first-child { display: block; } .single-feed.mob-feed li:first-child, .single-feed:first-child li:first-child { background-image: none; } } .single-feed li { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .single-feed li { border-top: 1px dotted #000; } @media (max-width: 960px) { .single-feed li { white-space: nowrap; } } .single-feed li .item-wrap { position: relative; padding: 14px 0 14px 37px; } .single-feed li .item-wrap > a, .single-feed li .item-wrap > span { position: absolute; top: 0; left: 0; bottom: 0; width: 30px; height: 30px; margin: auto; } .single-feed li .item-wrap > a img, .single-feed li .item-wrap > span img { display: block; width: 100%; height: auto; border-radius: 50%; } .single-feed li .item-wrap > span { background: #E5C89A; border-radius: 50%; } .single-feed li .item-wrap > span svg { width: 19px; height: 19px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; margin: auto; } .single-feed li .item-wrap .date_at { position: absolute; top: 10px; right: 0; font-size: 10px; } .single-feed li p { margin: 0; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 13px; line-height: 15px; white-space: nowrap; } @media (max-width: 960px) { .single-feed li p { display: inline-block; vertical-align: middle; } } .single-feed li p a, .single-feed li p span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-style: normal; color: #000; font-size: 12px; } .single-feed li p span.reg { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 13px; line-height: 15px; white-space: nowrap; } .single-feed li p a { text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: all 0.3s; } .single-feed li p a:hover { -webkit-text-decoration-color: #E5C89A; text-decoration-color: #E5C89A; } @media (max-width: 960px) { .single-feed li p + p { margin-top: 0; margin-left: 4px; } } .single-feed li p + p a { text-transform: uppercase; } .city-title { height: 174px; overflow: hidden; background-position: center center; width: 100vw; margin-left: 50%; transform: translateX(-50vw); position: relative; } .city-title h2 { font-size: 216px; line-height: 1; text-transform: uppercase; font-family: "Altissima", helvetica; font-weight: 400; display: inline-block; margin: 0; background-size: cover; -webkit-text-fill-color: transparent; -webkit-background-clip: text; transform: translateY(-13px) translateX(-50%); position: absolute; top: 0; left: 50%; white-space: nowrap; } .city-title .city-title-marquee { display: none; background-position: center center; background-size: cover; white-space: nowrap; height: 174px; } .city-title .city-title-marquee > div { background: #FCFAF5; mix-blend-mode: lighten; height: 175px; } .city-title .city-title-marquee h2 { position: static; -webkit-text-fill-color: #000; -webkit-background-clip: none; transform: translateY(-13px); padding-left: 24px; margin: 0; } .city-title.marquee-mode > h2 { display: none; } .city-title.marquee-mode .city-title-marquee { display: block; } .city-intro { text-align: center; padding-top: 55px; padding-bottom: 80px; border-bottom: solid 1px #000; position: relative; } .city-intro > h3 { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 15px; line-height: 1; margin: 0 0 20px; } .city-intro .city-content { max-width: 611px; margin: 0 auto; font-family: "Grotesk", helvetica; font-size: 15px; line-height: 1.33; } .city-intro .city-content .city-content-wrap { overflow: hidden; transition: all 0.3s; } .city-intro .city-content .city-more-cta, .city-intro .city-content .city-less-cta { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; text-transform: uppercase; cursor: pointer; border-bottom: solid 1px transparent; transition: all 0.3s; } .city-intro .city-content .city-more-cta:hover, .city-intro .city-content .city-less-cta:hover { border-bottom: solid 1px #000; } .city-intro .city-content div:not(.city-content-hidden, .city-content-init) { display: block; margin: 25px 0 0; } @media (max-width: 600px) { .city-intro .city-content div:not(.city-content-hidden, .city-content-init) { font-size: 13px; } } .city-intro .city-content .city-content-hidden { display: none; } .city-intro .city-hero-links { font-size: 0; margin-top: 8px; } .city-intro .city-hero-links a { position: relative; font-size: 0; background: #EAE5DB; padding: 20px 46px; border-radius: 30px; height: 51px; display: inline-block; } .city-intro .city-hero-links a + a { margin-left: 16px; } @media (max-width: 600px) { .city-intro .city-hero-links a + a { margin-left: 8px; } } @media (max-width: 385px) { .city-intro .city-hero-links a + a { margin-left: 0; margin-top: 8px; } } .city-intro .city-hero-links a .location-pin { width: 14px; height: 18px; position: absolute; top: 0; left: 10px; bottom: 0; right: calc(100% - 46px); margin: auto; } .city-intro .city-hero-links a .book_empty { width: 18px; height: 18px; position: absolute; top: 0; left: 10px; bottom: 0; right: calc(100% - 46px); margin: auto; } .city-intro .city-hero-links a > span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; margin: 0; display: block; color: #000; transform: translateY(1px); } @media (max-width: 600px) { .city-intro .city-hero-links a > span { font-size: 10px; } } .city-intro .city-hero-links a .arrow-right { width: 6px; height: 8px; transition: all 0.3s; position: absolute; top: 0; right: 10px; bottom: 0; left: calc(100% - 46px); margin: auto; stroke-width: 1.5; } .city-intro .city-hero-links a:hover .arrow-right { transform: translateX(2px); } .city-intro .city-scroll-cta { position: absolute; bottom: 18px; left: 0; right: 0; margin: auto; width: 35px; height: 35px; border-radius: 50%; background: #EAE5DB; cursor: pointer; } .city-intro .city-scroll-cta svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 11px 0; } .hp-trending-cities.no-move { padding-top: 80px; padding-bottom: 96px; } @media (max-width: 600px) { .hp-trending-cities.no-move { padding-top: 58px; padding-bottom: 75px; } } @media (max-width: 600px) { .hp-trending-cities.no-move .destination-marquee { transition: none; height: 40px; } } .desktop-cities.no-move { margin-top: 10px; } .desktop-cities.no-move .js-marquee { height: 50px; } @media (max-width: 1350px) { .desktop-cities.no-move .js-marquee { height: 3.7vw; } } @media (max-width: 960px) { .desktop-cities.no-move .js-marquee { height: 40px; } } .desktop-cities.no-move .js-marquee a { margin-top: 0; } .city-map-cta { background: #000; height: 340px; position: relative; } @media (max-width: 600px) { .city-map-cta { height: 194px; } } .city-map-cta .map-wrap { width: 100%; height: 100%; } .city-map-cta .content { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; transform: translateY(-50%); } .city-map-cta .content .location-pin { width: 20px; height: 24px; display: inline-block; vertical-align: middle; stroke: #fff; margin-right: 20px; transition: all 0.3s; } @media (max-width: 600px) { .city-map-cta .content .location-pin { width: 12px; height: 14px; margin-right: 16px; } } .city-map-cta .content span { display: inline-block; vertical-align: middle; color: #fff; font-family: "Altissima", helvetica; font-weight: normal; font-size: 60px; letter-spacing: -0.1px; text-transform: uppercase; } @media (max-width: 600px) { .city-map-cta .content span { font-size: 48px; } } .city-map-cta .content .large-arrow { width: 14px; height: 22px; transform: rotate(-90deg); display: inline-block; vertical-align: middle; stroke: #fff; margin-left: 20px; transition: all 0.3s; } @media (max-width: 600px) { .city-map-cta .content .large-arrow { height: 17px; width: 12px; margin-left: 16px; } } .city-map-cta:hover .location-pin { transform: translateX(-4px); } .city-map-cta:hover .large-arrow { transform: rotate(-90deg) translateY(4px); } .city-ymal { padding-top: 73px; padding-bottom: 65px; border-bottom: solid 1px #000; } .city-ymal > h3 { text-align: center; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 15px; line-height: 1; margin: 0 0 22px; } .city-ymal .ymal-title img { margin-bottom: 9px; width: 48px; height: 48px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; display: inline-block; transition: all 0.3s; } .city-ymal .ymal-title h2 { margin: 0; font-family: "Altissima", helvetica; font-weight: normal; font-size: 60px; letter-spacing: -0.1px; line-height: 1; transition: all 0.3s; } @media (max-width: 600px) { .city-ymal .ymal-title h2 { font-size: 52px; } } .city-ymal-grid { display: flex; justify-content: space-between; position: relative; padding-bottom: 14px; } .city-ymal-grid::before { display: block; content: " "; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 1px; background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .city-ymal-grid::before { border-left: 1px dotted #000; } @media (max-width: 600px) { .city-ymal-grid::before { display: none; } } .city-ymal-grid > div { width: calc(50% - 30px); text-align: center; } @media (max-width: 600px) { .city-ymal-grid > div { width: 100%; } } .city-ymal-grid > div p { max-width: 480px; margin: 8px auto 20px; font-family: "Grotesk", helvetica; font-size: 15px; line-height: 1.33; } .city-ymal-grid > div p span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11.5px; } .city-ymal-grid > div > a { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; color: #000; position: relative; } .city-ymal-grid > div > a svg { display: inline-block; vertical-align: middle; width: 8px; height: 12px; transform: rotate(-90deg) translateX(1px); margin-left: 12px; transition: all 0.3s; position: relative; left: 0; } .city-ymal-grid > div > a:hover svg { left: 3px; } @media (max-width: 600px) { .city-ymal-grid > div:last-child { display: none; } } .city-tips-section { display: flex; justify-content: space-between; padding-top: 54px; padding-bottom: 54px; border-bottom: solid 1px #000; } @media (max-width: 960px) { .city-tips-section { display: block; padding-bottom: 86px; } } .city-tips-section .city-tips-title { text-align: center; position: relative; transform: translateY(-50%); align-self: flex-start; } @media (max-width: 960px) { .city-tips-section .city-tips-title { width: 100%; position: static; transform: none; } } .city-tips-section .city-tips-title > span { width: 50px; height: 50px; display: block; margin: 0 auto; border-radius: 50%; position: relative; } @media (max-width: 1350px) { .city-tips-section .city-tips-title > span { width: 3.7vw; height: 3.7vw; } } @media (max-width: 960px) { .city-tips-section .city-tips-title > span { width: 40px; height: 40px; display: inline-block; vertical-align: middle; transform: translateY(3px); } } .city-tips-section .city-tips-title > span svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 20px; height: 20px; margin: auto; } @media (max-width: 960px) { .city-tips-section .city-tips-title > span svg { width: 15px; height: 15px; } } .city-tips-section .city-tips-title h2 { margin: 0; font-family: "Altissima", helvetica; font-weight: normal; font-size: 60px; letter-spacing: -0.1px; line-height: 1; text-transform: uppercase; transform: translateY(13%); } @media (max-width: 1350px) { .city-tips-section .city-tips-title h2 { font-size: 4.4vw; } } @media (max-width: 960px) { .city-tips-section .city-tips-title h2 { font-size: 48px; display: inline-block; vertical-align: middle; margin-left: 6px; } } .city-tips-section .city-tips-title h2 svg { display: inline-block; vertical-align: top; width: 11px; height: 11px; } .city-tips-section .city-tips-wrap { margin: 0; padding: 0; background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .city-tips-section .city-tips-wrap { border-top: 1px dotted #000; } @media (max-width: 960px) { .city-tips-section .city-tips-wrap { width: 100%; position: static; transform: none; margin: 30px 0; } } .city-tips-section .city-tips-wrap > li { list-style: none; position: relative; background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .city-tips-section .city-tips-wrap > li { border-bottom: 1px dotted #000; } .city-tips-section .city-tips-wrap > li:hover span::after { opacity: 1; } .city-tips-section .city-tips-wrap > li > span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 15px; line-height: 1; text-transform: uppercase; cursor: pointer; display: block; padding: 22px 0; } @media (max-width: 600px) { .city-tips-section .city-tips-wrap > li > span { font-size: 15px; padding: 19px 0; } } .city-tips-section .city-tips-wrap > li > span::after { content: " "; display: block; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background: #000; opacity: 0; transition: all 0.3s; } .city-tips-section .city-tips-wrap > li > span svg { float: right; width: 12px; height: 9px; margin-top: 5px; transition: all 0.3s; } .city-tips-section .city-tips-wrap > li > span.active svg { transform: rotate(180deg); } .city-tips-section .city-tips-wrap .city-tip { padding-bottom: 22px; font-size: 17px; line-height: 1.4; font-family: "Grotesk", helvetica; font-weight: normal; display: none; } @media (max-width: 600px) { .city-tips-section .city-tips-wrap .city-tip { font-size: 14px; } } .city-tips-section .city-tips-wrap .city-tip div { margin: 0; } .city-tips-section .city-tips-wrap .city-tip div + div { margin-top: 16px; } .city-tips-section .city-tips-wrap .city-tip ul { padding: 0; margin: 0 0 16px; } .city-tips-section .city-tips-wrap .city-tip ul li { list-style: none; padding-left: 30px; position: relative; } .city-tips-section .city-tips-wrap .city-tip ul li::before { content: " "; display: block; width: 14px; height: 2px; position: absolute; top: 9px; left: 0; background: #E5C89A; } .city-tips-section .city-tips-wrap .city-tip ul li + li { margin-top: 6px; } .city-tips-section .city-tips-wrap .city-tip ol { padding: 0; margin: 0 0 16px; counter-reset: orderedList; } .city-tips-section .city-tips-wrap .city-tip ol li { list-style: none; padding-left: 30px; position: relative; counter-increment: orderedList; } .city-tips-section .city-tips-wrap .city-tip ol li::before { content: counter(orderedList) "."; display: block; position: absolute; top: 0; left: 0; color: #96907F; } .city-tips-section .city-tips-wrap .city-tip ol li + li { margin-top: 6px; } .city-tips-section .city-tips-info { text-align: center; position: relative; transform: translateY(-50%); align-self: flex-start; } @media (max-width: 960px) { .city-tips-section .city-tips-info { width: 100%; position: static; transform: none; display: flex; justify-content: space-between; } } @media (max-width: 960px) { .city-tips-section .city-tips-info div { width: calc(50% - 15px); } } .city-tips-section .city-tips-info div + div { margin-top: 28px; } @media (max-width: 960px) { .city-tips-section .city-tips-info div + div { margin-top: 0; } } .city-tips-section .city-tips-info h4 { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; text-transform: uppercase; margin: 0 0 8px; } @media (max-width: 600px) { .city-tips-section .city-tips-info h4 { font-size: 9px; margin: 0 0 10px; } } .city-tips-section .city-tips-info h3 { font-family: "Clearface", serif; font-size: 20px; line-height: 1; font-weight: normal; margin: 0; } @media (max-width: 600px) { .city-tips-section .city-tips-info h3 { font-size: 17px; } } .city-grid-gate { position: absolute; left: 0; width: 100%; padding-top: 0; padding-bottom: 0; z-index: 2; text-align: center; padding-top: 0 !important; padding-bottom: 0 !important; } .city-grid-gate__shade { position: absolute; left: 0; width: 100%; background: linear-gradient(0deg, #fcfaf4 50%, transparent); z-index: 1; } .city-grid-gate__inner { background: #000; color: #fff; border-radius: 30px; padding: 56px 24px 70px; position: relative; z-index: 2; } @media (max-width: 600px) { .city-grid-gate__inner { padding: 32px 24px; } } .city-grid-gate__inner h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; margin: 0 0 14px; font-size: 42px; line-height: 1; } @media (max-width: 440px) { .city-grid-gate__inner h2 { font-size: 36px; } } .city-grid-gate__inner p { font-family: "Grotesk", helvetica; font-size: 14px; line-height: 1.4; margin: 0 0 24px; letter-spacing: 0.5px; } .city-grid-gate__inner a { color: #fff; text-decoration: underline; } .city-grid-gate .register-cta { width: 230px; background: #E5C89A; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; color: #000; text-align: left; padding: 24px; border: 0; border-radius: 30px; display: block; cursor: pointer; transition: all 0.3s; margin: 0 auto; text-decoration: none; } .city-grid-gate .register-cta svg { width: 11px; height: 12px; float: right; } .city-grid-gate .register-cta:hover { background: #fff; } .city-grid-gate .login-cta-wrap { font-family: "Plantin", serif; font-weight: 400; font-style: italic; font-size: 13px; line-height: 19px; letter-spacing: 0.1px; text-align: center; margin-top: 20px; } .city-grid-gate .login-cta-wrap span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-style: normal; cursor: pointer; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; font-size: 13px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; transition: all 0.3s; } .city-grid-gate .login-cta-wrap span:hover { -webkit-text-decoration-color: #fff; text-decoration-color: #fff; } .city-suggest { border-bottom: solid 1px #000; padding: 86px 30px; text-align: center; } @media (max-width: 600px) { .city-suggest { padding: 50px 20px; } } .city-suggest h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 80px; line-height: 1; font-weight: normal; margin: 0; } @media (max-width: 600px) { .city-suggest h2 { font-size: 48px; } } .city-suggest p { font-family: "Grotesk", helvetica; font-size: 16px; line-height: 22px; margin: 11px auto 0; max-width: 826px; } .city-suggest .button { margin-top: 36px; padding-left: 50px; padding-right: 36px; width: auto; max-width: 100%; display: inline-block; color: #FCFAF5; } .city-suggest .button svg { position: absolute; top: 0; bottom: 0; left: 20px; width: 18px; height: 22px; fill: #000; transform: none; margin: auto; right: auto; } section.destination-blog { margin: 0; background: transparent; color: #000; border-bottom: solid 1px #000; } section.destination-blog .destination-blog__title small { font-family: "Plantin", serif; font-weight: normal; font-style: italics; margin-bottom: 6px; } section.destination-blog .destination-blog__title p { margin: 12.5px 0 0; font-family: "Plantin", serif; font-style: italics; font-size: 15px; line-height: 18px; padding: 0 36px; } section.destination-blog .destination-blog__slider { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 section.destination-blog .destination-blog__slider { border-left: 1px dotted #000; } @media (max-width: 960px) { section.destination-blog .destination-blog__slider { background: none; padding-left: 20px; padding-right: 20px; display: flex; } } @media (max-width: 960px) { section.destination-blog .destination-blog__slider::after { content: " "; display: inline-block; width: 20px; flex-shrink: 0; } } section.destination-blog .destination-blog__slider .slick-list { overflow: visible; } section.destination-blog .slider-post .content a { color: #000; } section.destination-blog .slider-post:not(:first-child) { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 section.destination-blog .slider-post:not(:first-child) { border-left: 1px dotted #000; } @media (max-width: 960px) { section.destination-blog .slider-post:not(:first-child) { background: none !important; } } @media (max-width: 960px) { section.destination-blog .slider-post:not(:first-child)::before { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 section.destination-blog .slider-post:not(:first-child)::before { border-left: 1px dotted #000; } } section.destination-blog.no-slider .controls { display: none !important; } section.destination-blog.no-slider .destination-blog__slider { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 800px) { section.destination-blog.no-slider .destination-blog__slider { grid-column-gap: 18px; } } @media (max-width: 800px) { section.destination-blog.no-slider .slider-post { width: 100%; margin-left: 0 !important; } } .mob-map-controls { position: fixed; bottom: 90px; width: 146px; left: 0; right: 0; margin: auto; z-index: 4; display: none; opacity: 0; pointer-events: none; transition: all 0.3s; } @media (max-width: 800px) { .mob-map-controls { display: flex; } } .mob-map-controls.show { opacity: 1; pointer-events: all; } .mob-map-controls span { width: 50%; background: #CCC7BD; text-align: center; padding: 13.5px 0; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; border-radius: 20px 0 0 20px; transition: all 0.3s; cursor: pointer; } .mob-map-controls span + span { border-radius: 0 20px 20px 0; } .mob-map-controls span.active { background: #EAE5DB; } .mob-map-controls svg { margin-right: 6px; display: inline-block; vertical-align: bottom; } .mob-map-controls .location-pin { width: 10px; height: 12px; } .mob-map-controls .list-icon { width: 14px; height: 12px; } .map-blocker { width: 100%; height: 100%; background: transparent; position: fixed; z-index: 10; } .map-blocker.filters { position: absolute; } .map-filter-blocker-wrapper { position: relative; } .map-filter-blocker-wrapper .map-filter-blocker { width: 100%; height: 100%; background: transparent; position: absolute; z-index: 10; } .map-main { position: fixed; width: 60%; top: 66px; bottom: 0; left: auto; right: 0; background: #CCC7BD; z-index: 7; } @media (max-width: 1080px) { .map-main { width: 50%; } } @media (max-width: 800px) { .map-main { width: 100%; top: 106px; transform: translateX(-100%); transition: all 0.3s; z-index: 4; bottom: 74px; } .map-main.show { transform: translateX(0); } } .map-main .loader, .map-main .sas-loading-modal .new-loader, .sas-loading-modal .map-main .new-loader { position: absolute; background: none; z-index: 1; pointer-events: none; } .map-main .loader .star-wrapper, .map-main .sas-loading-modal .new-loader .star-wrapper, .sas-loading-modal .map-main .new-loader .star-wrapper { border-radius: 50%; height: 69px; padding: 6px; } @keyframes scaleDown { 0% { transform: scale(1); } 25% { transform: scale(0); } 75% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes rotate { 0% { transform: rotate(0deg); } 25% { transform: rotate(0deg); } 75% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } } .map-main .loader .star-wrapper .star, .map-main .sas-loading-modal .new-loader .star-wrapper .star, .sas-loading-modal .map-main .new-loader .star-wrapper .star { animation-name: rotate; animation-duration: 4s; animation-iteration-count: infinite; } .map-main .loader .star-wrapper .mask, .map-main .sas-loading-modal .new-loader .star-wrapper .mask, .sas-loading-modal .map-main .new-loader .star-wrapper .mask { margin: auto; animation-name: scaleDown; animation-duration: 4s; animation-iteration-count: infinite; fill: #CCC7BD; } .map-main .map-cta { position: absolute; left: 20px; bottom: 20px; background: #EAE5DB; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; color: #000; padding: 10px 20px; border-radius: 15px; transition: all 0.3s; } @media (max-width: 800px) { .map-main .map-cta { display: none; } } .map-main .map-cta svg { width: 6px; height: 9px; margin-left: 8px; } .map-main .map-cta:hover { transform: translateY(-3px); } .map-cats { position: fixed; z-index: 6; background: #FCFAF5; width: 40%; padding: 0px 50px; display: flex; justify-content: space-between; transition: all 0.3s; top: 66px; left: 0; } @media (max-width: 1450px) { .map-cats { padding: 0px 30px; } } @media (max-width: 1080px) { .map-cats { width: 50%; } } @media (max-width: 960px) { .map-cats { padding: 0px 24px; } } @media (max-width: 800px) { .map-cats { width: 100%; padding: 0px 24px; top: 50px; z-index: 6; } } .map-cats::after { content: " "; display: block; top: 100%; left: 0; right: 0; height: 1px; background: #000; position: absolute; transition: all 0.3s; } .map-cats .map-cat-buttons { align-self: center; font-size: 0; padding: 16px 0px; } .map-cats .map-cat-buttons span { display: inline-block; vertical-align: middle; padding: 9px 16px 9px; font-size: 12px; letter-spacing: 0.3px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; line-height: 1; text-transform: uppercase; border-radius: 15px; cursor: pointer; transition: all 0.3s; } @media (max-width: 800px) { .map-cats .map-cat-buttons span { font-size: 11px; padding: 9px 12px; } } .map-cats .map-cat-buttons span + span { margin-left: 12px; } @media (max-width: 600px) { .map-cats .map-cat-buttons span + span { margin-left: 8px; } } .map-cats .map-cat-buttons span svg { width: 8px; height: 8px; stroke-width: 3; margin-left: 8px; transition: all 0.3s; margin-top: -1px; } @media (max-width: 800px) { .map-cats .map-cat-buttons span svg { width: 6px; height: 8px; margin-top: 0; } } .map-cats .map-cat-buttons span.dis { background: #EAE5DB; opacity: 0.62; } .map-cats .map-cat-buttons span.dis svg { transform: rotate(45deg); } .map-cats .map-cat-buttons span:hover { transform: translateY(-2px); } .map-cats .map-cat-buttons ul li span { display: inline-block; vertical-align: middle; padding: 9px 16px 9px; font-size: 12px; letter-spacing: 0.3px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; line-height: 1; text-transform: uppercase; border-radius: 15px; cursor: pointer; transition: all 0.3s; } @media (max-width: 800px) { .map-cats .map-cat-buttons ul li span { font-size: 11px; padding: 9px 12px; } } .map-cats .map-cat-buttons ul li span svg { width: 8px; height: 8px; stroke-width: 3; margin-left: 8px; transition: all 0.3s; margin-top: -1px; } @media (max-width: 800px) { .map-cats .map-cat-buttons ul li span svg { width: 6px; height: 8px; margin-top: 0; } } .map-cats .map-cat-buttons ul li span.dis { background: #EAE5DB; opacity: 0.62; } .map-cats .map-cat-buttons ul li span.dis svg { transform: rotate(45deg); } .map-cats .map-cat-buttons ul li span:hover { transform: translateY(-2px); } .map-cats .map-cat-buttons ul li .bg-Sleep { background: #acddf4; } .map-cats .map-cat-buttons ul li .bg-Eat { background: #ffc296; } .map-cats .map-cat-buttons ul li .bg-Play { background: #f5c9d1; } .map-cats .map-cat-buttons ul li + li { margin-left: 12px; } @media (max-width: 600px) { .map-cats .map-cat-buttons ul li + li { margin-left: 8px; } } .map-cats .filter-toggle { align-self: center; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; line-height: 1; cursor: pointer; padding: 16px 0px; text-transform: capitalize; } .map-cats .filter-toggle::before { position: absolute; top: 0; right: 0; width: 156px; background: #EAE5DB; content: " "; display: block; height: 62px; opacity: 0; transition: all 0.3s; } @media (max-width: 1450px) { .map-cats .filter-toggle::before { width: 116px; } } @media (max-width: 800px) { .map-cats .filter-toggle::before { display: none; } } .map-cats .filter-toggle span { padding-top: 2px; position: relative; } .map-cats .filter-toggle .text-open { display: block; } .map-cats .filter-toggle .text-close { display: none; } .map-cats .filter-toggle svg { vertical-align: middle; transform: translateY(-2px); margin-left: 12px; transition: all 0.3s; } .map-cats .filter-toggle svg.filter { width: 18px; height: 13px; } .map-cats .filter-toggle svg.close { width: 13px; height: 13px; stroke-width: 2; } @media (min-width: 801px) { .map-cats .filter-toggle:hover::before { opacity: 1; } } .map-filters { position: fixed; top: 66px; left: 0; width: calc(40% + 50px); height: calc(100% - 66px); background: #EAE5DB; z-index: 5; transition: all 0.3s; transform: translateY(-100%); padding-top: 90px; overflow-x: hidden; overflow-y: auto; padding-right: 50px; padding-bottom: 66px; } @media (max-width: 1080px) { .map-filters { width: calc(50% + 50px); } } @media (max-width: 800px) { .map-filters { width: 100%; top: 50px; height: calc(100% - 50px - 74px); } } .map-filters::after { content: " "; display: block; width: 40%; position: fixed; bottom: 0; left: 0; height: 66px; background-image: linear-gradient(rgba(234, 229, 219, 0), #eae5db 75%); pointer-events: none; } @media (max-width: 1080px) { .map-filters::after { width: 50%; } } @media (max-width: 800px) { .map-filters::after { width: 100%; } } @media (max-width: 800px) { .map-filters { padding-right: 0; position: fixed; top: 50px; z-index: 5; } } .map-filters .filter-section { margin-left: 50px; margin-right: 50px; position: relative; } @media (max-width: 1450px) { .map-filters .filter-section { margin-left: 30px; margin-right: 30px; } } .map-filters .filter-section h3 { font-family: "Bureau Grot Bk", helvetica; font-size: 12px; letter-spacing: 0.41px; text-transform: uppercase; font-weight: normal; margin: 0; } .map-filters .filter-section h3 span { margin-left: 12px; background: #E5C89A; border-radius: 50%; color: #000; position: relative; font-family: "Grotesk", helvetica; width: 20px; height: 20px; display: inline-block; text-align: center; font-size: 12px; padding-top: 3px; margin-top: -8px; margin-bottom: -8px; } .map-filters .filter-section h3 span div { position: absolute; bottom: 100%; left: 0; background: #000; color: #fff; width: 250px; left: 50%; transform: translateX(-50%); margin-bottom: 12px; text-align: center; padding: 10px 20px 12px; text-transform: none; opacity: 0; pointer-events: none; transition: all 0.3s; border-radius: 25px; font-size: 13px; } .map-filters .filter-section h3 span div::before { content: " "; display: block; width: 0; height: 0; border-top: solid #000 6px; border-left: solid transparent 4px; border-right: solid transparent 4px; position: absolute; top: 100%; left: 0; right: 0; margin: auto; } @media (min-width: 961px) { .map-filters .filter-section h3 span:hover div { opacity: 1; } } @media (max-width: 960px) { .map-filters .filter-section h3 span.active div { opacity: 1; } } .map-filters .filter-section h3.price-filter-title, .map-filters .filter-section h3.filter-info-popup-trigger { display: inline-block; } @media (max-width: 960px) { .map-filters .filter-section h3.price-filter-title, .map-filters .filter-section h3.filter-info-popup-trigger { cursor: pointer; } } .map-filters .filter-section h3.price-filter-title span, .map-filters .filter-section h3.filter-info-popup-trigger span { width: 12px; height: 12px; display: inline-block; padding: 0; background: none; margin: 0 0 -1px 4px; } .map-filters .filter-section h3.price-filter-title span svg, .map-filters .filter-section h3.filter-info-popup-trigger span svg { display: block; width: 100%; height: 100%; } @media (min-width: 961px) { .map-filters .filter-section h3.price-filter-title:hover + .price-tooltip, .map-filters .filter-section h3.filter-info-popup-trigger:hover + .price-tooltip { opacity: 1; } } @media (max-width: 960px) { .map-filters .filter-section h3.price-filter-title.active + .price-tooltip, .map-filters .filter-section h3.filter-info-popup-trigger.active + .price-tooltip { opacity: 1; pointer-events: all; } } .map-filters .filter-section .filter-section-content { display: contents; } .map-filters .filter-section + .filter-section { margin-top: 28px; padding-top: 28px; background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .map-filters .filter-section + .filter-section { border-top: 1px dotted #000; } .map-filters .filter-section .price-tooltip p.info { font-style: normal; font-family: "Grotesk", helvetica; font-size: 14px; line-height: 16px; } .map-filters .filter-section.dis { display: none; } .map-filters .wishlist-switch { position: absolute; top: 0; bottom: 0; right: 0; height: 30px; width: 60px; margin: auto; background: #D6D2C8; border-radius: 15px; transition: all 0.3s; cursor: pointer; } .map-filters .wishlist-switch.followers-switch { top: 30px; } .map-filters .wishlist-switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FCFAF5; transition: all 0.3s; } .map-filters .wishlist-switch.active { background: #E5C89A; } .map-filters .wishlist-switch.active span { left: calc(100% - 27px); } .map-filters .wishlist-switch:hover { transform: translateY(-2px); } .map-filters .price-filters { position: absolute; height: 30px; right: 0; top: 28px; bottom: 0; margin: auto; font-size: 0; } .map-filters .price-filters span { display: inline-block; vertical-align: middle; height: 30px; border-radius: 15px; background: #D6D2C8; font-family: "Grotesk", helvetica; font-size: 12px; letter-spacing: 0.11px; line-height: 1; padding: 10.5px 11.5px 6.5px; cursor: pointer; transition: all 0.3s; } .map-filters .price-filters span + span { margin-left: 6px; } .map-filters .price-filters span.active { background: #E5C89A; } .map-filters .price-filters span:hover { transform: translateY(-2px); } .map-filters .price-filters span svg { height: 8px; width: 10px; stroke: black; } @media (max-width: 400px) { .map-filters .price-filters span svg { width: 8px; } } .map-filters .check-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 12px; grid-column-gap: 12px; width: 100%; margin-top: 15px; } .map-filters .check-grid label { position: relative; font-family: "Grotesk", helvetica; font-size: 13px; cursor: pointer; padding-left: 24px; } .map-filters .check-grid label span { display: inline-block; vertical-align: sub; width: 15px; height: 15px; background: #D6D2C8; margin-right: 6px; transition: all 0.3s; position: absolute; top: 0px; left: 0; } .map-filters .check-grid label span svg { position: absolute; width: 12px; height: 10px; bottom: 5px; left: 3px; stroke-width: 0.5; opacity: 0; transition: all 0.3s; } .map-filters .check-grid label input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; } .map-filters .check-grid label input:checked + span svg { opacity: 1; } .map-filters .check-grid label:hover span { transform: translateY(-2px); } .map-filters .check-grid + .check-grid { margin-top: 0; padding-top: 12px; } .map-filters .more-checks-toggle { display: inline-block; cursor: pointer; font-size: 0; line-height: 0; margin-top: 15px; transition: all 0.3s; } .map-filters .more-checks-toggle span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; letter-spacing: 0.41px; line-height: 1; text-transform: uppercase; display: inline-block; } .map-filters .more-checks-toggle span::before { content: "more"; } .map-filters .more-checks-toggle svg { width: 10px; height: 7px; margin-left: 8px; margin-top: -2px; transition: all 0.3s; } .map-filters .more-checks-toggle.active span::before { content: "less"; } .map-filters .more-checks-toggle.active svg { transform: rotate(180deg); } .map-filters .more-checks-toggle:hover { transform: translateY(-2px); } .map-sidebar.filtered .map-filters.filter-active { padding-bottom: 161px; } .map-sidebar.filtered .map-filters.filter-active::after { height: 161px; } .map-sidebar.filtered .map-filters.filter-active .filtered-controls { opacity: 1; pointer-events: all; } .map-sidebar.filtered .map-cats .filter-toggle .text-open { display: none; } .map-sidebar.filtered .map-cats .filter-toggle .text-close { display: block; } .filtered-controls { position: fixed; bottom: 0; left: 0; width: 40%; padding: 0 30px 30px; display: flex; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 3; justify-content: space-between; transition-delay: 0.3s; } @media (max-width: 1080px) { .filtered-controls { width: 50%; } } @media (max-width: 960px) { .filtered-controls { padding: 0 24px 24px; } } @media (max-width: 800px) { .filtered-controls { width: 100%; bottom: 74px; } } .filtered-controls .clear-filters { width: 99px; text-align: center; padding: 26px 0 25px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 14px; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; background: #FCFAF5; align-self: center; cursor: pointer; border-radius: 30px; transition: all 0.3s; } .filtered-controls .clear-filters:hover { transform: translateY(-3px); } .filtered-controls .show-filters { width: calc(100% - 119px); padding: 26px 22px 25px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 14px; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; align-self: center; background: #000; color: #E8E0CC; cursor: pointer; border-radius: 30px; transition: all 0.3s; } .filtered-controls .show-filters:hover { transform: translateY(-3px); } .filtered-controls .show-filters small { float: right; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; text-transform: none; } .map-sidebar { width: calc(40% + 50px); top: 66px; bottom: 0; left: 0; right: auto; background: #FCFAF5; z-index: 1; padding-right: 50px; overflow-y: auto; overflow-x: hidden; transition: all 0.3s; } @media (max-width: 1080px) { .map-sidebar { width: calc(50% + 50px); } } @media (max-width: 800px) { .map-sidebar { position: static; width: 100%; padding-right: 0; overflow: inherit; } } .map-sidebar .main-footer { border-top: solid 1px #000; margin-top: -12px; margin: -13px 50px 64px; padding: 115px 0 30px; position: relative; } @media (max-width: 1450px) { .map-sidebar .main-footer { margin: -13px 30px 64px; } } @media (max-width: 960px) { .map-sidebar .main-footer { margin: -13px 24px 64px; padding: 115px 0 24px; } } .map-sidebar .main-footer .footer-col { width: 50%; margin-bottom: 42px; } .map-sidebar .main-footer .footer-col.footer-logo { position: absolute; top: 46px; text-align: center; width: 100%; left: 0; } .map-sidebar .main-footer .footer-col svg { width: 40px; height: 40px; } .map-sidebar .main-footer .footer-credit { margin-bottom: 50px; } .map-sidebar.filtered { overflow: hidden; } .map-sidebar.filtered .map-cats { background: #EAE5DB; } .map-sidebar.filtered .map-cats .map-cat-buttons span.dis { backgrwound: #D6D2C8; } .map-sidebar.filtered .map-cats::after { margin: 0 50px; } @media (max-width: 1450px) { .map-sidebar.filtered .map-cats::after { margin: 0 30px; } } @media (max-width: 800px) { .map-sidebar.filtered .map-cats::after { margin: 0 24px; } } .map-sidebar.filtered .map-filters { transform: none; } .map-list { padding-top: 63px; padding-bottom: 0; position: relative; } @media (max-width: 800px) { .map-list { padding-top: 55px; } } .map-list-gate { position: absolute; bottom: 12px; left: 0; width: 100%; padding-top: 0; padding-bottom: 0; z-index: 3; padding-top: 0; } .map-list-gate.user-list { position: relative; padding-top: 50px; } .map-list-gate::before { content: " "; display: block; width: 100%; height: 60%; position: absolute; bottom: calc(100% - 80px); left: 0; background: linear-gradient(0deg, #fcfaf4, transparent); } @media (max-width: 1450px) { .map-list-gate::before { bottom: calc(100% - 60px); } } @media (max-width: 960px) { .map-list-gate::before { bottom: calc(100% - 50px); } } .map-list-gate__inner { background: #000; color: #fff; border-radius: 30px; padding: 36px; position: relative; } @media (max-width: 1170px) { .map-list-gate__inner { padding: 36px 24px; } } .map-list-gate__inner h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; margin: 0 0 14px; font-size: 42px; line-height: 1; } @media (max-width: 440px) { .map-list-gate__inner h2 { font-size: 36px; } } .map-list-gate__inner p { font-family: "Grotesk", helvetica; font-size: 14px; line-height: 1.4; margin: 0 0 24px; letter-spacing: 0.5px; } .map-list-gate__inner a { color: #fff; text-decoration: underline; } .map-list-gate__buttons { display: flex; align-items: center; } @media (max-width: 440px) { .map-list-gate__buttons { display: block; } } .map-list-gate .register-cta { width: 50%; background: #E5C89A; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; color: #000; text-align: left; padding: 24px; border: 0; border-radius: 30px; display: block; cursor: pointer; transition: all 0.3s; } @media (max-width: 1170px) { .map-list-gate .register-cta { width: 150px; } } @media (max-width: 800px) { .map-list-gate .register-cta { width: 50%; } } @media (max-width: 600px) { .map-list-gate .register-cta { width: 150px; } } @media (max-width: 440px) { .map-list-gate .register-cta { width: 100%; margin: 0 auto 12px; } } .map-list-gate .register-cta svg { width: 11px; height: 12px; float: right; } .map-list-gate .register-cta:hover { background: #fff; } .map-list-gate .login-cta-wrap { font-family: "Plantin", serif; font-weight: 400; font-style: italic; font-size: 13px; line-height: 19px; letter-spacing: 0.1px; width: 50%; text-align: center; } @media (max-width: 1170px) { .map-list-gate .login-cta-wrap { width: calc(100% - 150px); } } @media (max-width: 800px) { .map-list-gate .login-cta-wrap { width: 50%; } } @media (max-width: 600px) { .map-list-gate .login-cta-wrap { width: calc(100% - 150px); } } @media (max-width: 440px) { .map-list-gate .login-cta-wrap { width: 100%; } } .map-list-gate .login-cta-wrap span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-style: normal; cursor: pointer; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; font-size: 13px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; transition: all 0.3s; } .map-list-gate .login-cta-wrap span:hover { -webkit-text-decoration-color: #fff; text-decoration-color: #fff; } .mob-map-trigger { width: auto; margin: 0 -24px; height: 150px; background: #000; cursor: pointer; position: relative; display: none; } @media (max-width: 800px) { .mob-map-trigger { display: block; } } .mob-map-trigger .map-wrap { width: 100%; height: -moz-fit-content; height: fit-content; } .mob-map-trigger .map-wrap .city-map-cta { height: 100%; } .mob-map-trigger .content { position: absolute; top: 50%; left: 0; color: #fff; width: 100%; bottom: 0; margin: auto; height: 75px; } .mob-map-trigger .content .location-pin { width: 12px; height: 14px; display: block; margin: 0 auto 12px; stroke: #FCFAF5; } .mob-map-trigger .content span { font-family: "Altissima", helvetica; font-weight: normal; font-size: 36px; line-height: 1; margin: 0; display: block; text-align: center; } .mob-map-trigger .content .arrow-down { width: 10px; height: 7px; stroke: #fff; margin: 6px auto 0; display: block; } .map-list-header { margin-bottom: 12px; display: flex; justify-content: space-between; background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 35px; padding-bottom: 12px; } .ie9 .map-list-header { border-bottom: 1px dotted #000; } @media (max-width: 800px) { .map-list-header { margin-top: 24px; } } .map-list-header .map-count { font-family: "Plantin", serif; font-weight: 300; font-size: 12px; line-height: 1; font-style: italic; transform: translateY(3px); } .map-list-header .map-count span { font-family: "Grotesk", helvetica; font-style: normal; } .map-list-header .map-count .tags { display: inline; font-style: normal; } .map-list-header .map-count .tags::before { content: " "; display: inline-block; width: 9px; height: 1px; background: #000; margin: 0 3px; vertical-align: middle; } .map-list-header .map-count .tags span:not(.tags-edit) { display: inline-block; vertical-align: middle; font-family: "Grotesk", helvetica; font-size: 13px; color: #000; line-height: 1.4; transform: none; } .map-list-header .map-count .tags small { font-size: 100%; margin-right: 6px; } .map-list-header .map-count .tags .tags-edit { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; border-bottom: solid 1px #EAE5DB; padding-bottom: 1px; display: inline-block; vertical-align: top; margin-top: 0; margin-left: 0; cursor: pointer; transition: all 0.3s; transform: translateY(0px) translateX(2px); } .map-list-header .map-count .tags .tags-edit:hover { transform: translateY(-3px) translateX(2px); } .map-list-header .map-count .tags span:nth-last-child(2) { margin-right: 6px; } .map-list-header .map-count .tags span:nth-last-child(2) small { display: none; } .map-list-header .map-sort { position: relative; z-index: 3; white-space: nowrap; } .map-list-header .map-sort .map-sort-cta { font-family: "Plantin", serif; font-weight: 300; font-size: 12px; line-height: 1; font-style: italic; position: relative; z-index: 2; cursor: pointer; margin-top: 2px; padding-left: 6px; } .map-list-header .map-sort .map-sort-cta span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: 0.3px; line-height: 1; margin-right: 6px; font-style: normal; transform: translateY(1px); display: inline-block; text-transform: uppercase; } .map-list-header .map-sort .map-sort-dd { position: absolute; top: -18px; right: -16px; background: #EAE5DB; width: 174px; padding: 62px 34px 40px 0; text-align: right; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: all 0.3s; } .map-list-header .map-sort .map-sort-dd span { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: 0.41px; line-height: 1; text-transform: uppercase; cursor: pointer; } .map-list-header .map-sort .map-sort-dd span:hover { text-decoration: underline; -webkit-text-decoration-color: #000; text-decoration-color: #000; } .map-list-header .map-sort .map-sort-dd span + span { margin-top: 15px; } .map-list-header .map-sort svg { width: 10px; height: 7px; transition: all 0.3s; } @media (min-width: 801px) { .map-list-header .map-sort:hover:not(.disabled) .map-sort-cta svg { transform: rotate(180deg); } .map-list-header .map-sort:hover:not(.disabled) .map-sort-dd { opacity: 1; pointer-events: all; transform: none; } } .map-list-header .map-sort.active .map-sort-cta svg { transform: rotate(180deg); } .map-list-header .map-sort.active .map-sort-dd { opacity: 1; pointer-events: all; transform: none; } .map-list-header .map-sort.disabled .map-sort-cta { color: #515151; } .map-list-header .map-sort.disabled svg { stroke: #515151; } .map-list-header .map-sort.disabled .map-sort-dd { display: none; } .btn-load-more-container { padding: 10px; text-align: center; margin-bottom: 20px; } .btn-load-more-container .btn-load-more { width: 100%; background: #f1ede5; border-radius: 30px; padding: 15px 20px; font-size: 13px; transition: 0.5s ease; } .btn-load-more-container .btn-load-more:hover { background: #000000; color: #fff; } .map-post { display: flex; text-align: center; justify-content: space-between; padding-bottom: 12px; background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-bottom: 12px; position: relative; } .ie9 .map-post { border-bottom: 1px dotted #000; } .map-post > small { display: inline-block; font-size: 8px; font-style: normal; font-family: "Bureau Grot Bk", helvetica; color: #000; background: #E5C89A; width: 30px; text-align: center; border-radius: 7px; padding: 1.5px 0; text-transform: uppercase; position: absolute; top: 10px; left: 14px; z-index: 1; } .map-post .badge-wrap { position: absolute; top: 0; left: -18px; bottom: 0; margin: auto; width: 36px; height: 36px; font-size: 0; display: none; } .map-post .badge-wrap .badge-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; fill: #E5C89A; } .map-post .badge-wrap .solo-check { position: relative; z-index: 2; width: 6px; height: 5px; display: block; margin: 9px auto 0; } .map-post .badge-wrap small { position: relative; z-index: 2; font-family: "Bureau Grot Bk", helvetica; font-size: 9.5px; line-height: 1; margin-top: 3px; display: block; } .map-post .post-wishlist-button { position: absolute; opacity: 0; transition: all 0.3s; cursor: pointer; z-index: 1; top: 0; right: 50%; padding: 12px 17px; } @media (max-width: 960px) { .map-post .post-wishlist-button { opacity: 1; } } .map-post .post-wishlist-button svg { width: 21px; height: 25px; transition: all 0.3s; } .map-post .post-wishlist-button:hover > svg, .map-post .post-wishlist-button.active > svg { fill: #E5C89A; } .map-post .post-wishlist-button::after { content: " "; display: block; width: 7px; height: 2px; position: absolute; top: 9px; left: 7px; background: #000; opacity: 0; transition: all 0.3s; } .map-post .post-wishlist-button.active::after { opacity: 1; } .map-post .post-wishlist-button.active.active-eat svg { fill: #FFC296; stroke: transparent; } .map-post .post-wishlist-button.active.active-sleep svg { fill: #ACDDF4; stroke: transparent; } .map-post .post-wishlist-button.active.active-play svg { fill: #F5C9D1; stroke: transparent; } .map-post .post-user-lists-button { position: absolute; opacity: 0; transition: all 0.3s; cursor: pointer; z-index: 1; top: 0; right: 50%; padding: 12px 17px; } @media (max-width: 960px) { .map-post .post-user-lists-button { opacity: 1; } } .map-post .post-user-lists-button svg { width: 21px; height: 25px; transition: all 0.3s; } .map-post .post-user-lists-button:hover > svg, .map-post .post-user-lists-button.active > svg { fill: #E5C89A; } .map-post .post-user-lists-button::after { content: " "; display: block; width: 7px; height: 2px; position: absolute; top: 9px; left: 7px; background: #000; opacity: 0; transition: all 0.3s; } .map-post .post-user-lists-button.active::after { opacity: 1; } .map-post .post-user-lists-button.active.active-eat svg { fill: #FFC296; stroke: transparent; } .map-post .post-user-lists-button.active.active-sleep svg { fill: #ACDDF4; stroke: transparent; } .map-post .post-user-lists-button.active.active-play svg { fill: #F5C9D1; stroke: transparent; } .map-post > a { width: calc(50% - 12px); align-self: center; } .map-post > a img { width: 100%; height: auto; } .map-post__slider { width: calc(50% - 12px); align-self: center; position: relative; } .map-post__slider::before { content: " "; width: 80px; height: 30px; background: rgba(0, 0, 0, 0.5); position: absolute; border-radius: 30px; bottom: 12px; left: 0; right: 0; margin: auto; z-index: 2; opacity: 0; transition: all 0.3s; } @media (max-width: 600px) { .map-post__slider::before { opacity: 1; width: 52px; } } .map-post__slider a { z-index: 0; } .map-post__slider img { height: auto; width: 100%; border-top-left-radius: 7px; border-bottom-left-radius: 7px; } @media (max-width: 600px) { .map-post__slider img { pointer-events: none; } } .map-post__slider ul { margin: 0; padding: 0; position: absolute; bottom: 25px; width: 24px; left: 0; right: 0; margin: auto; white-space: nowrap; overflow: hidden; z-index: 2; font-size: 0; } .map-post__slider ul li { display: inline-block; width: 4px; height: 4px; } .map-post__slider ul li.slick-active .custom-dot { opacity: 1; } .map-post__slider ul li .custom-dot { width: 4px; height: 4px; background: #fff; border-radius: 50%; opacity: 0.32; transition: all 0.3s; } .map-post__slider ul li + li { margin-left: 6px; } .map-post__slider button { position: absolute; bottom: 12px; height: 30px; width: 30px; display: flex; justify-items: center; align-items: center; z-index: 3; opacity: 0; transition: all 0.3s; } .map-post__slider button svg { width: 5px; height: 8px; margin: 0 auto; stroke: #fff; } .map-post__slider button.next { left: 50%; margin-left: 10px; } .map-post__slider button.prev { right: 50%; margin-right: 10px; } .map-post__slider button.prev svg { transform: rotate(180deg); } .map-post__slider.single::before { display: none; } .map-post .content { width: calc(50% - 6px); align-self: center; text-align: left; padding-bottom: 9px; } .map-post .content h2 { font-family: "Clearface", serif; font-weight: 300; font-size: 22px; line-height: 1.2; margin: 12px 0 12px; transition: all 0.3s; } @media (max-width: 600px) { .map-post .content h2 { font-size: 16px; margin: 10px 0 10px; } } .map-post .content h2 a { color: #000; z-index: 0; } @incude breakpoint($min: 961px) { .map-post .content h2:hover { transform: translateY(-3px); } } .map-post .content .main-tags { font-size: 0; } .map-post .content .main-tags h4 { display: inline-block; vertical-align: middle; margin: 0; color: #96907F; font-family: "Plantin", serif; font-weight: normal; font-style: italic; font-size: 12px; } .map-post .content .main-tags h4 span.sub-cat, .map-post .content .main-tags h4 a { display: inline-block; vertical-align: middle; font-family: "Grotesk", helvetica; font-size: 13px; color: #000; position: relative; transition: all 0.3s; transform: translateY(-2px); font-weight: normal; font-style: normal; z-index: 0; } .map-post .content .extra-tags { font-family: "Grotesk", helvetica; font-size: 13px; letter-spacing: 0.1px; line-height: 1; margin-top: 3px; } @incluide breakpoint($max: 600px) { .map-post .content .extra-tags { font-size: 12px; line-height: 1.2; margin-top: -1px; } } .map-post .content .extra-tags > p, .map-post .content .extra-tags > div.price-value { display: inline-block; vertical-align: middle; font-family: "Grotesk", helvetica; font-size: 11px; line-height: 1.3; margin: 0; margin-top: -4px; position: relative; margin-right: 14px; letter-spacing: 0.5px; } .map-post .content .extra-tags > p svg, .map-post .content .extra-tags > div.price-value svg { height: 12px; width: 12px; stroke: black; } .map-post .content .extra-tags > p span:last-child, .map-post .content .extra-tags > div.price-value span:last-child { color: #D1C9B5; } .map-post .content .extra-tags > p span:last-child svg, .map-post .content .extra-tags > div.price-value span:last-child svg { stroke: #D1C9B5; } .map-post .content .extra-tags > p::before, .map-post .content .extra-tags > div.price-value::before { content: "\2022"; position: absolute; top: 0; left: 100%; margin-left: 6.5px; color: #D1C9B5; } .map-post .content .extra-tags > p.price-value, .map-post .content .extra-tags > div.price-value.price-value { position: relative; } @media (max-width: 960px) { .map-post .content .extra-tags > p.price-value, .map-post .content .extra-tags > div.price-value.price-value { cursor: pointer; border-bottom: solid 1px #E5C89A; } } @media (min-width: 961px) { .map-post .content .extra-tags > p.price-value:hover .price-tooltip, .map-post .content .extra-tags > div.price-value.price-value:hover .price-tooltip { opacity: 1; } } @media (max-width: 960px) { .map-post .content .extra-tags > p.price-value.active .price-tooltip, .map-post .content .extra-tags > div.price-value.price-value.active .price-tooltip { opacity: 1; } } .map-post .content .extra-tags > span, .map-post .content .extra-tags > a { display: inline-block; position: relative; margin-right: 14px; } .map-post .content .extra-tags > span::after, .map-post .content .extra-tags > a::after { content: "\2022"; position: absolute; top: 1px; left: 100%; margin-left: 4.5px; color: #D1C9B5; } .map-post .content .extra-tags > span:last-child, .map-post .content .extra-tags > a:last-child { margin-right: 0; } .map-post .content .extra-tags > span:last-child::after, .map-post .content .extra-tags > a:last-child::after { display: none; } .map-post .content .extra-tags > span svg, .map-post .content .extra-tags > a svg { width: 6px; height: 3px; margin-bottom: 1px; margin-left: 2px; } @media (min-width: 961px) { .map-post .content .extra-tags > span:hover .more-dd, .map-post .content .extra-tags > a:hover .more-dd { opacity: 1; pointer-events: all; } } .map-post .content .extra-tags > span.active .more-dd, .map-post .content .extra-tags > a.active .more-dd { opacity: 1; pointer-events: all; } @media (max-width: 600px) { .map-post .content .extra-tags .map-more-tags-trigger { display: none; } } .map-post .content .extra-tags .more-dd { z-index: 5; position: absolute; top: 100%; margin-top: 6px; right: -20px; width: 150px; background: #000; color: #fff; text-align: left; padding: 20px; transition: all 0.3s; border-radius: 12.5px; opacity: 0; pointer-events: none; } .map-post .content .extra-tags .more-dd::before { content: " "; display: block; height: 7px; width: 100%; position: absolute; bottom: 100%; right: 0; } .map-post .content .extra-tags .more-dd::after { content: " "; display: block; position: absolute; bottom: 100%; right: 20px; border-bottom: solid 4px #000; border-right: solid 3px transparent; border-left: solid 3px transparent; } .map-post .content .extra-tags .more-dd span { display: block; } .map-post .content .extra-tags .more-dd span + span { margin-top: 6px; } @media (min-width: 961px) { .map-post:hover .post-wishlist-button { opacity: 1; } .map-post:hover .post-user-lists-button { opacity: 1; } .map-post:hover .map-post__slider::before, .map-post:hover .map-post__slider button { opacity: 1; } } .gm-style .gm-style-iw-d { overflow: hidden !important; } .gm-style .gm-style-iw-c { padding: 0 !important; background: #FCFAF5; border-radius: 15px; } .gm-style .gm-style-iw-c button { display: none !important; } .gm-style .gm-style-iw-t::after { background: #FCFAF5; width: 9px; height: 9px; } .map-info-window { min-width: 160px; padding: 8px 26px 12px 12px; text-align: left; font-family: "Clearface", serif; font-weight: 300; font-size: 13px; line-height: 1.5; color: #000; text-transform: none; position: relative; } .map-info-window span { display: block; font-family: "Plantin", serif; font-style: italic; font-size: 10px; line-height: 1; } .map-info-window small { display: none; margin-top: 10px; } .map-info-window svg { width: 8px; height: 10px; position: absolute; top: 0; right: 12px; bottom: 0; margin: auto; } div.gmnoprint > div { background: #FCFAF5 !important; } .map-list-empty { text-transform: none; padding-bottom: 60px; } .list-map-empty { display: flex; align-items: flex-start; padding-top: 5.5px; padding-bottom: 174px; } .list-map-empty__content { width: calc(100% - 125px); padding-right: 46px; } @media (max-width: 400px) { .list-map-empty__content { width: calc(100% - 100px); padding-right: 32px; } } .list-map-empty__content h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; font-size: 42px; letter-spacing: -0.1px; line-height: 50px; margin: 0; } .list-map-empty__content p { font-family: "Grotesk", helvetica; font-size: 15px; line-height: 20px; margin: 8px 0 0; } .list-map-empty__content p a { font-weight: bold; border-bottom: solid 1px #E8E0CC; color: #000; } .list-map-empty__discover { width: 160px; height: 51px; border-radius: 25px; padding: 0 22px; display: flex; justify-content: space-between; align-items: center; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 11px; line-height: 13px; text-transform: uppercase; color: #fff; background: #000; margin-top: 18px; position: relative; } .list-map-empty__discover svg { width: 7px; height: 4px; stroke: #fff; } .list-map-empty__discover .grid-dd { position: absolute; top: 100%; width: calc(40vw - 100px); left: 0; background: #000; z-index: 1; margin-top: 12px; -moz-column-count: 2; column-count: 2; text-align: left; padding: 30px 22px; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 10; border-radius: 25px; } @media (max-width: 1450px) { .list-map-empty__discover .grid-dd { width: calc(40vw - 60px); } } @media (max-width: 1080px) { .list-map-empty__discover .grid-dd { width: calc(50vw - 60px); } } @media (max-width: 960px) { .list-map-empty__discover .grid-dd { width: calc(50vw - 40px); } } @media (max-width: 800px) { .list-map-empty__discover .grid-dd { width: calc(100vw - 40px); } } .list-map-empty__discover .grid-dd::after { content: " "; display: block; position: absolute; bottom: 100%; left: 0; width: 100%; height: 14px; } .list-map-empty__discover .grid-dd::before { content: " "; display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #000; position: absolute; bottom: 100%; left: 22px; margin: auto; } .list-map-empty__discover .grid-dd a { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; text-transform: uppercase; color: #fff; margin-bottom: 12px; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: all 0.3s; } .list-map-empty__discover .grid-dd a:hover { -webkit-text-decoration-color: #000; text-decoration-color: #000; } @media (min-width: 961px) { .list-map-empty__discover .grid-dd:hover { opacity: 1; pointer-events: all; } } @media (min-width: 961px) { .list-map-empty__discover:hover .grid-dd { opacity: 1; pointer-events: all; } } .list-map-empty__discover.active .grid-dd { opacity: 1; pointer-events: all; } .list-map-empty > img { width: 125px; height: auto; border-radius: 50%; border: solid 1px #000; } @media (max-width: 400px) { .list-map-empty > img { width: 100px; } } .loader, .sas-loading-modal .new-loader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #FCFAF5; z-index: 10000; display: flex; justify-content: center; align-items: center; } body:not(.single-city) .loader .x, body:not(.single-city) .sas-loading-modal .new-loader .x, .sas-loading-modal body:not(.single-city) .new-loader .x, body:not(.single-city) .loader .city, body:not(.single-city) .sas-loading-modal .new-loader .city, .sas-loading-modal body:not(.single-city) .new-loader .city { display: none; } body:not(.single-city) .loader .star-wrapper, body:not(.single-city) .sas-loading-modal .new-loader .star-wrapper, .sas-loading-modal body:not(.single-city) .new-loader .star-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loader-content { position: relative; display: flex; justify-content: center; align-items: center; } .loader .x, .sas-loading-modal .new-loader .x, .loader .city, .sas-loading-modal .new-loader .city { opacity: 0; transition: 200ms opacity; } .loader .star-wrapper, .sas-loading-modal .new-loader .star-wrapper { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); } .loader .star-wrapper .star, .sas-loading-modal .new-loader .star-wrapper .star { width: 57px; height: 57px; } .loader .star-wrapper .mask, .sas-loading-modal .new-loader .star-wrapper .mask { width: 57px; height: 57px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: scale(1); } .loader .x, .sas-loading-modal .new-loader .x { width: 13px; height: 13px; margin: 0 15px; } .loader .city, .sas-loading-modal .new-loader .city { position: relative; top: 3px; font-family: "Altissima", helvetica; font-size: 71px; text-transform: uppercase; } .rec-detail, .profile-detail { display: flex; border-bottom: solid 1px #000; } .rec-sidebar, .profile-sidebar { width: 33.333%; margin-top: -66px; position: relative; } @media (max-width: 1170px) { .rec-sidebar, .profile-sidebar { width: 390px; } } @media (max-width: 960px) { .rec-sidebar, .profile-sidebar { margin-top: 0; width: 100%; } } .rec-sidebar-inner, .profile-sidebar-inner { height: calc(100vh - 96px); margin-top: 96px; position: relative; display: flex; } @media (max-width: 960px) { .rec-sidebar-inner, .profile-sidebar-inner { height: auto; margin-top: 0; display: block; width: 100% !important; } } .rec-sidebar-inner .hidden-gem, .profile-sidebar-inner .hidden-gem { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: 0.41px; text-transform: uppercase; } @media (max-width: 960px) { .rec-sidebar-inner .hidden-gem, .profile-sidebar-inner .hidden-gem { position: static; width: 100%; display: block; margin-bottom: 24px; } } @media (max-width: 600px) { .rec-sidebar-inner .hidden-gem, .profile-sidebar-inner .hidden-gem { display: none; } } .rec-sidebar-inner .hidden-gem svg, .profile-sidebar-inner .hidden-gem svg { width: 12px; height: 12px; margin-right: 5px; margin-bottom: -2px; } .rec-sidebar-inner .verified-spot, .profile-sidebar-inner .verified-spot { position: absolute; top: 0; left: 0; width: 100%; text-align: center; display: flex; justify-content: center; font-family: "Bureau Grot Bk", helvetica; font-size: 11px; line-height: 12px; letter-spacing: 0.41px; text-transform: uppercase; align-items: center; } @media (max-width: 960px) { .rec-sidebar-inner .verified-spot, .profile-sidebar-inner .verified-spot { position: relative; margin-bottom: 12px; } } .rec-sidebar-inner .verified-spot svg, .profile-sidebar-inner .verified-spot svg { width: 20px; height: 20px; margin-right: 7px; fill: #E5C89A; } .rec-sidebar-inner .verified-spot .tt, .profile-sidebar-inner .verified-spot .tt { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 18px; background: #000; padding: 22px 24px; border-radius: 25px; display: flex; width: 293px; opacity: 0; pointer-events: none; transition: all 0.3s; } .rec-sidebar-inner .verified-spot .tt::before, .profile-sidebar-inner .verified-spot .tt::before { content: " "; display: block; width: 0; height: 0; border-left: solid transparent 5px; border-right: solid transparent 5px; border-bottom: solid 7px #000; position: absolute; bottom: 100%; left: 0; right: 0; margin: auto; } .rec-sidebar-inner .verified-spot .tt svg, .profile-sidebar-inner .verified-spot .tt svg { width: 34px; height: 34px; flex-shrink: 0; margin-right: 0; } .rec-sidebar-inner .verified-spot .tt p, .profile-sidebar-inner .verified-spot .tt p { margin-left: 19px; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 14px; line-height: 16px; color: #fff; text-transform: none; text-align: left; margin-top: 0; margin-bottom: 0; } @media (min-width: 961px) { .rec-sidebar-inner .verified-spot:hover .tt, .profile-sidebar-inner .verified-spot:hover .tt { opacity: 1; } } .rec-sidebar-inner .verified-spot.active .tt, .profile-sidebar-inner .verified-spot.active .tt { opacity: 1; } .rec-sidebar-inner .buttons, .profile-sidebar-inner .buttons { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; max-width: 500px; padding: 50px; display: flex; justify-content: center; } @media (max-width: 1450px) { .rec-sidebar-inner .buttons, .profile-sidebar-inner .buttons { padding: 30px; } } @media (max-width: 1170px) { .rec-sidebar-inner .buttons, .profile-sidebar-inner .buttons { padding: 30px 15px; justify-content: space-between; } } @media (max-width: 960px) { .rec-sidebar-inner .buttons, .profile-sidebar-inner .buttons { position: fixed; padding: 24px; z-index: 2; transition: all 0.3s; max-width: 648px; justify-content: center; } .rec-sidebar-inner .buttons.hide, .profile-sidebar-inner .buttons.hide { transform: translateY(100%); opacity: 0; pointer-events: none; } } @media (max-width: 800px) { .rec-sidebar-inner .buttons, .profile-sidebar-inner .buttons { padding: 12px; bottom: 74px; } } @media (max-width: 380px) { .rec-sidebar-inner .buttons, .profile-sidebar-inner .buttons { justify-content: space-between; } } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button { width: 100%; background: #000; border-radius: 25px; position: relative; padding: 20px 27px 20px 48px; color: #FCFAF5; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; text-transform: uppercase; cursor: pointer; transition: all 0.3s; display: block; } @media (max-width: 600px) { .rec-sidebar-inner .buttons > div:not(.extras-modal) > span, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button { font-size: 10px; } } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span > svg, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button > svg, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button > svg { position: absolute; top: 0; left: 0; right: calc(100% - 48px); bottom: 0; margin: auto; } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span .check, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span .check, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button .check, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button .check, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button .check, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button .check { width: 28px; height: 26px; fill: #E5C89A; } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span .save, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span .save, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button .save, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button .save, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button .save, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button .save { width: 20px; height: 25px; fill: #E5C89A; } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span small, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span small, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button small, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button small, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button small, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button small { float: right; transform: translateY(1px); } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span > span, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span > span, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button > span, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button > span, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button > span, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button > span { display: none; } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span:hover, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span:hover, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button:hover, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button:hover, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button:hover, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button:hover { transform: translateY(-3px); } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span.active > span, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span.active > span, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button.active > span, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button.active > span, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button.active > span, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button.active > span { display: inline; } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span.active.eat > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span.active.eat > svg, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button.active.eat > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button.active.eat > svg, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button.active.eat > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button.active.eat > svg { fill: #FFC296; } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span.active.sleep > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span.active.sleep > svg, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button.active.sleep > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button.active.sleep > svg, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button.active.sleep > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button.active.sleep > svg { fill: #ACDDF4; } .rec-sidebar-inner .buttons > div:not(.extras-modal) > span.active.play > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > span.active.play > svg, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button.active.play > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.message-button.active.play > svg, .rec-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button.active.play > svg, .profile-sidebar-inner .buttons > div:not(.extras-modal) > a.book-button.active.play > svg { fill: #F5C9D1; } .rec-sidebar-inner .buttons .endorse-button-wrap, .profile-sidebar-inner .buttons .endorse-button-wrap { width: calc(50% - 4px); position: relative; } @media (max-width: 1170px) { .rec-sidebar-inner .buttons .endorse-button-wrap, .profile-sidebar-inner .buttons .endorse-button-wrap { width: calc(50% - 34.5px); } } .rec-sidebar-inner .buttons .endorse-button-wrap.solo, .profile-sidebar-inner .buttons .endorse-button-wrap.solo { display: block; margin: 0 auto; } .rec-sidebar-inner .buttons div.book-button-wrap .book-button, .profile-sidebar-inner .buttons div.book-button-wrap .book-button { padding-right: 40px !important; } @media (max-width: 1170px) { .rec-sidebar-inner .buttons div.book-button-wrap .book-button, .profile-sidebar-inner .buttons div.book-button-wrap .book-button { padding-right: 20px !important; } } @media (max-width: 960px) { .rec-sidebar-inner .buttons div.book-button-wrap .book-button, .profile-sidebar-inner .buttons div.book-button-wrap .book-button { padding-right: 40px !important; } } @media (max-width: 440px) { .rec-sidebar-inner .buttons div.book-button-wrap .book-button, .profile-sidebar-inner .buttons div.book-button-wrap .book-button { padding-right: 20px !important; } } .rec-sidebar-inner .buttons div.book-button-wrap .book-button .book_icon, .profile-sidebar-inner .buttons div.book-button-wrap .book-button .book_icon { width: 24px; height: 24px; transform: translateY(-1px); } .rec-sidebar-inner .buttons div.book-button-wrap .book-button .arrow-right, .profile-sidebar-inner .buttons div.book-button-wrap .book-button .arrow-right { width: 5px; height: 9px; left: calc(100% - 48px); right: 0; stroke: #fff; } @media (max-width: 1170px) { .rec-sidebar-inner .buttons div.book-button-wrap .book-button .arrow-right, .profile-sidebar-inner .buttons div.book-button-wrap .book-button .arrow-right { display: none; } } @media (max-width: 960px) { .rec-sidebar-inner .buttons div.book-button-wrap .book-button .arrow-right, .profile-sidebar-inner .buttons div.book-button-wrap .book-button .arrow-right { display: block; } } @media (max-width: 440px) { .rec-sidebar-inner .buttons div.book-button-wrap .book-button .arrow-right, .profile-sidebar-inner .buttons div.book-button-wrap .book-button .arrow-right { display: none; } } .rec-sidebar-inner .buttons .review-button-wrap, .profile-sidebar-inner .buttons .review-button-wrap { margin-left: 16px; } @media (max-width: 1170px) { .rec-sidebar-inner .buttons .review-button-wrap, .profile-sidebar-inner .buttons .review-button-wrap { margin-left: 0; } } @media (max-width: 960px) { .rec-sidebar-inner .buttons .review-button-wrap, .profile-sidebar-inner .buttons .review-button-wrap { margin-left: 16px; } } @media (max-width: 380px) { .rec-sidebar-inner .buttons .review-button-wrap, .profile-sidebar-inner .buttons .review-button-wrap { margin-left: 0; } } .rec-sidebar-inner .buttons .review-button-wrap .review-check, .profile-sidebar-inner .buttons .review-button-wrap .review-check { width: 24px; height: 24px; transform: translateY(-1px); } .rec-sidebar-inner .buttons .review-button-wrap .reviews-modal-trigger, .profile-sidebar-inner .buttons .review-button-wrap .reviews-modal-trigger { padding-right: 40px !important; } @media (max-width: 1170px) { .rec-sidebar-inner .buttons .review-button-wrap .reviews-modal-trigger, .profile-sidebar-inner .buttons .review-button-wrap .reviews-modal-trigger { padding-right: 20px !important; } } @media (max-width: 960px) { .rec-sidebar-inner .buttons .review-button-wrap .reviews-modal-trigger, .profile-sidebar-inner .buttons .review-button-wrap .reviews-modal-trigger { padding-right: 40px !important; } } @media (max-width: 440px) { .rec-sidebar-inner .buttons .review-button-wrap .reviews-modal-trigger, .profile-sidebar-inner .buttons .review-button-wrap .reviews-modal-trigger { padding-right: 20px !important; } } .rec-sidebar-inner .buttons .review-button-wrap .arrow-right, .profile-sidebar-inner .buttons .review-button-wrap .arrow-right { width: 5px; height: 9px; left: calc(100% - 48px); right: 0; stroke: #fff; } @media (max-width: 1170px) { .rec-sidebar-inner .buttons .review-button-wrap .arrow-right, .profile-sidebar-inner .buttons .review-button-wrap .arrow-right { display: none; } } @media (max-width: 960px) { .rec-sidebar-inner .buttons .review-button-wrap .arrow-right, .profile-sidebar-inner .buttons .review-button-wrap .arrow-right { display: block; } } @media (max-width: 440px) { .rec-sidebar-inner .buttons .review-button-wrap .arrow-right, .profile-sidebar-inner .buttons .review-button-wrap .arrow-right { display: none; } } .rec-sidebar-inner .buttons .extras-button, .profile-sidebar-inner .buttons .extras-button, .rec-sidebar-inner .buttons .list-add-trigger, .profile-sidebar-inner .buttons .list-add-trigger { display: none; width: 51px; height: 51px; border-radius: 50%; background: #000; padding: 0; position: relative; } @media (max-width: 1170px) { .rec-sidebar-inner .buttons .extras-button, .profile-sidebar-inner .buttons .extras-button, .rec-sidebar-inner .buttons .list-add-trigger, .profile-sidebar-inner .buttons .list-add-trigger { display: block; } } @media (max-width: 960px) { .rec-sidebar-inner .buttons .extras-button, .profile-sidebar-inner .buttons .extras-button, .rec-sidebar-inner .buttons .list-add-trigger, .profile-sidebar-inner .buttons .list-add-trigger { margin-left: 16px; } } @media (max-width: 380px) { .rec-sidebar-inner .buttons .extras-button, .profile-sidebar-inner .buttons .extras-button, .rec-sidebar-inner .buttons .list-add-trigger, .profile-sidebar-inner .buttons .list-add-trigger { margin-left: 0; } } .rec-sidebar-inner .buttons .extras-button svg, .profile-sidebar-inner .buttons .extras-button svg, .rec-sidebar-inner .buttons .list-add-trigger svg, .profile-sidebar-inner .buttons .list-add-trigger svg { width: 25px; height: 25px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .rec-sidebar-inner .buttons .list-add-trigger, .profile-sidebar-inner .buttons .list-add-trigger { flex-shrink: 0; } .rec-sidebar-inner .buttons .extras-modal, .profile-sidebar-inner .buttons .extras-modal { position: absolute; left: 30px; right: 30px; bottom: 30px; background: #000; padding: 20px; border-radius: 30px; display: none; } @media (max-width: 960px) { .rec-sidebar-inner .buttons .extras-modal, .profile-sidebar-inner .buttons .extras-modal { left: 24px; right: 24px; bottom: 24px; } } @media (max-width: 800px) { .rec-sidebar-inner .buttons .extras-modal, .profile-sidebar-inner .buttons .extras-modal { left: 12px; bottom: 12px; right: 12px; } } .rec-sidebar-inner .buttons .extras-modal a, .profile-sidebar-inner .buttons .extras-modal a, .rec-sidebar-inner .buttons .extras-modal > span:not(.extras-modal-close), .profile-sidebar-inner .buttons .extras-modal > span:not(.extras-modal-close) { display: block; color: #FCFAF5; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; position: relative; cursor: pointer; } .rec-sidebar-inner .buttons .extras-modal a svg, .profile-sidebar-inner .buttons .extras-modal a svg, .rec-sidebar-inner .buttons .extras-modal > span:not(.extras-modal-close) svg, .profile-sidebar-inner .buttons .extras-modal > span:not(.extras-modal-close) svg { width: 14px; height: 14px; margin-right: 10px; transform: translateY(1px); } .rec-sidebar-inner .buttons .extras-modal a + a, .profile-sidebar-inner .buttons .extras-modal a + a, .rec-sidebar-inner .buttons .extras-modal a + span:not(.extras-modal-close), .profile-sidebar-inner .buttons .extras-modal a + span:not(.extras-modal-close), .rec-sidebar-inner .buttons .extras-modal > span:not(.extras-modal-close) + a, .profile-sidebar-inner .buttons .extras-modal > span:not(.extras-modal-close) + a, .rec-sidebar-inner .buttons .extras-modal > span:not(.extras-modal-close) + span:not(.extras-modal-close), .profile-sidebar-inner .buttons .extras-modal > span:not(.extras-modal-close) + span:not(.extras-modal-close) { margin-top: 15px; padding-top: 15px; border-top: solid 1px rgba(255, 255, 255, 0.2); } .rec-sidebar-inner .buttons .extras-modal .socials, .profile-sidebar-inner .buttons .extras-modal .socials { float: right; font-size: 0; line-height: 0; } .rec-sidebar-inner .buttons .extras-modal .socials p, .profile-sidebar-inner .buttons .extras-modal .socials p { position: absolute; top: 0; right: 0; width: 100%; font-family: "Plantin", serif; font-weight: normal; font-size: 12px; line-height: 1; color: #fff; background: #000; margin: 0; text-transform: none; text-align: center; width: 100%; z-index: 1; padding: 4px; opacity: 0; pointer-events: none; transition: all 0.3s; } .rec-sidebar-inner .buttons .extras-modal .socials p.active, .profile-sidebar-inner .buttons .extras-modal .socials p.active { opacity: 1; } .rec-sidebar-inner .buttons .extras-modal .socials a, .profile-sidebar-inner .buttons .extras-modal .socials a, .rec-sidebar-inner .buttons .extras-modal .socials span, .profile-sidebar-inner .buttons .extras-modal .socials span { display: inline-block; vertical-align: middle; margin-left: 12px; margin-top: 0; padding: 0; border: 0; } .rec-sidebar-inner .buttons .extras-modal .socials a svg, .profile-sidebar-inner .buttons .extras-modal .socials a svg, .rec-sidebar-inner .buttons .extras-modal .socials span svg, .profile-sidebar-inner .buttons .extras-modal .socials span svg { margin: 0; stroke: transparent; fill: #fff; display: block; transform: none; } .rec-sidebar-inner .buttons .extras-modal .extras-modal-close, .profile-sidebar-inner .buttons .extras-modal .extras-modal-close { position: absolute; bottom: 6px; right: 6px; padding: 12px; font-size: 0; line-height: 0; cursor: pointer; } .rec-sidebar-inner .buttons .extras-modal .extras-modal-close svg, .profile-sidebar-inner .buttons .extras-modal .extras-modal-close svg { width: 13px; height: 13px; stroke: #96907F; } .rec-sidebar-inner .buttons .extras-modal .save-button-wrap > span::before, .profile-sidebar-inner .buttons .extras-modal .save-button-wrap > span::before { top: 5.5px; left: 5.5px; } .rec-sidebar-inner .buttons .extras-modal .save-button-wrap .save-button-tooltip, .profile-sidebar-inner .buttons .extras-modal .save-button-wrap .save-button-tooltip { left: 0; transform: none; margin-bottom: 30px; } .rec-sidebar-inner .buttons .extras-modal .save-button-wrap .save-button-tooltip a, .profile-sidebar-inner .buttons .extras-modal .save-button-wrap .save-button-tooltip a { display: inline; } .rec-sidebar-inner .buttons.review-only, .profile-sidebar-inner .buttons.review-only { white-space: nowrap; } @media (max-width: 600px) { .rec-sidebar-inner .buttons.review-only .list-add-trigger, .profile-sidebar-inner .buttons.review-only .list-add-trigger { width: 40px; height: 40px; } } @media (max-width: 600px) { .rec-sidebar-inner .buttons.review-only .save, .profile-sidebar-inner .buttons.review-only .save { width: 18px; height: 19px; } } @media (max-width: 600px) { .rec-sidebar-inner .buttons.review-only .review-check, .profile-sidebar-inner .buttons.review-only .review-check, .rec-sidebar-inner .buttons.review-only .book_icon, .profile-sidebar-inner .buttons.review-only .book_icon { width: 18px !important; height: 19px !important; right: calc(100% - 40px); } } @media (max-width: 600px) { .rec-sidebar-inner .buttons.review-only .reviews-modal-trigger, .profile-sidebar-inner .buttons.review-only .reviews-modal-trigger, .rec-sidebar-inner .buttons.review-only .book-button, .profile-sidebar-inner .buttons.review-only .book-button { padding-left: 40px !important; padding-top: 15px !important; padding-bottom: 15px !important; } } @media (max-width: 1170px) { .rec-sidebar-inner .buttons:not(.review-only) .review-button-wrap, .profile-sidebar-inner .buttons:not(.review-only) .review-button-wrap { width: calc(100% - 66px); } .rec-sidebar-inner .buttons:not(.review-only) .review-button-wrap .arrow-right, .profile-sidebar-inner .buttons:not(.review-only) .review-button-wrap .arrow-right { display: block; } } .rec-sidebar-inner .content, .profile-sidebar-inner .content { text-align: center; padding: 0 50px; width: 100%; align-self: center; padding-bottom: 100px; } @media (max-width: 1450px) { .rec-sidebar-inner .content, .profile-sidebar-inner .content { padding: 0 30px; padding-bottom: 80px; } } @media (max-width: 960px) { .rec-sidebar-inner .content, .profile-sidebar-inner .content { padding: 0 24px; padding-bottom: 0; } } .rec-sidebar-inner .content h2, .profile-sidebar-inner .content h2 { font-family: "Clearface", serif; font-weight: normal; font-size: 50px; line-height: 1; margin: 24px 0 29px; } @media (max-width: 1170px) { .rec-sidebar-inner .content h2, .profile-sidebar-inner .content h2 { font-size: 42px; } } @media (max-width: 1080px) { .rec-sidebar-inner .content h2, .profile-sidebar-inner .content h2 { font-size: 36px; margin: 20px 0 22px; } } .rec-sidebar-inner .content > div + div, .profile-sidebar-inner .content > div + div { margin-top: 5px; } .rec-sidebar-inner .content .price, .profile-sidebar-inner .content .price { display: inline-block; vertical-align: top; font-size: 12px; letter-spacing: -0.8px; line-height: 1; font-family: "Grotesk", helvetica; position: relative; } @media (max-width: 960px) { .rec-sidebar-inner .content .price, .profile-sidebar-inner .content .price { border-bottom: solid 1px #E5C89A; cursor: pointer; } } .rec-sidebar-inner .content .price svg, .profile-sidebar-inner .content .price svg { height: 12px; width: 12px; display: inline-block; } .rec-sidebar-inner .content .price span svg, .profile-sidebar-inner .content .price span svg { stroke: #000; } .rec-sidebar-inner .content .price span + span, .profile-sidebar-inner .content .price span + span { color: #D1C9B5; } .rec-sidebar-inner .content .price span + span svg, .profile-sidebar-inner .content .price span + span svg { stroke: #D1C9B5; } @media (min-width: 961px) { .rec-sidebar-inner .content .price:hover .price-tooltip, .profile-sidebar-inner .content .price:hover .price-tooltip { opacity: 1; } } @media (max-width: 960px) { .rec-sidebar-inner .content .price.active .price-tooltip, .profile-sidebar-inner .content .price.active .price-tooltip { opacity: 1; } } .rec-sidebar-inner .content .tags, .profile-sidebar-inner .content .tags { display: inline-block; vertical-align: top; margin-left: 20px; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 13px; line-height: 1; color: #D1C9B5; position: relative; } .rec-sidebar-inner .content .tags::before, .profile-sidebar-inner .content .tags::before { content: "\2022"; display: block; color: #D1C9B5; position: absolute; top: 0; right: 100%; margin-right: 10px; } .rec-sidebar-inner .content .tags a, .profile-sidebar-inner .content .tags a { font-style: normal; color: #000; border-bottom: solid 1px #E8E0CC; transition: all 0.3s; font-family: "Grotesk", helvetica; font-size: 14px; } .rec-sidebar-inner .content .tags a:hover, .profile-sidebar-inner .content .tags a:hover { border-bottom: solid 1px #000; } .rec-sidebar-inner .content .location svg, .profile-sidebar-inner .content .location svg { width: 11px; height: 13px; transform: translateY(2px); } .rec-sidebar-inner .content .location a, .profile-sidebar-inner .content .location a, .rec-sidebar-inner .content .location span, .profile-sidebar-inner .content .location span { font-family: "Grotesk", helvetica; font-size: 14px; line-height: 1; color: #000; border-bottom: solid 1px #E8E0CC; margin-left: 4px; transition: all 0.3s; } .rec-sidebar-inner .content .location a:hover, .profile-sidebar-inner .content .location a:hover, .rec-sidebar-inner .content .location span:hover, .profile-sidebar-inner .content .location span:hover { border-bottom: solid 1px #000; } .rec-sidebar-inner .content .location span, .profile-sidebar-inner .content .location span { border-bottom: 0; } .rec-sidebar-inner .content .location span:hover, .profile-sidebar-inner .content .location span:hover { border-bottom: 0; } .rec-sidebar-inner .content .extras, .profile-sidebar-inner .content .extras { padding-top: 15px; } .rec-sidebar-inner .content .extras svg, .profile-sidebar-inner .content .extras svg { width: 13px; height: 13px; } .rec-sidebar-inner .content .extras a + a, .profile-sidebar-inner .content .extras a + a { margin-left: 16px; } .rec-sidebar-inner .content .extras a, .profile-sidebar-inner .content .extras a { transition: all 0.3s; display: inline-block; font-size: 0; line-height: 0; position: relative; } @media (max-width: 960px) { .rec-sidebar-inner .content .extras a, .profile-sidebar-inner .content .extras a { padding: 13px; border: solid 1px #E6E6E6; border-radius: 50%; } } .rec-sidebar-inner .content .extras a:hover, .profile-sidebar-inner .content .extras a:hover { transform: translateY(-2px); } .rec-sidebar-inner .content .extras a:hover .tooltip, .profile-sidebar-inner .content .extras a:hover .tooltip { opacity: 1; } .rec-sidebar-inner .content .extras a .tooltip, .profile-sidebar-inner .content .extras a .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateZ(0); white-space: nowrap; background: #000; padding: 10px 12px 7px; color: #fff; font-family: "Plantin", serif; font-weight: normal; font-size: 11px; line-height: 1; margin-bottom: 8px; pointer-events: none; transition: all 0.3s; opacity: 0; } .rec-sidebar-inner .content .extras a .tooltip::before, .profile-sidebar-inner .content .extras a .tooltip::before { content: " "; display: block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #000; position: absolute; top: 100%; left: 0; right: 0; margin: auto; } .rec-main, .profile-main { width: 66.667%; margin-top: 50px; margin-bottom: 50px; border-left: solid 1px #000; min-height: calc(100vh - 166px); } @media (max-width: 1450px) { .rec-main, .profile-main { margin-top: 30px; margin-bottom: 30px; min-height: calc(100vh - 126px); } } @media (max-width: 1170px) { .rec-main, .profile-main { width: calc(100% - 390px); } } @media (max-width: 960px) { .rec-main, .profile-main { width: 100%; margin-top: 24px; border-left: 0; min-height: auto; } } @media (max-width: 960px) { .rec-main, .profile-main { margin-top: 20px; } } .rec-gallery-wrap { padding-left: 50px; position: relative; margin-bottom: 35px; } @media (max-width: 1450px) { .rec-gallery-wrap { padding-left: 30px; } } @media (max-width: 960px) { .rec-gallery-wrap { padding-left: 24px; } } @media (max-width: 960px) { .rec-gallery-wrap { padding-left: 20px; } } .rec-gallery-wrap .gallery-image-wrap { position: relative; } .rec-gallery-wrap .gallery-image-wrap > a { cursor: pointer; } .rec-gallery-wrap .gallery-image-wrap > a, .rec-gallery-wrap .gallery-image-wrap .caption { position: absolute; top: 20px; left: 20px; background: rgba(0, 0, 0, 0.45); border-radius: 25px; padding: 10px 24px 10px 10px; transition: all 0.3s; font-size: 0; line-height: 0; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; color: #fff; text-transform: none; } @media (max-width: 960px) { .rec-gallery-wrap .gallery-image-wrap > a, .rec-gallery-wrap .gallery-image-wrap .caption { top: 8px; left: 8px; padding: 6px 20px 6px 6px; } } .rec-gallery-wrap .gallery-image-wrap > a img, .rec-gallery-wrap .gallery-image-wrap .caption img { width: 30px; height: auto; display: inline-block; border-radius: 50%; vertical-align: middle; margin-right: 10px; } @media (max-width: 960px) { .rec-gallery-wrap .gallery-image-wrap > a img, .rec-gallery-wrap .gallery-image-wrap .caption img { width: 27px; margin-right: 6px; } } .rec-gallery-wrap .gallery-image-wrap .photo-cred { position: absolute; bottom: 20px; left: 26px; font-family: Grotesk, helvetica; font-weight: 400; font-size: 14px; letter-spacing: 0.05px; line-height: 24px; color: #fff; width: calc(100% - 52px); } .rec-gallery-wrap .rec-gallery img.gallery-image { margin-right: 18px; height: 560px; width: auto; display: block; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1600px) { .rec-gallery-wrap .rec-gallery img.gallery-image { height: 482px; } } @media (max-width: 1170px) { .rec-gallery-wrap .rec-gallery img.gallery-image { height: 400px; } } @media (max-width: 960px) { .rec-gallery-wrap .rec-gallery img.gallery-image { height: 532px; margin-right: 15px; } } @media (max-width: 600px) { .rec-gallery-wrap .rec-gallery img.gallery-image { height: 393px; } } @media (max-width: 450px) { .rec-gallery-wrap .rec-gallery img.gallery-image { height: 233px; } } .rec-gallery-wrap .slick-next, .rec-gallery-wrap .slick-prev { position: absolute; right: 24px; bottom: 50%; width: 50px; height: 50px; border-radius: 50%; background: #EAE5DB; z-index: 2; margin-bottom: 6px; transition: all 0.3s; cursor: pointer; } @media (max-width: 960px) { .rec-gallery-wrap .slick-next, .rec-gallery-wrap .slick-prev { right: 18px; width: 42px; height: 42px; } } @media (max-width: 960px) { .rec-gallery-wrap .slick-next, .rec-gallery-wrap .slick-prev { display: none !important; } } .rec-gallery-wrap .slick-next svg, .rec-gallery-wrap .slick-prev svg { width: 8px; height: 12px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: all 0.3s; } .rec-gallery-wrap .slick-next.slick-disabled, .rec-gallery-wrap .slick-prev.slick-disabled { opacity: 0.5; pointer-events: none; } .rec-gallery-wrap .slick-next:hover, .rec-gallery-wrap .slick-prev:hover { background: #E8E0CC; } .rec-gallery-wrap .slick-prev { bottom: auto; top: 50%; margin-bottom: 0; margin-top: 6px; } .rec-gallery-wrap .slick-prev svg { transform: rotate(180deg); } .rec-gallery-wrap .gallery-trigger { position: absolute; bottom: 24px; right: 24px; background: rgba(0, 0, 0, 0.45); border-radius: 25px; padding: 14px 30px 14px 14px; cursor: pointer; transition: all 0.3s; font-size: 0; line-height: 0; } @media (max-width: 960px) { .rec-gallery-wrap .gallery-trigger { bottom: 18px; right: 18px; } } @media (max-width: 960px) { .rec-gallery-wrap .gallery-trigger { bottom: 8px; left: 28px; right: auto; padding: 12px 22px 12px 16px; } } .rec-gallery-wrap .gallery-trigger:hover { background: black; } .rec-gallery-wrap .gallery-trigger small { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; text-transform: uppercase; display: inline-block; vertical-align: middle; margin-left: 10px; color: #FCFAF5; } @media (max-width: 800px) { .rec-gallery-wrap .gallery-trigger small { font-size: 10px; margin-left: 9px; } } .rec-gallery-wrap .gallery-trigger svg { width: 23px; height: 19px; display: inline-block; vertical-align: middle; } @media (max-width: 960px) { .rec-gallery-wrap .gallery-trigger svg { width: 18px; height: 15px; } } .rec-gallery { opacity: 0; transition: all 0.3s; height: 560px; } @media (max-width: 1600px) { .rec-gallery { height: 482px; } } @media (max-width: 1170px) { .rec-gallery { height: 400px; } } @media (max-width: 960px) { .rec-gallery { height: 532px; } } @media (max-width: 600px) { .rec-gallery { height: 393px; } } @media (max-width: 450px) { .rec-gallery { height: 233px; } } .rec-gallery.slick-initialized { opacity: 1; } .rec-gallery.teaser .gallery-image-wrap:not(:first-of-type) { filter: blur(5px); } .rec-content { padding-left: 50px; position: relative; width: 70%; } @media (max-width: 1450px) { .rec-content { padding-left: 30px; } } @media (max-width: 1170px) { .rec-content { max-width: 100%; width: 100%; padding-right: 30px; } } @media (max-width: 960px) { .rec-content { margin-top: 36px; transition: all 0.3s; padding-left: 24px; width: 100%; padding-right: 24px; max-width: 100%; } } .rec-content section { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-top: 15px; padding-bottom: 15px; position: relative; } .ie9 .rec-content section { border-top: 1px dotted #000; } .rec-content section h2 { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.4px; margin: 10px 0 10px; } .rec-content section h2 span { font-family: "Plantin", serif; font-weight: 300; font-style: italic; text-transform: lowercase; } .rec-content section h2 + p { margin-top: 0; } .rec-content section h3 { margin: 10px 0 0 0; font-size: 17px; } .rec-content section h3 + p, .rec-content section h3 + ul, .rec-content section h3 + ol { margin-top: 0; } .rec-content section ul { padding: 0; margin: 8px 0 12px 0; } .rec-content section ul li { list-style: none; padding-left: 20px; position: relative; } .rec-content section ul li::before { content: " "; display: block; width: 11px; height: 1px; position: absolute; top: 11px; left: 2px; background: #E5C89A; } .rec-content section ul li + li { margin-top: 3px; } .rec-content section ol li + li, .rec-content section ul li + li { margin-top: 3px; } .rec-content section ol p, .rec-content section ul p { margin: 0; line-height: 1.1; } .rec-content section ol:last-child, .rec-content section ul:last-child { margin-bottom: 0; } .rec-content section .wt-pill-list { margin: 0; padding: 0; list-style: none; font-size: 0; } .rec-content section .wt-pill-list__item { display: inline-block; margin: 3px 6px 3px 0; padding-left: 0; } .rec-content section .wt-pill-list__item::before { content: none; } .rec-content section .wt-pill-list__item span { font-family: "Grotesk", helvetica; font-weight: 300; font-size: 13px; line-height: 1; padding: 8px 15px 9px; border-radius: 15px; color: #000; background: #EAE5DB; display: block; transition: all 0.3s; } .rec-content section .wt-pill-list__item span:hover { transform: translateY(-2px); } .rec-content section .people { display: inline-block; vertical-align: middle; font-size: 0; padding: 2.5px 0; } .rec-content section .people a { position: relative; width: 25px; display: inline-block; float: left; } .rec-content section .people a img { display: block; width: 100%; height: auto; border-radius: 50%; } .rec-content section .people a + a { margin-left: -8px; } .rec-content section .people a span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #000; padding: 8px 12px; color: #fff; font-family: "Plantin", serif; font-weight: normal; font-size: 11px; line-height: 1; margin-bottom: 8px; pointer-events: none; opacity: 0; transition: all 0.3s; } .rec-content section .people a span::before { content: " "; display: block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #000; position: absolute; top: 100%; left: 0; right: 0; margin: auto; } .rec-content section .people a:hover span { opacity: 1; } .rec-content section .endorsed-modal-trigger { display: inline-block; vertical-align: middle; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; line-height: 1; letter-spacing: 0.41px; background: #EAE5DB; border-radius: 15px; padding: 10px 13px; cursor: pointer; margin-left: 6px; transition: all 0.3s; } .rec-content section .endorsed-modal-trigger:hover { transform: translateY(-2px); } .rec-content section .section-content p { margin: 0; font-family: "Grotesk", helvetica; font-weight: 300; font-size: 17px; line-height: 1.35; } .rec-content section .section-content p + p { margin-top: 15px; } .rec-content section.row { position: relative; padding-left: 130px; padding-top: 12px; padding-bottom: 12px; } @media (max-width: 800px) { .rec-content section.row { padding-left: 100px; } } .rec-content section.row > h2 { position: absolute; top: 0; left: 0; bottom: 0; margin: auto; height: 10px; } .rec-content section.row .person { display: inline-block; } .rec-content section.row .person:hover img { transform: translateY(-2px); } .rec-content section.row .person img { display: inline-block; vertical-align: middle; width: 25px; height: auto; border-radius: 50%; transition: all 0.3s; } .rec-content section.row .person span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; line-height: 1; letter-spacing: 0.41px; display: inline-block; vertical-align: middle; color: #000; margin-left: 8px; } .rec-content section.row .person span .verified-badge { transform: translateY(-1px); } .rec-content section.recommendation-body div { margin: 0; font-family: "Grotesk", helvetica; font-weight: 300; font-size: 17px; line-height: 1.35; } .rec-content section.recommendation-body div a { font-style: normal; color: #000; border-bottom: solid 1px #E5C89A; transition: all 0.3s; font-weight: bold; } .rec-content section.recommendation-body div a:hover { border-bottom: solid 1px #000; } .rec-content section.recommendation-body div + div { margin-top: 15px; } section.recommendation-body { padding-top: 26px; padding-bottom: 26px; } section.recommendation-body h2:first-child { margin-top: 0; } section.recommendation-body h2:not(:first-child) { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 26px; padding-top: 26px; } .ie9 section.recommendation-body h2:not(:first-child) { border-top: 1px dotted #000; } section.recommendation-body p { margin-bottom: 0; } section.recommendation-body p + p { margin-top: 15px; } .rec-intro { margin-bottom: 30px; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 23px; line-height: 1.26; } .rec-intro p { margin: 0; } .rec-intro p + p { margin-top: 16px; } .rec-intro p:not(:first-of-type) { font-family: "Plantin", serif; font-weight: 300; font-size: 16px; line-height: 1.6; } .rec-intro a { font-style: normal; color: #000; border-bottom: 1px solid #E5C89A; transition: all 0.3s; font-weight: 700; } .rec-intro a:hover { border-bottom: 1px solid #000; } .rec-extras { position: absolute; top: 0; left: 100%; margin-left: 35px; height: calc(100% - 14px); } @media (max-width: 1170px) { .rec-extras { display: none; } } .rec-extras-inner { white-space: nowrap; } .rec-extras-inner a, .rec-extras-inner span { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; color: #000; text-transform: uppercase; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: all 0.3s; cursor: pointer; position: relative; } @media (max-width: 1080px) { .rec-extras-inner a, .rec-extras-inner span { font-size: 11px; } } .rec-extras-inner a:hover, .rec-extras-inner span:hover { -webkit-text-decoration-color: #000; text-decoration-color: #000; } .rec-extras-inner a:hover ul, .rec-extras-inner span:hover ul { opacity: 1; pointer-events: all; } .rec-extras-inner a svg, .rec-extras-inner span svg { width: 13px; height: 12px; margin-right: 12px; } @media (max-width: 1080px) { .rec-extras-inner a svg, .rec-extras-inner span svg { margin-right: 6px; } } .rec-extras-inner a + a, .rec-extras-inner a + span, .rec-extras-inner span + a, .rec-extras-inner span + span { margin-top: 16px; } .rec-extras-inner ul { position: absolute; left: -10px; bottom: 100%; background: #000; border-radius: 30px; padding: 8px 24px; opacity: 0; pointer-events: none; transition: all 0.3s; margin: 0 0 12px; } .rec-extras-inner ul::before { content: " "; display: block; position: absolute; top: 100%; left: 0; width: 100%; height: 12px; } .rec-extras-inner ul::after { content: " "; display: block; width: 0; height: 0; border-top: solid 6px #000; border-left: solid 5px transparent; border-right: solid 5px transparent; position: absolute; top: 100%; left: 0; right: 0; margin: auto; } .rec-extras-inner ul .link-message { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-family: "Plantin", serif; font-weight: normal; font-size: 12px; line-height: 1; color: #fff; background: #000; border-radius: 30px; height: 30px; z-index: 1; text-transform: none; padding: 9px 12px; opacity: 0; pointer-events: none; transition: all 0.3s; } .rec-extras-inner ul .link-message.active { opacity: 1; } .rec-extras-inner ul li { display: inline-block; } .rec-extras-inner ul li + li { margin-left: 6px; } .rec-extras-inner ul svg { fill: #fff; margin: 0; transition: all 0.3s; } .rec-extras-inner ul svg:hover { fill: #E5C89A; } .rec-extras-inner.fixed { position: fixed; top: 96px; } .rec-extras-inner.stuck { position: absolute; bottom: 0; top: auto; } span.rec-extra-button { width: 160px; padding: 19px 0 19px 52px; background: #000; color: #fff; border-radius: 25px; position: relative; font-size: 11px; } span.rec-extra-button svg { position: absolute; top: 0; left: 0; right: calc(100% - 48px); bottom: 0; margin: auto; width: 22px; height: 28px; transform: translateY(-1px) translateX(2px); } span.rec-extra-button.rec-copy-trigger { background: #EAE5DB; color: #000; margin-top: 12px; } span.rec-extra-button:hover { -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transform: translateY(-3px); } span.rec-extra-button span:hover { -webkit-text-decoration-color: transparent; text-decoration-color: transparent; } .save-button-wrap { position: relative; margin-bottom: 16px; } .save-button-wrap > span > span { display: none; } .save-button-wrap > span::before { content: " "; display: block; width: 3.5px; height: 1px; background: #000; position: absolute; top: 4.5px; left: 4.5px; opacity: 0; z-index: 1; } .save-button-wrap > span.active::before { opacity: 1; } .save-button-wrap > span.active > span { display: inline; } .save-button-wrap > span.active svg.save { stroke: transparent; } .save-button-wrap > span.active.eat > svg { fill: #FFC296; } .save-button-wrap > span.active.sleep > svg { fill: #ACDDF4; } .save-button-wrap > span.active.play > svg { fill: #F5C9D1; } .save-button-wrap .save { fill: #E5C89A; } .save-button-wrap .popup { text-align: center; position: absolute; bottom: 100%; left: 0; right: 0; width: 100%; margin-bottom: 18px; background: #000; border-radius: 25px; color: #fff; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; line-height: 1; text-transform: none; padding: 18px 0; display: none; } .save-button-wrap .popup::after { content: " "; display: block; position: absolute; top: 100%; left: 0; right: 0; margin: auto; height: 0; width: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #000; } .save-button-wrap .popup a { color: #fff; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; font-style: normal; display: inline; } .save-button-wrap .popup a svg { height: 8px; width: 6px; stroke: #fff; margin-left: 4px; stroke-width: 1.5; } .save-button-wrap.active .save { stroke: transparent; } .reviews-section { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-top: 15px; } .ie9 .reviews-section { border-top: 1px dotted #000; } .reviews-header { display: flex; justify-content: space-between; align-items: flex-end; margin: 20px 0 6px; } @media (max-width: 460px) { .reviews-header { margin-bottom: 37px; } } .reviews-header > h2, .reviews-header > div h2 { font-family: "Altissima", helvetica; font-weight: normal; font-size: 56px; line-height: 1; text-transform: uppercase; margin: 0; } @media (max-width: 600px) { .reviews-header > h2, .reviews-header > div h2 { font-size: 54px; } } .reviews-header > span { background: #000; color: #fff; position: relative; padding: 20px 65px 20px 48px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; text-transform: uppercase; border-radius: 25px; margin-bottom: 7px; cursor: pointer; transition: all 0.3s; } @media (max-width: 600px) { .reviews-header > span { font-size: 9px; padding: 16px 26px 16px 44px; } } .reviews-header > span:hover { transform: translateY(-3px); } .reviews-header > span svg { position: absolute; top: 0; bottom: 0; left: 16px; width: 22px; height: 24px; margin: auto; } @media (max-width: 600px) { .reviews-header > span svg { width: 18px; height: 19px; } } .reviews-header-main { position: relative; } .reviews-header-main form { position: absolute; bottom: 7px; left: 100%; white-space: nowrap; margin-left: 22px; } @media (max-width: 600px) { .reviews-header-main form { margin-left: 10px; } } @media (max-width: 460px) { .reviews-header-main form { left: 0; top: 100%; bottom: auto; margin-left: 0; margin-top: 5px; } } .reviews-header-main form label { display: block; position: relative; font-family: "Bureau Grot Bk", helvetica; font-size: 12px; text-transform: uppercase; letter-spacing: 0.41px; } @media (max-width: 600px) { .reviews-header-main form label { font-size: 10px; } } @media (max-width: 460px) { .reviews-header-main form label { display: inline-block; } } .reviews-header-main form label + label { margin-top: 8px; } @media (max-width: 460px) { .reviews-header-main form label + label { margin-top: 0; margin-left: 12px; } } .reviews-header-main form label input { position: absolute; top: 0; left: 0; opacity: 0; } .reviews-header-main form label input:checked + span { background: #000; } .reviews-header-main form label input:checked + span svg { opacity: 1; } .reviews-header-main form label span { width: 14px; height: 14px; border-radius: 50%; border: solid 1px #000; display: inline-block; position: relative; transition: all 0.3s; margin-right: 4px; margin-bottom: -2px; } @media (max-width: 600px) { .reviews-header-main form label span { margin-right: 2px; } } .reviews-header-main form label span svg { width: 7px; height: 6px; stroke: #E5C89A; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; stroke-width: 2; transition: all 0.3s; } .reviews-scores { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 55px; grid-row-gap: 24px; background: #EAE5DB; padding: 20px; border-radius: 25px; } @media (max-width: 1170px) { .reviews-scores { grid-column-gap: 24px; padding: 20px 12px; } } @media (max-width: 600px) { .reviews-scores { grid-template-columns: 1fr; } } .reviews-scores > div { display: flex; justify-content: space-between; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; align-items: center; } .reviews-scores > div .review-bar { width: calc(100% - 110px); height: 2px; background: #fff; position: relative; } .reviews-scores > div .review-bar .inner-bar { background: #000; height: 2px; width: 0%; transition: all 0.3s; } .reviews-scores > div .review-bar .popup { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 228px; display: flex; background: #000; color: #fff; justify-content: space-between; padding: 12px 24px 15px; margin-bottom: 18px; border-radius: 25px; opacity: 0; pointer-events: none; transition: all 0.3s; } .reviews-scores > div .review-bar .popup::after { content: " "; display: block; position: absolute; top: 100%; left: 0; right: 0; margin: auto; height: 0; width: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #000; } .reviews-scores > div .review-bar .popup span { width: calc(50% - 10px); font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; } .reviews-scores > div .review-bar .popup span small { display: block; font-size: 100%; font-family: "Plantin", serif; font-weight: 300; font-style: italic; } .reviews-scores > div .label { width: 60px; text-align: right; } .reviews-scores > div .number { width: 30px; } .reviews-scores > div:hover .popup { opacity: 1; } .reviews-nav { display: flex; padding-bottom: 16px; border-bottom: solid 1px #000; margin-top: 16px; margin-bottom: 20px; } @media (max-width: 1170px) { .reviews-nav { display: none; } } .reviews-nav > span { width: 25%; font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 29px; line-height: 1; letter-spacing: 0.1px; padding-right: 16px; position: relative; pointer-events: none; } .reviews-nav > span + span { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; padding-left: 16px; } .ie9 .reviews-nav > span + span { border-left: 1px dotted #000; } .reviews-nav > span:last-child { padding-right: 0; } .reviews-nav > span::after { content: " "; display: block; position: absolute; top: 100%; left: 0; margin-top: 13px; height: 3px; width: 100%; background: #E5C89A; opacity: 0; transition: all 0.3s; } .reviews-nav > span.active::after { opacity: 1; } .reviews-nav > span small { float: right; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 14px; margin-top: 9px; } .reviews-nav-mob { display: none; } @media (max-width: 1170px) { .reviews-nav-mob { display: flex !important; margin-top: 18px !important; } } .endorsed-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; display: none; margin-top: 0 !important; } .endorsed-modal.active { display: block; } .endorsed-modal .endorsed-modal-shade { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0, 0, 0, 0.17); } .endorsed-modal .endorsed-modal-inner { position: relative; z-index: 3; width: 392px; background: #000; border-radius: 30px; margin: auto; top: 50%; transform: translateY(-50%); overflow: hidden; margin-top: 0 !important; } @media (max-width: 600px) { .endorsed-modal .endorsed-modal-inner { transform: none; width: calc(100% - 24px); max-width: 392px; left: 0; right: 0; margin: auto; top: auto; bottom: 12px; position: absolute; } } .endorsed-modal .endorsed-modal-inner::after { content: " "; display: block; width: 100%; height: 80px; bottom: 0; position: absolute; background-image: linear-gradient(transparent, #000); pointer-events: none; } .endorsed-modal .endorsed-modal-header { margin: 0 30px; border-bottom: solid 1px #fff; position: relative; color: #fff; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 14px; letter-spacing: 0.41px; text-transform: uppercase; padding: 24px 0 18px; } .endorsed-modal .endorsed-modal-header .check { fill: #E5C89A; width: 17px; height: 16px; margin-right: 8.3px; transform: translateY(1px); } .endorsed-modal .endorsed-modal-header span:not(.endorsed-modal-close) { font-family: "Plantin", serif; font-weight: 300; font-style: italic; text-transform: none; letter-spacing: 0; } .endorsed-modal .endorsed-modal-header span.endorsed-modal-close { position: absolute; top: 16px; right: -10px; padding: 10px; cursor: pointer; } .endorsed-modal .endorsed-modal-header span.endorsed-modal-close svg { stroke: #fff; width: 13px; height: 13px; } .endorsed-modal .endorsed-modal-list { padding: 14.5px 30px 66px; max-height: 450px; overflow: auto; margin-top: 0 !important; } .endorsed-modal .endorsed-modal-list .load-more { width: 100%; color: #000; margin-top: 2rem; background: #E8E0CC; border-radius: 30px; padding: 15px 10px; font-size: 10px; } .endorsed-modal .endorsed-modal-list a { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 14px; line-height: 1; letter-spacing: 0.41px; color: #fff !important; } .endorsed-modal .endorsed-modal-list a + a { background-position: top; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 14.5px; padding-top: 14.5px; } .ie9 .endorsed-modal .endorsed-modal-list a + a { border-top: 1px dotted #fff; } .endorsed-modal .endorsed-modal-list a img { width: 25px; height: auto; border-radius: 50%; margin-right: 12px; vertical-align: middle; } .save-button-tooltip { position: absolute; padding: 17px 22px; bottom: 100%; left: 6px; transform: translateX(-50%); background: #000; border-radius: 25px; width: auto; min-width: 100%; margin-bottom: 16px; white-space: nowrap; text-transform: none; text-align: center; transition: all 0.3s; opacity: 0; pointer-events: none; } .save-button-tooltip.active { opacity: 1; pointer-events: all; } .save-button-tooltip.list-copy { left: 14px; } .save-button-tooltip::before { content: " "; display: block; width: 0; height: 0; border-top: 8px solid #000; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; top: 100%; left: 0; right: 0; margin: auto; } .save-button-tooltip::after { content: " "; display: block; width: 100%; height: 16px; position: absolute; top: 100%; left: 0; } .save-button-tooltip span { display: inline; font-family: "Plantin", serif; font-weight: 300; color: #fff; font-style: italic; font-size: 12px; line-height: 1; text-transform: none; } .save-button-tooltip a { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; color: #fff; font-style: normal; margin-left: 6px; display: inline; margin-top: 0; } .save-button-tooltip svg { width: 6px !important; height: 9px !important; stroke: #fff !important; margin-left: 6px; } .spot-paywall { margin: 0 50px; background: #000; border-radius: 30px; color: #fff; display: flex; align-items: center; padding: 30px 40px; justify-content: space-between; } @media (max-width: 1450px) { .spot-paywall { margin: 0 30px; } } @media (max-width: 960px) { .spot-paywall { margin: 35px 24px 0; padding: 20px 24px; } } @media (max-width: 600px) { .spot-paywall { display: block; } } .spot-paywall .content { width: calc(60% - 27px); } @media (max-width: 600px) { .spot-paywall .content { width: 100%; text-align: center; } } .spot-paywall .content h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; font-size: 42px; line-height: 1.2; margin: 0 0 12px; } @media (max-width: 600px) { .spot-paywall .content h2 { font-size: 36px; } } .spot-paywall .content p { margin: 0; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 16px; line-height: 1.5; } @media (max-width: 600px) { .spot-paywall .content p { font-size: 14px; } } .spot-paywall .content a { color: #fff; text-decoration: underline; } .spot-paywall .ctas { width: calc(40% - 27px); } @media (max-width: 600px) { .spot-paywall .ctas { width: 100%; max-width: 300px; margin: 24px auto 0; } } .spot-paywall .ctas > a { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; color: #000; background: #E5C89A; padding: 24px 30px; display: block; border-radius: 30px; transition: all 0.3s; } .spot-paywall .ctas > a:hover { background: #E8E0CC; } .spot-paywall .ctas > a svg { float: right; width: 12px; height: 12px; } .spot-paywall .ctas a.learn-more { color: #fff; } .spot-paywall .ctas p { margin: 18px 0 0; text-align: center; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 13px; line-height: 1.4; } .spot-paywall .ctas p span { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; font-style: normal; cursor: pointer; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: all 0.3s; } .spot-paywall .ctas p span:hover { -webkit-text-decoration-color: #fff; text-decoration-color: #fff; } .modal.login h2, .modal.forgot-password h2 { margin-top: 0; } .modal.login p, .modal.forgot-password p { font-family: "Grotesk", helvetica; } .modal.login p a, .modal.forgot-password p a { color: #000; } .paywall-buttons-dis { opacity: 0.5; pointer-events: none; } @media (max-width: 960px) { .paywall-buttons-dis { display: none !important; } } .paywall-gallery-dis { pointer-events: none; } @media (max-width: 600px) { .modal--success .modal__content { padding: 48px 24px; } } @media (max-width: 600px) { .modal--success .modal__content h2 { margin-bottom: 24px; } } .modal--success .modal__content p { margin-top: 0; margin-bottom: 36px; font-size: 16px; } @media (max-width: 600px) { .modal--success .modal__content p { margin-bottom: 24px; } } .modal--success .modal__content .button { color: #fff !important; margin-bottom: 22px; } .modal--success .modal__content .button svg { stroke: #fff !important; } .modal--success .confetti-wrap { position: relative; } .modal--success .confetti-wrap canvas { width: 600px; height: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; margin-top: 30px; pointer-events: none; } .modal--success span.modal__close { position: static; text-transform: uppercase; text-transform: uppercase; font-size: 12px; cursor: pointer; } .profile-sidebar .follow-links { text-align: center; margin: 0; padding: 0; list-style: none; margin-bottom: 15px; margin-top: 15px; } .profile-sidebar .follow-links li { display: inline-block; vertical-align: middle; cursor: pointer; border-bottom: solid 1px #E8E0CC; font-family: "Bureau Grot Bk", helvetica; font-size: 13px; padding-bottom: 4px; line-height: 1; } .profile-sidebar .follow-links li + li { margin-left: 16px; } .profile-sidebar .profile-edit { bottom: 30px; left: 0; right: 0; background: #E8E0CC; text-align: center; width: 140px; font-family: "Bureau Grot Bk", helvetica; font-size: 11px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; color: #000; padding: 19px 0 21px; border-radius: 30px; margin: auto; transition: all 0.3s; } @media (max-width: 960px) { .profile-sidebar .profile-edit { display: none; } } .profile-sidebar .profile-edit:hover { background: #E5C89A; } .profile-sidebar .profile-edit svg { width: 7px; height: 7px; margin-right: 6px; transform: translateY(-1px); } .profile-sidebar .buttons.follow-section { display: block; } @media (max-width: 960px) { .profile-sidebar .buttons.follow-section { position: static; margin-top: 30px; } } @media (max-width: 600px) { .profile-sidebar .buttons.follow-section { margin-top: 20px; } } .profile-sidebar .buttons.follow-section > div.follow-wrap { width: 100%; display: flex; justify-content: space-between; } .profile-sidebar .buttons.follow-section > div.follow-wrap > span, .profile-sidebar .buttons.follow-section > div.follow-wrap > a { width: calc(50% - 5px); } .profile-sidebar .buttons.follow-section > div.follow-wrap > span.follow-button::after { content: "Follow"; } .profile-sidebar .buttons.follow-section > div.follow-wrap > span.follow-button.active::after { content: "Following"; } .profile-sidebar .buttons.follow-section > div.follow-wrap > span.follow-button.active:hover::after { content: "Unfollow?"; } .profile-sidebar .buttons.follow-section > div.follow-wrap img { width: 28px; height: auto; border-radius: 50%; position: absolute; top: 0; left: 0; right: calc(100% - 48px); bottom: 0; margin: auto; transform: translateX(3px); } .profile-sidebar .buttons.follow-section > div.follow-wrap svg.message { width: 22px; height: 22px; transform: translateX(3px); } .profile-sidebar .buttons.follow-section > div.follow-wrap svg.arrow-right { width: 6px; height: 9px; stroke: #fff; right: 0; left: calc(100% - 48px); } .profile-sidebar .buttons.follow-section .endorsed-modal-list > span { color: #fff; font-family: "Grotesk", helvetica; } .endorsed-modal-list::-webkit-scrollbar { display: none; } .profile-sidebar-inner { z-index: 1; } .profile-sidebar-inner.modal-open { z-index: 9999999999999; } .profile-sidebar-inner .content { padding-bottom: 0; } @media (min-width: 960px) and (max-height: 700px) { .profile-sidebar-inner .content { padding-bottom: 100px; } } .profile-sidebar-inner .content > img { width: 80px; height: auto; border-radius: 50%; display: block; margin: 0 auto 12px; } @media (max-width: 960px) { .profile-sidebar-inner .content > img { width: 92px; border: solid 5px #FCFAF5; margin-top: -46px; } } .profile-sidebar-inner .content h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 47px; line-height: 1; margin: 0; } .profile-sidebar-inner .content h2 .verified-badge { width: 14px; height: 14px; vertical-align: top; margin-top: 4px; } .profile-sidebar-inner .content .profile-links { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; margin: 16px 0 12px; } .profile-sidebar-inner .content .profile-links a { color: #000; display: inline-block; margin: 0 9px 12px; } .profile-sidebar-inner .content .profile-links a span { border-bottom: solid 1px #E5C89A; padding-bottom: 1px; } .profile-sidebar-inner .content .profile-links a:nth-child(3) { display: block; } .profile-sidebar-inner .content .profile-links svg { width: 17px; height: 17px; margin-right: 6px; fill: #E5C89A; vertical-align: middle; } .profile-sidebar-inner .content .profile-links svg.submit-icon { fill: #000; } .profile-sidebar-inner .content .location { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 14px; line-height: 1; display: inline-block; vertical-align: middle; margin: 0; } .profile-sidebar-inner .content .socials { display: inline-block; vertical-align: middle; margin-left: 8px; } .profile-sidebar-inner .content .socials a { display: inline-block; vertical-align: middle; margin: 0 3px; } @media (max-width: 600px) { .profile-sidebar-inner .content .socials a { margin: 0 0 0 20px; } } .profile-sidebar-inner .content .socials svg { width: 14px; height: 14px; } .profile-main { padding: 0 50px; } @media (max-width: 1450px) { .profile-main { padding: 0 30px; } } @media (max-width: 600px) { .profile-main { padding: 0 20px; } } .profile-main .profile-cover { position: relative; } .profile-main .profile-cover > img { width: 100%; height: 372px; -o-object-fit: cover; object-fit: cover; } @media (max-width: 600px) { .profile-main .profile-cover > img { height: 232px; } } .profile-main .profile-cover .buttons { position: absolute; top: 0; left: 0; width: 100%; padding: 20px; display: flex; justify-content: right; align-items: last; } .profile-main .profile-cover .buttons .profile-edit { background: #E8E0CC; text-align: center; width: 118px; font-family: "Bureau Grot Bk", helvetica; font-size: 10px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; color: #000; padding: 16px 0 15px; border-radius: 30px; transition: all 0.3s; } .profile-main .profile-cover .buttons .profile-edit svg { width: 7px; height: 7px; margin-right: 6px; transform: translateY(-1px); } .profile-main .profile-cover .buttons .profile-edit:hover { background: #E5C89A; } .profile-main .profile-cover .buttons .upload-cover { background: rgba(0, 0, 0, 0.45); text-align: center; width: 155px; font-family: "Bureau Grot Bk", helvetica; font-size: 10px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; color: #fff; padding: 14px 0 12px; border-radius: 30px; transition: all 0.3s; display: block; cursor: pointer; } .profile-main .profile-cover .buttons .upload-cover svg { width: 18px; height: 15px; margin-right: 6px; transform: translateY(-2px); vertical-align: middle; } .profile-main .profile-cover .buttons .upload-cover:hover { background: #000; } .profile-main .profile-content { width: 70%; position: relative; } @media (max-width: 960px) { .profile-main .profile-content { width: 100%; } } .profile-main .profile-content .error { bottom: 100%; top: auto !important; left: 0 !important; text-align: center !important; margin-bottom: 10px; } .profile-main .profile-content .button.hidden + .error { display: none; } .profile-main .profile-content-extra { position: absolute; top: 0; left: 100%; margin-left: 35px; height: calc(100% - 14px); } .profile-main .profile-content-extra-inner { white-space: nowrap; } @media (max-width: 960px) { .profile-main .profile-content-extra-inner { text-align: center; padding-top: 12px; } } .profile-main .profile-content-extra-inner.fixed { top: 96px; position: fixed; } .profile-main .profile-content-extra-inner.stuck { top: auto; bottom: 0; position: absolute; } .profile-main .profile-content-extra-inner a { display: block; display: flex; align-items: center; color: #000; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 13px; line-height: 1; } @media (max-width: 960px) { .profile-main .profile-content-extra-inner a { display: inline-flex; margin: 0 8px; vertical-align: middle; } } @media (max-width: 600px) { .profile-main .profile-content-extra-inner a { font-size: 12px; } } .profile-main .profile-content-extra-inner a span { margin-left: 12px; } @media (max-width: 960px) { .profile-main .profile-content-extra-inner a span { border-bottom: solid 1px #E8E0CC; } } .profile-main .profile-content-extra-inner a + a { margin-top: 15px; } @media (max-width: 960px) { .profile-main .profile-content-extra-inner a + a { margin-top: 0; } } .profile-main .profile-content-extra-inner svg { width: 20px; height: 24px; } @media (max-width: 600px) { .profile-main .profile-content-extra-inner svg { width: 12px; height: 14px; } } .profile-main .profile-content-extra-inner svg.loved-gate { height: 22px; } @media (max-width: 600px) { .profile-main .profile-content-extra-inner svg.loved-gate { width: 14px; height: 16px; } } .profile-main .profile-intro { margin-bottom: 20px; margin-top: 30px; } @media (max-width: 960px) { .profile-main .profile-intro { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; position: static; margin-left: 0; height: auto; margin-bottom: 0; margin-top: 0; padding-top: 30px; padding-bottom: 20px; } .ie9 .profile-main .profile-intro { border-top: 1px dotted #000; } } @media (max-width: 960px) { .profile-main .profile-intro.no-mob { display: none; } } .profile-main .profile-intro p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 23px; line-height: 1.26; margin: 0; } @media (max-width: 600px) { .profile-main .profile-intro p { font-size: 18px; line-height: 1.33; } } .profile-main .profile-intro p + p { margin-top: 12px; } .profile-main .profile-intro .profile-intro-edit { display: flex; align-items: center; } .profile-main .profile-intro .profile-intro-edit button { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; justify-content: center; background: #E8E0CC; border-radius: 50%; } .profile-main .profile-intro .profile-intro-edit button svg { width: 10px; height: 10px; align-self: center; } .profile-main .profile-intro .profile-intro-edit span { padding: 0 0 0 16px; } .profile-main .profile-intro .profile-intro-edit input { width: 100%; border: 0; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 23px; line-height: 1.26; margin: 0; padding: 0 0 0 16px; background: none; color: #000; } @media (max-width: 600px) { .profile-main .profile-intro .profile-intro-edit input { font-size: 18px; line-height: 1.33; text-align: left; } } .profile-main .profile-intro .profile-intro-edit-submit { display: none; margin-top: 17px; } .profile-main .profile-intro .profile-intro-edit-submit button.button { width: 114px; padding-left: 0; padding-right: 0; text-align: center; color: #fff !important; margin: 0; vertical-align: middle; display: inline-block; } .profile-main .profile-intro + .profile-referred { position: relative; } .profile-main .profile-intro + .profile-referred::before { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; display: block; width: 100%; height: 1px; position: absolute; bottom: 100%; left: 0; } .ie9 .profile-main .profile-intro + .profile-referred::before { border-top: 1px dotted #000; } .profile-main .profile-intro .form__field { margin-bottom: 32px; } .profile-main .profile-referred { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; display: flex; align-items: center; padding: 22px 0; } .ie9 .profile-main .profile-referred { border-bottom: 1px dotted #000; } @media (max-width: 1080px) { .profile-main .profile-referred { display: block; } } @media (max-width: 960px) { .profile-main .profile-referred { display: flex; } } @media (max-width: 600px) { .profile-main .profile-referred { display: block; } } .profile-main .profile-referred > div { width: 50%; display: flex; align-items: center; } @media (max-width: 1240px) { .profile-main .profile-referred > div { width: auto; padding-right: 10px; } } @media (max-width: 1080px) { .profile-main .profile-referred > div { width: 100%; } } @media (max-width: 960px) { .profile-main .profile-referred > div { width: 50%; } } @media (max-width: 600px) { .profile-main .profile-referred > div { width: 100%; } } .profile-main .profile-referred > div:only-child { width: 100% !important; } .profile-main .profile-referred > div + div { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; padding-left: 10px; padding-right: 0; } .ie9 .profile-main .profile-referred > div + div { border-left: 1px dotted #000; } @media (max-width: 1080px) { .profile-main .profile-referred > div + div { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-left: 0; margin-top: 22px; padding-top: 22px; } .ie9 .profile-main .profile-referred > div + div { border-top: 1px dotted #000; } } @media (max-width: 960px) { .profile-main .profile-referred > div + div { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; padding-left: 10px; margin-top: 0; } .ie9 .profile-main .profile-referred > div + div { border-left: 1px dotted #000; } } @media (max-width: 600px) { .profile-main .profile-referred > div + div { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-left: 0; margin-top: 22px; padding-top: 22px; } .ie9 .profile-main .profile-referred > div + div { border-top: 1px dotted #000; } } .profile-main .profile-referred > div h4 { margin: 0; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.41px; } .profile-main .profile-referred > div p { margin: 0 0 0 15px; font-family: "Grotesk", helvetica; font-size: 14px; line-height: 1; letter-spacing: 0.05px; transform: translateY(-1px); } .profile-main .profile-referred > div span { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 10px; letter-spacing: 0.41px; line-height: 1; margin-left: 6px; } .profile-main .profile-referred > div a { display: inline-flex; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: 0.41px; margin-left: 12px; align-items: center; color: #000; } .profile-main .profile-referred > div a img { width: 30px; height: 30px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; margin-right: 6px; } .profile-item-list-trigger { display: inline-block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: 0.41px; text-transform: uppercase; cursor: pointer; } .profile-item-list-trigger svg { width: 9px; height: 7px; margin-left: 6px; stroke-width: 1.5; transition: all 0.3s; } .profile-item-list-trigger.active svg { transform: rotate(180deg); } .profile-questions-empty { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-bottom: 36px; position: relative; } .ie9 .profile-questions-empty { border-bottom: 1px dotted #000; } .profile-questions-empty::before { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; display: block; width: 100%; height: 36px; } .ie9 .profile-questions-empty::before { border-top: 1px dotted #000; } .profile-questions-empty h4 { margin: 0 0 20px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.41px; } .profile-questions-empty__question + div { margin-top: 17px; } .profile-questions-empty__question .question-wrap { display: flex; height: 51px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1.3; } @media (max-width: 600px) { .profile-questions-empty__question .question-wrap { font-size: 11px; } } .profile-questions-empty__question .question-wrap .question { width: calc(100% - 100px); display: flex; justify-content: space-between; align-items: center; height: 51px; background: #E8E0CC; padding: 0 20px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; position: relative; } @incliude breakpoint($max: 600px) { .profile-questions-empty__question .question-wrap .question { width: calc(100% - 88px); } } .profile-questions-empty__question .question-wrap .question span { width: calc(100% - 28px); text-transform: uppercase; } .profile-questions-empty__question .question-wrap .question svg { width: 8px; margin-left: 20px; } .profile-questions-empty__question .question-wrap .question select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .profile-questions-empty__question .question-wrap .buttons { width: 100px; height: 51px; } @incliude breakpoint($max: 600px) { .profile-questions-empty__question .question-wrap .buttons { width: 88px; } } .profile-questions-empty__question .question-wrap .buttons button { border-top-right-radius: 30px; border-bottom-right-radius: 30px; height: 100%; width: 100%; text-align: center; padding-right: 2px; } .profile-questions-empty__question .question-wrap .buttons .profile-questions-empty-cta { display: block; background: #000; color: #fff; } .profile-questions-empty__question .question-wrap .buttons .profile-questions-empty-close { display: none; background: #DED6C3; color: rgba(0, 0, 0, 0.33); } .profile-questions-empty__question textarea { margin-top: 17px; border-radius: 30px; width: 100%; height: 87px; padding: 24px 20px; font-family: "Grotesk", helvetica; font-size: 16px; line-height: 1.3; border: 0; background: #E8E0CC; display: none; } @media (max-width: 600px) { .profile-questions-empty__question textarea { font-size: 14px; } } .profile-questions-empty__footer { display: none; align-items: center; } .profile-questions-empty__footer button.button { width: 114px; padding-left: 0; padding-right: 0; text-align: center; color: #fff !important; margin: 0; vertical-align: middle; display: inline-block; } .profile-questions-empty__footer > div { margin-left: 20px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; vertical-align: middle; display: inline-block; } .profile-item-list { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin: 0; padding: 0; list-style: none; padding-bottom: 16px; } .ie9 .profile-item-list { border-bottom: 1px dotted #000; } .profile-item-list li { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-top: 24px; } .ie9 .profile-item-list li { border-top: 1px dotted #000; } .profile-item-list li + li { margin-top: 16px; } .profile-item-list li h2 { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: 0.41px; text-transform: uppercase; padding-right: 16px; position: relative; margin: 0; cursor: pointer; } @media (max-width: 600px) { .profile-item-list li h2 { font-size: 10px; } } .profile-item-list li h2 svg { position: absolute; top: 3px; right: 0; width: 8px; height: 6px; transition: all 0.3s; display: none; } .profile-item-list li h2.active svg { transform: rotate(180deg); } .profile-item-list li .profile-item-content { font-family: "Grotesk", helvetica; font-size: 17px; line-height: 1.4; padding-top: 12px; } @media (max-width: 600px) { .profile-item-list li .profile-item-content { font-size: 15px; padding-top: 18px; } } .profile-item-list li .profile-item-content p { margin: 0; } .profile-item-list li .profile-item-content p + p { margin-top: 12px; } .activity-header { margin-top: 30px; padding-bottom: 20px; border-bottom: solid 1px #000; display: flex; margin-bottom: 20px; } @media (max-width: 1080px) { .activity-header { display: none; } } .activity-header > span { background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; width: 33.333%; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 29px; line-height: 1; letter-spacing: 0.1px; padding-right: 12px; align-self: center; height: 30px; position: relative; text-transform: capitalize; cursor: pointer; } .ie9 .activity-header > span { border-right: 1px dotted #000; } @media (max-width: 1170px) { .activity-header > span { font-size: 24px; } } .activity-header > span + span { padding-left: 12px; } .activity-header > span:last-of-type { padding-right: 0; background-image: none; } .activity-header > span svg { margin-right: 12px; transform: translateY(1px); } .activity-header > span .check { width: 27px; height: 26px; fill: #E5C89A; } .activity-header > span .review { width: 22px; height: 24px; } .activity-header > span small { float: right; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 14px; margin-top: 9px; } @media (max-width: 1170px) { .activity-header > span small { margin-top: 7px; } } .activity-header > span::after { content: " "; display: block; position: absolute; top: 100%; left: 0; width: 100%; height: 3px; margin-top: 17px; background: #E5C89A; opacity: 0; transition: all 0.3s; } .activity-header > span.active::after { opacity: 1; } .activity-header-mob, .reviews-nav-mob { display: none; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: solid 1px #000; margin-bottom: 20px; margin-top: 30px; position: relative; } @media (max-width: 1080px) { .activity-header-mob, .reviews-nav-mob { display: flex; } } .activity-header-mob h2, .reviews-nav-mob h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 29px; line-height: 1; letter-spacing: 0.1px; text-transform: capitalize; margin: 0; } .activity-header-mob h2 small, .reviews-nav-mob h2 small { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; line-height: 1; letter-spacing: 0; display: inline-block; vertical-align: middle; margin-left: 10px; } .activity-header-mob > span, .reviews-nav-mob > span { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; line-height: 1; cursor: pointer; } .activity-header-mob > span svg, .reviews-nav-mob > span svg { vertical-align: middle; margin-left: 10px; width: 13px; height: 18px; } .activity-header-mob .activity-filter-dd, .reviews-nav-mob .activity-filter-dd { position: absolute; top: -7px; right: -18px; z-index: 9999; } .activity-header-mob .activity-filter-dd.review-filter-dd, .reviews-nav-mob .activity-filter-dd.review-filter-dd { display: none; } .activity-header-mob .activity-filter-dd .activity-filter-dd-shade, .reviews-nav-mob .activity-filter-dd .activity-filter-dd-shade { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; } .activity-header-mob .activity-filter-dd-inner, .reviews-nav-mob .activity-filter-dd-inner { position: relative; width: 250px; background: #000; color: #fff; padding: 20px; border-radius: 25px; z-index: 3; } .activity-header-mob .activity-filter-dd-inner h2, .reviews-nav-mob .activity-filter-dd-inner h2 { border-bottom: solid 1px #fff; margin-bottom: 12px; padding-bottom: 12px; font-size: 12px; font-family: "Plantin", serif; font-weight: 300; font-style: italic; } .activity-header-mob .activity-filter-dd-inner h2 span, .reviews-nav-mob .activity-filter-dd-inner h2 span { float: right; transform: translateY(-2px); cursor: pointer; } .activity-header-mob .activity-filter-dd-inner h2 span svg, .reviews-nav-mob .activity-filter-dd-inner h2 span svg { width: 10px; height: 10px; stroke: #fff; } .activity-header-mob .activity-filter-dd-inner span, .reviews-nav-mob .activity-filter-dd-inner span { display: block; text-transform: uppercase; cursor: pointer; } .activity-header-mob .activity-filter-dd-inner span small, .reviews-nav-mob .activity-filter-dd-inner span small { float: right; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; line-height: 1; cursor: pointer; margin-top: 4px; } .activity-header-mob .activity-filter-dd-inner span + span, .reviews-nav-mob .activity-filter-dd-inner span + span { background-position: top; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 12px; padding-top: 12px; } .ie9 .activity-header-mob .activity-filter-dd-inner span + span, .ie9 .reviews-nav-mob .activity-filter-dd-inner span + span { border-top: 1px dotted #fff; } .activity-item { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; position: relative; padding-bottom: 20px; margin-top: 20px; } .ie9 .activity-item { border-bottom: 1px dotted #000; } .activity-item:first-of-type { margin-top: 0; } .activity-item:not(.review-item)::after { content: " "; display: none; position: absolute; top: 1px; right: 0; width: 20px; height: calc(100% - 2px); background-image: linear-gradient(to right, rgba(252, 250, 245, 0), #fcfaf5); } @media (max-width: 960px) { .activity-item:not(.review-item)::after { display: block; } } .activity-item.review-item { padding-left: 80px; } @media (max-width: 600px) { .activity-item.review-item { padding-left: 62px; } } .activity-item .activity-item-inner { padding-left: 80px; } @media (max-width: 960px) { .activity-item .activity-item-inner { overflow-x: auto; overflow-y: hidden; white-space: nowrap; } } @media (max-width: 600px) { .activity-item .activity-item-inner { padding-left: 62px; position: relative; } } .activity-item .img-wrap { position: absolute; top: 0; left: 0; width: 60px; } @media (max-width: 600px) { .activity-item .img-wrap { width: 50px; } } .activity-item .img-wrap > img { width: 100%; display: block; height: auto; border-radius: 50%; } .activity-item .img-wrap svg { position: absolute; top: 0; left: 0; } .activity-item .img-wrap svg.loved-gate { width: 22px; height: 24px; } .activity-item .img-wrap svg.discover-plus { width: 20px; height: 24px; } .activity-item .img-wrap svg.list-plus { width: 20px; height: 25px; } .activity-item.no-content > img { position: absolute; top: 50%; transform: translateY(-50%); margin-top: -10px; } .activity-item.hide { display: none; } .activity-item-header { margin-bottom: -3px; } .activity-item-header > h3 { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 13px; line-height: 1; margin: 0 0 6px; } .activity-item-header > h3 a { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; font-style: normal; color: #000; } .activity-item-header > h3 a .verified-badge { transform: translateY(-1px); } @media (max-width: 960px) { .activity-item-header > h3::after { display: inline-block; width: 20px; height: 1px; content: " "; } } .activity-item-meta > svg { width: 27px; height: 26px; fill: #E5C89A; margin-left: 8px; } .activity-item-meta > svg:only-child { margin-left: 0; } .activity-item-meta h4 { margin: 0; font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 29px; letter-spacing: 0.1px; } .activity-item-meta h4 a { color: #000; } .activity-item-rating { font-size: 0; display: inline-block; } @media (max-width: 960px) { .activity-item-rating { margin-right: 20px; } } .activity-item-rating > span { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 29px; letter-spacing: 0.1px; } .activity-item-rating::before { content: "\201C"; font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 29px; letter-spacing: 0.1px; } .activity-item-rating::after { content: "\201D"; font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 29px; letter-spacing: 0.1px; } .activity-item-rating .details { display: inline-block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; padding: 0 10px; margin-left: 6px; border-left: solid 1px #EAE5DB; vertical-align: top; padding-top: 3px; } .activity-item-rating .details span { display: block; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; line-height: 1; } .activity-item-content { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 16px; line-height: 1.37; margin-top: 4px; transition: all 0.3s; overflow: hidden; } @media (max-width: 600px) { .activity-item-content { font-size: 15px; line-height: 1.33; } } .activity-item-content .activity-item-more, .activity-item-content .activity-item-less { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; text-transform: uppercase; cursor: pointer; } .activity-item-content p { margin: 0; } .activity-item-content p + p { margin-top: 12px; } .activity-item-content .activity-item-content-extra { display: none; } .activity-item-content.alt { padding-left: 80px; padding-right: 10px; } @media (max-width: 600px) { .activity-item-content.alt { padding-left: 62px; } } .activity-item-gallery { width: auto; font-size: 0; line-height: 0; } .activity-item-gallery > span { width: auto; display: inline-block; vertical-align: middle; height: 50px; } .activity-item-gallery > span + span { margin-left: 4px; } .activity-item-gallery > span img { display: block; width: auto; height: 100%; } .activity-item-gallery > span:first-of-type { border-top-left-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; } .activity-item-gallery > span:last-of-type { border-top-right-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; } .activity-item-gallery .activity-item-gallery-trigger { background: #E8E0CC; text-transform: uppercase; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: 0.3px; padding: 18px; cursor: pointer; transition: all 0.3s; } .activity-item-gallery .activity-item-gallery-trigger:hover { background: #E5C89A; } .activity-item-comments { margin-top: 8px; } .activity-item-comments__top button { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; display: inline-block; align-items: center; vertical-align: middle; padding-right: 3px; } .activity-item-comments__top button + button { margin-left: 24px; } .activity-item-comments__top button small { font-family: "Plantin", serif; font-weight: normal; font-style: italic; font-size: 10px; } .activity-item-comments__top button svg { margin-right: 7px; transform: translateY(3px); } .activity-item-comments__top button svg.comment, .activity-item-comments__top button svg.comment-new { width: 13px; height: 13px; } .activity-item-comments__top button svg.heart { stroke: #000; fill: transparent; width: 15px; height: 14px; transition: all 0.3s; } .activity-item-comments__top button svg.heart.active { stroke: #E5C89A; fill: #E5C89A; } .activity-item-comments__main { padding-top: 16px; } .activity-item-comments__form { background: #EAE5DB; border-radius: 25px; height: 51px; display: flex; align-items: center; } .activity-item-comments__form img { width: 30px; height: auto; margin: 0 12px; flex-grow: 0; flex-shrink: 0; border-radius: 50%; } .activity-item-comments__form input, .activity-item-comments__form textarea { font-family: "Grotesk", helvetica; text-transform: normal; width: 100%; padding: 0; border: 0; background: 0; outline: 0 !important; } .activity-item-comments__form button { flex-grow: 0; flex-shrink: 0; margin: 0 30px; font-size: 12px; letter-spacing: 0.41px; transition: all 0.3s; } .activity-item-comments__form button.dis { opacity: 0.26; } .activity-item-comments__comment { margin-top: 18px; padding-left: 42px; position: relative; } .activity-item-comments__comment .comment-profile { position: absolute; top: 0; left: 0; } .activity-item-comments__comment .comment-profile img { width: 30px; height: auto; border-radius: 50%; } .activity-item-comments__comment .comment-header > h3 { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 13px; line-height: 1; margin: 0; } .activity-item-comments__comment .comment-header > h3 a { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; font-style: normal; color: #000; } .activity-item-comments__comment .comment-header > h3 a .verified-badge { transform: translateY(-1px); } .activity-item-comments__comment .comment-body { margin: 6px 0; font-family: "Grotesk", helvetica; font-size: 16px; line-height: 22px; letter-spacing: -0.15px; overflow: hidden; } .activity-item-comments__comment .comment-body p { margin: 0; transition: all 0.3s; } .activity-item-comments__comment .comment-body button { margin-left: 9px; text-transform: uppercase; font-family: "Bureau Grot Bk", helvetica; font-size: 11px; } .activity-item-comments__comment .comment-body .main-comment + .full-comment { display: none; } .activity-item-comments__comment .comment-extra button { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; display: inline-block; align-items: center; vertical-align: middle; padding-right: 3px; } .activity-item-comments__comment .comment-extra button small { font-family: "Plantin", serif; font-weight: normal; font-style: italic; font-size: 10px; } .activity-item-comments__comment .comment-extra button svg { margin-right: 7px; transform: translateY(3px); stroke: #000; fill: transparent; width: 15px; height: 14px; transition: all 0.3s; } .activity-item-comments__comment .comment-extra button svg.active { stroke: #E5C89A; fill: #E5C89A; } .activity-feed-load-more { display: block; border-radius: 25px; text-align: center; background: #E8E0CC; text-transform: uppercase; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: 0.3px; padding: 20px; cursor: pointer; transition: all 0.3s; width: 100%; margin-top: 20px; } .activity-feed-load-more:hover { background: #E5C89A; } .discoveries-header { display: flex; justify-content: space-between; margin-top: 34px; align-items: flex-end; padding-bottom: 22px; border-bottom: solid 1px #000; margin-bottom: 20px; } .discoveries-header > a { border-bottom: solid 2px #E5C89A; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; color: #000; padding-bottom: 2px; } .discoveries-header > a svg { width: 6px; height: 8px; stroke-width: 1.5; transform: rotate(-90deg); margin-left: 6px; } .discoveries-header h2 { display: inline-block; margin: 0; margin-right: 12px; font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 29px; letter-spacing: 0.1px; line-height: 1; } .discoveries-header span { display: inline-block; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 14px; line-height: 20px; } @media (max-width: 600px) { .discoveries-header span { display: none; } } .discoveries-item { position: relative; display: flex; justify-content: space-between; align-items: center; } .discoveries-item > img { width: 60px; height: auto; border-radius: 50%; } @media (max-width: 600px) { .discoveries-item > img { width: 50px; } } .discoveries-item + .discoveries-item { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 20px; padding-top: 20px; } .ie9 .discoveries-item + .discoveries-item { border-top: 1px dotted #000; } .discoveries-item-header { width: calc(100% - 80px); } @media (max-width: 600px) { .discoveries-item-header { width: calc(100% - 62px); } } .discoveries-item-header > h3 { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 13px; line-height: 1; margin: 6px 0 0; } .discoveries-item-header > h3 a { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; font-style: normal; color: #000; } .discoveries-item-meta > svg { width: 27px; height: 26px; margin-left: 0px; } .activity-feed-wrap { position: relative; transition: all 0.5s; overflow: hidden; margin-bottom: 20px; } .activity-feed-wrap:only-child { margin-bottom: 0; } .activity-feed-single { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; transition: all 0.3s; } .activity-feed-single.active { opacity: 1; pointer-events: all; position: static; } .profile-empty-state, .map-list-empty { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 23px; line-height: 1.26; margin: 0; } @media (max-width: 600px) { .profile-empty-state, .map-list-empty { font-size: 18px; line-height: 1.33; } } .profile-empty-state .empty-cta, .map-list-empty .empty-cta { text-decoration: none; font-weight: bolder; color: black; } .profile-cover__loader { pointer-events: none; opacity: 0; background-color: black; position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: grid; place-items: center; } .is-loading .profile-cover__loader { opacity: 0.6; } .list-cover__loader { pointer-events: none; opacity: 0; background-color: black; position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: grid; place-items: center; } .list-cover__loader.is-loading { opacity: 0.6; } .journal-contributions { margin-top: 36px; margin-bottom: 48px; } .journal-contributions__header { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 15px; margin-bottom: 10px; } .ie9 .journal-contributions__header { border-bottom: 1px dotted #000; } .journal-contributions__header h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 29px; font-weight: 400; letter-spacing: 0.1px; margin: 0; } .journal-contributions__header .cta { display: flex; align-items: center; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; color: #000; margin-bottom: 7px; } .journal-contributions__header .cta svg { width: 5px; height: 8px; margin-left: 4px; } .journal-contributions__main { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-bottom: 10px; } .ie9 .journal-contributions__main { border-bottom: 1px dotted #000; } .journal-contributions__post { display: flex; align-items: center; } .journal-contributions__post + div { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-top: 10px; margin-top: 10px; } .ie9 .journal-contributions__post + div { border-top: 1px dotted #000; } .journal-contributions__post .img-wrap { width: 108px; flex-shrink: 0; } .journal-contributions__post .img-wrap img { display: block; width: 100%; height: auto; border-top-left-radius: 7px; border-bottom-left-radius: 7px; } .journal-contributions__post .content { width: 100%; padding-left: 14px; } .journal-contributions__post .content a { color: #000; } .journal-contributions__post .content small { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: 0.1px; text-transform: uppercase; margin: 0 0 6px; } @media (max-width: 800px) { .journal-contributions__post .content small { font-size: 10px; } } .journal-contributions__post .content h3 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 32px; font-weight: 400; letter-spacing: 0.1px; margin: 0; } @media (max-width: 1170px) { .journal-contributions__post .content h3 { font-size: 28px; } } @media (max-width: 800px) { .journal-contributions__post .content h3 { font-size: 24px; } } .gallery-modal { position: fixed; z-index: 999999; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: none; } .gallery-modal-close { position: absolute; top: 24px; right: 30px; width: 46px; height: 46px; border-radius: 50%; background: #E8E0CC; cursor: pointer; transition: all 0.3s; z-index: 9; } @media (max-width: 600px) { .gallery-modal-close { width: 39px; height: 39px; top: 16px; right: 20px; } } .gallery-modal-close svg { width: 14px; height: 14px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } @media (max-width: 600px) { .gallery-modal-close svg { width: 10px; height: 10px; } } .gallery-modal-close:hover { background: #E5C89A; } .gallery-modal-next, .gallery-modal-prev { position: absolute; top: 0; bottom: 0; margin: auto; left: 100%; margin-left: 20px; width: 46px; height: 46px; border-radius: 50%; background: #E8E0CC; cursor: pointer; transition: all 0.3s; } @media (max-width: 600px) { .gallery-modal-next, .gallery-modal-prev { display: none; } } .gallery-modal-next svg, .gallery-modal-prev svg { width: 14px; height: 14px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .gallery-modal-next:hover, .gallery-modal-prev:hover { background: #E5C89A; } .gallery-images .slick-dots { display: none !important; position: absolute; top: 100%; left: 0; right: 0; text-align: center; margin-top: 20px; padding: 0; } @media (max-width: 600px) { .gallery-images .slick-dots { display: block !important; } } .gallery-images .slick-dots li { display: inline-block; vertical-align: middle; width: 9px; height: 9px; background: #E8E0CC; opacity: 0.45; transition: all 0.3s; border-radius: 50%; margin: 0 2.5px; } .gallery-images .slick-dots li.slick-active { opacity: 1; } .gallery-images .slick-dots li button { display: none; } .gallery-modal-prev { left: auto; right: 100%; margin-left: 0; margin-right: 20px; } .gallery-modal-prev svg { transform: rotate(180deg); } .gallery-modal-inner { display: flex; height: 100%; } .gallery-modal-content { width: calc(30% - 30px); margin-left: 30px; position: relative; text-align: center; color: #fff; display: flex; } @media (max-width: 960px) { .gallery-modal-content { position: static; width: 0; margin-left: 0; } } .gallery-modal-content .content-header { display: flex; height: 25%; position: absolute; top: 0; left: 0; width: 100%; } @media (max-width: 960px) { .gallery-modal-content .content-header { height: auto; top: 30px; } } @media (max-width: 600px) { .gallery-modal-content .content-header { top: 26px; } } .gallery-modal-content .content-header h2 { align-self: center; font-family: "Clearface", serif; font-weight: 300; font-size: 36px; line-height: 1; margin: 0; width: 100%; } @media (max-width: 600px) { .gallery-modal-content .content-header h2 { font-size: 21px; } } .gallery-modal-content .content { align-self: center; margin: 0 30px; width: 100%; position: relative; } @media (max-width: 960px) { .gallery-modal-content .content { position: absolute; bottom: 30px; left: 0; z-index: 9; width: calc(100% - 60px); } } @media (max-width: 600px) { .gallery-modal-content .content { width: calc(100% - 40px); margin: 0 20px; bottom: 20px; } } .gallery-modal-content .content .slide-content { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; transition: all 0.3s; } .gallery-modal-content .content .slide-content.active { opacity: 1; pointer-events: all; position: static; } .gallery-modal-content .content p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 16px; line-height: 1.4; margin: 22px 0 0; } @media (max-width: 600px) { .gallery-modal-content .content p { font-size: 14px; } } .gallery-modal-content .content p + p { margin-top: 12px; } .gallery-modal-content .content a.avatar { display: block; } @media (max-width: 960px) { .gallery-modal-content .content a.avatar { display: none; } } .gallery-modal-content .content a.avatar img { width: 30px; height: auto; border-radius: 50%; } .gallery-modal-content .content a.name { display: inline-block; margin-top: 20px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; line-height: 1; color: #fff; } @media (max-width: 600px) { .gallery-modal-content .content a.name { margin-top: 12px; } } .gallery-modal-content .content a.name img { display: none; width: 30px; height: auto; vertical-align: middle; margin-right: 12px; border-radius: 50%; } @media (max-width: 960px) { .gallery-modal-content .content a.name img { display: inline-block; } } .gallery-modal-content .content-count { display: flex; height: 25%; position: absolute; bottom: 0; left: 0; width: 100%; } @media (max-width: 960px) { .gallery-modal-content .content-count { height: auto; bottom: auto; width: auto; left: 30px; top: 40px; } } @media (max-width: 600px) { .gallery-modal-content .content-count { top: 30px; left: 20px; } } .gallery-modal-content .content-count > div { display: block; width: 100%; align-self: center; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; } .gallery-modal-content + .gallery-modal-image { margin: 40px 96px; } @media (max-width: 960px) { .gallery-modal-content + .gallery-modal-image { margin: auto; } } .gallery-modal-image { height: calc(100% - 80px); width: calc(70% - 192px); margin: 40px auto; position: relative; } @media (max-width: 960px) { .gallery-modal-image { width: calc(100% - 192px); height: 500px; margin: auto; } } @media (max-width: 600px) { .gallery-modal-image { width: calc(100% - 40px); height: 36vh; } } .gallery-modal-image img { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; margin: auto; max-width: 100%; max-height: 100%; position: absolute; } .gallery-modal-image .gallery-images, .gallery-modal-image .slick-list, .gallery-modal-image .slick-track { height: 100%; } .js-scroll-to-review { margin-top: 15px; } .review-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 84px 20px; z-index: 999999; overflow: auto; display: none; } @media (max-width: 600px) { .review-modal { padding: 12px; } } .review-modal-shade { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.33; z-index: 1; } .review-modal-main { position: relative; z-index: 2; max-width: 730px; width: 100%; margin: 0 auto; background: #000; border-radius: 30px; padding: 0 84px 84px; text-align: center; color: #fff; transition: all 0.3s; } @media (max-width: 960px) { .review-modal-main { padding: 0 30px 84px; } } @media (max-width: 600px) { .review-modal-main { padding: 0 20px 20px; } } .review-modal-main > .review-modal-close { position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; background: #E8E0CC; border-radius: 50%; cursor: pointer; z-index: 2; } @media (max-width: 600px) { .review-modal-main > .review-modal-close { top: 15px; right: 15px; } } .review-modal-main > .review-modal-close svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 10px; height: 10px; } .review-modal-intro { position: relative; } @media (max-width: 600px) { .review-modal-intro { padding-top: 50px; } } .review-modal-intro > svg { position: absolute; top: -12px; left: 0; right: 0; margin: auto; width: 22px; height: 24px; } @media (max-width: 600px) { .review-modal-intro > svg { position: static; display: block; margin: 0 auto 10px; } } .review-modal-intro h2 { font-family: "Clearface", serif; font-weight: 300; font-size: 39px; line-height: 1.2; margin: 0; padding: 60px 0 30px; } @media (max-width: 600px) { .review-modal-intro h2 { padding: 0 0 36px; font-size: 29px; line-height: 1.3; } } .review-modal-intro h2 span { display: block; } .review-modal-intro.alt { padding-top: 80px; display: none; } @media (max-width: 600px) { .review-modal-intro.alt { padding-top: 56px; } } .review-modal-intro.alt > svg { position: static; fill: #E5C89A; width: 27px; height: 28px; } .review-modal-intro.alt h2 { padding: 0; margin: 0 0 30px; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 72px; line-height: 1; } @media (max-width: 600px) { .review-modal-intro.alt h2 { font-size: 50px; } } .review-modal-intro.alt h3 { font-family: "Plantin", serif; font-weight: 300; font-style: italic; margin: 0 0 22px; font-size: 20px; line-height: 1; } .review-modal-rating { display: flex; margin-bottom: 35px; justify-content: space-between; } @media (max-width: 600px) { .review-modal-rating { background-position: bottom; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; display: block; margin-bottom: 26px; padding-bottom: 38px; } .ie9 .review-modal-rating { border-bottom: 1px dotted #fff; } } .review-modal-rating .check-wrap { width: calc(33.333% - 12px); transition: all 0.3s; position: relative; cursor: pointer; } @media (max-width: 600px) { .review-modal-rating .check-wrap { display: block; width: 100%; } .review-modal-rating .check-wrap + .check-wrap { margin-top: 16px; } } .review-modal-rating .check-wrap label { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 35px; line-height: 1; border: solid 1px #D1C9B5; border-radius: 40px; padding: 20px 0; cursor: pointer; width: 100%; display: block; } @media (max-width: 600px) { .review-modal-rating .check-wrap label { font-size: 33px; padding: 17px 0; } } .review-modal-rating .check-wrap:hover { transform: translateY(-3px); } .review-modal-rating .check-wrap input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .review-modal-rating .check-wrap input:checked + label { background: #E5C89A; border: solid 1px #E5C89A; color: #000; } .review-modal-rating .check-wrap.dis { opacity: 0.5; } .review-modal-options { display: flex; padding: 0 30px; justify-content: space-between; } @media (max-width: 600px) { .review-modal-options { display: block; padding: 0; } } .review-modal-options .col { width: calc(50% - 15px); font-size: 0; } @media (max-width: 600px) { .review-modal-options .col { background-position: bottom; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; width: 100%; padding-bottom: 24px; margin-bottom: 28px; } .ie9 .review-modal-options .col { border-bottom: 1px dotted #fff; } } .review-modal-options h3 { font-family: "Plantin", serif; font-weight: 300; font-style: italic; margin: 0 0 12px; font-size: 20px; line-height: 1; } .review-modal-options span { display: inline-block; vertical-align: middle; margin: 6px; border: solid 1px #D1C9B5; padding: 14.5px 22px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; line-height: 1; border-radius: 30px; transition: all 0.3s; cursor: pointer; position: relative; } .review-modal-options span input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .review-modal-options span:hover { transform: translateY(-3px); } .review-modal-options span.active { background: #E5C89A; border: solid 1px #E5C89A; color: #000; } .review-modal-options span.dis { opacity: 0.5; } .review-modal-comments { margin-top: 24px; } @media (max-width: 600px) { .review-modal-comments { background-position: bottom; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-bottom: 27px; } .ie9 .review-modal-comments { border-bottom: 1px dotted #fff; } } .review-modal-comments > h3 { font-family: "Plantin", serif; font-weight: 300; font-style: italic; margin: 0 0 12px; font-size: 20px; line-height: 1; } .review-modal-comments label { height: 0; opacity: 0; font-size: 0; display: block; } .review-modal-comments textarea { display: block; width: 100%; height: 121px; padding: 24px; font-family: "Grotesk", helvetica; font-weight: 300; font-size: 14px; background: #E8E0CC; border: 0; border-radius: 30px; color: #000; resize: none; } @media (max-width: 600px) { .review-modal-comments textarea { padding: 24px 18px; } } .review-modal-comments textarea:focus { outline: 0; } .review-modal-submit { width: 229px; margin-top: 30px; background: #E5C89A; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; color: #000; text-align: left; padding: 24px; border: 0; border-radius: 30px; transition: all 0.3s; } @media (max-width: 600px) { .review-modal-submit { width: 100%; } } .review-modal-submit svg { float: right; width: 8px; height: 8px; transform: translateY(1px); } .review-modal-submit:hover { transform: translateY(-3px); } .review-modal-submit.disabled { opacity: 0.7; } .review-modal-outro { position: relative; } @media (max-width: 600px) { .review-modal-outro { padding-top: 50px; padding-bottom: 50px; } } .review-modal-outro > svg { position: absolute; top: -12px; left: 0; right: 0; margin: auto; width: 22px; height: 24px; } @media (max-width: 600px) { .review-modal-outro > svg { display: block; position: static; } } .review-modal-outro h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: 400; font-size: 72px; line-height: 1; margin: 0 0 24px; padding-top: 84px; } @media (max-width: 600px) { .review-modal-outro h2 { font-size: 50px; padding-top: 12px; } } .review-modal-outro p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 16px; line-height: 1.375; margin: 0; } .review-modal-outro h3 { margin: 30px 0 14px; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 20px; line-height: 1; } .review-modal-outro .endorse-button { width: 198px; background: #000; border-radius: 25px; position: relative; padding: 20px 27px 20px 48px; color: #FCFAF5; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; text-transform: uppercase; cursor: pointer; transition: all 0.3s; display: block; margin: 0 auto; text-align: left; border: solid 1px #EAE5DB; } .review-modal-outro .endorse-button > svg { position: absolute; top: 0; left: 0; right: calc(100% - 48px); bottom: 0; margin: auto; } .review-modal-outro .endorse-button .check { width: 28px; height: 26px; fill: #E5C89A; } .review-modal-outro .endorse-button .save { width: 20px; height: 25px; } .review-modal-outro .endorse-button small { float: right; transform: translateY(1px); } .review-modal-outro .endorse-button > span { display: none; } .review-modal-outro .endorse-button.active > span { display: inline; } .review-modal-outro .endorse-button.active.eat > svg { fill: #FFC296; } .review-modal-outro .endorse-button.active.sleep > svg { fill: #ACDDF4; } .review-modal-outro .endorse-button.active.play > svg { fill: #F5C9D1; } .review-modal-outro .endorse-button:hover { transform: translateY(-2px); } .review-modal-outro .review-modal-close { display: inline-block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; border-bottom: solid 1px #EAE5DB; text-transform: uppercase; padding-bottom: 2px; cursor: pointer; margin-top: 26px; } .review-modal-outro .review-modal-close:hover svg { transform: translateX(4px); } .review-modal-outro .review-modal-close svg { width: 6px; height: 8px; margin-left: 6px; stroke: #fff; transition: all 0.3s; } .review-modal-photos, .user-lists-modal__photos, .wt-modal .photos { margin-top: 24px; border-radius: 30px; position: relative; color: black; } .review-modal-photos .form__field, .user-lists-modal__photos .form__field, .wt-modal .photos .form__field { margin-bottom: 0; } .review-modal-photos input[type=file] + label, .user-lists-modal__photos input[type=file] + label, .wt-modal .photos input[type=file] + label { padding: 0 !important; } .review-modal-photos .form__field--file input[type=file] + label strong, .user-lists-modal__photos .form__field--file input[type=file] + label strong, .wt-modal .photos .form__field--file input[type=file] + label strong { color: #000; background: #D1C9B5; padding: 13px 15px; height: 40px; } .review-modal-photos #review-file-text, .user-lists-modal__photos #review-file-text, .wt-modal .photos #review-file-text { width: 100%; } .review-modal-photos #review-file-text i, .user-lists-modal__photos #review-file-text i, .wt-modal .photos #review-file-text i { float: right; margin-right: 10px; font-family: "Plantin", serif; font-weight: 300; font-size: 12px; } .review-modal-photos span, .user-lists-modal__photos span, .wt-modal .photos span { font-family: "Grotesk", helvetica; font-weight: 300; font-size: 14px; line-height: 1; color: #000; } .review-modal-photos .error, .user-lists-modal__photos .error, .wt-modal .photos .error { position: absolute; top: 100%; left: 0; width: 100%; text-align: center; font-family: "Grotesk", helvetica; font-size: 12px; line-height: 14px; margin-top: 7px; color: red; } .review-modal-loading { padding-top: 84px; position: relative; height: 100%; } .review-modal-loading.is-active { display: flex; align-items: center; justify-content: center; } @media (max-width: 600px) { .review-modal-loading { padding-top: 50px; padding-bottom: 50px; } } #js-dropzone { color: black; } .spinner, .spinner:before, .spinner:after { border-radius: 50%; } .spinner { color: #ffffff; font-size: 11px; text-indent: -99999em; margin: 55px auto; position: relative; width: 10em; height: 10em; box-shadow: inset 0 0 0 1em; transform: translateZ(0); } .spinner:before, .spinner:after { position: absolute; content: ""; } .spinner:before { width: 5.2em; height: 10.2em; background: black; border-radius: 10.2em 0 0 10.2em; top: -0.1em; left: -0.1em; transform-origin: 5.1em 5.1em; animation: load2 2s infinite ease 1.5s; } .spinner:after { width: 5.2em; height: 10.2em; background: black; border-radius: 0 10.2em 10.2em 0; top: -0.1em; left: 4.9em; transform-origin: 0.1em 5.1em; animation: load2 2s infinite ease; } @keyframes load2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .account-header { text-align: center; padding: 40px 0; } @media (max-width: 960px) { .account-header { padding: 30px 0 0; margin-bottom: -48px; position: relative; z-index: 2; } } .account-header h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 80px; line-height: 1; margin: 8px 0 0; font-weight: normal; } @media (max-width: 960px) { .account-header h2 { font-size: 51px; } } .account-main { display: flex; margin: 0 auto; max-width: 890px; width: 100%; justify-content: space-between; margin-bottom: 80px; } @media (max-width: 960px) { .account-main { display: block; max-width: 100%; } } .account-main + footer { border-top: solid 1px #000; } .account-main button { width: 114px; text-align: center; background: #000; border-radius: 25px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; color: #E8E0CC; text-transform: uppercase; margin-top: 0px; padding: 17px 25px; } .account-main button.wide { width: auto; } .account-main button.button { display: inline; } .account-main .form__button.w-error .error { left: 0 !important; bottom: 100% !important; top: auto !important; margin-bottom: 13px; text-align: center !important; width: calc(100% - 100px); } @media (max-width: 600px) { .account-main .form__button.w-error .error { width: 100%; } } .account-nav-col { width: 206px; position: relative; margin-top: -80px; } @media (max-width: 960px) { .account-nav-col { width: 100%; margin-top: 0; } } .account-nav-col nav { border-radius: 20px; overflow: hidden; margin-top: 80px; } @media (max-width: 960px) { .account-nav-col nav { margin-top: 0; text-align: center; padding: 66px 20px 0; white-space: nowrap; overflow: auto; border-bottom: solid 1px #000; background: #FCFAF5; border-radius: 0; z-index: 3; width: 100%; } } .account-nav-col span { display: block; cursor: pointer; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; padding: 20px 24px; background: #E8E0CC; color: rgba(0, 0, 0, 0.5); transition: all 0.3s; } @media (max-width: 960px) { .account-nav-col span { background: transparent; display: inline-block; padding: 24px 0; position: relative; } .account-nav-col span::after { content: " "; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: #E8E0CC; opacity: 0; } } .account-nav-col span + span { border-top: solid 1px #FCFAF5; } @media (max-width: 960px) { .account-nav-col span + span { border-top: 0; margin-left: 20px; } } .account-nav-col span svg { width: 6px; height: 8px; float: right; opacity: 0; transition: all 0.3s; margin-top: 1px; } @media (max-width: 960px) { .account-nav-col span svg { display: none; } } .account-nav-col span.active, .account-nav-col span:hover { color: #000; } .account-nav-col span.active svg, .account-nav-col span:hover svg { opacity: 1; } .account-nav-col span.active:hover svg { transform: translateX(3px); } @media (max-width: 960px) { .account-nav-col span.active::after { opacity: 1; } } .account-item-list { width: calc(100% - 255px); } @media (max-width: 960px) { .account-item-list { width: 100%; padding: 0 20px; } } .account-item-list section { border-top: solid 1px #000; } @media (max-width: 960px) { .account-item-list section:first-of-type { border-top: 0; } } .account-item { display: flex; align-items: center; flex-wrap: wrap; padding: 20px 0 15px; position: relative; } .account-item.is-open span.account-item-edit { display: none; } .account-item.is-open span.account-item-edit-close { display: inline !important; } .account-item.is-open .account-item-inputs { display: block !important; } .account-item span.account-item-edit { z-index: 2; } .account-item span.account-item-edit-close { z-index: 1; } .account-item h3 { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; margin: 0; } .account-item p, .form .account-item p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 20px; line-height: 1.3; margin: 12px 0 0; max-width: 500px; min-height: 26px; } @media (max-width: 600px) { .account-item p, .form .account-item p { font-size: 18px; min-height: 23.4px; } } .account-item p.dis, .form .account-item p.dis { opacity: 0.5; } .account-item p a, .form .account-item p a { color: #000; text-decoration: underline; } .account-item-title { width: calc(100% - 100px); } @media (max-width: 600px) { .account-item-title { width: calc(100% - 60px); } } .account-item .button { margin-bottom: 5px; } .account-item .account-item-edit, .account-item .account-item-edit-close { position: absolute; right: 0; top: 27px; min-width: 85px; text-align: center; height: 31px; border-radius: 20px; background: #E8E0CC; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; padding: 9px 20px 0; cursor: pointer; transition: all 0.3s; } @media (max-width: 600px) { .account-item .account-item-edit, .account-item .account-item-edit-close { font-size: 0; width: 31px; min-width: 31px; height: 31px; top: 27px; } } .account-item .account-item-edit.account-item-edit-close, .account-item .account-item-edit-close.account-item-edit-close { display: none; } .account-item .account-item-edit.account-item-edit-close svg, .account-item .account-item-edit-close.account-item-edit-close svg { display: none; } @media (max-width: 600px) { .account-item .account-item-edit.account-item-edit-close svg, .account-item .account-item-edit-close.account-item-edit-close svg { display: block; } } .account-item .account-item-edit svg, .account-item .account-item-edit-close svg { width: 7px; height: 7px; margin-right: 9px; transform: translateY(-1px); } @media (max-width: 600px) { .account-item .account-item-edit svg, .account-item .account-item-edit-close svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } } .account-item .account-item-edit:hover, .account-item .account-item-edit-close:hover { background: rgb(216.1486486486, 202.6351351351, 168.8513513514); } .account-item + .account-item, .account-item + .form { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .account-item + .account-item, .ie9 .account-item + .form { border-top: 1px dotted #000; } .account-item + .account-item .line, .account-item + .form .line { position: relative; top: -80px; } .account-item.upgrade-fm .account-item-edit, .account-item.upgrade-fm .account-item-edit-close { top: 15px; } .account-item.cancel-fm { padding: 0px; background: none; } .account-item.cancel-fm .account-item-edit, .account-item.cancel-fm .account-item-edit-close { top: -25px; } .account-item-inputs { padding-top: 10px; display: none; width: calc(100% - 100px); } @media (max-width: 600px) { .account-item-inputs { width: 100%; } } .account-item-inputs.alt { padding-top: 7px; } .account-item-inputs label { display: block; font-family: "Bureau Grot Bk", helvetica; font-size: 12px; line-height: 19px; text-transform: uppercase; text-align: right; margin-right: 25px; } .account-item-inputs input, .account-item-inputs textarea { background: #E8E0CC; min-height: 50px; font-family: "Plantin", serif; font-size: 14px; line-height: 26px; border-radius: 25px; padding: 12px 25px; border: none; outline: none; width: 100%; } .account-item-inputs input::-webkit-input-placeholder, .account-item-inputs textarea::-webkit-input-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .account-item-inputs input::-moz-placeholder, .account-item-inputs textarea::-moz-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .account-item-inputs input:-moz-placeholder, .account-item-inputs textarea:-moz-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .account-item-inputs input:-ms-input-placeholder, .account-item-inputs textarea:-ms-input-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .account-item-inputs .inputs-wrap { max-width: 382px; display: flex; } .account-item-inputs .inputs-wrap--block { display: block; } .account-item-inputs .inputs-wrap.wide { max-width: 100%; display: block; } .account-item-inputs .inputs-wrap.wide .form__field + .form__field { margin-top: 20px; } .account-item-inputs .form__field { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; text-align: left; width: 100%; min-width: 88px; } .account-item-inputs .form__field:not(:last-of-type) { margin-right: 15px; } .account-item-inputs .form__field--half { width: 50%; } .account-item-inputs .form__field--quarter { width: 25%; } @media (max-width: 600px) { .account-item-inputs .form__field--select { padding-right: 58px; } } .account-item-inputs .form__field--select::before { content: ""; position: absolute; top: 22px; right: 25px; width: 8px; height: 6px; background-image: url(/images/chevron.svg?1dfa73e…); background-size: 100%; pointer-events: none; } @media (max-width: 600px) { .account-item-inputs .form__field--select::before { right: 83px; } } .account-item-inputs select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #E8E0CC; min-height: 50px; font-family: "Plantin", serif; font-size: 14px; line-height: 26px; border-radius: 25px; padding: 12px 25px; border: none; outline: none; width: 100%; cursor: pointer; } .account-item-inputs .StripeElement { background: #E8E0CC; border-radius: 25px; padding: 15px 25px; margin-bottom: 20px; } .questions-form .button { margin-bottom: 20px; } .form__button .error { margin-top: 0 !important; top: 20px !important; left: 135px !important; transform: translate(0) !important; text-align: left !important; } .form__button span { display: contents; } .account-founder-renew { background: #E8E0CC; border-radius: 50px; padding: 38px; margin-bottom: 50px; } @media (max-width: 960px) { .account-founder-renew { margin-top: 50px; margin-bottom: 30px; } } @media (max-width: 600px) { .account-founder-renew { padding: 24px 20px; border-radius: 30px; } } .account-founder-renew .inner { position: relative; padding-right: 120px; } @media (max-width: 600px) { .account-founder-renew .inner { padding-right: 0; } } .account-founder-renew .inner h3 { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; margin: 0 0 16px; } .account-founder-renew .inner p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 20px; line-height: 1.3; margin: 0; } @media (max-width: 600px) { .account-founder-renew .inner p { font-size: 18px; } } .account-founder-renew .inner button { color: #E5C89A; position: absolute; top: 50%; right: 0; transform: translateY(-50%); min-width: 114px; width: auto; } @media (max-width: 600px) { .account-founder-renew .inner button { position: static; transform: none; margin-top: 16px; } } .account-founder-renew .inner button svg { width: 7px; height: 7px; margin-right: 9px; transform: translateY(-1px); fill: #E5C89A; } .account-founder-renew .inner button .button-inner { display: block; } .account-founder-renew .inner button .button-inner-alt { display: none; } .account-founder-renew .inner button.swap .button-inner { display: none; } .account-founder-renew .inner button.swap .button-inner-alt { display: block; } .account-founder-renew .full-content { padding-right: 120px; display: none; } @media (max-width: 600px) { .account-founder-renew .full-content { padding-right: 0; } } .account-founder-renew .full-content a { color: #000; text-decoration: underline; } .account-founder-renew .full-content p { font-family: "Grotesk", helvetica; font-size: 14px; line-height: 1.5; } .account-founder-renew .full-content .form__row { justify-content: flex-start; } .account-founder-renew .full-content .form__row button { margin-left: 0; } .account-founder-renew .full-content .form__row + .form__row { margin-top: 0; } .account-founder-renew .full-content .form__row + .form__row:last-child { margin-top: 22px; } .account-founder-renew .full-content .form__row .error { margin-top: 3px; margin-bottom: 9px; } .account-founder-renew .full-content .form__row__right { width: 100%; } .account-founder-renew .full-content .form__row__right .form__field { width: 100%; background: #FCFAF5; border-radius: 25px; height: 52px; padding: 0 25px; align-items: center; display: flex; align-items: center; margin-bottom: 0; } .account-founder-renew .full-content .form__row__right .StripeElement { width: 100%; } .account-founder-renew .full-content .form__row__right input { background: transparent !important; padding: 0; } .account-founder-renew .full-content .form__row__right .promo-button { cursor: pointer; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; } .account-founder-renew .full-content .promo-code-row { display: none; } .account-founder-renew .full-content .promo-code-final-row { font-family: "Grotesk", helvetica; font-size: 12px; line-height: 14px; display: none; padding: 0 25px; margin-bottom: 17px; } .account-founder-renew .full-content .promo-code-final-row span.remove-promo { cursor: pointer; width: 8px; height: 8px; display: inline-block; margin-left: 4px; margin-bottom: -1px; } .account-founder-renew .full-content .promo-code-final-row span.remove-promo svg { display: block; width: 100%; height: 100%; stroke: #A29984; } .lapsed-payment-form, .account-founder-renew { background: #E8E0CC; border-radius: 50px; padding: 38px; margin-bottom: 50px; } @media (max-width: 960px) { .lapsed-payment-form, .account-founder-renew { margin-top: 50px; margin-bottom: 30px; } } @media (max-width: 600px) { .lapsed-payment-form, .account-founder-renew { padding: 24px 20px; border-radius: 30px; } } .lapsed-payment-form .inner, .account-founder-renew .inner { position: relative; padding-right: 120px; } @media (max-width: 600px) { .lapsed-payment-form .inner, .account-founder-renew .inner { padding-right: 0; } } .lapsed-payment-form .inner h3, .account-founder-renew .inner h3 { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; margin: 0 0 16px; } .lapsed-payment-form .inner p, .account-founder-renew .inner p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 20px; line-height: 1.3; margin: 0; } @media (max-width: 600px) { .lapsed-payment-form .inner p, .account-founder-renew .inner p { font-size: 18px; } } .lapsed-payment-form .inner button, .account-founder-renew .inner button { color: #E5C89A; position: absolute; top: 50%; right: 0; transform: translateY(-50%); min-width: 114px; width: auto; } @media (max-width: 600px) { .lapsed-payment-form .inner button, .account-founder-renew .inner button { position: static; transform: none; margin-top: 16px; } } .lapsed-payment-form .inner button svg, .account-founder-renew .inner button svg { width: 7px; height: 7px; margin-right: 9px; transform: translateY(-1px); fill: #E5C89A; } .lapsed-payment-form .inner button .button-inner, .account-founder-renew .inner button .button-inner { display: block; } .lapsed-payment-form .inner button .button-inner-alt, .account-founder-renew .inner button .button-inner-alt { display: none; } .lapsed-payment-form .inner button.swap .button-inner, .account-founder-renew .inner button.swap .button-inner { display: none; } .lapsed-payment-form .inner button.swap .button-inner-alt, .account-founder-renew .inner button.swap .button-inner-alt { display: block; } .lapsed-payment-form .full-content, .account-founder-renew .full-content { padding-right: 120px; display: none; } @media (max-width: 600px) { .lapsed-payment-form .full-content, .account-founder-renew .full-content { padding-right: 0; } } .lapsed-payment-form .full-content a, .account-founder-renew .full-content a { color: #000; text-decoration: underline; } .lapsed-payment-form .full-content p, .account-founder-renew .full-content p { font-family: "Grotesk", helvetica; font-size: 14px; line-height: 1.5; } .lapsed-payment-form .full-content .form__row, .account-founder-renew .full-content .form__row { justify-content: flex-start; } .lapsed-payment-form .full-content .form__row button, .account-founder-renew .full-content .form__row button { margin-left: 0; } .lapsed-payment-form .full-content .form__row + .form__row, .account-founder-renew .full-content .form__row + .form__row { margin-top: 0; } .lapsed-payment-form .full-content .form__row + .form__row:last-child, .account-founder-renew .full-content .form__row + .form__row:last-child { margin-top: 22px; } .lapsed-payment-form .full-content .form__row .error, .account-founder-renew .full-content .form__row .error { margin-top: 3px; margin-bottom: 9px; } .lapsed-payment-form .full-content .form__row__right, .account-founder-renew .full-content .form__row__right { width: 100%; } .lapsed-payment-form .full-content .form__row__right .form__field, .account-founder-renew .full-content .form__row__right .form__field { width: 100%; background: #FCFAF5; border-radius: 25px; height: 52px; padding: 0 25px; align-items: center; display: flex; align-items: center; margin-bottom: 0; } .lapsed-payment-form .full-content .form__row__right .StripeElement, .account-founder-renew .full-content .form__row__right .StripeElement { width: 100%; } .lapsed-payment-form .full-content .form__row__right input, .account-founder-renew .full-content .form__row__right input { background: transparent !important; padding: 0; } .lapsed-payment-form .full-content .form__row__right .promo-button, .account-founder-renew .full-content .form__row__right .promo-button { cursor: pointer; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; border: none; background: none; color: #000; padding: 0px !important; margin: 0px; width: -moz-fit-content; width: fit-content; } .lapsed-payment-form .full-content .form__row__right .promo-button:disabled, .account-founder-renew .full-content .form__row__right .promo-button:disabled { color: #666666; } .lapsed-payment-form .full-content .promo-code-row, .account-founder-renew .full-content .promo-code-row { display: none; } .lapsed-payment-form .full-content .promo-code-final-row, .account-founder-renew .full-content .promo-code-final-row { font-family: "Grotesk", helvetica; font-size: 12px; line-height: 14px; display: none; padding: 0 25px; margin-bottom: 17px; } .lapsed-payment-form .full-content .promo-code-final-row .remove-promo, .account-founder-renew .full-content .promo-code-final-row .remove-promo { cursor: pointer; width: 8px; height: 8px; display: inline-block; margin-left: 5px; margin-bottom: -1px; border: none; background: none; color: #000; padding: 0px !important; } .lapsed-payment-form .full-content .promo-code-final-row .remove-promo svg, .account-founder-renew .full-content .promo-code-final-row .remove-promo svg { display: block; width: 100%; height: 100%; stroke: #A29984; } .sticky-alert { display: flex; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #000; color: #FCFAF5; padding: 25px 30px; z-index: 100; transition: 500ms all; } .sticky-alert.is-closed { opacity: 0; transform: translateY(100%); } @media (max-width: 600px) { .sticky-alert { flex-wrap: wrap; padding: 18px; } } .sticky-alert .title { font-family: "Altissima", helvetica; font-size: 38px; line-height: 29px; width: 90px; } @media (max-width: 600px) { .sticky-alert .title { width: 100%; font-size: 24px; margin-right: 30px; margin-bottom: 5px; } } .sticky-alert p { font-family: "Grotesk", helvetica; font-size: 16px; line-height: 20px; letter-spacing: -0.15px; width: calc(100% - 90px - 120px - 30px); margin: 0 120px 0 30px; } @media (max-width: 960px) { .sticky-alert p { width: calc(100% - 90px - 90px - 30px); margin-right: 90px; } } @media (max-width: 600px) { .sticky-alert p { width: 100%; font-size: 13px; line-height: 16px; margin: 0; } } .sticky-alert a { position: relative; color: #FCFAF5; font-weight: bold; text-transform: none; transition: opacity 300ms; } .sticky-alert a:after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background-color: #E5C89A; } @media (max-width: 600px) { .sticky-alert a:after { bottom: 0; } } .sticky-alert a:hover:after { background-color: #fff; } .sticky-alert-close { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); } @media (max-width: 600px) { .sticky-alert-close { top: 18px; right: 18px; transform: translateY(0); } } .sticky-alert-close svg { stroke: #fff; width: 13px; height: 13px; } .partners-page { text-align: center; } .partners-page__intro { margin: 86px 0; padding: 0 24px; } @media (max-width: 800px) { .partners-page__intro { margin: 50px 0; } } .partners-page__intro h2 { font-family: "Altissima", helvetica; font-style: normal; font-weight: normal; font-size: 80px; line-height: 105%; text-align: center; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } @media (max-width: 600px) { .partners-page__intro h2 { font-size: 50px; } } .partners-page__intro p { max-width: 370px; margin: 14px auto 0; font-family: "Grotesk", helvetica; font-style: normal; font-weight: normal; font-size: 15px; line-height: 135%; } .partners-page__grid { padding-top: 86px; border-top: solid 1px #000; border-bottom: solid 1px #000; display: flex; justify-content: center; flex-wrap: wrap; } @media (max-width: 800px) { .partners-page__grid { padding-top: 50px; } } .partners-page__partner { width: 25%; margin-bottom: 110px; align-self: center; padding: 0 12px; } @media (max-width: 800px) { .partners-page__partner { width: 50%; } } @media (max-width: 800px) { .partners-page__partner { margin-bottom: 50px; } } .partners-page__partner img { transition: opacity 0.3s; width: auto; height: auto; max-width: 151px; max-height: 171px; display: block; margin: 0 auto; filter: grayscale(1); } @media (max-width: 600px) { .partners-page__partner img { max-width: 120px; max-height: 130px; } } .partners-page__partner img:hover { opacity: 0.7; } .partners-page__partner span { display: block; margin-top: 50px; font-family: "Grotesk", helvetica; font-style: normal; font-weight: normal; font-size: 15px; line-height: 18px; color: #000; } @media (max-width: 600px) { .partners-page__partner span { margin-top: 30px; } } .partners-page__partner--full { width: 100%; } .endorsed-modal__dms svg.message { width: 14px; height: 14px; transform: rotate(-25deg); display: inline-block; margin-right: 10px; } .endorsed-modal__dms__form { display: flex; margin: 16px 24px; background: #E8E0CC; border-radius: 30px; align-items: center; padding: 10.5px 16px; } .endorsed-modal__dms__form button { width: 16px; height: 16px; } .endorsed-modal__dms__form button svg { width: 100%; height: 100%; display: block; } .endorsed-modal__dms__form input { color: #000; width: calc(100% - 16px); background: none; border: 0; margin: 0; padding: 0 0 0 16px; font-family: "Grotesk", helvetica; font-size: 16px; line-height: 1; } .endorsed-modal__dms__form input::-webkit-input-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .endorsed-modal__dms__form input::-moz-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .endorsed-modal__dms__form input:-moz-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .endorsed-modal__dms__form input:-ms-input-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .endorsed-modal__dms__form input:focus { outline: 0; } .endorsed-modal__dms .endorsed-modal-list { padding-top: 0; } .endorsed-modal__dms .endorsed-modal-list a:first-of-type { background-position: top; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-top: 14.5px; } .ie9 .endorsed-modal__dms .endorsed-modal-list a:first-of-type { border-top: 1px dotted #fff; } .endorsed-modal__dms .endorsed-modal-list > span { color: #fff; font-family: "Grotesk", helvetica; } .dms-wrap { height: calc(100vh - 66px); padding-top: 0; padding-bottom: 0; display: flex; } @media (max-width: 800px) { .dms-wrap { height: calc(100vh - 51px - 74px); height: calc(var(--vh, 1vh) * 100 - 51px - 74px); } } .messages-vue + footer { display: none; } .dms-sidebar { width: 33.333%; height: 100%; padding: 28px 25px 0px 50px; display: flex; flex-direction: column; position: relative; } @media (max-width: 1450px) { .dms-sidebar { padding: 28px 21px 0px 30px; width: 306px; } } @media (max-width: 960px) { .dms-sidebar { padding: 28px 21px 0px 30px; width: 306px; } } @media (max-width: 800px) { .dms-sidebar { width: 100%; padding: 21px 20px 0px 20px; } } .dms-sidebar__tabs { display: flex; border-bottom: solid 1px #000; margin-bottom: 16px; padding-bottom: 16px; justify-content: space-between; } .dms-sidebar__tabs .tab { width: 50%; position: relative; cursor: pointer; } .dms-sidebar__tabs .tab:only-child { width: 100%; } .dms-sidebar__tabs .tab:only-child small { right: 0; } .dms-sidebar__tabs .tab > span { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 29px; line-height: 1; letter-spacing: 0.1px; } .dms-sidebar__tabs .tab small { width: 15px; height: 15px; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); background: #E5C89A; border-radius: 50%; } .dms-sidebar__tabs .tab small span { display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: "Bureau Grot Bk", helvetica; font-size: 9px; line-height: 1; } .dms-sidebar__tabs .tab::after { content: " "; display: block; width: 100%; height: 3px; background: transparent; position: absolute; top: 100%; left: 0; margin-top: 13px; transition: all 0.3s; } .dms-sidebar__tabs .tab.active::after { background: #E5C89A; } .dms-sidebar__tabs .tab + .tab { padding-left: 20px; } .dms-sidebar__tabs .tab + .tab::before { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: " "; position: absolute; top: 0; right: 100%; display: block; width: 1px; height: 100%; } .ie9 .dms-sidebar__tabs .tab + .tab::before { border-left: 1px dotted #000; } .dms-sidebar .dms-sidebar-tab { display: flex; flex-direction: column; height: calc(100% - 62px); } .dms-sidebar__form { display: flex; margin: 0 0 16px; background: #E8E0CC; border-radius: 30px; align-items: center; padding: 10.5px 16px; } .dms-sidebar__form button { width: 16px; height: 16px; } .dms-sidebar__form button svg { width: 100%; height: 100%; display: block; } .dms-sidebar__form input { color: #000; width: calc(100% - 16px); background: none; border: 0; margin: 0; padding: 0 0 0 16px; font-family: "Grotesk", helvetica; font-size: 16px; line-height: 1; } .dms-sidebar__form input::-webkit-input-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .dms-sidebar__form input::-moz-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .dms-sidebar__form input:-moz-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .dms-sidebar__form input:-ms-input-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .dms-sidebar__form input:focus { outline: 0; } .dms-sidebar__people { margin: 0; padding: 0; list-style: none; overflow: auto; height: 100%; padding-bottom: 116px; } .dms-sidebar__people li { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; position: relative; cursor: pointer; } .ie9 .dms-sidebar__people li { border-bottom: 1px dotted #000; } .dms-sidebar__people li::before { content: " "; display: block; width: 100%; height: 0; position: absolute; bottom: 0; left: 0; background: #E5C89A; transition: all 0.2s; } .dms-sidebar__people li + li { margin-top: 16px; } .dms-sidebar__people li img { width: 48px; height: auto; border-radius: 50%; } .dms-sidebar__people li .content { width: calc(100% - 64px); position: relative; padding-right: 40px; } .dms-sidebar__people li .content > span { position: absolute; top: 0; right: 0; background: #E5C89A; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 9px; text-transform: uppercase; padding: 2.5px 6.5px; border-radius: 12px; } .dms-sidebar__people li .content h2 { font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 15px; line-height: 1; margin: 0; } .dms-sidebar__people li .content h2 small { font-family: "Plantin", serif; font-size: 13px; margin-left: 4px; } .dms-sidebar__people li .content h2 .timeago .v-time-ago__text { font-family: "Plantin", serif !important; font-size: 13px !important; line-height: 1 !important; color: inherit !important; } .dms-sidebar__people li .content h2 .verified-badge { transform: translateY(-1px); } .dms-sidebar__people li .content p { font-family: "Grotesk", helvetica; font-size: 16px; line-height: 1; margin: 5px 0 0; } .dms-sidebar__people li.active { background-image: none; border-bottom: solid 1px #000; } .dms-sidebar__people li.active::before { height: 3px; } .dms-sidebar__button { position: absolute; bottom: 0; left: 0; right: 21px; padding: 30px 0; text-align: center; background-image: linear-gradient(rgba(252, 250, 245, 0) 0%, #fcfaf5 50%, #fcfaf5 100%); } @media (max-width: 800px) { .dms-sidebar__button { padding: 40px 21px 20px; width: 100%; } } .dms-sidebar__button > span { display: inline-block; background: #000; color: #fff; padding: 16px 36px 16px 16px; font-family: "Bureau Grot Bk", helvetica; font-size: 11px; text-transform: uppercase; line-height: 1; border-radius: 30px; cursor: pointer; transition: all 0.3s; } @media (max-width: 800px) { .dms-sidebar__button > span { width: 100%; text-align: left; padding: 14px 36px 13px 16px; } } .dms-sidebar__button > span:hover { transform: translateY(-3px); } .dms-sidebar__button > span svg { width: 24px; height: 24px; margin-right: 14px; display: inline-block; vertical-align: middle; transform: translateX(4px) translateY(-5px) rotate(-25deg); } .dms-main { width: 66.667%; border-left: solid 1px #000; height: 100%; } @media (max-width: 960px) { .dms-main { width: calc(100% - 306px); padding-left: 21px; } } @media (max-width: 800px) { .dms-main { position: fixed; width: 100%; padding-left: 0; top: 0; left: 0; transform: translateX(100%); border-left: 0; background: #FCFAF5; z-index: 9999999; transition: all 0.3s; } .dms-main.active { transform: none; } } .dms-main__empty { height: 100%; display: flex; align-items: center; width: 100%; text-align: center; justify-content: space-around; } .dms-main__empty.mobile { display: none; } @media (max-width: 800px) { .dms-main__empty.mobile { display: flex; padding-bottom: 90px; } } .dms-main__empty .inner { padding-bottom: 66px; } .dms-main__empty .inner > svg { width: 30px; height: 30px; } .dms-main__empty .inner h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 80px; line-height: 63px; margin: 20px 0 34px; font-weight: normal; } @media (max-width: 600px) { .dms-main__empty .inner h2 { font-size: 60px; margin-bottom: 16px; } } .dms-main__empty .inner p { margin: 0; font-family: "Grotesk", helvetica; font-size: 18px; letter-spacing: -0.15px; } .dms-main__empty .inner > span { display: inline-block; background: #000; color: #fff; padding: 20px 32px; font-family: "Bureau Grot Bk", helvetica; font-size: 11px; text-transform: uppercase; line-height: 1; border-radius: 25px; cursor: pointer; transition: all 0.3s; margin-top: 40px; } .dms-main__empty .inner > span:hover { transform: translateY(-3px); } .dms-conversation { display: flex; flex-direction: column; height: 100%; position: relative; } .dms-conversation__header { display: flex; justify-content: space-between; align-items: center; padding: 25px 45px 16px; border-bottom: solid 1px #000; } @media (max-width: 800px) { .dms-conversation__header { padding: 19px 0; display: block; text-align: center; position: relative; } } .dms-conversation__header .hide-conv-trigger { display: none; position: absolute; top: 50%; left: 18px; transform: translateY(-50%); width: 32px; height: 32px; cursor: pointer; background: #E8E0CC; border-radius: 50%; } @media (max-width: 800px) { .dms-conversation__header .hide-conv-trigger { display: block; } } .dms-conversation__header .hide-conv-trigger svg { display: block; width: 7px; height: 9px; transform: rotate(180deg); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .dms-conversation__header > a { display: flex; align-items: center; color: #000; } @media (max-width: 800px) { .dms-conversation__header > a { display: inline-block; } } .dms-conversation__header > a img { width: 32px; height: auto; border-radius: 50%; } @media (max-width: 800px) { .dms-conversation__header > a img { display: none; } } .dms-conversation__header > a span { margin-left: 12px; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 15px; } @media (max-width: 800px) { .dms-conversation__header > a span { margin-left: 0; } } .dms-conversation__header > a span .verified-badge { transform: translateY(-1px); } .dms-conversation__header > a small { display: none; font-size: 10px; text-transform: uppercase; margin-top: 3px; } @media (max-width: 800px) { .dms-conversation__header > a small { display: block; } } .dms-conversation__header .controls { font-family: "Bureau Grot Bk", helvetica; font-size: 11px; text-transform: uppercase; position: relative; z-index: 2; } @media (max-width: 800px) { .dms-conversation__header .controls { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } } .dms-conversation__header .controls > span { width: 32px; height: 32px; border-radius: 50%; background: #E8E0CC; position: relative; display: block; cursor: pointer; transition: all 0.3s; } .dms-conversation__header .controls > span:hover { background: #E5C89A; } .dms-conversation__header .controls > span svg { width: 18px; height: 4px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .dms-conversation__header .controls .conv-dd { position: absolute; top: 100%; right: -14px; background: #000; border-radius: 25px; padding: 20px 24px; z-index: 1; width: 137px; margin-top: 8px; display: none; } @media (max-width: 600px) { .dms-conversation__header .controls .conv-dd { width: 200px; padding: 14px 24px; } } .dms-conversation__header .controls .conv-dd::before { content: " "; display: block; width: 0; height: 0; padding-top: 0; border-bottom: 6px solid #000; border-left: 5px transparent solid; border-right: 5px transparent solid; position: absolute; bottom: 100%; right: 24px; } .dms-conversation__header .controls .conv-dd a { color: #fff; text-transform: uppercase; display: block; font-size: 11px; } @media (max-width: 600px) { .dms-conversation__header .controls .conv-dd a { font-size: 13px; padding: 6px 0; } } .dms-conversation__header .controls .conv-dd a + a { margin-top: 12px; } @media (max-width: 600px) { .dms-conversation__header .controls .conv-dd a + a { margin-top: 6px; } } .dms-conversation__messages { height: 100%; padding: 0px 45px 32px 32px; overflow: auto; position: relative; } @media (max-width: 800px) { .dms-conversation__messages { padding-left: 20px; padding-right: 20px; } } .dms-conversation__messages .conv-day { border-top: solid 1px #E8E0CC; padding-bottom: 48px; position: relative; } .dms-conversation__messages .conv-day:first-of-type { border-top: 0; } .dms-conversation__messages .conv-day:last-of-type { padding-bottom: 0; } .dms-conversation__messages .conv-day.fixed .conv-day-wrap span { position: fixed; top: 140px; transform: translateX(-50%); } @media (max-width: 800px) { .dms-conversation__messages .conv-day.fixed .conv-day-wrap span { top: 58px; } } .dms-conversation__messages .conv-day.bot .conv-day-wrap span { position: absolute; top: 100%; transform: translateX(-50%); } .dms-conversation__messages .conv-day-wrap { height: 25px; text-align: center; font-size: 0; line-height: 0; margin-bottom: 12px; } .dms-conversation__messages .conv-day-wrap span { border-radius: 0 0 30px 30px; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 11px; line-height: 13px; padding: 4px 28px 8px; background: #E8E0CC; color: #000; display: inline-block; text-transform: uppercase; position: relative; z-index: 1; } .dms-conversation__messages .conv-person { padding-left: 64px; position: relative; } @media (max-width: 800px) { .dms-conversation__messages .conv-person { padding-left: 48px; } } .dms-conversation__messages .conv-person .img-cta { position: absolute; top: 0; left: 0; } .dms-conversation__messages .conv-person .img-cta img { width: 48px; height: auto; border-radius: 50%; } @media (max-width: 800px) { .dms-conversation__messages .conv-person .img-cta img { width: 34px; } } .dms-conversation__messages .conv-person > h2 { margin: 0; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 15px; line-height: 1; padding-top: 6px; } .dms-conversation__messages .conv-person > h2 > div { display: inline-block; } .dms-conversation__messages .conv-person > h2 span { display: inline-block; margin-left: 3px; font-family: "Plantin", serif; font-weight: normal; font-size: 13px; } .dms-conversation__messages .conv-person > h2 .verified-badge { transform: translateY(-1px); } .dms-conversation__messages .conv-person .message { font-family: "Grotesk", helvetica; font-size: 18px; line-height: 1.33; } @media (max-width: 800px) { .dms-conversation__messages .conv-person .message { font-size: 15px; line-height: 1.26; } } .dms-conversation__messages .conv-person .message p { margin: 0; } .dms-conversation__messages .conv-person .message p + p { margin-top: 16px; } .dms-conversation__messages .conv-person .message + .message { margin-top: 26px; } .dms-conversation__messages .conv-person .blocker { max-width: 427px; background: #E8E0CC; padding: 28px 34px; border-radius: 25px; margin-top: 30px; } @media (max-width: 800px) { .dms-conversation__messages .conv-person .blocker { padding: 20px; } } .dms-conversation__messages .conv-person .blocker h2 { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 23px; line-height: 29px; margin: 0 0 12px; } @media (max-width: 800px) { .dms-conversation__messages .conv-person .blocker h2 { font-size: 20px; line-height: 22px; } } .dms-conversation__messages .conv-person .blocker p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 16px; line-height: 22px; letter-spacing: -0.15px; margin: 0 0 20px; } @media (max-width: 800px) { .dms-conversation__messages .conv-person .blocker p { font-size: 14px; line-height: 18px; } } .dms-conversation__messages .conv-person .blocker .controls span, .dms-conversation__messages .conv-person .blocker .controls a { background: #000; color: #fff; border-radius: 25px; padding: 20px 26px; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 11px; line-height: 1; text-transform: uppercase; display: inline-block; cursor: pointer; transition: all 0.3s; } .dms-conversation__messages .conv-person .blocker .controls span:hover, .dms-conversation__messages .conv-person .blocker .controls a:hover { transform: translateY(-3px); } .dms-conversation__messages .conv-person .blocker .controls span + a, .dms-conversation__messages .conv-person .blocker .controls span + span, .dms-conversation__messages .conv-person .blocker .controls a + a, .dms-conversation__messages .conv-person .blocker .controls a + span { margin-left: 16px; } .dms-conversation__messages .conv-person + .conv-person { margin-top: 36px; } .dms-conversation__messages::-webkit-scrollbar { display: none; } .dms-conversation__chatbox { width: 100%; background-image: linear-gradient(rgba(252, 250, 245, 0) 0%, #fcfaf5 40%, #fcfaf5 100%); z-index: 1; padding: 10px 32px 7px 32px; } @media (max-width: 800px) { .dms-conversation__chatbox { padding: 15px 10px 15px 10px; } } .dms-conversation__chatbox form { display: flex; align-items: flex-end; } .dms-conversation__chatbox form input, .dms-conversation__chatbox form textarea { width: 100%; padding: 0; margin: 0; border: 0; padding: 15px 15px 15px 20px; background: transparent; color: #000; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 18px; transform: translateY(-2px); background: #E8E0CC; resize: none; border-radius: 15px; max-height: 150px; /* width */ /* Track */ /* Handle */ /* Handle on hover */ } @media (max-width: 800px) { .dms-conversation__chatbox form input, .dms-conversation__chatbox form textarea { font-size: 16px; } } .dms-conversation__chatbox form input:focus, .dms-conversation__chatbox form textarea:focus { outline: 0; } .dms-conversation__chatbox form input::-webkit-scrollbar, .dms-conversation__chatbox form textarea::-webkit-scrollbar { width: 5px; } .dms-conversation__chatbox form input::-webkit-scrollbar-track, .dms-conversation__chatbox form textarea::-webkit-scrollbar-track { background: #E5C89A; } .dms-conversation__chatbox form input::-webkit-scrollbar-thumb, .dms-conversation__chatbox form textarea::-webkit-scrollbar-thumb { background: #888; } .dms-conversation__chatbox form input::-webkit-scrollbar-thumb:hover, .dms-conversation__chatbox form textarea::-webkit-scrollbar-thumb:hover { background: #555; } .dms-conversation__chatbox form button { color: #000; flex-shrink: 0; flex-grow: 0; padding: 12px; font-family: "Bureau Grot Bk", helvetica; font-size: 12px; text-transform: uppercase; cursor: pointer; transition: all 0.3s; } @media (max-width: 800px) { .dms-conversation__chatbox form button { padding-right: 0; } } .suggest-spot-intro, .booking-form-intro { padding: 74px 20px 94px; border-bottom: solid 1px #000; text-align: center; margin-bottom: 55px; } @media (max-width: 960px) { .suggest-spot-intro, .booking-form-intro { padding: 50px 20px; } } .suggest-spot-intro h2, .booking-form-intro h2 { margin: 0; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 80px; line-height: 1; font-weight: normal; } @media (max-width: 960px) { .suggest-spot-intro h2, .booking-form-intro h2 { font-size: 60px; } } @media (max-width: 600px) { .suggest-spot-intro h2, .booking-form-intro h2 { font-size: 50px; } } .suggest-spot-intro p, .booking-form-intro p { margin: 15px auto 0; max-width: 530px; font-family: "Grotesk", helvetica; font-size: 16px; line-height: 1.375; } .suggest-spot-intro p a, .booking-form-intro p a { color: #000; border-bottom: solid 1px #E5C89A; } .suggest-spot-intro .suggest-another-button, .booking-form-intro .suggest-another-button { margin-top: 48px; display: inline-block; margin-left: 10px; margin-right: 10px; } .suggest-spot-intro.alt, .alt.booking-form-intro { margin-bottom: 0; } .suggest-spot-intro img, .booking-form-intro img { display: block; width: 100%; max-width: 469px; margin: 0 auto; } .suggest-spot-form, .booking-form { max-width: 505px; margin: 0 auto; width: calc(100% - 40px); margin-bottom: 150px; } @media (max-width: 960px) { .suggest-spot-form, .booking-form { margin-bottom: 75px; } } .suggest-spot-form .form__rorw__left, .booking-form .form__rorw__left { margin-top: 15px; width: 130px; } .suggest-spot-form .form__row__right, .booking-form .form__row__right { width: calc(100% - 130px); } .suggest-spot-form .form__field, .booking-form .form__field { position: relative; margin-right: 0 !important; width: 100%; } .suggest-spot-form .hide-me, .booking-form .hide-me { display: none; } .suggest-spot-form section + section, .booking-form section + section { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-top: 20px; } .ie9 .suggest-spot-form section + section, .ie9 .booking-form section + section { border-top: 1px dotted #000; } .suggest-spot-form + footer, .booking-form + footer { border-top: solid 1px #000; } .suggest-spot-form .error, .booking-form .error { top: 100% !important; margin-top: 10px !important; } .is-hidden { display: none; } .is-submitting:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis steps(4, end) 900ms infinite; content: "\2026"; /* ascii code for the ellipsis character */ width: 0px; } @keyframes ellipsis { to { width: 1.25em; } } .user-image { position: relative; margin-bottom: 14px; width: 100%; } .user-image img { position: absolute; top: 50%; transform: translateY(-50%); left: 16px; width: 41px; height: 31px; -o-object-fit: cover; object-fit: cover; border-radius: 20px; } .user-image input[type=text] { padding-left: 68px; padding-right: 68px; background: #e8e0cc; min-height: 50px; font-family: "Grotesk", helvetica; font-size: 14px; line-height: 26px; border-radius: 25px; border: none; outline: none; width: 100%; } .user-image span { position: absolute; top: 50%; transform: translateY(-50%); right: 16px; width: 31px; height: 31px; border-radius: 50%; background: #000; } .user-image span svg { width: 8px; height: 8px; stroke: #E5C89A; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .submit-images-main { background: #E8E0CC; border-radius: 25px; width: 100%; text-align: center; padding: 32px 20px 32px; position: relative; cursor: pointer; } @media (max-width: 960px) { .submit-images-main { padding: 20px 20px 20px; min-height: 200px; display: flex; justify-content: center; align-items: center; } } .submit-images-main input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; } .submit-images-main h3 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 34px; line-height: 1; margin: 0 0 24px; font-weight: normal; color: #000; display: none; } .submit-images-main .loading { display: block; } @media (min-width: 800px) { .submit-images-main .on-desktop { display: block; } } @media (max-width: 800px) { .submit-images-main .on-mobile { display: block; } } .submit-images-main p { font-family: "Bureau Grot Bk", helvetica; font-weight: normal; text-transform: uppercase; margin: 0; font-size: 10px; vertical-align: middle; } @media (max-width: 960px) { .submit-images-main p { font-size: 0; } } .submit-images-main .button { display: inline; background-color: rgb(0, 0, 0); color: #E5C89A !important; cursor: pointer; padding: 15px 18px; font-size: 10px; margin-left: 10px; vertical-align: middle; } @media (max-width: 960px) { .submit-images-main .button { width: calc(50% - 10px); margin: 0; text-align: center; height: auto; } .submit-images-main .button + .button { margin-left: 20px; padding: 17.5px 10px; } } @media (max-width: 360px) { .submit-images-main .button { width: calc(50% - 5px); } .submit-images-main .button + .button { margin-left: 10px; padding: 17.5px 10px; } } .submit-images-main .button--remove { z-index: 2; color: #000 !important; background: #E5C89A !important; } .submit-images-main + .description { position: absolute; bottom: 0; text-align: center; margin-bottom: 20px; width: 100%; font-family: "Plantin", serif; font-style: italic; } .suggest-a-spot-page { min-height: calc(100vh - 66px); border-bottom: solid 1px #000; } @media (max-width: 800px) { .suggest-a-spot-page { min-height: calc(100vh - 51px); } } .suggest-a-spot-page .suggest-spot-intro, .suggest-a-spot-page .booking-form-intro { padding: 121px 0 0; margin-bottom: 30px; border-bottom: 0; } @media (max-width: 800px) { .suggest-a-spot-page .suggest-spot-intro, .suggest-a-spot-page .booking-form-intro { padding-top: 88px; } } .suggest-a-spot-page .suggest-spot-intro > svg, .suggest-a-spot-page .booking-form-intro > svg { width: 29px; height: 36px; } .suggest-a-spot-page .suggest-spot-intro p, .suggest-a-spot-page .booking-form-intro p { max-width: 646px; } .spot-search-wrap { max-width: 530px; margin: 0 auto; border-radius: 80px; padding: 30px 34px; background: #E8E0CC; transition: all 0.3s; } @media (max-width: 600px) { .spot-search-wrap { padding: 30px 20px; } } .spot-search-wrap.w-results { border-radius: 42px; } .spot-search { display: flex; align-items: center; } .spot-search button { width: 16px; height: 16px; } .spot-search button svg { display: block; width: 100%; height: 100%; } .spot-search input { width: calc(100% - 16px); padding: 0 0 0 20px; font-family: "Grotesk", helvetica; font-size: 25px; line-height: 1; border: 0; background: none; transform: translateY(-1px); } .spot-search input::-webkit-input-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .spot-search input::-moz-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .spot-search input:-moz-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } .spot-search input:-ms-input-placeholder { color: #000; opacity: 1; height: inherit; vertical-align: middle; } @media (max-width: 600px) { .spot-search input { font-size: 20px; } } .spot-search-results { padding: 0; margin: 0; list-style: none; padding-top: 30px; display: none; } .spot-search-results li { display: flex; align-items: flex-start; padding: 14px 0 16px; position: relative; cursor: pointer; } .spot-search-results li::before { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; display: block; content: " "; width: 100%; height: 1px; position: absolute; top: 0; left: 0; } .ie9 .spot-search-results li::before { border-top: 1px dotted #000; } .spot-search-results li .pin { width: 20px; height: 24px; margin-top: 6px; transition: all 0.3s; } .spot-search-results li h3 { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 20px; line-height: 1; margin: 0; width: calc(100% - 28px); padding: 0 14px; } .spot-search-results li h3 small { display: block; font-size: 13px; line-height: 1; letter-spacing: 0.1px; margin-top: 6px; } .spot-search-results li .arrow-right { width: 8px; height: 12px; align-self: center; } .spot-search-results li:hover .pin { transform: translateY(-3px); } .spot-search-final { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 16px; padding-top: 24px; display: none; } .ie9 .spot-search-final { border-top: 1px dotted #000; } .spot-search-final .spot-search-final-inner { display: flex; align-items: center; justify-content: space-between; position: relative; } @media (max-width: 600px) { .spot-search-final .spot-search-final-inner { display: block; } } .spot-search-final .spot-search-final-inner .img-wrap { width: calc(50% - 10px); } @media (max-width: 600px) { .spot-search-final .spot-search-final-inner .img-wrap { width: 100%; } } .spot-search-final .spot-search-final-inner .img-wrap img { display: block; width: 100%; height: auto; border-top-left-radius: 15px; border-bottom-left-radius: 15px; } @media (max-width: 600px) { .spot-search-final .spot-search-final-inner .img-wrap img { border-top-left-radius: 0; border-bottom-left-radius: 0; } } .spot-search-final .spot-search-final-inner .content { width: calc(50% - 10px); } @media (max-width: 600px) { .spot-search-final .spot-search-final-inner .content { width: 100%; margin-top: 20px; } } .spot-search-final .spot-search-final-inner .content h4 { margin: 0; font-family: "Clearface", serif; font-size: 22px; line-height: 23px; font-weight: normal; } .spot-search-final .spot-search-final-inner .content p { margin: 7px 0 0; font-family: "Grotesk", helvetica; font-size: 13px; line-height: 17px; } .spot-search-final .spot-search-final-inner .exists-tooltip { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 46px; background: black; color: white; border-radius: 25px; padding: 18px; text-align: center; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 14px; line-height: 16px; text-transform: none; z-index: 1; } .spot-search-final .spot-search-final-inner .exists-tooltip a { color: #fff; border-bottom: solid 1px #fff; } .spot-search-final .spot-search-final-inner .exists-tooltip::after { content: " "; border-top: 0; border-bottom: solid 8px #000; border-left: solid 6px transparent; border-right: solid 6px transparent; position: absolute; width: 0; height: 0; left: 0; right: 0; margin: auto; bottom: 100%; } .suggest-spot-form-updated { margin-top: 27px; max-width: 380px; display: none; width: 100%; } .suggest-spot-form-updated .form__row { position: relative; white-space: nowrap; } @media (max-width: 800px) { .suggest-spot-form-updated .form__row { display: block; } } .suggest-spot-form-updated .form__row__left { position: absolute; top: 0; right: 100%; } @media (max-width: 800px) { .suggest-spot-form-updated .form__row__left { position: static; width: 100%; text-align: center; display: block; margin-top: 0; margin-bottom: 6px; } } .suggest-spot-form-updated .form__row__right { width: 100%; } .suggest-spot-form-updated .form__field { margin-bottom: 25px; } @media (max-width: 800px) { .suggest-spot-form-updated label { margin: 0; text-align: center; } } .suggest-spot-form-updated label small { display: block; font-family: "Grotesk", helvetica; font-size: 15px; line-height: 1; margin-top: 3px; text-transform: none; } @media (max-width: 800px) { .suggest-spot-form-updated label small { margin-top: 0; } } .spot-search-wrap .pac-container { position: static !important; width: 100% !important; background: #E8E0CC; border-radius: 0; border-top: 0; font-family: "Grotesk", helvetica; box-shadow: none; height: 0; transition: all 0.5s; } .spot-search-wrap .pac-container::before { content: " "; display: block; width: 100%; height: 30px; } .spot-search-wrap .pac-container .pac-item { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding: 14px 0 16px; position: relative; cursor: pointer; border-top: 0; padding-left: 36px; padding-right: 28px; } .ie9 .spot-search-wrap .pac-container .pac-item { border-top: 1px dotted #000; } .spot-search-wrap .pac-container .pac-item:hover { background-color: transparent; } .spot-search-wrap .pac-container .pac-item:hover::before { transform: translateY(-6px); } .spot-search-wrap .pac-container .pac-item::before { content: " "; display: block; position: absolute; left: 3px; top: 0; bottom: 0; margin: auto; width: 21px; height: 25px; background-image: url("../img/sas-pin.png"); background-size: contain; transition: all 0.3s; } .spot-search-wrap .pac-container .pac-item::after { content: " "; display: block; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 7px; height: 9px; background-image: url("../img/sas-arrow.png"); background-size: contain; transition: all 0.3s; } .spot-search-wrap .pac-container .pac-item .pac-icon { display: none !important; } .spot-search-wrap .pac-container .pac-item .pac-item-query { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 20px; line-height: 1; margin: 0; width: calc(100% - 28px); display: block; } .spot-search-wrap .pac-container .pac-item .pac-item-query + span { display: block; font-size: 13px; line-height: 1; letter-spacing: 0.1px; margin-top: 6px; color: #000; } @media (max-width: 600px) { .sas-loading-modal { align-items: center; } } .sas-loading-modal .modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.48; } .sas-loading-modal .modal__content { max-width: 595px; padding-top: 104px; padding-bottom: 104px; text-align: center; } @media (max-width: 600px) { .sas-loading-modal .modal__content { padding-top: 60px; padding-bottom: 60px; } } .sas-loading-modal .modal__content h2 { font-size: 50px; text-transform: none; margin: 0; } .sas-loading-modal .modal__content h2 span { transition: all 0.5s; } @media (max-width: 600px) { .sas-loading-modal .modal__content h2 span { display: block; } } .sas-loading-modal .modal__content h2 span.fade { opacity: 0; } @media (max-width: 600px) { .sas-loading-modal .modal__content h2 { font-size: 40px; } } .sas-loading-modal .new-loader { display: block !important; position: static; width: 57px; height: 57px; margin: 0 auto 24px; } .sas-loading-modal .new-loader .loader-content { width: 100%; height: 100%; } .sas-loading-modal .new-loader .star-wrapper { width: 100%; height: 100%; } .sas-loading-modal .new-loader .star-wrapper .mask { margin: auto; fill: #FCFAF5; } @keyframes scaleDown { 0% { transform: scale(1); } 25% { transform: scale(0); } 75% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes rotate { 0% { transform: rotate(0deg); } 25% { transform: rotate(0deg); } 75% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } } .sas-loading-modal .new-loader .star-wrapper.animated .star { animation-name: rotate; animation-duration: 4s; animation-iteration-count: infinite; } .sas-loading-modal .new-loader .star-wrapper.animated .mask { margin: auto; animation-name: scaleDown; animation-duration: 4s; animation-iteration-count: infinite; fill: #FCFAF5; } .referrals-modal ul { margin: 0; padding: 7px 0 0; list-style: none; } .referrals-modal ul li { color: #fff; display: flex; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; } .referrals-modal ul li p { width: 100%; margin: 0; white-space: nowrap; overflow: hidden; font-size: 14px; margin-right: 20px; position: relative; } .referrals-modal ul li p::after { content: " "; display: block; width: 24px; height: 100%; position: absolute; top: 0; right: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, black 80%); } .referrals-modal ul li span { flex-shrink: 0; flex-grow: 0; white-space: nowrap; font-size: 12px; text-transform: uppercase; letter-spacing: 0.21px; } .referrals-modal ul li + li { background-position: top; background-image: linear-gradient(to right, #fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 21.5px; padding-top: 21.5px; } .ie9 .referrals-modal ul li + li { border-top: 1px dotted #fff; } .referrals-main { padding-bottom: 102px; border-bottom: solid 1px #000; } @media (max-width: 800px) { .referrals-main { padding-bottom: 86px; } } .referrals-intro { border-bottom: solid 1px #000; padding-bottom: 86px; padding-top: 32px; } .referrals-intro__diagram { max-width: 600px; margin: 0 auto 36px; height: 98px; padding-bottom: 34px; text-align: center; display: grid; grid-template-columns: 132px 1fr 132px; } @media (max-width: 600px) { .referrals-intro__diagram { display: flex; flex-wrap: wrap; justify-content: space-between; height: auto; padding-bottom: 0; } } .referrals-intro__num { height: 100%; position: relative; height: 64px; } @media (max-width: 600px) { .referrals-intro__num { height: 56px; width: calc(50% - 15px); } } .referrals-intro__num h3 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 80px; font-weight: normal; margin: 0; transform: translateY(-15px); } @media (max-width: 600px) { .referrals-intro__num h3 { font-size: 70px; transform: translateY(-12px); } } .referrals-intro__num h3 small { font-size: 27px; font-family: "Bureau Grot Bk", helvetica; vertical-align: top; margin-top: 10px; display: inline-block; } .referrals-intro__num p { position: absolute; top: 100%; left: 0; width: 100%; text-align: center; font-family: "Grotesk", helvetica; font-weight: bold; font-size: 20px; margin: 10px 0 0; line-height: 1; } @media (max-width: 600px) { .referrals-intro__num p { font-size: 16px; } } .referrals-intro__num p span { font-family: "Plantin", serif; font-weight: normal; } @media (max-width: 600px) { .referrals-intro__num p span { display: block; } } .referrals-intro__inner { position: relative; display: flex; align-items: center; } @media (max-width: 600px) { .referrals-intro__inner { width: 100%; order: 3; margin-top: 64px; } } .referrals-intro__inner::before { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; display: block; height: 1px; width: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .ie9 .referrals-intro__inner::before { border-top: 1px dotted #000; } @media (max-width: 600px) { .referrals-intro__inner::before { max-width: 188px; } } .referrals-intro__inner > div { display: flex; justify-content: space-evenly; width: 100%; } @media (max-width: 600px) { .referrals-intro__inner > div { max-width: 188px; margin: 0 auto; justify-content: center; position: relative; } .referrals-intro__inner > div::before { content: " "; display: block; width: 10px; height: 10px; border-radius: 50%; border: solid 1px #000; background: #FCFAF5; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .referrals-intro__inner > div::after { content: " "; display: block; width: 10px; height: 10px; border-radius: 50%; border: solid 1px #000; background: #000; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; } } .referrals-intro__inner > div > span { width: 32px; height: 32px; background: #E5C89A; border-radius: 50%; overflow: hidden; position: relative; } @media (max-width: 600px) { .referrals-intro__inner > div > span + span { margin-left: -6px; } } .referrals-intro__inner > div > span img { position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; top: 0; left: 0; } .referrals-intro__inner > div > span svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 14px; height: 14px; margin: auto; } .referrals-intro__inner > span { font-size: 20px; font-family: "Plantin", serif; font-weight: normal; position: absolute; top: 100%; left: 0; width: 100%; text-align: center; margin: 10px 0 0; } @media (max-width: 600px) { .referrals-intro__inner > span { top: auto; bottom: 100%; font-size: 14px; margin: 0 0 28px; } } .referrals-intro > p { font-family: "Grotesk", helvetica; font-size: 16px; line-height: 20px; text-align: center; max-width: 471px; margin: 0 auto; } .referrals-intro > p a { display: inline-block; color: #000; border-bottom: solid 1px #E5C89A; font-weight: bold; } .referrals-intro__extra { text-align: center; margin-bottom: 2rem; } .referrals-intro__extra span { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 20px; line-height: 26px; display: block; margin-bottom: 20px; } .referrals-intro__extra h3 { margin: 0; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 80px; line-height: 63px; font-weight: normal; } .referrals-intro__extra p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 16px; line-height: 20px; margin: 23px auto 24px; max-width: 507px; } .referrals-intro__extra p a { font-weight: bold; border-bottom: solid 1px #E5C89A; color: #000; font-style: normal; } .referrals-intro__extra .button { margin: 0 auto; color: #fff !important; height: 60px; border-radius: 30px; width: 170px; text-align: center; padding-left: 0; padding-right: 0; display: flex; align-items: center; justify-content: center; } .referrals-intro__extra .button svg { stroke: #fff; position: static; margin-left: 20px; transform: none; } .referrals-body { max-width: 1024px; margin: 42px auto 0; display: flex; align-items: flex-start; } @media (max-width: 800px) { .referrals-body { margin-top: 28px; flex-wrap: wrap; } } .referrals-body__email { width: 40%; padding-right: 32px; } @media (max-width: 800px) { .referrals-body__email { width: 100%; padding-right: 0; } } .referrals-body__email h4 { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; line-height: 1; margin: 0 0 18px; text-transform: uppercase; } .referrals-body__email .form__row { position: relative; justify-content: space-between; } .referrals-body__email .form__row .form_group { width: calc(50% - 8.5px); } .referrals-body__email .form__row .form_group input { padding: 12px 17px 12px 17px; } .referrals-body__email .form__row label { position: absolute; top: 50%; left: 22px; transform: translateY(-50%); } @media (max-width: 600px) { .referrals-body__email .form__row label { width: auto; margin-right: 0; margin-bottom: 0; text-align: left; } } .referrals-body__email .form__row input { min-height: auto; font-family: "Grotesk", helvetica; font-size: 15px; padding: 12px 17px 12px 50px; border-radius: 30px; } .referrals-body__email .form__row input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); opacity: 1; height: inherit; vertical-align: middle; } .referrals-body__email .form__row input::-moz-placeholder { color: rgba(0, 0, 0, 0.6); opacity: 1; height: inherit; vertical-align: middle; } .referrals-body__email .form__row input:-moz-placeholder { color: rgba(0, 0, 0, 0.6); opacity: 1; height: inherit; vertical-align: middle; } .referrals-body__email .form__row input:-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); opacity: 1; height: inherit; vertical-align: middle; } .referrals-body__email .form__row input.half { width: calc(50% - 8.5px); padding-left: 24px; } .referrals-body__email .form__row textarea { min-height: 138px; border-radius: 30px; line-height: 19px; font-size: 15px; padding: 24px; } .referrals-body__email .form__row textarea::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); opacity: 1; height: inherit; vertical-align: middle; } .referrals-body__email .form__row textarea::-moz-placeholder { color: rgba(0, 0, 0, 0.6); opacity: 1; height: inherit; vertical-align: middle; } .referrals-body__email .form__row textarea:-moz-placeholder { color: rgba(0, 0, 0, 0.6); opacity: 1; height: inherit; vertical-align: middle; } .referrals-body__email .form__row textarea:-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); opacity: 1; height: inherit; vertical-align: middle; } .referrals-body__email .form__row + .form__row { margin-top: 17px; } .referrals-body__email .button { margin-top: 17px; margin-left: 0; margin-right: auto; color: #fff !important; height: 60px; border-radius: 30px; width: 165px; } @media (max-width: 600px) { .referrals-body__email .button { width: 100%; } } .referrals-body__email .button svg { stroke: #fff; } .referrals-body__switcher { display: flex; padding-bottom: 24px; margin-bottom: 26px; border-bottom: solid 1px #000; position: relative; } .referrals-body__switcher::before { content: " "; display: block; height: 3px; width: 33%; background: #E5C89A; position: absolute; bottom: 0; left: 0; transition: all 0.3s ease-in-out; } .referrals-body__switcher.text::before { left: 33%; } .referrals-body__switcher.share::before { left: 66%; } .referrals-body__switcher button { width: 50%; text-align: left; color: rgba(0, 0, 0, 0.65); font-size: 12px; transition: all 0.3s; } .referrals-body__switcher button.active { color: #000; } .referrals-body__switcher button + button { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; padding-left: 20px; } .ie9 .referrals-body__switcher button + button { border-left: 1px dotted #000; } .referrals-body__form-wrap { position: relative; } .referrals-body__form-wrap .form { opacity: 0; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; transition: all 0.5s; } .referrals-body__form-wrap .form .error { color: red; text-align: left; margin-top: 0.25rem; margin-bottom: 1rem; margin-left: 17px; } .referrals-body__form-wrap .form.active { opacity: 1; pointer-events: all; position: static; } .referrals-body__form-wrap .form span.button { padding-top: 22px; } .referrals-body__form-wrap .form #sharelink { padding-left: 24px; } .referrals-body__form-wrap .refer-text-preview { margin: 24px 0; } .referrals-body__form-wrap .refer-text-preview h3 { margin: 0 0 13px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; text-transform: uppercase; } .referrals-body__form-wrap .refer-text-preview p { font-family: "Grotesk", helvetica; font-size: 15px; line-height: 19px; margin: 0; } .referrals-body__list { padding-left: 40px; width: 60%; border-left: solid 1px #000; } .referrals-body__list.center { border: none; margin: 0 auto; } @media (max-width: 800px) { .referrals-body__list { width: 100%; padding-left: 0; border-left: 0; margin-top: 48px; } } .referrals-body__list table { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; width: 100%; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 15px; line-height: 26px; margin-top: -24px; } .ie9 .referrals-body__list table { border-bottom: 1px dotted #000; } @media (max-width: 600px) { .referrals-body__list table { font-size: 12px; } } .referrals-body__list table tr { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .referrals-body__list table tr { border-top: 1px dotted #000; } .referrals-body__list table tr:first-child { background-image: none; height: 54px; } .referrals-body__list table tr:not(:first-child) { padding: 14px 0; height: 60px; } .referrals-body__list table tr.inactive { color: rgba(0, 0, 0, 0.6); } .referrals-body__list table th { font-family: "Bureau Grot Bk", helvetica; font-size: 12px; line-height: 1; text-transform: uppercase; font-weight: normal; text-align: left; } .referrals-body__list table img { width: 32px; display: inline-block; vertical-align: middle; border-radius: 50%; margin-right: 14px; } @media (max-width: 600px) { .referrals-body__list table img { margin-right: 10px; } } .referrals-body__list table .person-wrap { width: 32px; height: 32px; background: #E5C89A; border-radius: 50%; padding: 9px; display: inline-block; vertical-align: middle; margin-right: 14px; } @media (max-width: 600px) { .referrals-body__list table .person-wrap { margin-right: 10px; } } .referrals-body__list table .person-wrap svg { display: block; width: 100%; height: 100%; } .referrals-body__list table .controls { text-align: right; } .referrals-body__list table .controls .form-controls { display: flex; justify-content: flex-end; } .referrals-body__list table .controls .form-controls .action-form + .action-form { margin-left: 14px; } .referrals-body__list table .controls a, .referrals-body__list table .controls span { color: #000; font-family: "Bureau Grot Bk", helvetica; font-size: 12px; text-transform: uppercase; transition: all 0.3s; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; } @media (max-width: 600px) { .referrals-body__list table .controls a, .referrals-body__list table .controls span { font-size: 10px; } } .referrals-body__list table .controls a:hover, .referrals-body__list table .controls span:hover { -webkit-text-decoration-color: #E5C89A; text-decoration-color: #E5C89A; } .referrals-body__list table .controls a + a, .referrals-body__list table .controls a + span, .referrals-body__list table .controls span + a, .referrals-body__list table .controls span + span { margin-left: 14px; } @media (max-width: 600px) { .referrals-body__list table .controls a + a, .referrals-body__list table .controls a + span, .referrals-body__list table .controls span + a, .referrals-body__list table .controls span + span { margin-left: 8px; } } .referrals-body__info { padding-left: 86px; margin-top: 22px; } .referrals-body__info.request { padding-left: 0px; } .referrals-body__info h3 { position: relative; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 20px; line-height: 26px; margin: 0; } .referrals-body__info h3 span { position: absolute; top: 0; right: 100%; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 80px; line-height: 1; margin-right: 14px; font-weight: normal; font-style: normal; } .referrals-body__info h3 span::before { content: "$"; font-family: "Bureau Grot Bk", helvetica; display: block; font-size: 27px; position: absolute; top: 6px; right: 100%; } .referrals-body__info h3 a { font-family: "Grotesk", helvetica; font-weight: bold; font-size: 20px; border-bottom: solid 1px #E5C89A; color: #000; font-style: normal; } .referrals-body__info p { font-family: "Grotesk", helvetica; font-size: 16px; line-height: 20px; margin: 4px 0 0; } .referrals-body__info p a { display: inline-block; color: #000; border-bottom: solid 1px #E5C89A; } .booking-form-intro small { display: block; margin: 0 0 12px; font-size: 11px; text-transform: uppercase; font-family: "Bureau Grot Bk", helvetica; letter-spacing: 0.3px; } .booking-form-intro h2 { font-size: 58px; line-height: 63px; font-family: "Clearface", serif; } @media (max-width: 960px) { .booking-form-intro h2 { font-size: 42px; line-height: 48px; } } .booking-form .form__date { position: relative; margin-bottom: 20px; } .booking-form .form__date > label { position: absolute; right: 100%; top: 36px; white-space: nowrap; } @media (max-width: 960px) { .booking-form .form__date > label { position: static; width: 100%; margin-right: 0; text-align: center; margin-bottom: 10px; } } .booking-form .form__date__inner { background: #E8E0CC; border-radius: 30px; padding: 24px; display: flex; justify-content: space-between; position: relative; } .booking-form .form__date__inner::before { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: " "; display: block; width: 1px; height: auto; position: absolute; top: 20px; left: 0; right: 0; bottom: 20px; margin: auto; } .ie9 .booking-form .form__date__inner::before { border-left: 1px dotted #000; } .booking-form .form__date__inner > div { width: calc(50% - 19px); position: relative; cursor: pointer; } .booking-form .form__date__inner > div:hover svg { transform: translateY(3px); } .booking-form .form__date__inner > div label { display: block; text-align: left; } .booking-form .form__date__inner > div small { font-size: 11px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; } .booking-form .form__date__inner > div span { display: block; font-family: "Grotesk", helvetica; font-size: 15px; line-height: 1; margin-top: 6px; } .booking-form .form__date__inner > div svg { width: 8px; height: 8px; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; transition: all 0.3s; } .booking-form .form__date__inner > div input { padding: 0; background: #fff; height: 0; opacity: 0; position: absolute; pointer-events: none; left: -24px; bottom: -10px; } .booking-form .form__row { position: relative; } .booking-form .form__row > label { position: absolute; white-space: nowrap; right: 100%; top: 16px; } @media (max-width: 960px) { .booking-form .form__row > label { position: static; width: 100%; margin-right: 0; text-align: center; margin-bottom: 10px; } } .booking-form .form__row .form__row__double { display: flex; justify-content: space-between; position: relative; width: 100%; } .booking-form .form__row .form__row__double.hide-me { display: none; } .booking-form .form__field--radio { width: calc(50% - 9px); } .booking-form .form__field--radio input + label { position: static; } .booking-form .form__field--checkbox input[type=checkbox] + label { right: 0; top: 0; cursor: auto; } .booking-form .form__field--checkbox input[type=checkbox] + label::before, .booking-form .form__field--checkbox input[type=checkbox] + label::after { top: 1px; } .booking-form .form__field--checkbox input[type=checkbox] + label a { color: #000; border-bottom: solid 1px #E5C89A; } .booking-form .form__button { margin-top: 36px; } .booking-form .form__button .error { text-align: center !important; left: 0 !important; } .booking-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999; display: none; } @media (max-width: 600px) { .booking-modal { overflow: auto; } } .booking-modal__shade { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.33); } .booking-modal__main { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); width: calc(100vw - 40px); max-width: 680px; margin: 0 auto; background: #000; border-radius: 30px; color: #FCFAF5; padding: 38px 56px 48px; } @media (max-width: 960px) { .booking-modal__main { padding: 24px 20px 32px; } } @media (max-width: 600px) { .booking-modal__main { position: relative; top: 0; margin-top: 20px; margin-bottom: 20px; transform: none; } } .booking-modal__main > h3 { font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.3px; margin: 0 0 28px; text-align: center; } .booking-modal__close { width: 39px; height: 39px; background: #E8E0CC; border-radius: 50%; position: absolute; top: -10px; right: -10px; cursor: pointer; transition: all 0.3s; } .booking-modal__close:hover { background: #E5C89A; } .booking-modal__close svg { width: 10px; height: 10px; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .booking-modal__inner { display: flex; justify-content: space-between; position: relative; } @media (max-width: 600px) { .booking-modal__inner { display: block; } } .booking-modal__inner::before { background-position: left; background-image: linear-gradient(#FCFAF5 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .ie9 .booking-modal__inner::before { border-left: 1px dotted #FCFAF5; } @media (max-width: 600px) { .booking-modal__inner::before { display: none; } } .booking-modal__inner > div { width: calc(50% - 34px); text-align: left; position: relative; padding-bottom: 84px; } @media (max-width: 600px) { .booking-modal__inner > div { width: 100%; padding-bottom: 72px; } } @media (max-width: 600px) { .booking-modal__inner > div + div { background-position: top; background-image: linear-gradient(to right, #FCFAF5 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 36px; padding-top: 36px; } .ie9 .booking-modal__inner > div + div { border-top: 1px dotted #FCFAF5; } } .booking-modal__inner > div + div ul li:not(.no-check)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.218' height='8.284' viewBox='0 0 10.218 8.284'%3E%3Cpath id='Path_198' data-name='Path 198' d='M-2022.686,332.311l4.008,3.081,5.366-7.078' transform='translate(2023.052 -327.952)' fill='none' stroke='%23FCFAF5' stroke-miterlimit='10' stroke-width='1.2'/%3E%3C/svg%3E%0A"); } .booking-modal__inner > div + div .button { background: #FCFAF5; } .booking-modal__inner > div + div .button:hover { background: #FCFAF5; } .booking-modal__inner > div > p { text-transform: uppercase; margin: 0 0 10px; font-size: 11px; padding: 0 26px; } .booking-modal__inner .icon-star { width: 37px; height: 37px; fill: #E5C89A; display: block; margin: 0 auto 7px; } .booking-modal__inner .img-wrap { width: 37px; height: 37px; border-radius: 50%; background: #fff; position: relative; display: block; margin: 0 auto 7px; } .booking-modal__inner .img-wrap img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: auto; border-radius: 50%; } .booking-modal__inner h2 { font-family: "Altissima", helvetica; font-size: 45px; line-height: 1; text-transform: uppercase; margin: 0 0 14px; font-weight: normal; text-align: center; } .booking-modal__inner ul { list-style: none; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 13px; line-height: 1.2; margin: 0; padding: 0 0 0 26px; } .booking-modal__inner ul ul { padding: 0; } .booking-modal__inner ul li + li { margin-top: 6px; } .booking-modal__inner ul li { padding-left: 20px; position: relative; } .booking-modal__inner ul li a { border-bottom: solid 1px #fff; color: #fff; transition: all 0.3s; } .booking-modal__inner ul li a:hover { border-bottom: solid 1px #E8E0CC; } .booking-modal__inner ul li p { margin: 0; } .booking-modal__inner ul li:not(.no-check)::before { content: " "; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.218' height='8.284' viewBox='0 0 10.218 8.284'%3E%3Cpath id='Path_198' data-name='Path 198' d='M-2022.686,332.311l4.008,3.081,5.366-7.078' transform='translate(2023.052 -327.952)' fill='none' stroke='%23E5C89A' stroke-miterlimit='10' stroke-width='1.2'/%3E%3C/svg%3E%0A"); width: 10px; height: 8px; margin-right: 6px; position: absolute; top: 4px; left: 0; } .booking-modal__inner ul svg { width: 10px; height: 9px; stroke: #E5C89A; margin-right: 6px; position: absolute; top: 3px; left: 0; } .booking-modal__inner .button { position: absolute; bottom: 0; left: 0; width: 100%; background: #E5C89A; color: #000 !important; transition: all 0.3s; } @media (max-width: 600px) { .booking-modal__inner .button { right: 0; margin: auto; } } .booking-modal__inner .button:hover { background: #E5C89A; transform: translateY(-3px); } .bc-main { border-bottom: solid 1px #000; } .bc-intro { margin: 56px auto 84px; max-width: 550px; width: calc(100vw - 40px); text-align: center; } .bc-intro > span { font-weight: 400; font-size: 13px; line-height: 1; width: 31px; height: 31px; background: #E5C89A; border-radius: 50%; display: block; margin: 0 auto; padding-top: 9px; } .bc-intro h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 80px; font-weight: normal; margin: 0; } @media (max-width: 960px) { .bc-intro h2 { font-size: 60px; } } @media (max-width: 600px) { .bc-intro h2 { font-size: 50px; } } .bc-intro p { margin: 0; font-family: "Grotesk", helvetica; font-size: 16px; line-height: 22px; } .bc-intro p a { text-decoration: underline; color: inherit; transition: 0.15s; } .bc-intro p a:hover { opacity: 0.6; } .bc-intro .buttons { margin-top: 12px; } .bc-intro .buttons a.button { display: inline-block; margin: 0 9px; color: #fff !important; transition: all 0.3s; width: auto; max-width: auto; margin-top: 12px; } .bc-intro .buttons a.button svg.arrow-right { stroke: #fff; } .bc-intro .buttons a.button + a.button { color: #000 !important; background: #E5C89A !important; } .bc-intro .buttons a.button + a.button svg.arrow-right { stroke: #000; } .bc-intro .buttons a.button:hover { background: #000; transform: translateY(-3px); } .bc-table { max-width: 750px; width: calc(100vw - 40px); margin: 0 auto 125px; } @media (max-width: 700px) { .bc-table { width: 100%; padding: 0 0 0 20px; overflow-x: scroll; overflow-y: hidden; margin: 0 0 84px; } } @media (max-width: 700px) { .bc-table__inner { width: calc(100vw - 280px + 100px + 88px + 88px + 64px + 20px); padding-right: 20px; } } @media (max-width: 500px) { .bc-table__inner { width: calc(100vw - 180px + 100px + 88px + 88px + 64px + 20px); } } .bc-table__row { display: grid; grid-template-columns: 120px 1fr 88px 88px 64px; position: relative; } @media (max-width: 700px) { .bc-table__row { grid-template-columns: 100px calc(100vw - 280px) 88px 88px 64px; width: calc(100vw - 280px + 100px + 88px + 88px + 64px); } } @media (max-width: 500px) { .bc-table__row { grid-template-columns: 100px calc(100vw - 180px) 88px 88px 64px; width: calc(100vw - 180px + 100px + 88px + 88px + 64px); } } .bc-table__row::after { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; } .ie9 .bc-table__row::after { border-bottom: 1px dotted #000; } .bc-table__row span { padding-right: 16px; font-family: "Grotesk", helvetica; font-size: 18px; padding-top: 20px; padding-bottom: 20px; } @media (max-width: 700px) { .bc-table__row span { font-size: 14px; } } @media (max-width: 500px) { .bc-table__row span { padding-right: 10px; } } .bc-table__row span + span { border-left: solid 1px #EAE5DB; padding-left: 16px; } @media (max-width: 500px) { .bc-table__row span + span { padding-left: 10px; } } .bc-table__row .val { text-align: right; font-family: "Bureau Grot Bk", helvetica; font-size: 15px; } @media (max-width: 700px) { .bc-table__row .val { font-size: 13px; } } .bc-table__row .val:last-child { padding-right: 0; } .bc-table__row--disabled { color: rgba(0, 0, 0, 0.23); } .bc-table__row--header { border-bottom: solid 1px #000; } .bc-table__row--header::after { display: none; } .bc-table__row--header span, .bc-table__row--header span.val { font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 12px; text-transform: uppercase; padding-top: 0; padding-bottom: 14px; } .add-to-list-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: none; } .add-to-list-modal__shade { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.74); z-index: 1; } .add-to-list-modal__main { position: relative; z-index: 2; background: #FCFAF5; max-width: 675px; width: calc(100% - 40px); margin: 98px auto; border-radius: 20px; padding: 48px 92px 94px; } @media (max-width: 800px) { .add-to-list-modal__main { margin: 40px auto; padding: 40px 24px; } } .add-to-list-modal__main .add-to-list-close { position: absolute; top: 22px; right: 22px; cursor: pointer; } .add-to-list-modal__main .add-to-list-close svg { width: 14px; height: 14px; } .add-to-list-modal__main h2 { text-align: center; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 72px; margin: 0 0 9px; font-weight: normal; margin: 4px 0 40px; } @media (max-width: 600px) { .add-to-list-modal__main h2 { font-size: 66px; } } .add-to-list-modal__main .list-modal-new-trigger { background: #000; width: 113px; text-align: center; display: flex; align-items: center; font-size: 12px; color: #fff; border-radius: 30px; height: 50px; justify-content: center; margin-left: 15px; flex-shrink: 0; flex-grow: 0; cursor: pointer; text-transform: uppercase; } .add-to-list-modal__main textarea { min-height: 97px; } @media (max-width: 600px) { .add-to-list-modal__main .form__row { flex-wrap: nowrap; } } .add-to-list-modal__main .form__field { transition: all 0.3s; } .add-to-list-modal__main .form__field .text-info { font-family: "Grotesk", helvetica; padding: 0px; margin: 0px 22px; font-size: 14px; } @media (max-width: 600px) { .add-to-list-modal__main .form__field { display: flex; } .add-to-list-modal__main .form__field .text-info { text-align: center; width: 100%; margin: 0px; display: block; } } .add-to-list-modal__main .form__field.dis { opacity: 0.4; cursor: pointer; } .add-to-list-modal__main .new-list-inputs { display: none; } .add-to-list-modal__main .secret-toggle-row { justify-content: flex-start; } @media (max-width: 600px) { .add-to-list-modal__main .secret-toggle-row { flex-wrap: wrap; margin-bottom: 20px; } } .add-to-list-modal__main .secret-toggle-row .form__row__left { margin-top: 7px; } .add-to-list-modal__main .secret-toggle { width: 380px; display: flex; position: relative; align-items: center; } @media (max-width: 600px) { .add-to-list-modal__main .secret-toggle { margin: auto; max-width: 380px; width: auto; } } .add-to-list-modal__main .secret-toggle .switch { flex-grow: 0; flex-shrink: 0; width: 60px; height: 30px; position: relative; background: #D1C9B5; border-radius: 15px; z-index: 1; transition: all 0.3s; } .add-to-list-modal__main .secret-toggle .switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FCFAF5; transition: all 0.3s; } .add-to-list-modal__main .secret-toggle input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; } .add-to-list-modal__main .secret-toggle input:checked + .switch { background: #E5C89A; } .add-to-list-modal__main .secret-toggle input:checked + .switch span { left: 33px; } .add-to-list-modal__main .secret-toggle p { margin: 0 0 0 16px; display: inline-block; width: calc(100% - 76px); font-family: "Grotesk", helvetica; font-size: 14px; } .add-to-list-modal__main .button-row { justify-content: center; } .add-to-list-modal__main .list-modal-submit { position: relative; background: #000; display: inline-flex; height: 51px; align-content: center; padding: 19px 52px; color: #fff; border-radius: 25px; font-size: 11px; line-height: 13px; } .add-to-list-modal__main .list-modal-submit.dis { opacity: 0.32; } .add-to-list-modal__main .list-modal-submit .save { position: absolute; top: 12.5px; left: 17px; width: 20px; height: 25px; } .add-to-list-modal__main .list-modal-submit .arrow-right { position: absolute; right: 27px; top: 0; bottom: 0; margin: auto; width: 4.7px; height: 7px; stroke: #fff; } body.blog-landing .site-wrap, body.blog-single .site-wrap { overflow: unset; } @media (max-width: 800px) { body.blog-landing .site-wrap, body.blog-single .site-wrap { overflow: hidden; } } .blog-nav { border-bottom: solid 1px #000; padding-top: 0 !important; padding-bottom: 0 !important; background: #EAE5DB; } .blog-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } @media (max-width: 800px) { .blog-nav__inner { height: 55px; } } .blog-nav__inner > h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 31px; line-height: 1; letter-spacing: -0.03px; font-weight: normal; margin: 0; } .blog-nav__inner > h2 a { color: #000; } .blog-nav__inner > h2 small { font-family: "Plantin", serif; font-size: 15px; line-height: 1; margin-left: 12px; display: inline-block; font-style: italic; vertical-align: middle; transform: translateY(-1px); } @media (max-width: 800px) { .blog-nav__inner > h2 small { display: none; } } .blog-nav__controls { height: 100%; display: flex; align-items: center; } .blog-nav__controls > small { font-family: "Plantin", serif; font-weight: normal; font-size: 14px; line-height: 18px; font-weight: 300; font-style: italic; margin-right: 18px; } @media (max-width: 800px) { .blog-nav__controls > small { display: none; } } .blog-nav__categories { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s; } @media (max-width: 800px) { .blog-nav__categories { display: none; } } .blog-nav__categories > .arrow-down { width: 9px; height: 7px; transition: all 0.3s; margin-left: 7px; } .blog-nav__categories > span { padding-top: 2px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 14px; letter-spacing: 0.3px; text-transform: uppercase; transition: all 0.3s; } .blog-nav__categories .dd { position: absolute; top: 100%; right: -18px; width: 200px; background: #000; color: #fff; padding: 24px 18px; z-index: 2; opacity: 0; pointer-events: none; transition: all 0.3s; } .blog-nav__categories .dd::before { content: " "; display: block; width: 0; height: 0; border-bottom: solid 6px #000; border-left: solid 4.5px transparent; border-right: solid 4.5px transparent; position: absolute; bottom: 100%; right: 18px; } .blog-nav__categories .dd a { display: block; text-align: left; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; letter-spacing: 0.41px; text-transform: uppercase; color: #fff; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: all 0.3s; font-style: normal; } .blog-nav__categories .dd a:hover { -webkit-text-decoration-color: #fff; text-decoration-color: #fff; } .blog-nav__categories .dd a + a { margin-top: 15px; } .blog-nav__categories:hover > .arrow-down { transform: rotate(180deg); } .blog-nav__categories:hover .dd { opacity: 1; pointer-events: all; } .blog-nav__destinations { margin-left: 21px; height: 100%; position: relative; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s; } @media (max-width: 800px) { .blog-nav__destinations { display: none; } } .blog-nav__destinations > span { padding-top: 2px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 14px; letter-spacing: 0.3px; text-transform: uppercase; transition: all 0.3s; } .blog-nav__destinations > .arrow-down { width: 9px; height: 7px; transition: all 0.3s; margin-left: 7px; } .blog-nav__destinations .dd { position: absolute; top: 100%; right: -18px; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 2; } .blog-nav__destinations:hover > .arrow-down { transform: rotate(180deg); } .blog-nav__destinations:hover .dd { opacity: 1; pointer-events: all; } .blog-nav__browse { display: none; position: relative; height: 100%; } @media (max-width: 800px) { .blog-nav__browse { display: block; } } .blog-nav__browse button { height: 100%; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 14px; text-transform: uppercase; letter-spacing: 0.3px; } .blog-nav__browse button > .arrow-down { width: 9px; height: 7px; transition: all 0.3s; margin-left: 6px; } .blog-nav__browse button.active > .arrow-down { transform: rotate(180deg); } .blog-nav__browse .dd { width: 100vw; height: calc(100vh - 106px); background: #000; position: absolute; top: 100%; right: -20px; z-index: 2; display: none; } .blog-nav__browse .dd::before { content: " "; display: block; width: 0; height: 0; border-bottom: solid 6px #000; border-left: solid 4.5px transparent; border-right: solid 4.5px transparent; position: absolute; bottom: 100%; right: 20px; } .blog-nav__browse .dd__inner { padding: 32px 0; height: 100%; overflow: auto; } .blog-nav__browse .dd h3 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 24px; line-height: 1.1; font-weight: 400; margin: 0 20px 20px; color: #fff; } .blog-nav__browse .dd__categories { margin-bottom: 32px; } .blog-nav__browse .dd__categories > div { padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 18px; } .blog-nav__browse .dd__categories a { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; letter-spacing: 0.41px; line-height: 1; text-transform: uppercase; color: #fff; font-style: normal; } .blog-nav__browse .mob-cities { display: block; position: relative; height: auto; overflow: auto; border-top: 0; top: 0; } .blog-nav__browse .mob-cities .mob-cities-inner { margin: 0 20px; } .blog-nav .cities-dd { background: #000; padding: 24px 0 36px; display: flex; position: relative; } .blog-nav .cities-dd::before { content: " "; display: block; width: 0; height: 0; border-bottom: solid 6px #000; border-left: solid 4.5px transparent; border-right: solid 4.5px transparent; position: absolute; bottom: 100%; right: 18px; } .blog-nav .cities-dd .col { width: 180px; padding: 0 18px; } @media (max-width: 1080px) { .blog-nav .cities-dd .col { width: 150px; padding: 0 12px; } } .blog-nav .cities-dd .col:first-of-type { width: 334px; -moz-column-count: 2; column-count: 2; -moz-column-fill: auto; column-fill: auto; -moz-column-gap: 30px; column-gap: 30px; } @media (max-width: 1080px) { .blog-nav .cities-dd .col:first-of-type { width: 362px; -moz-column-gap: 12px; column-gap: 12px; } } @media (max-width: 880px) { .blog-nav .cities-dd .col:first-of-type { width: 300px; } } .blog-nav .cities-dd .col:first-of-type li:first-of-type { -moz-column-span: all; column-span: all; margin-bottom: 10px; transform: translateY(-9px); } .blog-nav .cities-dd .col:not(:first-of-type) { background-position: left; background-image: linear-gradient(rgba(255, 255, 255, 0.47) 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .blog-nav .cities-dd .col:not(:first-of-type) { border-left: 1px dotted rgba(255, 255, 255, 0.47); } .blog-nav .cities-dd .col ul { margin: 0; padding: 0; } .blog-nav .cities-dd .col ul + ul { margin-top: 38px; } .blog-nav .cities-dd li { font-family: "Plantin", serif; font-weight: normal; font-size: 14px; font-style: italic; color: #fff; list-style: none; } .blog-nav .cities-dd li + li { margin-top: 15px; } .blog-nav .cities-dd a { display: inline-block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; letter-spacing: 0.41px; text-transform: uppercase; color: #fff; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: all 0.3s; font-style: normal; margin-right: 4px; } .blog-nav .cities-dd a:hover { -webkit-text-decoration-color: #E8E0CC; text-decoration-color: #E8E0CC; } .blog-nav .cities-dd small { display: inline-block; font-size: 8px; font-style: normal; font-family: "Bureau Grot Bk", helvetica; color: #000; background: #E5C89A; width: 30px; text-align: center; border-radius: 7px; padding: 1.5px 0; text-transform: uppercase; transform: translateY(-1px); } @media (max-width: 800px) { .blog-post { display: flex; justify-content: space-between; align-items: center; } } @media (max-width: 800px) { .blog-post__image { width: calc(50% - 5px); } } .blog-post__image img { display: block; width: 100%; height: auto; border-top-left-radius: 7px; border-top-right-radius: 7px; } @media (max-width: 800px) { .blog-post__image img { border-top-right-radius: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } } .blog-post__content { margin-top: 20px; text-align: center; padding-bottom: 20px; } @media (max-width: 800px) { .blog-post__content { width: calc(50% - 5px); margin-top: 0; padding-bottom: 0; text-align: left; } } .blog-post__content small { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 12px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; } .blog-post__content small a { color: #000; } .blog-post__content h3 { margin: 20px 0 12px; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 42px; line-height: 1.1; letter-spacing: -0.03px; font-weight: normal; } @media (max-width: 1080px) { .blog-post__content h3 { font-size: 36px; } } @media (max-width: 600px) { .blog-post__content h3 { font-size: 24px; margin: 10px 0; } } .blog-post__content h3 a { color: #000; } .blog-post__content .byline { display: flex; align-items: center; justify-content: center; } .blog-post__content .byline span { display: inline-block; vertical-align: middle; margin-right: 6px; font-family: "Plantin", serif; font-weight: normal; font-size: 12px; font-style: italic; line-height: 18px; } .blog-post__content .byline__users { display: inline-block; vertical-align: middle; } .blog-post__content .byline__users > div { font-size: 0; display: inline-block; vertical-align: middle; } .blog-post__content .byline__users > div + div { margin-left: -7px; } .blog-post__content .byline__users > div img { width: 17px; height: 17px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; transition: all 0.3s; } .blog-post__content .byline__users > div a svg, .blog-post__content .byline__users > div span.guest svg { width: 10px; height: 10px; margin-left: 4px; transform: translateY(-1px); } .blog-post__content .byline__users > div a:hover img, .blog-post__content .byline__users > div span.guest:hover img { transform: translateY(-2px); } .blog-post__content .byline__users > div:only-child a, .blog-post__content .byline__users > div span.guest-contributor, .blog-post__content .byline__users > div span.guest { font-size: 12px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; line-height: 15px; color: black; font-style: normal; } .blog-post__content .byline__users > div:only-child a img, .blog-post__content .byline__users > div span.guest-contributor img, .blog-post__content .byline__users > div span.guest img { display: inline-block; vertical-align: middle; margin-right: 6px; } .blog-post--large { position: relative; } @media (max-width: 800px) { .blog-post--large { margin-bottom: 28px; display: block; } } @media (max-width: 800px) { .blog-post--large .blog-post__image { width: 100%; } } .blog-post--large img { border-radius: 20px; } @media (max-width: 800px) { .blog-post--large img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } .blog-post--large .blog-post__content { position: absolute; bottom: 0; left: 0; padding: 35px; max-width: 567px; text-align: left; color: #fff; } @media (max-width: 800px) { .blog-post--large .blog-post__content { position: static; padding: 0; margin-top: 20px; max-width: 100%; text-align: center; width: 100%; } } .blog-post--large .blog-post__content a { color: #fff !important; } @media (max-width: 800px) { .blog-post--large .blog-post__content a { color: #000 !important; } } .blog-post--large .blog-post__content h3 { font-size: 80px; letter-spacing: -0.05px; } @media (max-width: 1080px) { .blog-post--large .blog-post__content h3 { font-size: 72px; } } @media (max-width: 800px) { .blog-post--large .blog-post__content h3 { font-size: 50px; } } .blog-intro { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; display: grid; grid-template-columns: 1fr calc(33.333% - 21.333333333px); grid-column-gap: 32px; padding-bottom: 14px; margin-bottom: 14px; padding-top: 26px; } .ie9 .blog-intro { border-bottom: 1px dotted #000; } @media (max-width: 800px) { .blog-intro { display: block; grid-column-gap: 0; padding-top: 22px; padding-bottom: 0; background: none; margin-bottom: 0; } } .blog-intro__main .blog-post { position: sticky; top: 92px; left: 0; } @media (max-width: 800px) { .blog-intro__main .blog-post { position: static; } } .blog-intro__side { position: relative; } @media (max-width: 800px) { .blog-intro__side { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-top: 14px; padding-bottom: 14px; } .ie9 .blog-intro__side { border-top: 1px dotted #000; } } .blog-intro__side::before { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 100%; margin-right: 15px; } .ie9 .blog-intro__side::before { border-left: 1px dotted #000; } @media (max-width: 800px) { .blog-intro__side::before { display: none; } } .blog-intro__side::after { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; width: 100%; height: 1px; } .ie9 .blog-intro__side::after { border-bottom: 1px dotted #000; } @media (max-width: 800px) { .blog-intro__side::after { display: block; } } .blog-intro__side .blog-post + .blog-post { margin-top: 20px; } @media (max-width: 800px) { .blog-intro__side .blog-post + .blog-post { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 14px; padding-top: 14px; margin-bottom: 14px; } .ie9 .blog-intro__side .blog-post + .blog-post { border-top: 1px dotted #000; } } .blog-grid { padding-top: 0; padding-bottom: 0; } .blog-grid__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 32px; grid-row-gap: 32px; overflow: hidden; } @media (max-width: 800px) { .blog-grid__inner { display: block; grid-column-gap: 0; grid-row-gap: 0; } } .blog-grid__inner > div:not(:first-child) { position: relative; } .blog-grid__inner > div:not(:first-child)::before { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 100%; margin-right: 15px; } .ie9 .blog-grid__inner > div:not(:first-child)::before { border-left: 1px dotted #000; } @media (max-width: 800px) { .blog-grid__inner > div:not(:first-child)::before { display: none; } } .blog-grid__inner > div:not(:first-child)::after { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; display: block; position: absolute; bottom: 100%; left: -16px; margin-bottom: 15px; width: calc(100% + 32px); height: 1px; } .ie9 .blog-grid__inner > div:not(:first-child)::after { border-top: 1px dotted #000; } @media (max-width: 800px) { .blog-grid__inner > div:not(:first-child)::after { display: none; } } @media (max-width: 800px) { .blog-grid__inner > div + div { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; margin-top: 14px; padding-top: 14px; } .ie9 .blog-grid__inner > div + div { border-top: 1px dotted #000; } } .blog-popular { background: #000; color: #fff; padding-top: 65px; padding-bottom: 70px; margin: 36px 0 45px; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 960px) { .blog-popular { display: block; padding-top: 56px; padding-bottom: 64px; margin: 40px 0; } } .blog-popular__title, section.destination-blog .destination-blog__title { text-align: center; width: calc(20% - 19.2px); } @media (max-width: 960px) { .blog-popular__title, section.destination-blog .destination-blog__title { width: 100%; margin: 0 0 17px; } } .blog-popular__title h2, section.destination-blog .destination-blog__title h2 { font-family: "Altissima", helvetica; font-size: 60px; line-height: 1; letter-spacing: -0.1px; text-transform: uppercase; font-weight: normal; margin: 0; } @media (max-width: 960px) { .blog-popular__title h2, section.destination-blog .destination-blog__title h2 { font-size: 48px; text-align: center; } } .blog-popular__title .controls, section.destination-blog .destination-blog__title .controls { display: flex; align-items: center; justify-content: center; margin-top: 12.5px; } @media (max-width: 960px) { .blog-popular__title .controls, section.destination-blog .destination-blog__title .controls { display: none; } } .blog-popular__title .controls button, section.destination-blog .destination-blog__title .controls button { width: 30px; height: 30px; background: #EAE5DB; position: relative; } .blog-popular__title .controls button.slick-disabled svg, section.destination-blog .destination-blog__title .controls button.slick-disabled svg { opacity: 0.17; } .blog-popular__title .controls button svg, section.destination-blog .destination-blog__title .controls button svg { width: 7px; height: 9px; position: absolute; bottom: 0; right: 0; top: 0; left: 0; margin: auto; transition: all 0.3s; } .blog-popular__title .controls button:first-child, section.destination-blog .destination-blog__title .controls button:first-child { border-top-left-radius: 50%; border-bottom-left-radius: 50%; } .blog-popular__title .controls button:first-child svg, section.destination-blog .destination-blog__title .controls button:first-child svg { transform: rotate(180deg); } .blog-popular__title .controls button:last-child, section.destination-blog .destination-blog__title .controls button:last-child { border-top-right-radius: 50%; border-bottom-right-radius: 50%; } .blog-popular__slider-wrap, section.destination-blog .destination-blog__slider-wrap { width: calc(80% - 5.8px + 50px + 15px); margin-right: -50px; padding-right: 50px; overflow: hidden; } @media (max-width: 1450px) { .blog-popular__slider-wrap, section.destination-blog .destination-blog__slider-wrap { width: calc(80% - 5.8px + 30px + 15px); margin-right: -30px; padding-right: 30px; } } @media (max-width: 960px) { .blog-popular__slider-wrap, section.destination-blog .destination-blog__slider-wrap { width: calc(80% + 20px); margin-right: -20px; padding-right: 20px; } } @media (max-width: 960px) { .blog-popular__slider-wrap, section.destination-blog .destination-blog__slider-wrap { width: calc(100% + 40px); margin-left: -20px; padding-right: 0; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } } .blog-popular__slider { background-position: left; background-image: linear-gradient(#fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .blog-popular__slider { border-left: 1px dotted #fff; } @media (max-width: 960px) { .blog-popular__slider { background: none; padding-left: 20px; padding-right: 20px; display: flex; } .blog-popular__slider::after { content: " "; display: inline-block; width: 20px; flex-shrink: 0; } } .blog-popular__slider .slick-list { overflow: visible; } .blog-popular .slider-post { padding: 0 16px; display: flex; align-items: center; } @media (max-width: 960px) { .blog-popular .slider-post { display: inline-block; width: 40vw; padding: 0; flex-shrink: 0; white-space: normal; } } .blog-popular .slider-post:not(:first-child) { background-position: left; background-image: linear-gradient(#fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .blog-popular .slider-post:not(:first-child) { border-left: 1px dotted #fff; } @media (max-width: 960px) { .blog-popular .slider-post:not(:first-child) { margin-left: 18px; background: none; position: relative; } .blog-popular .slider-post:not(:first-child)::before { background-position: left; background-image: linear-gradient(#fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 100%; margin-right: 8px; } .ie9 .blog-popular .slider-post:not(:first-child)::before { border-left: 1px dotted #fff; } } .blog-popular .slider-post > a { width: 50%; } .blog-popular .slider-post > a img { display: block; border-top-left-radius: 7px; border-bottom-left-radius: 7px; width: 100%; } @media (max-width: 960px) { .blog-popular .slider-post > a img { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0; } } .blog-popular .slider-post .content { width: 50%; padding-left: 18px; } @media (max-width: 960px) { .blog-popular .slider-post .content { width: 100%; padding-left: 0; text-align: center; margin-top: 12px; padding-bottom: 8px; } } .blog-popular .slider-post .content a { color: #fff; } .blog-popular .slider-post .content small { font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 12px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; } .blog-popular .slider-post .content h3 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 28px; font-weight: normal; line-height: 1.14; letter-spacing: -0.03px; margin: 9px 0 0; } @media (max-width: 1170px) { .blog-popular .slider-post .content h3 { font-size: 24px; } } .blog-popular .slider-post .content h3 a { text-transform: none !important; } .blog-popular .slider-post .content .byline { display: flex; align-items: center; } .blog-popular .slider-post .content .byline span { display: inline-block; vertical-align: middle; margin-right: 6px; font-family: "Plantin", serif; font-weight: normal; font-size: 12px; font-style: italic; } .blog-popular .slider-post .content .byline__users { display: inline-block; vertical-align: middle; } .blog-popular .slider-post .content .byline__users > div { font-size: 0; display: inline-block; vertical-align: middle; } .blog-popular .slider-post .content .byline__users > div + div { margin-left: -7px; } .blog-popular .slider-post .content .byline__users > div img { width: 17px; height: 17px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; transition: all 0.3s; } .blog-popular .slider-post .content .byline__users > div a:hover img { transform: translateY(-2px); } .blog-popular .slider-post .content .byline__users > div:only-child a, .blog-popular .slider-post .content .byline__users > div strong { font-size: 12px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; line-height: 15px; color: black; text-transform: none; } .blog-popular .slider-post .content .byline__users > div:only-child a img, .blog-popular .slider-post .content .byline__users > div strong img { display: inline-block; vertical-align: middle; margin-right: 6px; } .blog-latest { background: #000; padding-top: 88px; padding-bottom: 74px; margin: 45px 0; display: flex; align-items: center; } @media (max-width: 800px) { .blog-latest { display: block; padding-top: 57px; padding-bottom: 62px; margin: 32px 0; } } .blog-latest__title { width: 20%; text-align: center; color: #fff; padding-right: 14px; } @media (max-width: 800px) { .blog-latest__title { width: 100%; padding-right: 0; margin-bottom: 26px; } } .blog-latest__title small { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 15px; line-height: 18px; display: block; margin: 0 0 12px; } .blog-latest__title .dd-wrap { background-position: bottom; background-image: linear-gradient(to right, #E5C89A 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; display: inline-flex; align-items: center; position: relative; } .ie9 .blog-latest__title .dd-wrap { border-bottom: 1px dotted #E5C89A; } .blog-latest__title .dd-wrap h2 { margin: 0; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 60px; line-height: 1; letter-spacing: -0.1px; text-transform: uppercase; font-weight: normal; } @media (max-width: 800px) { .blog-latest__title .dd-wrap h2 { font-size: 48px; } } .blog-latest__title .dd-wrap > svg { width: 9px; height: 6px; stroke: #fff; margin-left: 6px; transition: all 0.3s; } .blog-latest__title .dd-wrap .dd { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 18px; width: 180px; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 2; } .blog-latest__title .dd-wrap .dd__inner { background: #E8E0CC; border-radius: 20px; padding: 24px 12px; position: relative; } .blog-latest__title .dd-wrap .dd__inner::before { content: " "; display: block; width: 0; height: 0; border-bottom: solid 6px #E8E0CC; border-left: solid 4.5px transparent; border-right: solid 4.5px transparent; position: absolute; bottom: 100%; left: 0; right: 0; margin: auto; } .blog-latest__title .dd-wrap .dd__inner button { display: block; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 13px; letter-spacing: 0.41px; text-transform: uppercase; color: #000; transition: all 0.3s; font-style: normal; width: 100%; text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; } .blog-latest__title .dd-wrap .dd__inner button:hover { -webkit-text-decoration-color: #000; text-decoration-color: #000; } .blog-latest__title .dd-wrap .dd__inner button + button { margin-top: 12px; } @media (min-width: 801px) { .blog-latest__title .dd-wrap:hover > svg { transform: rotate(-180deg); } .blog-latest__title .dd-wrap:hover .dd { opacity: 1; pointer-events: all; } } .blog-latest__title .dd-wrap.open > svg { transform: rotate(-180deg); } .blog-latest__title .dd-wrap.open .dd { opacity: 1; pointer-events: all; } .blog-latest__title > a { display: block; } @media (max-width: 800px) { .blog-latest__title > a { display: none; } } .blog-latest__inner { width: 80%; } @media (max-width: 800px) { .blog-latest__inner { width: calc(100% + 40px); padding-left: 20px; margin-left: -20px; overflow: auto; white-space: nowrap; } } .blog-latest__grid { background-position: left; background-image: linear-gradient(#fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 24px; padding-left: 13px; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; transition: all 0.3s; } .ie9 .blog-latest__grid { border-left: 1px dotted #fff; } @media (max-width: 800px) { .blog-latest__grid { display: none; background: none; padding-left: 0; grid-column-gap: 18px; grid-template-columns: 1fr 1fr 1fr 1fr 2px; } .blog-latest__grid::after { content: " "; display: inline-block; width: 2px; flex-shrink: 0; } } .blog-latest__grid.active { pointer-events: all; opacity: 1; position: static; } @media (max-width: 800px) { .blog-latest__grid.active { display: grid; } } .blog-latest .latest-post { padding-bottom: 20px; } @media (max-width: 800px) { .blog-latest .latest-post { white-space: normal; flex-shrink: 0; width: 40vw; } } .blog-latest .latest-post + .latest-post { position: relative; } .blog-latest .latest-post + .latest-post::before { background-position: left; background-image: linear-gradient(#fff 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: " "; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 100%; margin-right: 11px; } .ie9 .blog-latest .latest-post + .latest-post::before { border-left: 1px dotted #fff; } @media (max-width: 800px) { .blog-latest .latest-post + .latest-post::before { margin-right: 9px; } } .blog-latest .latest-post .img-wrap img { display: block; width: 100%; border-top-left-radius: 7px; border-top-right-radius: 7px; } .blog-latest .latest-post h3 { margin: 14px 0 0; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 28px; line-height: 1.14; letter-spacing: -0.03px; font-weight: normal; text-align: center; } @media (max-width: 800px) { .blog-latest .latest-post h3 { font-size: 24px; } } .blog-latest .latest-post h3 a { color: #fff; } .blog-latest .blog-latest-view-all { margin: 26px auto 0; width: 82px; text-align: center; background: #E8E0CC; border-radius: 20px; padding: 8.5px 0 7.5px; font-family: "Bureau Grot Bk", helvetica; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; color: #000; } .blog-latest > a { display: none; } @media (max-width: 800px) { .blog-latest > a { display: block; } } @media (max-width: 800px) { .blog-load-more { padding-top: 32px; padding-bottom: 0; } } .blog-load-more button { display: block; margin: 0 auto; max-width: 684px; width: 100%; background: #EAE5DB; padding: 19px 0; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 13px; letter-spacing: 0.3px; text-transform: uppercase; border-radius: 25px; } .blog-cta { background: #EAE5DB; border-top: solid 1px #000; border-bottom: solid 1px #000; padding-top: 76px; padding-bottom: 105px; text-align: center; margin-top: 90px; } .blog-cta h2 { margin: 0 0 21px; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 99px; line-height: 1; letter-spacing: -0.05px; font-weight: normal; } @media (max-width: 800px) { .blog-cta h2 { font-size: 62px; } } .blog-category { padding-top: 50px; margin-bottom: 18px; padding-bottom: 0; } .blog-category::after { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: " "; display: block; width: 100%; height: 1px; } .ie9 .blog-category::after { border-bottom: 1px dotted #000; } .blog-category > h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 56px; line-height: 1; letter-spacing: -0.03px; font-weight: normal; margin: 0; text-align: center; text-transform: uppercase; } .blog-category__ctas { margin-top: 20px; text-align: center; margin-bottom: 50px; } .blog-category__ctas br { display: none; } @media (max-width: 600px) { .blog-category__ctas br { display: block; } } .blog-category__ctas a { display: inline-flex; align-items: center; padding: 0 28px 0 48px; background: #EAE5DB; border-radius: 30px; height: 52px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 14px; letter-spacing: 0.3px; text-transform: uppercase; transition: all 0.3s; color: #000; position: relative; } .blog-category__ctas a svg.arrow-right { width: 9px; height: 9px; margin-left: 16px; transform: translateY(-1px); } .blog-category__ctas a svg.book_empty { position: absolute; top: 0; left: 20px; bottom: 0; margin: auto; width: 20px; height: 20px; transform: translateY(-1px); } .blog-category__ctas a svg.pin-empty { stroke: #000; position: absolute; top: 0; left: 23px; bottom: 0; margin: auto; width: 16px; height: 17px; transform: translateY(-1px); } .blog-category__ctas a:last-child { margin-left: 16px; } @media (max-width: 600px) { .blog-category__ctas a:last-child { margin-left: 0; margin-top: 16px; } } .blog-single__hero { display: flex; align-items: center; padding-top: 28px; padding-bottom: 62px; } @media (max-width: 800px) { .blog-single__hero { display: block; padding-top: 20px; padding-bottom: 36px; } } .blog-single__hero .img-wrap { width: 60%; position: relative; } @media (max-width: 800px) { .blog-single__hero .img-wrap { width: 100%; } } .blog-single__hero .img-wrap img { display: block; width: 100%; border-top-left-radius: 20px; border-bottom-left-radius: 20px; height: auto; } @media (max-width: 800px) { .blog-single__hero .img-wrap img { border-bottom-left-radius: 0px; border-top-right-radius: 20px; } } .blog-single__hero .img-wrap small { position: absolute; bottom: 20px; left: 26px; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 14px; letter-spacing: 0.05px; line-height: 24px; color: #fff; width: calc(100% - 52px); } .blog-single__hero .content { width: 40%; padding-left: 25px; } @media (max-width: 800px) { .blog-single__hero .content { width: 100%; padding-left: 0; text-align: center; margin-top: 16px; } } .blog-single__hero .content h3 { margin: 0; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.1px; text-transform: uppercase; } @media (max-width: 800px) { .blog-single__hero .content h3 { font-size: 11px; } } .blog-single__hero .content h3 a { color: #000; } .blog-single__hero .content h1 { margin: 15px 0 30px; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 80px; font-weight: normal; line-height: 1.1375; } @media (max-width: 1170px) { .blog-single__hero .content h1 { font-size: 65px; } } @media (max-width: 960px) { .blog-single__hero .content h1 { font-size: 50px; } } .blog-single__hero .content .author { display: flex; } @media (max-width: 960px) { .blog-single__hero .content .author { justify-content: center; text-align: left; } } .blog-single__hero .content .author > a img, .blog-single__hero .content .author span.guest img, .blog-single__hero .content .author span.guest-contributor-image img { width: 37px; height: 37px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .blog-single__hero .content .author p { margin: 0; padding-left: 9px; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 13px; line-height: 1.4; } .blog-single__hero .content .author p a, .blog-single__hero .content .author p span.guest, .blog-single__hero .content .author p span.guest-contributor { font-style: normal; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; color: #000; } .blog-single__hero .content .author p a svg, .blog-single__hero .content .author p span.guest svg, .blog-single__hero .content .author p span.guest-contributor svg { width: 10px; height: 10px; margin-left: 4px; transform: translateY(-1px); } .blog-single__content { padding-top: 0; padding-bottom: 0; max-width: 734px; margin: 0 auto; font-family: "Grotesk", helvetica; font-size: 18px; line-height: normal; line-height: 1.33; letter-spacing: 0.05px; } @media (max-width: 1450px) { .blog-single__content { max-width: 694px; } } @media (max-width: 800px) { .blog-single__content { font-szie: 15px; } } .blog-single__content > p:first-of-type { font-size: 23px; margin-top: 0; } @media (max-width: 800px) { .blog-single__content > p:first-of-type { font-szie: 18px; } } .blog-single__content > p { margin: 30px 0; } @media (max-width: 800px) { .blog-single__content > p { margin: 18px 0; } } .blog-single__content > p + ul { margin-top: 0; } .blog-single__content > p a, .blog-single__content > ul a, .blog-single__content > ol a { font-weight: bold; color: #000; border-bottom: solid 1px #E5C89A; } .blog-single__content > h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 49px; line-height: 1; letter-spacing: 0.1px; font-weight: 400; margin: 72px 0 22px; } @media (max-width: 800px) { .blog-single__content > h2 { font-size: 36px; margin-bottom: 12px; margin-top: 58px; } } .blog-single__content > h2 + h3 { margin-top: 0; } .blog-single__content > h3 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 28px; line-height: 29px; font-weight: 400; letter-spacing: 0.1px; text-transform: uppercase; margin: 58px 0 20px; } @media (max-width: 800px) { .blog-single__content > h3 { font-size: 24px; } } .blog-single__content > h4 { font-family: "Bureau Grot Bk", helvetica; font-size: 12px; font-weight: normal; line-height: 1; letter-spacing: 0.41px; text-transform: uppercase; margin: 42px 0 16px; } .blog-single__content > h4 + p, .blog-single__content > h4 + ul, .blog-single__content > h4 + ol, .blog-single__content > h4 + .multi-post-widget, .blog-single__content > h4 + .post-widget, .blog-single__content > h4 + .image, .blog-single__content > h3 + p, .blog-single__content > h3 + ul, .blog-single__content > h3 + ol, .blog-single__content > h3 + .multi-post-widget, .blog-single__content > h3 + .post-widget, .blog-single__content > h3 + .image, .blog-single__content > h2 + p, .blog-single__content > h2 + ul, .blog-single__content > h2 + ol, .blog-single__content > h2 + .multi-post-widget, .blog-single__content > h2 + .post-widget, .blog-single__content > h2 + .image { margin-top: 0; } .blog-single__content > h4 + p .post-widget__header, .blog-single__content > h4 + ul .post-widget__header, .blog-single__content > h4 + ol .post-widget__header, .blog-single__content > h4 + .multi-post-widget .post-widget__header, .blog-single__content > h4 + .post-widget .post-widget__header, .blog-single__content > h4 + .image .post-widget__header, .blog-single__content > h3 + p .post-widget__header, .blog-single__content > h3 + ul .post-widget__header, .blog-single__content > h3 + ol .post-widget__header, .blog-single__content > h3 + .multi-post-widget .post-widget__header, .blog-single__content > h3 + .post-widget .post-widget__header, .blog-single__content > h3 + .image .post-widget__header, .blog-single__content > h2 + p .post-widget__header, .blog-single__content > h2 + ul .post-widget__header, .blog-single__content > h2 + ol .post-widget__header, .blog-single__content > h2 + .multi-post-widget .post-widget__header, .blog-single__content > h2 + .post-widget .post-widget__header, .blog-single__content > h2 + .image .post-widget__header { margin-top: 0; } .blog-single__content > ul, .blog-single__content > ol { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 18px; letter-spacing: 0.05px; line-height: 24px; padding: 0; margin: 42px 0; list-style: none; } @media (max-width: 800px) { .blog-single__content > ul, .blog-single__content > ol { margin: 24px 0; } } .blog-single__content > ul li, .blog-single__content > ol li { padding-left: 30px; position: relative; } .blog-single__content > ul li + li, .blog-single__content > ol li + li { margin-top: 10px; } .blog-single__content > ul li::before { content: " "; display: block; width: 15px; position: absolute; top: 12px; height: 2px; background: #E5C89A; left: 0; } .blog-single__content > ol { counter-reset: list-counter; } .blog-single__content > ol li { counter-increment: list-counter; } .blog-single__content > ol li::before { content: counter(list-counter) "."; position: absolute; top: 0; left: 0; color: #E5C89A; font-weight: bold; } .blog-single figure.img-wrap, .blog-single figure.image { width: calc(100% + 200px); margin: 50px 0 50px 50%; transform: translateX(-50%); max-width: 100vw; position: relative; } @media (max-width: 800px) { .blog-single figure.img-wrap, .blog-single figure.image { width: 100%; margin: 36px 0; transform: none; } } .blog-single figure.img-wrap.small, .blog-single figure.img-wrap.image-style-align-center, .blog-single figure.image.small, .blog-single figure.image.image-style-align-center { width: 100%; transform: none; max-width: 100%; margin: 50px 0; } .blog-single figure.img-wrap img, .blog-single figure.image img { display: block; width: 100%; height: auto; } .blog-single figure.img-wrap figcaption, .blog-single figure.image figcaption { position: absolute; bottom: 20px; left: 26px; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 14px; letter-spacing: 0.05px; line-height: 24px; color: #fff; width: calc(100% - 52px); } .blog-single .multi-post-widget { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; padding-top: 12px; margin: 42px 0; } .ie9 .blog-single .multi-post-widget { border-top: 1px dotted #000; } .blog-single .multi-post-widget .map-post-wrap { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; display: flex; align-items: center; padding-bottom: 12px; } .ie9 .blog-single .multi-post-widget .map-post-wrap { border-bottom: 1px dotted #000; } .blog-single .multi-post-widget .map-post-wrap + .map-post-wrap { margin-top: 12px; } .blog-single .multi-post-widget .map-post-wrap .map-post { width: calc(100% - 110px); padding-bottom: 0; margin-bottom: 0; background: none; } @media (max-width: 800px) { .blog-single .multi-post-widget .map-post-wrap .map-post { width: 100%; } } .blog-single .multi-post-widget .map-post-wrap > a.cta { width: 88px; height: 37px; margin-left: 22px; background: #E8E0CC; flex-shrink: 0; display: flex; justify-content: center; align-items: center; border-radius: 30px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; line-height: 12px; letter-spacing: 0.3px; text-transform: uppercase; color: #000; } @media (max-width: 800px) { .blog-single .multi-post-widget .map-post-wrap > a.cta { display: none; } } .blog-single__outro { padding-top: 0; padding-bottom: 0; max-width: 734px; margin: 56px auto 0; } @media (max-width: 1450px) { .blog-single__outro { max-width: 694px; } } .blog-single__outro > h2 { font-family: "Clearface", serif; font-weight: normal; font-size: 48px; line-height: 1; margin: 0 0 34px; } @media (max-width: 800px) { .blog-single__outro > h2 { font-size: 38px; margin: 0 0 18px; } } .blog-single__outro .author { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; display: flex; padding-bottom: 30px; margin-bottom: 26px; } .ie9 .blog-single__outro .author { border-bottom: 1px dotted #000; } .blog-single__outro .author a.img-wrap { width: 80px; margin-right: 20px; flex-shrink: 0; } @media (max-width: 800px) { .blog-single__outro .author a.img-wrap { width: 60px; margin-right: 18px; } } .blog-single__outro .author a.img-wrap img { display: block; width: 100%; height: auto; border-radius: 50%; } .blog-single__outro .author .content h3 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 36px; line-height: 1; font-weight: normal; margin: 0 0 12px; } @media (max-width: 800px) { .blog-single__outro .author .content h3 { font-size: 28px; } } .blog-single__outro .author .content p { margin: 0; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 16px; line-height: 21px; } @media (max-width: 800px) { .blog-single__outro .author .content p { font-size: 14px; line-height: 19px; } } .blog-single__outro .author .content a.cta { display: inline-flex; height: 37px; align-items: center; background: #EAE5DB; padding: 0 20px; border-radius: 30px; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 12px; color: #000; } .blog-single__outro .tags { display: flex; } .blog-single__outro .tags h4 { width: 80px; flex-shrink: 0; margin: 0 20px 0 0; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0.41px; text-transform: uppercase; margin-top: 3.5px; } @media (max-width: 800px) { .blog-single__outro .tags h4 { width: 60px; margin-right: 18px; } } .blog-single__outro .tags a { font-family: "Grotesk", helvetica; font-size: 13px; letter-spacing: 0; line-height: 1; padding: 10px 14px; border-radius: 20px; display: inline-block; margin-right: 7px; margin: 3.5px 7px 3.5px 0; color: #000; background: #EAE5DB; } .blog-single__similar .blog-latest { background: transparent; border-top: solid 1px #000; border-bottom: solid 1px #000; margin-bottom: 0; padding-top: 50px; padding-bottom: 50px; } @media (max-width: 800px) { .blog-single__similar .blog-latest { padding-top: 57px; padding-bottom: 62px; } } .blog-single__similar .blog-latest__title { color: #000; } .blog-single__similar .blog-latest__title h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 60px; line-height: 1; letter-spacing: -2px; text-transform: uppercase; font-weight: normal; margin: 0; } .blog-single__similar .blog-latest .blog-latest__grid { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .blog-single__similar .blog-latest .blog-latest__grid { border-left: 1px dotted #000; } @media (max-width: 800px) { .blog-single__similar .blog-latest .blog-latest__grid { background: none; } } .blog-single__similar .blog-latest .latest-post h3 a { color: #000; } .blog-single__similar .blog-latest .latest-post + .latest-post::before { background-position: left; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; } .ie9 .blog-single__similar .blog-latest .latest-post + .latest-post::before { border-left: 1px dotted #000; } .blog-single__comments { padding-bottom: 98px; border-bottom: solid 1px #000; position: relative; max-height: 100%; } @media (max-width: 800px) { .blog-single__comments { padding-top: 28px; } } .blog-single__comments .top { max-width: 635px; margin: 0 auto 32px; text-align: center; } .blog-single__comments .top h2 { display: inline-block; position: relative; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 60px; line-height: 1; letter-spacing: -2px; text-transform: uppercase; font-weight: normal; margin: 0; } .blog-single__comments .top h2 small { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 12px; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 14px; line-height: 24px; letter-spacing: 0; } .blog-single__comments .top .blog-comment-cta-wrap { position: absolute; top: 50px; right: 50px; height: calc(100% - 100px); } @media (max-width: 1450px) { .blog-single__comments .top .blog-comment-cta-wrap { top: 30px; right: 30px; height: calc(100% - 60px); } } @media (max-width: 960px) { .blog-single__comments .top .blog-comment-cta-wrap { position: static; } } .blog-single__comments .top .blog-comment-cta-wrap button { height: 51px; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; padding: 0 30px; border-radius: 25px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 11px; line-height: 1; text-transform: uppercase; position: sticky; top: 116px; } @media (max-width: 1450px) { .blog-single__comments .top .blog-comment-cta-wrap button { top: 96px; } } @media (max-width: 960px) { .blog-single__comments .top .blog-comment-cta-wrap button { height: auto; background: none; padding: 0; color: #000; margin: 12px auto 0; } } .blog-single__comments .top .blog-comment-cta-wrap button svg { width: 6px; height: 8px; margin-left: 15px; stroke: #fff; } @media (max-width: 960px) { .blog-single__comments .top .blog-comment-cta-wrap button svg { stroke: #000; } } .blog-single__comments .activity-feed { background-position: top; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; max-width: 635px; margin: 0 auto; padding-top: 20px; } .ie9 .blog-single__comments .activity-feed { border-top: 1px dotted #000; } .blog-single__comments .activity-feed .activity-item-comments-toggle span { display: inline; } .blog-single__comments .activity-feed .activity-item-comments-toggle.active span { display: none; } .blog-single__comments .comments-load-more { max-width: 635px; width: 100%; margin: 20px auto 26px; text-align: center; display: flex; height: 51px; align-items: center; justify-content: center; border-radius: 25px; background: #EAE5DB; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; font-size: 11px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; } .blog-single__comments .blog-main-comment-form { max-width: 635px; width: 100%; margin: 26px auto; align-items: flex-start; padding: 10px 0; height: 83px; } .blog-single__comments .blog-main-comment-form textarea { height: 63px; padding-top: 5px; resize: none; } .blog-single__comments .blog-main-comment-form button { margin-top: 10px; } .post-widget { margin: 60px 0 70px; } @media (max-width: 800px) { .post-widget { margin: 40px 0; } } .post-widget + p { margin-top: -50px; } @media (max-width: 800px) { .post-widget + p { margin-top: -15px; } } .post-widget__header { width: calc(100% + 200px); margin: 50px 0 24px 50%; transform: translateX(-50%); max-width: 100vw; position: relative; } @media (max-width: 800px) { .post-widget__header { width: 100%; margin: 0 0 20px; transform: none; } } .post-widget__header::before { content: " "; display: block; width: 100%; height: 75%; background-image: linear-gradient(rgba(0, 0, 0, 0), black); position: absolute; bottom: 0; left: 0; z-index: 2; } @media (max-width: 800px) { .post-widget__header::before { display: none; } } .post-widget__header .post-wishlist-button { width: 23px; height: 28px; position: absolute; top: 26px; right: 26px; } .post-widget__header .post-wishlist-button svg { display: block; width: 100%; height: 100%; } .post-widget__header a.img-wrap { width: 100%; display: block; font-size: 0; line-height: 0; } .post-widget__header a.img-wrap img { display: block; border-top-left-radius: 15px; border-top-right-radius: 15px; width: 100%; height: auto; } .post-widget__title { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; padding-top: 0; padding-bottom: 32px; max-width: 734px; z-index: 3; color: #fff; } @media (max-width: 1450px) { .post-widget__title { max-width: 694px; } } @media (max-width: 800px) { .post-widget__title { position: static; color: #000; padding: 0 !important; margin-top: -36px; } } .post-widget__title a { color: #fff; } @media (max-width: 800px) { .post-widget__title a { color: #000; } } @media (max-width: 800px) { .post-widget__title h3 { margin-bottom: 44px; margin-left: 20px; } } .post-widget__title h3 a { color: #fff; } .post-widget__title h2 { margin: 10px 0 24px; font-family: "Clearface", serif; font-size: 52px; line-height: 1; font-weight: normal; } @media (max-width: 800px) { .post-widget__title h2 { margin: 0 0 20px; font-size: 36px; } } .post-widget__title .tags { display: flex; } @media (max-width: 800px) { .post-widget__title .tags { display: block; } } .post-widget__title .tags .main-tags { font-size: 0; } .post-widget__title .tags .main-tags h4 { display: inline-block; vertical-align: middle; margin: 0; color: #fff; font-family: "Plantin", serif; font-weight: normal; font-style: italic; font-size: 12px; } @media (max-width: 800px) { .post-widget__title .tags .main-tags h4 { color: #000; } } .post-widget__title .tags .main-tags h4 span.sub-cat, .post-widget__title .tags .main-tags h4 a { display: inline-block; vertical-align: middle; font-family: "Grotesk", helvetica; font-size: 13px; color: #fff; position: relative; transition: all 0.3s; transform: translateY(-2px); font-weight: normal; font-style: normal; z-index: 0; } @media (max-width: 800px) { .post-widget__title .tags .main-tags h4 span.sub-cat, .post-widget__title .tags .main-tags h4 a { color: #000; } } .post-widget__title .tags .extra-tags { font-family: "Grotesk", helvetica; font-size: 13px; letter-spacing: 0.1px; line-height: 1; margin-left: 26px; } @media (max-width: 800px) { .post-widget__title .tags .extra-tags { margin-top: 12px; margin-left: 0; } } @incluide breakpoint($max: 600px) { .post-widget__title .tags .extra-tags { font-size: 12px; line-height: 1.2; } } .post-widget__title .tags .extra-tags > p, .post-widget__title .tags .extra-tags > div.price-value { display: inline-block; vertical-align: middle; font-family: "Grotesk", helvetica; font-size: 11px; line-height: 1.3; margin: 0; margin-top: -4px; position: relative; margin-right: 14px; letter-spacing: 0.5px; } .post-widget__title .tags .extra-tags > p svg, .post-widget__title .tags .extra-tags > div.price-value svg { height: 12px; width: 12px; stroke: black; } .post-widget__title .tags .extra-tags > p span:last-child, .post-widget__title .tags .extra-tags > div.price-value span:last-child { color: #D1C9B5; } .post-widget__title .tags .extra-tags > p span:last-child svg, .post-widget__title .tags .extra-tags > div.price-value span:last-child svg { stroke: #D1C9B5; } .post-widget__title .tags .extra-tags > p::before, .post-widget__title .tags .extra-tags > div.price-value::before { content: "\2022"; position: absolute; top: 0; left: 100%; margin-left: 6.5px; color: #D1C9B5; } .post-widget__title .tags .extra-tags > p.price-value, .post-widget__title .tags .extra-tags > div.price-value.price-value { position: relative; } @media (max-width: 960px) { .post-widget__title .tags .extra-tags > p.price-value, .post-widget__title .tags .extra-tags > div.price-value.price-value { cursor: pointer; border-bottom: solid 1px #E5C89A; } } @media (min-width: 961px) { .post-widget__title .tags .extra-tags > p.price-value:hover .price-tooltip, .post-widget__title .tags .extra-tags > div.price-value.price-value:hover .price-tooltip { opacity: 1; } } @media (max-width: 960px) { .post-widget__title .tags .extra-tags > p.price-value.active .price-tooltip, .post-widget__title .tags .extra-tags > div.price-value.price-value.active .price-tooltip { opacity: 1; } } .post-widget__title .tags .extra-tags > span, .post-widget__title .tags .extra-tags > a { display: inline-block; position: relative; margin-right: 14px; } .post-widget__title .tags .extra-tags > span::after, .post-widget__title .tags .extra-tags > a::after { content: "\2022"; position: absolute; top: 0; left: 100%; margin-left: 6.5px; color: #D1C9B5; } .post-widget__title .tags .extra-tags > span:last-child, .post-widget__title .tags .extra-tags > a:last-child { margin-right: 0; } .post-widget__title .tags .extra-tags > span:last-child::after, .post-widget__title .tags .extra-tags > a:last-child::after { display: none; } .post-widget__title .tags .extra-tags > span svg, .post-widget__title .tags .extra-tags > a svg { width: 6px; height: 3px; margin-bottom: 1px; margin-left: 2px; } @media (min-width: 961px) { .post-widget__title .tags .extra-tags > span:hover .more-dd, .post-widget__title .tags .extra-tags > a:hover .more-dd { opacity: 1; pointer-events: all; } } .post-widget__title .tags .extra-tags > span.active .more-dd, .post-widget__title .tags .extra-tags > a.active .more-dd { opacity: 1; pointer-events: all; } @media (max-width: 600px) { .post-widget__title .tags .extra-tags .map-more-tags-trigger { display: none; } } .post-widget__title .tags .extra-tags .more-dd { z-index: 5; position: absolute; top: 100%; margin-top: 6px; right: -20px; width: 150px; background: #000; color: #fff; text-align: left; padding: 20px; transition: all 0.3s; border-radius: 12.5px; opacity: 0; pointer-events: none; } .post-widget__title .tags .extra-tags .more-dd::before { content: " "; display: block; height: 7px; width: 100%; position: absolute; bottom: 100%; right: 0; } .post-widget__title .tags .extra-tags .more-dd::after { content: " "; display: block; position: absolute; bottom: 100%; right: 20px; border-bottom: solid 4px #000; border-right: solid 3px transparent; border-left: solid 3px transparent; } .post-widget__title .tags .extra-tags .more-dd span { display: block; } .post-widget__title .tags .extra-tags .more-dd span + span { margin-top: 6px; } .post-widget__content p { margin: 0; } .post-widget__content p + p { margin-top: 24px; } .post-widget__content .cta { height: 37px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; background: #E8E0CC; border-radius: 30px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; line-height: 12px; margin-top: 24px; color: #000; text-transform: uppercase; letter-spacing: 0.3px; } .blog-single__content .cta { height: 37px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; background: #E8E0CC; border-radius: 30px; font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 10px; line-height: 12px; color: #000; text-transform: uppercase; letter-spacing: 0.3px; font-weight: normal; } .blog-single__outro + #post-comments-vue { border-top: solid 1px #000; margin-top: 50px; } @media (max-width: 800px) { .blog-single__outro + #post-comments-vue { margin-top: 57px; } } .post-comments-wrap { position: relative; } .post-comments-wrap + .blog-single__similar .blog-latest { margin-top: 0; border-top: 0; } .post-comments-wrap.w-gate + .blog-single__similar .blog-latest { border-top: solid 1px #000; } .faq-page__top { max-width: 763px; margin: 53px auto 24px; text-align: center; } @media (max-width: 800px) { .faq-page__top { margin: 50px auto 5px; } } .faq-page__top h2 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 80px; line-height: 1; font-weight: normal; margin: 0; } @media (max-width: 800px) { .faq-page__top h2 { font-size: 56px; } } .faq-page__top p { margin: 12px 0 0; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 16px; line-height: 1.375; } .faq-page__main { max-width: 763px; margin: 0 auto; padding-top: 90px; } @media (max-width: 800px) { .faq-page__main { padding-top: 75px; } } .faq-page__main h3 { font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 56px; line-height: 1; margin: 0; padding-bottom: 24px; border-bottom: solid 1px #000; font-weight: normal; text-align: center; text-transform: uppercase; } @media (max-width: 800px) { .faq-page__main h3 { font-size: 42px; } } .faq-page__item { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; position: relative; margin-top: 24px; padding-bottom: 24px; padding-right: 60px; font-family: "Grotesk", helvetica; font-size: 23px; line-height: 1.4; cursor: pointer; } .ie9 .faq-page__item { border-bottom: 1px dotted #000; } @media (max-width: 800px) { .faq-page__item { font-size: 20px; padding-right: 30px; } } .faq-page__item > svg { position: absolute; top: 14px; right: 0; width: 11px; height: 8px; transition: all 0.3s; } .faq-page__item .hidden-content { font-size: 18px; padding-top: 10px; display: none; } @media (max-width: 800px) { .faq-page__item .hidden-content { font-size: 16px; } } .faq-page__item.active > svg { transform: rotate(180deg); } .faq-cta-no-join { margin-top: 90px; border-top: solid 1px #000; } .faq-cta { border-top: solid 1px #000; border-bottom: solid 1px #000; padding-top: 76px; padding-bottom: 105px; text-align: center; margin-top: 90px; } .faq-cta h2 { margin: 0 0 21px; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 99px; line-height: 1; letter-spacing: -0.05px; font-weight: normal; } @media (max-width: 800px) { .faq-cta h2 { font-size: 62px; } } .submit-images-main .button--remove { font-family: "Bureau Grot Bk", helvetica; font-weight: 400; font-size: 12px; letter-spacing: 0.3px; line-height: 1; text-transform: uppercase; margin: 0 12px 0 6px; vertical-align: middle; color: #000 !important; background-color: #eae5db !important; } .btn-remove-img { position: absolute; top: 16px; right: 20px; } .btn-remove-img .close { width: 15px; height: 15px; } #swal2-html-container { line-height: 26px !important; padding: 0px 0px 30px 0px !important; } #swal2-html-container a { color: #F8AE38; font-weight: 300 !important; border-bottom: none !important; } .swal2-container { z-index: 999999 !important; } .swal2-actions button { min-width: 100px !important; padding: 10px !important; background: #000 !important; } .swal2-actions button:focus { box-shadow: 0 0 0 3px rgba(168, 168, 168, 0.5) !important; } .swal2-close:focus { box-shadow: none !important; } .swal2-close:hover { color: #000 !important; } .ob-tooltip { width: 234px; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 32px; background: #000; color: #fff; border-radius: 25px; padding: 18px; text-align: center; opacity: 0; pointer-events: none; transition: all 0.3s; white-space: normal; z-index: 1; } @media (max-width: 600px) { .ob-tooltip { margin-bottom: 24px; width: 180px; } } .ob-tooltip.active { opacity: 1; pointer-events: all; } .ob-tooltip .ob-top { padding: 0 24px; position: relative; margin-bottom: 12px; font-family: "Plantin", serif; text-transform: none; font-size: 12px; } .ob-tooltip .ob-top > span { position: absolute; top: 50%; right: -10px; margin: auto; width: 30px; height: 30px; padding: 11px 0; transform: translateY(-50%); cursor: pointer; } .ob-tooltip .ob-top > span svg { display: block; width: 100%; height: 100%; stroke: #fff; } .ob-tooltip .ob-content { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 14px; line-height: 16px; text-transform: none; margin-bottom: 12px; } .ob-tooltip .ob-content p { font-family: "Grotesk", helvetica !important; font-weight: normal !important; font-size: 14px !important; line-height: 16px !important; text-transform: none !important; margin: 0; } .ob-tooltip .ob-content p + p { margin-top: 6px; } .ob-tooltip .ob-controls { font-size: 11px; font-family: "Bureau Grot Bk", helvetica; text-transform: uppercase; letter-spacing: 0.3px; } .ob-tooltip .ob-controls > span { cursor: pointer; display: inline-block !important; } .ob-tooltip .ob-controls > span:first-child svg { transform: rotate(180deg); } .ob-tooltip .ob-controls > span + span { margin-left: 8px; } .ob-tooltip .ob-controls > span.dis { opacity: 0.3; pointer-events: none; } .ob-tooltip .ob-controls .ob-btn { background: black; border: none; width: inherit; height: inherit; background: inherit; border-radius: inherit; display: initial; align-items: inherit; } .ob-tooltip .ob-controls .ob-btn:first-child svg { transform: rotate(180deg); } .ob-tooltip .ob-controls .ob-btn + button { margin-left: 8px; } .ob-tooltip .ob-controls .ob-btn.dis { opacity: 0.3; pointer-events: none; } .ob-tooltip .ob-controls svg { width: 7px; height: 10px; stroke: #fff; margin: 0 8px -1px; } .ob-tooltip::after { content: " "; border-bottom: 0; border-top: solid 8px #000; border-left: solid 6px transparent; border-right: solid 6px transparent; position: absolute; top: 100%; width: 0; height: 0; left: 0; right: 0; margin: auto; } .ob-tooltip.top-down { margin-top: 32px; margin-bottom: 0; } .ob-tooltip.top-down::after { top: auto; bottom: 100%; transform: rotate(180deg); } .ob-tooltip.right-aligned { right: -30px; transform: none; left: auto; } .ob-tooltip.right-aligned::after { left: auto; right: 38px; } .ob-tooltip.left-aligned { left: -30px; transform: none; right: auto; z-index: 3; } .ob-tooltip.left-aligned::after { right: auto; left: 38px; } .ob-tooltip.fixed-to-top-bar { position: fixed; top: 66px; bottom: auto; z-index: 2; right: 10px; left: auto; transform: none; margin-top: 30px; } @media (max-width: 800px) { .ob-tooltip.fixed-to-top-bar { right: 0; margin-top: 5px; } } @media (max-width: 800px) { .ob-tooltip.fixed-to-top-bar::after { left: auto; right: 30px; } } .ob-tooltip.ob-map-tip { top: 63px; bottom: auto; left: calc(50% - 25px); z-index: 10; } @media (max-width: 800px) { .ob-tooltip.ob-map-tip { top: 100px; left: 50%; } } .ob-tooltip.ob-filter-tip { top: 100px; bottom: auto; left: calc(15% - 25px); z-index: 10; } @media (max-width: 800px) { .ob-tooltip.ob-filter-tip { top: 100px; left: 50%; } } .ob-tooltip.ob-verified-spot-tip { top: 0px; bottom: auto; left: 50%; z-index: 10; } @media (max-width: 800px) { .ob-tooltip.ob-verified-spot-tip { top: 100px; left: 50%; } } .ob-tooltip.sort-tip, .ob-tooltip.sort-tip-mobile { margin-left: -60px; margin-bottom: 15px; z-index: 9; } .ob-tooltip.sort-tip::after, .ob-tooltip.sort-tip-mobile::after { left: 86px; } .ob-tooltip.schedule-tab { bottom: -350%; left: 250px; } @media (max-width: 800px) { .ob-tooltip.schedule-tab { width: 200px; bottom: -365%; left: 225px; } } .ob-tooltip.schedule-tab:after { top: 50%; left: -103%; transform: rotate(90deg); } .ob-tooltip.calendar-btn { bottom: inherit; right: inherit; top: -10px; left: -85px; z-index: 10009; } .ob-tooltip.calendar-btn:after { top: 50%; left: 99%; transform: rotate(270deg); } @media (min-width: 600px) { .ob-tooltip.calendar-btn { top: -9px; left: -115px; } } .ob-tooltip.ob-to-map { z-index: 2; bottom: auto; top: calc(100% - 57px); left: calc(50% - 84px); right: auto; } .ob-tooltip.ob-to-map::after { top: auto; bottom: 100%; transform: rotate(180deg); } .ob-tooltip.ob-city-tips { position: fixed; bottom: 0; z-index: 2; } .ob-tooltip.ob-top-left { position: fixed; top: 66px; bottom: auto; z-index: 1; left: 30px; transform: none; margin-top: 30px; } @media (max-width: 800px) { .ob-tooltip.ob-top-left { margin-top: 9px; left: 24px; } } .ob-tooltip.ob-no-margin { margin-bottom: -61px; z-index: 1; } .ob-tooltip.tooltip-caption { bottom: 31px; left: -18px; } .ob-tooltip.tooltip-duplicate { bottom: 14px; } @media (min-width: 800px) { .ob-tooltip.tooltip-duplicate { left: -51px; } .ob-tooltip.tooltip-duplicate:after { right: -128px; } } .ob-tooltip.destinations-menu { z-index: 1; top: 85px; } .ob-tooltip.view-profile { z-index: 1; top: 87px; } .ob-tooltip.share-tooltip { bottom: 50%; } @media (max-width: 1650px) { .ob-tooltip.share-tooltip { left: -200%; } .ob-tooltip.share-tooltip:after { left: 64.5%; } } @media (max-width: 800px) { .ob-tooltip.share-tooltip { left: -255%; } .ob-tooltip.share-tooltip:after { left: 76.5%; } } @media (max-width: 600px) { .ob-tooltip.share-tooltip { left: -165%; } .ob-tooltip.share-tooltip:after { left: 71.5%; } } .wt-banner { border-top: solid 1px #000; padding-top: 86px; padding-bottom: 70px; border-bottom: 1px solid #000; text-align: center; } .wt-banner h2 { font-size: 99px; margin: 0 0 8px; font-family: Bureau Grot Comp Bk, sans-serif; letter-spacing: -0.5px; font-weight: 400; line-height: 80px; margin-bottom: 2rem; } .wt-banner h2 br { display: block; } @media (max-width: 600px) { .wt-banner h2 { font-size: 69px; margin: 0 0 7px; } .wt-banner h2 br { display: none; } } .wt-banner p { font-family: Grotesk, helvetica; font-size: 18px; line-height: 1.35; max-width: 538px; margin: 0 auto 34px; } @media (max-width: 600px) { .wt-banner p { font-size: 16px; margin: 0 auto 17px; } } .spot-rows h6 { border-bottom: 1px dashed #fff; padding-bottom: 20px; font-size: 12px; letter-spacing: 0.24px; line-height: 23px; text-transform: uppercase; } .spot-rows .results .spot-row-list { list-style: none; margin: 0px; padding: 0px; } .spot-rows .results .spot-row-list .spot-row-item { padding: 0px; } .spot-rows .results .spot-row-list .spot-row-item .item-content { display: flex; text-decoration: none; color: #fff; margin-bottom: 15px; } .spot-rows .results .spot-row-list .spot-row-item .item-content img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } .spot-rows .results .spot-row-list .spot-row-item .item-content .info { display: flex; flex-direction: column; } .spot-rows .results .spot-row-list .spot-row-item .item-content .info h4 { font-family: "Bureau Grot Bk", helvetica; margin: 0px 0px 0px 0px; font-size: 13.5px; color: #fff; font-weight: 400; } .spot-rows .results .spot-row-list .spot-row-item .item-content .info .details { color: #736F68; font-family: "Plantin"; font-size: 17px; font-style: italic; line-height: 17px; } .spot-rows .results .spot-row-list .spot-row-item .item-content .info .details span { color: #fff; font-family: "Bureau Grot Bk", helvetica; font-size: 13px; letter-spacing: 0px; line-height: 23px; text-transform: uppercase; font-style: normal; } .wt-modal { position: fixed; display: flex; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; } @media (min-width: 600px) { .wt-modal { align-items: center; } } .wt-modal .shade { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.54); z-index: 1; } .wt-modal .close { position: absolute; top: 22px; right: 22px; cursor: pointer; } .wt-modal .close svg { width: 14px; height: 14px; } .wt-modal .modal-content { width: 100%; max-width: 600px; min-height: 300px; height: -moz-fit-content; height: fit-content; position: relative; background: #FCFAF5; box-shadow: 1px 1px 4px 0px #000; border-radius: 20px; z-index: 2; margin: 20px; } @media (min-width: 620px) { .wt-modal .modal-content { margin: 0px; } } .wt-modal .modal-content .modal-header { padding: 2rem; } .wt-modal .modal-content .modal-body { padding: 2rem; } .wt-modal .modal-content .modal-footer { padding: 2rem; } .wt-modal .photos { margin-top: 0; width: 380px; } @media (max-width: 600px) { .wt-modal .photos { width: 100%; } } .map-post-comment-wrap { width: 100%; margin-top: 5px; text-align: left; padding-bottom: 4px; position: relative; display: flex; } .map-post-comment { display: flex; } .map-post-comment > a, .map-post-comment > img { width: 30px; height: 30px; height: auto; display: block; border-radius: 50%; flex-grow: 0; flex-shrink: 0; overflow: hidden; align-self: flex-start; margin-right: 12px; } .map-post-comment > a img, .map-post-comment > img img { display: block; width: 100%; height: auto; } .map-post-comment .map-comment-edit { width: 30px; height: 30px; margin-right: 12px; background: #E8E0CC; display: flex; align-items: center; border-radius: 50%; flex-shrink: 0; flex-grow: 0; } .map-post-comment .map-comment-edit svg { width: 10px; height: 10px; margin: auto; } .map-post-comment .comment-content { font-family: "Grotesk", helvetica; font-size: 15px; line-height: 19px; display: flex; align-items: center; } .map-post-comment .comment-content p { margin: 0; transition: all 0.3s; overflow-y: scroll; line-height: 14px; max-height: 45px; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; } .map-post-comment .comment-content p::-webkit-scrollbar { display: none; } .map-post-comment .comment-content button { font-family: "Bureau Grot Bk", helvetica; font-size: 10px; letter-spacing: 0.41px; text-transform: uppercase; margin-left: 4px; } .original-caption { margin-top: 5px; width: 100%; background: #EDE8DD; height: 50px; display: flex; align-items: center; border-radius: 25px; padding: 0 25px 0 12px; } .original-caption > a { align-self: center; } .map-post-comment-edit-wrap { width: 100%; } .map-post-comment-edit-wrap:only-child { display: block; } .map-post-comment-edit { min-height: 50px; display: flex; align-items: center; border-radius: 25px; background: #E8E0CC; padding: 5px 25px 5px 12px; } .map-post-comment-edit > a { height: 30px; } .map-post-comment-edit img { width: 30px; flex-grow: 0; flex-shrink: 0; border-radius: 50%; } .map-post-comment-edit form { position: relative; display: flex; flex: 1; } .map-post-comment-edit form button { position: absolute; top: 50%; right: 0; transform: translateY(-50%); background: none; border: 0; font-size: 11px; letter-spacing: 0.3px; z-index: 1; border-bottom: solid 1px transparent; transition: all 0.3s; } @media (min-width: 961px) { .map-post-comment-edit form button:hover { border-bottom: solid 1px #000; } } .map-post-comment-edit form button:disabled { color: #999898; } .map-post-comment-edit input { margin-left: 10px; width: calc(100% - 10px); border: 0; background: none; color: #000; font-family: "Grotesk", helvetica; font-size: 16px; letter-spacing: -0.15px; outline: 0 !important; padding-right: 60px; min-height: 40px; text-transform: inherit; } .map-post-comment-edit.on-display { background: #ede8dd; } .map-post-comment-edit.on-display > a { margin-right: 12px; } .map-post-comment-edit.on-display > a img { width: 30px; height: 30px; } .map-post-comment-edit.on-display .comment-content { width: 80%; font-family: "Grotesk", helvetica; font-size: 15px; line-height: 19px; display: flex; align-items: center; } .map-post-comment-edit.on-display .comment-content form { display: flex; flex: 1; justify-content: flex-end; } .map-post-comment-edit.on-display .comment-content .full-comment, .map-post-comment-edit.on-display .comment-content .main-comment { width: 100%; margin: 0; transition: all 0.3s; overflow-y: scroll; line-height: 14px; max-height: 45px; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; } .map-post-comment-edit.on-display .comment-content .full-comment::-webkit-scrollbar, .map-post-comment-edit.on-display .comment-content .main-comment::-webkit-scrollbar { display: none; } .map-post-comment-edit.on-display .comment-content .full-comment button, .map-post-comment-edit.on-display .comment-content .main-comment button { font-family: Bureau Grot Bk, helvetica; font-size: 10px; letter-spacing: 0.41px; text-transform: uppercase; margin-left: 4px; } .list-caption { margin-top: 6px; display: flex; align-items: center; width: 100%; } .list-caption .btn-toggle { width: 28px; height: 28px; background: white; border-radius: 50%; padding: 5px; margin-right: 10px; } .list-caption .btn-toggle span svg { width: 14px; height: 14px; } .list-caption .content { width: calc(100% - 28px); } .list-caption .content::-webkit-scrollbar { display: none; } .list-caption .content .edit-input { display: flex; align-items: center; width: 100%; } .list-caption .content .edit-input button { font-size: 11px; margin-left: 3px; background: #ede8dd; border: 1px solid black; border-radius: 12px; width: 86px; height: 28px; color: black; } .list-caption .content .edit-input button.btn-black { background: black; color: #ede8dd; } .list-caption .content .edit-input button:disabled, .list-caption .content .edit-input button[disabled] { display: none; } .list-caption .content .caption-text p { color: black; font-family: "FoundersGrotesk-Regular", helvetica; font-size: 13.5px; font-weight: 400; font-style: normal; text-align: left; line-height: 15px; margin: 0px; } .list-caption .content .caption-text p button { font-weight: bolder; font-size: 12px; } .list-caption .content input { outline: none; box-shadow: none; border: 1px solid #ccc; padding: 8px 5px; background: transparent; width: 100%; font-size: 13px; border-radius: 9px; font-size: 13px; width: 100%; text-wrap: wrap; background: white; } .user-lists-wrap { border-bottom: solid 1px #000; } .user-lists-hero { padding: 60px 20px 74px; border-bottom: solid 1px #000; text-align: center; position: relative; } .user-lists-hero > svg { width: 21px; height: 25px; fill: #E5C89A; } .user-lists-hero h2 { margin: 4px 0 12px; font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; font-size: 80px; line-height: 1; } @media (max-width: 600px) { .user-lists-hero h2 { font-size: 66px; } } .user-lists-hero span { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 15px; line-height: 1; margin: 0; } .user-lists-hero p { font-family: "Grotesk", helvetica; font-weight: normal; font-size: 15px; line-height: 20px; margin: 0 auto; max-width: 591px; } .user-lists-grid { margin: 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 30px; grid-column-gap: 30px; overflow: hidden; } @media (max-width: 960px) { .user-lists-grid { grid-template-columns: 1fr 1fr; margin: 20px; grid-row-gap: 20px; grid-column-gap: 20px; } } @media (max-width: 600px) { .user-lists-grid { grid-template-columns: 1fr; } } .user-lists-grid + footer { border-top: solid 1px #000; } .user-lists-item { position: relative; background: #000; border-radius: 20px; padding-top: 68%; } .user-lists-item::before { background-position: right; background-image: linear-gradient(#000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 1px 7px; background-repeat: repeat-y; content: ""; display: block; width: 1px; height: 100%; position: absolute; left: 100%; top: 0; margin-left: 14px; } .ie9 .user-lists-item::before { border-right: 1px dotted #000; } @media (max-width: 960px) { .user-lists-item::before { margin-left: 10px; } } .user-lists-item::after { background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; content: ""; display: block; width: calc(100% + 28px); height: 1px; position: absolute; top: 100%; left: -14px; margin-top: 14px; } .ie9 .user-lists-item::after { border-bottom: 1px dotted #000; } @media (max-width: 960px) { .user-lists-item::after { margin-top: 10px; } } .user-lists-item > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .user-lists-item > a img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 20px; opacity: 0.65; transition: all 0.3s; } .user-lists-item > a img.fade { opacity: 0; } .user-lists-item > a img.user-lists-hover { display: none; } .user-lists-item .content { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); color: #fff; pointer-events: none; text-align: center; } .user-lists-item .content h3 { margin: 0; font-family: "Altissima", helvetica; font-weight: normal; font-size: 56px; line-height: 1; letter-spacing: -0.1px; text-transform: uppercase; } .user-lists-item .content span { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 14px; line-height: 1; letter-spacing: 0.05; } .user-lists-item__details { position: absolute; bottom: 15px; left: 15px; display: flex; align-items: center; } .user-lists-item__details img { width: 30px; height: auto; border-radius: 50%; display: block; } .user-lists-item__details div { padding-left: 5px; font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; line-height: 15px; color: #fff; } .user-lists-item__details div a, .user-lists-item__details div span { font-family: "Bureau Grot Bk", helvetica; font-style: normal; font-weight: 400; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1px; color: #fff; } .user-lists-item__buttons { position: absolute; bottom: 15px; right: 15px; display: flex; align-items: center; } .user-lists-item__buttons > span { width: 30px; height: 30px; display: flex; align-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.5); } .user-lists-item__buttons > span svg { display: block; margin: 0 auto; width: 9px; height: 14px; } .user-lists-item__buttons > span + button { margin-left: 8px; } .user-lists-item__buttons > button { width: 30px; height: 30px; display: flex; align-items: center; border-radius: 50%; background: #E8E0CC; } .user-lists-item__buttons > button svg { display: block; margin: 0 auto; width: 16px; height: 3px; } .user-lists-item__buttons .lock-icon { width: 30px; height: 30px; border-radius: 50%; margin-right: 8px; background: rgba(0, 0, 0, 0.52); display: inline-flex; vertical-align: middle; align-items: center; } .user-lists-item__buttons .lock-icon svg { width: 9px; height: 14px; margin: auto; } .user-lists-item .user-lists-item-shade { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; background: #000; } .user-lists-item__menu { position: absolute; bottom: 0; right: 0; border-radius: 20px; width: 206px; background: #E8E0CC; text-align: left; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 10000; } .user-lists-item__menu.active { opacity: 1; pointer-events: all; } .user-lists-item__menu.active + .user-lists-item-shade { pointer-events: all; } @media (max-width: 960px) { .user-lists-item__menu.active + .user-lists-item-shade { opacity: 0.4; } } .user-lists-item__menu button { padding: 18px 18px 18px 34px; position: relative; font-size: 12px; width: 100%; text-align: left; } .user-lists-item__menu button span { position: absolute; top: 0; left: 4px; width: 30px; display: flex; align-items: center; height: 100%; } .user-lists-item__menu button span svg { width: 14px; height: 14px; margin: 0 auto; } .user-lists-item__menu button span svg.pen { width: 10px; height: 10px; } .user-lists-item__menu button span svg.delete { width: 10px; height: 11px; transform: translateY(-1px); } .user-lists-item__menu button span svg.camera-alt { width: 12px; height: 10px; } .user-lists-item__menu button + button { border-top: solid 1px #fff; } .user-lists-item.create-list-trigger { background: #E8E0CC; cursor: pointer; } .user-lists-item.create-list-trigger span { display: flex; width: 30px; height: 30px; background: #E5C89A; align-items: center; margin: 0 auto 12px; border-radius: 50%; transition: all 0.3s; } .user-lists-item.create-list-trigger span svg { width: 10px; height: 10px; margin: auto; } .user-lists-item.create-list-trigger h3 { color: #000; font-size: 66px; } .user-lists-item.create-list-trigger .content { transition: all 0.3s; } .user-lists-item.create-list-trigger:hover span { transform: translateY(-3px); } .user-lists-map .map-list-header .map-sort .map-sort-dd { width: 213px; } .user-lists-map .mob-map-trigger { height: 194px; } .user-lists-map__intro { position: relative; padding-top: 86px !important; padding-bottom: 0 !important; } .user-lists-map__intro.w-cover { padding-top: 30px !important; } .user-lists-map__intro .intro-cover { position: relative; margin-bottom: 24px; } .user-lists-map__intro .intro-cover .lock-icon { width: 30px; height: 30px; border-radius: 50%; margin-right: 8px; background: rgba(0, 0, 0, 0.52); display: inline-flex; vertical-align: middle; align-items: center; position: absolute; bottom: 15px; left: 20px; } .user-lists-map__intro .intro-cover .lock-icon svg { width: 9px; height: 14px; margin: auto; } .user-lists-map__intro .intro-cover img { width: 100%; height: auto; display: block; } .user-lists-map__intro .back-button { color: #000; text-transform: uppercase; font-size: 12px; margin-top: -52px; display: block; margin-bottom: 40px; } .user-lists-map__intro .back-button svg { display: inline-block; transform: rotate(90deg); width: 9px; height: 10px; margin-right: 8px; } .user-lists-map__intro h2 { font-family: "Bureau Grot Compressed", serif; font-size: 50px; line-height: 40px; letter-spacing: -0.1px; margin: 0 0 8px; font-weight: normal; } .user-lists-map__intro p { margin: 0; font-family: "Grotesk", helvetica; font-size: 15px; line-height: 20px; } .user-lists-map__intro p button { text-transform: none; opacity: 0.44; } .user-lists-map__intro .extras { display: flex; align-items: center; justify-content: space-between; margin-top: 34px; padding-bottom: 14px; margin-bottom: 14px; background-position: bottom; background-image: linear-gradient(to right, #000 28.5714285714%, rgba(255, 255, 255, 0) 0%); background-size: 7px 1px; background-repeat: repeat-x; } .ie9 .user-lists-map__intro .extras { border-bottom: 1px dotted #000; } .user-lists-map__intro .extras__info { display: flex; align-items: center; } .user-lists-map__intro .extras__info h3 { font-family: "Plantin", serif; font-weight: 300; font-style: italic; font-size: 12px; line-height: 17px; font-weight: normal; margin: 0 0 0 8px; } .user-lists-map__intro .extras__info h3 span { text-transform: uppercase; font-family: "Bureau Grot Bk", helvetica; font-size: 10px; font-style: normal; } .user-lists-map__intro .extras__info h3 a { color: #000; text-transform: uppercase; font-family: "Bureau Grot Bk", helvetica; font-style: normal; } .user-lists-map__intro .extras__info h3 .normal-text { font-family: "Grotesk", helvetica; font-style: normal; } .user-lists-map__intro .extras__info .people { position: relative; display: flex; } .user-lists-map__intro .extras__info .people .lock-icon { width: 30px; height: 30px; border-radius: 50%; margin-right: 8px; background: rgba(0, 0, 0, 0.52); display: inline-flex; vertical-align: middle; align-items: center; } .user-lists-map__intro .extras__info .people .lock-icon svg { width: 9px; height: 14px; margin: auto; } .user-lists-map__intro .extras__info .people.duplicated { margin-top: -5px; } .user-lists-map__intro .extras__info .people img { width: 30px; height: 30px; -o-object-fit: cover; object-fit: cover; display: inline-block; border-radius: 50%; vertical-align: middle; position: relative; z-index: 2; } .user-lists-map__intro .extras__info .people img + img { z-index: 1; margin-left: -10px; } .user-lists-map__intro .extras__info .people .duplicated { position: absolute; bottom: -5px; right: -5px; } .user-lists-map__intro .extras__info .people .duplicated img { border: 1px solid #fff; width: 18px; height: auto; } .user-lists-map__intro .extras__buttons { display: flex; } .user-lists-map__intro .extras__buttons button { width: 30px; height: 30px; background: #E8E0CC; border-radius: 50%; display: flex; align-items: center; } .user-lists-map__intro .extras__buttons button.follow, .user-lists-map__intro .extras__buttons button.unfollow { width: auto; border-radius: 25px; padding: 0px 16px; font-size: 12px; } @media (max-width: 600px) { .user-lists-map__intro .extras__buttons button.follow, .user-lists-map__intro .extras__buttons button.unfollow { padding: 10px; } } .user-lists-map__intro .extras__buttons button.follow > span, .user-lists-map__intro .extras__buttons button.unfollow > span { margin-left: 2px; } @media (max-width: 600px) { .user-lists-map__intro .extras__buttons button.follow > span, .user-lists-map__intro .extras__buttons button.unfollow > span { display: none; margin-left: 0px; } } .user-lists-map__intro .extras__buttons button.list-copy-map-trigger { position: relative; } .user-lists-map__intro .extras__buttons button svg { margin: 0 auto; } .user-lists-map__intro .extras__buttons button svg.pen { width: 10px; height: 10px; } .user-lists-map__intro .extras__buttons button svg.copy { width: 14px; height: 14px; } .user-lists-map__intro .extras__buttons button svg.duplicate { width: 30px; height: 30px; } @media (min-width: 961px) { .user-lists-map__intro .extras__buttons button:hover + .tooltip { opacity: 1; pointer-events: all; } } @media (max-width: 960px) { .user-lists-map__intro .extras__buttons button.display-tooltip + .tooltip { opacity: 1; pointer-events: all; } } .user-lists-map__intro .extras__buttons .button-wrap { position: relative; } .user-lists-map__intro .extras__buttons .button-wrap .btn-icon { width: 30px; height: 30px; border-radius: 25px; font-size: 12px; } .user-lists-map__intro .extras__buttons .button-wrap .btn-icon svg { width: 14px; height: 14px; } .user-lists-map__intro .extras__buttons .button-wrap + .button-wrap { margin-left: 8px; } .user-lists-map__intro .extras__buttons .tooltip { position: absolute; bottom: 100%; right: -25px; margin-bottom: 16px; background: #000; color: #fff; border-radius: 25px; padding: 18px; text-align: left; transition: all 0.3s; font-family: "Grotesk", helvetica; font-weight: normal; font-size: 14px; line-height: 16px; width: 200%; opacity: 0; pointer-events: none; transition: all 0.3s; } .user-lists-map__intro .extras__buttons .tooltip::after { content: " "; border-bottom: 0; border-top: solid 8px #000; border-left: solid 6px transparent; border-right: solid 6px transparent; position: absolute; top: 100%; width: 0; height: 0; left: 38%; right: 25px; margin: auto; } .user-lists-map .map-list { padding-top: 0; } .user-lists-map .map-post { flex-wrap: wrap; } .user-lists-map .map-post .content .action-buttons { position: absolute; right: 0; top: 0; } .user-lists-map .map-post .content .action-buttons button.remove-spot, .user-lists-map .map-post .content .action-buttons button.btn { opacity: 0.5; } .user-lists-map .map-post .content .action-buttons button.remove-spot:hover, .user-lists-map .map-post .content .action-buttons button.btn:hover { opacity: 1; } .user-lists-map .map-post .content .action-buttons button.remove-spot span, .user-lists-map .map-post .content .action-buttons button.btn span { width: 30px; height: 30px; display: flex; align-items: center; border-radius: 50%; background: #E8E0CC; } .user-lists-map .map-post .content .action-buttons button.remove-spot span svg, .user-lists-map .map-post .content .action-buttons button.btn span svg { display: block; margin: 0 auto; width: 10px; height: 11px; } @media (max-width: 800px) { .user-lists-map .map-main { top: 51px; } } .user-lists-map .map-sidebar { overflow-y: inherit; overflow-x: inherit; } .user-lists-map .map-sidebar .list-tabs { position: relative; list-style: none; display: flex; margin: 0 0 20px 0; padding: 0px; } .user-lists-map .map-sidebar .list-tabs li { padding: 0 0.5rem 0 0; line-height: 14px; } .user-lists-map .map-sidebar .list-tabs li button { color: black; display: block; border: 0px; text-decoration: none; padding: 2px 3px; transition: all 0.5s; opacity: 0.48; font-family: "Bureau Grot Bk", helvetica; font-weight: normal; text-transform: uppercase; font-size: 13px; } .user-lists-map .map-sidebar .list-tabs li.active button { opacity: 1; border-bottom: 3px solid #D4B98F; } .user-lists-map .map-sidebar .list-tabs li:hover button { opacity: 1; border-bottom: 3px solid #D4B98F; } .user-lists-map .map-sidebar .list-header .list-title { display: flex; justify-content: space-between; align-items: flex-end; } .user-lists-map .map-sidebar .list-header .list-title .add-spot-to-list-popup .add-spot-btn { background: #E5C89A; border-radius: 50%; width: 50px; height: 50px; padding: 1rem; } .user-lists-map .map-sidebar .list-header .list-title .add-spot-to-list-popup .add-spot-btn svg { width: 100%; height: 100%; stroke: black; stroke-width: 2; } .lists-action-buttons { position: absolute; bottom: 32px; right: 32px; display: flex; } .lists-action-buttons .filter-button { border-radius: 15px; background-color: rgb(237, 232, 221); transition: background-color 0.5s ease; color: rgb(1, 0, 0); font-family: "Bureau Grot Bk", helvetica; font-size: 11px; font-style: normal; width: 89px; height: 30px; display: flex; align-items: center; justify-content: space-around; padding: 0.5rem; } .lists-action-buttons .filter-button svg { width: 13px; height: 13px; } .lists-action-buttons .filter-button span { margin-left: 15px; } .lists-action-buttons .filter-button.active { background: rgb(232, 224, 204); } .lists-action-buttons .filter-dropdown { opacity: 0; position: absolute; top: 31px; right: 120px; border-radius: 20px; width: 206px; background: #E8E0CC; text-align: left; pointer-events: none; transition: all 0.3s; z-index: 10000; } .lists-action-buttons .filter-dropdown.active { opacity: 1; pointer-events: all; box-shadow: 1px 3px 6px rgba(93, 93, 93, 0.3215686275); } .lists-action-buttons .filter-dropdown.active + .user-lists-item-shade { pointer-events: all; } @media (max-width: 960px) { .lists-action-buttons .filter-dropdown.active + .user-lists-item-shade { opacity: 0.4; } } .lists-action-buttons .filter-dropdown .dropdown-item { padding: 18px 18px 18px 18px; position: relative; font-size: 12px; width: 100%; text-align: left; background-color: transparent; border: none; outline: none; text-transform: uppercase; cursor: pointer; border-top: solid 1px #fff; } .lists-action-buttons .filter-dropdown .dropdown-item:hover { background: #dcd6c5; } .lists-action-buttons .filter-dropdown .dropdown-item.active { background: #E5C89A; } .lists-action-buttons .filter-dropdown .dropdown-item span { position: absolute; top: 0; left: 4px; width: 30px; display: flex; align-items: center; height: 100%; } .lists-action-buttons .filter-dropdown .dropdown-item span svg { width: 14px; height: 14px; margin: 0 auto; } .lists-action-buttons .filter-dropdown .dropdown-item span svg.pen { width: 10px; height: 10px; } .lists-action-buttons .filter-dropdown .dropdown-item span svg.delete { width: 10px; height: 11px; transform: translateY(-1px); } .lists-action-buttons .filter-dropdown .dropdown-item span svg.camera-alt { width: 12px; height: 10px; } .lists-action-buttons .filter-dropdown .dropdown-item:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; border-top: 0px; } .lists-action-buttons .filter-dropdown .dropdown-item:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .lists-action-buttons .filter-shadow { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 10000; } .lists-action-buttons .create-list-trigger { display: flex; align-items: center; font-size: 11px; text-transform: uppercase; margin-left: 1rem; } .lists-action-buttons .create-list-trigger span { width: 30px; height: 30px; display: flex; align-items: center; background: #E5C89A; border-radius: 50%; margin-left: 12px; } .lists-action-buttons .create-list-trigger span svg { width: 10px; height: 10px; margin: auto; display: block; } .form__row__right .error, .form__row__right .error-fixed { font-size: 13px; margin-top: -15px; margin-left: 22px; text-align: left; margin-bottom: 20px; font-family: Grotesk, helvetica; font-weight: normal; color: red; } .form__row__right .error-fixed { margin-top: 0px; } .map-list .no-spots-container { display: flex; align-items: center; flex-direction: column; padding: 10px; height: 45vh; padding-top: 100px; } @media (min-width: 768px) { .map-list .no-spots-container { padding-top: 125px; height: 70vh; } } .map-list .no-spots-container p { font-family: "FoundersGrotesk-Regular"; font-size: 18px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-align: center; line-height: 24px; } .map-list .no-spots-container .add-spot-btn { background: #E5C89A; border-radius: 50%; width: 50px; height: 50px; padding: 1rem; } .map-list .no-spots-container .add-spot-btn:hover { background: rgb(218.5590551181, 177.9133858268, 113.4409448819); } .map-list .no-spots-container .add-spot-btn svg { width: 100%; height: 100%; stroke: black; stroke-width: 2; } .map-list .trip-img { width: 92.88px; height: 24px; } .map-list .trip-img svg { width: 100%; height: 100%; } .user-lists-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; z-index: 9999; display: none; } .user-lists-modal__shade { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.74); z-index: 1; } .user-lists-modal__close { position: absolute; top: 22px; right: 22px; cursor: pointer; } .user-lists-modal__close svg { width: 14px; height: 14px; } .user-lists-modal__inner { max-width: 675px; width: calc(100% - 30px); position: relative; margin: 68px auto; background: #FCFAF5; border-radius: 20px; z-index: 2; padding: 48px 0 68px; text-align: center; } @media (max-width: 600px) { .user-lists-modal__inner { margin: 40px auto; } } .user-lists-modal__inner h2 { margin: 4px 0 40px; font-family: "Bureau Grot Comp Bk", sans-serif; font-weight: normal; font-size: 80px; line-height: 1; } @media (max-width: 600px) { .user-lists-modal__inner h2 { font-size: 66px; } } .user-lists-modal__inner .info { opacity: 0.7; color: rgb(0, 0, 0); font-size: 16px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-align: center; line-height: 23px; } .user-lists-modal__photos { margin-top: 0; width: 380px; } @media (max-width: 600px) { .user-lists-modal__photos { width: 100%; } } .user-lists-modal .form__row { padding-right: 90px; } @media (max-width: 700px) { .user-lists-modal .form__row { padding-right: 6%; } } @media (max-width: 600px) { .user-lists-modal .form__row { padding-left: 20px; padding-right: 20px; } } .user-lists-modal .form__field { width: 380px; } .user-lists-modal .form__field .text-info { font-family: "Grotesk", helvetica; padding: 0px; margin: 0px 22px; font-size: 14px; } @media (max-width: 600px) { .user-lists-modal .form__field { width: 100%; } .user-lists-modal .form__field .text-info { text-align: center; width: 100%; margin: 0px; display: block; } } .user-lists-modal label { display: block; font-family: "Bureau Grot Bk", helvetica; font-size: 12px; line-height: 19px; font-weight: 400; text-transform: uppercase; text-align: right; margin-right: 25px; margin-top: 6px; } @media (max-width: 600px) { .user-lists-modal label { width: 100%; text-align: center; margin: 0 0 12px; } } .user-lists-modal input, .user-lists-modal textarea { background: #E8E0CC; min-height: 50px; font-family: Grotesk, helvetica; font-size: 14px; line-height: 26px; border-radius: 30px; padding: 17px 25px; border: none; outline: none; width: 380px; resize: none; } @media (max-width: 600px) { .user-lists-modal input, .user-lists-modal textarea { width: 100%; } } .user-lists-modal .secret-toggle-row .form__row__left { margin-top: 0; } .user-lists-modal .secret-toggle { width: 380px; display: flex; position: relative; align-items: center; } @media (max-width: 600px) { .user-lists-modal .secret-toggle { margin: auto; max-width: 380px; width: auto; } } .user-lists-modal .secret-toggle .switch { flex-grow: 0; flex-shrink: 0; width: 60px; height: 30px; position: relative; background: #D1C9B5; border-radius: 15px; z-index: 1; transition: all 0.3s; } .user-lists-modal .secret-toggle .switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FCFAF5; transition: all 0.3s; } .user-lists-modal .secret-toggle input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; } .user-lists-modal .secret-toggle input:checked + .switch { background: #E5C89A; } .user-lists-modal .secret-toggle input:checked + .switch span { left: 33px; } .user-lists-modal .secret-toggle p { margin: 0 0 0 16px; display: inline-block; width: calc(100% - 76px); font-family: "Grotesk", helvetica; font-size: 14px; } .user-lists-modal .form__button { margin-top: 24px; } .user-lists-modal .trip-date-picker { cursor: pointer; position: relative; } .user-lists-modal .trip-date-picker .clear { position: absolute; width: 16px; height: 16px; top: 23px; right: 23px; opacity: 0.5; } .user-lists-modal .trip-date-picker .clear:hover { opacity: 1; } .user-lists-modal .trip-date-picker .clear svg { width: 100%; height: 100%; } .user-lists-modal .trip-days-btn { font-size: 11px; text-transform: capitalize; margin: 0px; padding: 0px; margin-right: 25px; border-radius: 13px; color: black; } .user-lists-modal p { font-family: "Grotesk", helvetica; padding: 0 90px; margin: 0 0 40px; } @media (max-width: 700px) { .user-lists-modal p { padding: 0 6%; } } @media (max-width: 600px) { .user-lists-modal p { padding: 0 20px; } } .search-spots-for-current-list-container { position: fixed; z-index: 10000; top: 0px; left: 0px; height: 100%; width: 100%; transition: all 0.3s; } .search-spots-for-current-list-container .search-content { background: black; width: 40%; height: 100%; position: absolute; top: 0; left: 0; color: white; padding: 42px 96px; } @media (max-width: 1300px) { .search-spots-for-current-list-container .search-content { padding: 42px 1.75rem; } } @media (max-width: 1080px) { .search-spots-for-current-list-container .search-content { width: 50%; } } @media (max-width: 768px) { .search-spots-for-current-list-container .search-content { width: 100%; height: 100%; overflow-y: scroll; } } .search-spots-for-current-list-container .search-content .search-spots { display: flex; flex-direction: column; } .search-spots-for-current-list-container .search-content .search-spots .close { width: 15px; height: 15px; margin-bottom: 2rem; } .search-spots-for-current-list-container .search-content .search-spots .close svg { width: 100%; height: 100%; stroke: #fff; } .search-spots-for-current-list-container .search-content .search-spots .title { color: #fff; font-family: "Bureau Grot Compressed", serif; font-size: 50px; text-align: left; font-weight: 400; line-height: 70px; padding: 0px; margin: 0px; letter-spacing: 1px; } .search-spots-for-current-list-container .search-content .search-spots .search-input { display: flex; margin-bottom: 20px; } .search-spots-for-current-list-container .search-content .search-spots .search-input input[type=text] { width: 100%; background: transparent; border: none; border-bottom: 1px solid #fff; font-family: "Clearface", serif; text-transform: capitalize; font-size: 40px; font-weight: bold; font-style: italic; line-height: 15px; padding: 5px 0; height: 80px; outline: none; box-shadow: none; letter-spacing: 2px; } .search-spots-for-current-list-container .search-content .search-spots .search-input input[type=text]::-moz-placeholder { opacity: 0.5; } .search-spots-for-current-list-container .search-content .search-spots .search-input input[type=text]::placeholder { opacity: 0.5; } .search-spots-for-current-list-container .search-content .search-spots .no-results { padding: 3rem 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (min-width: 1080px) { .search-spots-for-current-list-container .search-content .search-spots .no-results { height: 30vh; padding: 0px; } } .search-spots-for-current-list-container .search-content .search-spots .no-results .title { color: #fff; font-family: "Bureau Grot Compressed", serif; font-size: 42px; font-weight: 400; letter-spacing: -0.42px; text-align: center; line-height: 33px; margin-bottom: 20px; } .search-spots-for-current-list-container .search-content .search-spots .no-results .info { color: #fff; font-family: "Bureau Grot Bk", helvetica; font-size: 13px; font-weight: 400; letter-spacing: 0px; line-height: 15px; } .search-spots-for-current-list-container .search-content .search-spots .no-results .btn-add-new-spot { display: flex; align-items: center; font-family: "Bureau Grot Bk", helvetica; font-size: 14px; text-transform: uppercase; color: #fff; background: rgb(248, 174, 56); padding: 0px 29px; margin-top: 60px; border-radius: 25px; height: 50px; font-weight: bold; } .search-spots-for-current-list-container .search-content .search-spots .no-results .btn-add-new-spot svg { margin-right: 12px; width: 20px; height: 20px; stroke: #fff; } .search-spots-for-current-list-container .backdrop { background: black; opacity: 0.3; width: 100%; height: 100%; } .list-schedule { padding: 20px 50px 50px 50px; } @media (max-width: 800px) { .list-schedule { padding: 0px 20px; } } .list-schedule .nav-dates { width: 100%; } .list-schedule .nav-dates .tabs { width: 100%; } .list-schedule .nav-dates .tabs .tab-list { padding: 0px; margin: 0px; display: flex; align-items: center; } .list-schedule .nav-dates .tabs .tab-list .slick-arrow { position: absolute; z-index: 1; opacity: 0.5; border-radius: 50%; cursor: pointer; } .list-schedule .nav-dates .tabs .tab-list .slick-arrow.slick-disabled { display: none !important; } .list-schedule .nav-dates .tabs .tab-list .slick-arrow:hover { opacity: 1; } .list-schedule .nav-dates .tabs .tab-list .slick-arrow svg { width: 18px; height: 18px; fill: black; } .list-schedule .nav-dates .tabs .tab-list .slick-arrow.slick-next { right: -30px; } .list-schedule .nav-dates .tabs .tab-list .slick-arrow.slick-prev { transform: rotate(180deg); left: -30px; } .list-schedule .nav-dates .tabs .tab-list .slick-slide { margin-right: 10px; text-align: center; } .list-schedule .nav-dates .tabs .tab-list .tab-list-item { padding: 0px; margin: 0px; } .list-schedule .nav-dates .tabs .tab-list .tab-list-item a { display: flex; justify-content: center; align-items: center; border-radius: 15px; background: #EDE8DD; font-family: "Bureau Grot Bk", helvetica; font-size: 10px; font-weight: 500; font-style: normal; text-align: center; line-height: 14px; padding: 3px 10px; text-transform: uppercase; height: 30px; color: #000; } .list-schedule .nav-dates .tabs .tab-list .tab-list-item a:hover { background: #E5C89A; } .list-schedule .nav-dates .tabs .tab-list .tab-list-item.active a { background: #E5C89A; } .list-schedule .nav-dates .tabs-details { padding: 20px 0px; } .no-plans-yet { width: 100%; height: 15vh; display: flex; align-items: center; justify-content: center; } .no-plans-yet p { font-family: "FoundersGrotesk-Regular", helvetica; font-size: 18px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-align: center; line-height: 24px; } .empty-list { height: 70vh; padding: 105px 50px 50px 50px; display: flex; align-items: center; flex-direction: column; min-height: 50vh; } .empty-list svg { width: 30px; height: 30px; } .empty-list p { width: 200px; opacity: 1; color: rgb(0, 0, 0); font-family: "FoundersGrotesk-Regular"; font-size: 18px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-align: center; line-height: 24px; } .empty-list button { display: flex; align-items: center; justify-content: center; border-radius: 15px; opacity: 0.979325; background-color: #F8AE38; text-transform: uppercase; padding: 9px 5px; height: 30px; color: #fff; font-family: "Bureau Grot Bk", helvetica; font-size: 10px; font-weight: 500; min-width: 90px; height: 30px; } .empty-list button svg { margin-right: 5px; width: 11px; height: 11px; stroke: #fff; } .spot-badge { -webkit-user-select: none; -moz-user-select: none; user-select: none; display: flex; justify-content: space-between; background: #EDE8DD; border-radius: 8px; margin-bottom: 20px; min-height: 115px; height: -moz-fit-content; height: fit-content; } .spot-badge .image { position: relative; cursor: pointer; width: 100px; min-width: 100px; height: auto; border-top-left-radius: 8px; border-bottom-left-radius: 8px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .spot-badge .image svg { position: absolute; width: 30px; height: 30px; left: 5px; top: 5px; } .spot-badge .info { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 17px 20px 10px 20px; } .spot-badge .info a { text-decoration: none; } .spot-badge .info a h3 { margin: 0px 0px 5px 0px; color: #000; font-family: "Bureau Grot Comp Bk", sans-serif; font-size: 24px; font-weight: 400; line-height: 25px; } .spot-badge .info .details { font-family: "Plantin"; font-size: 15px; font-weight: 300; font-style: italic; line-height: 17px; color: #736F68; } .spot-badge .info .details span { color: black; font-family: "Bureau Grot Comp Bk", helvetica; font-size: 12px; letter-spacing: 0.24px; line-height: 16px; text-transform: uppercase; text-align: left; font-style: normal; } .spot-badge .info .caption { width: 100%; } .spot-badge .actions { width: 50px; display: flex; flex-direction: column; align-items: flex-start; padding: 17px 20px; position: relative; } .spot-badge .actions .action-menu { position: relative; margin-bottom: 10px; } .spot-badge .actions .action-menu .backdrop { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 7; } .spot-badge .actions .action-menu .menu { background: black; color: white; position: absolute; padding: 23px; border-radius: 8px; z-index: 7; top: 10px; left: 25px; min-width: 230px; animation-duration: 300ms; } @media (max-width: 800px) { .spot-badge .actions .action-menu .menu { left: inherit; right: 25px; } } .spot-badge .actions .action-menu .menu ul { list-style: none; padding: 0px; margin: 0px; } .spot-badge .actions .action-menu .menu ul li a { display: flex; align-items: center; text-decoration: none; text-transform: uppercase; color: #fff; opacity: 0.99; font-family: "Bureau Grot Bk", helvetica; font-size: 13px; letter-spacing: 0.65px; line-height: 18px; height: 40px; } .spot-badge .actions .action-menu .menu ul li a svg { width: 16px; height: 16px; margin-top: -2px; margin-right: 5px; } .spot-badge .actions button { background: none; border: none; padding: 0px; } .spot-badge .actions button svg { width: 20px; height: 20px; fill: #000; } .add-trip-dates-list-dialog .trip-picker-navbar button { margin: 10px; opacity: 1; color: rgb(0, 0, 0); font-family: "Bureau Grot Bk", helvetica; font-size: 12px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-align: center; line-height: 14px; } .add-trip-dates-list-dialog .trip-picker-navbar button.active { border-bottom: 3px solid #D4B98F; } .add-trip-dates-list-dialog form { display: flex; flex-direction: column; } .add-trip-dates-list-dialog form .text-info { opacity: 1; color: rgb(0, 0, 0); font-family: "FoundersGrotesk-Regular", helvetica; font-size: 18px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-align: center; line-height: 24px; margin: 40px 0px; } .add-trip-dates-list-dialog form .trip-days-selector { display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 100%; max-width: 400px; margin-bottom: 20px; flex-direction: column; } .add-trip-dates-list-dialog form .trip-days-selector .days-input { display: flex; justify-content: center; align-items: center; width: 250px; height: 300px; } @media (max-width: 600px) { .add-trip-dates-list-dialog form .trip-days-selector .days-input { height: 100px; } } .add-trip-dates-list-dialog form .trip-days-selector .days-input button { background: transparent; padding: 0px; margin: 0px; width: 40px; height: 40px; } .add-trip-dates-list-dialog form .trip-days-selector .days-input button svg { width: 40px; height: 40px; } .add-trip-dates-list-dialog form .trip-days-selector .days-input input[type=number] { height: 40px; text-align: center; margin: 0px 10px; -moz-appearance: textfield; } .add-trip-dates-list-dialog form .trip-date-selector { margin-bottom: 20px; } .add-trip-dates-list-dialog form .btn-actions { display: flex; flex-direction: column; } .add-trip-dates-list-dialog form .btn-actions .btn-clear { opacity: 1; color: rgb(0, 0, 0); font-family: "Bureau Grot", helvetica; font-size: 12px; text-transform: uppercase; font-weight: bold; } .add-trip-dates-list-dialog form .btn-actions .btn-submit { border-radius: 25px; opacity: 1; background-color: rgb(229, 200, 154); color: blac; font-family: "Bureau Grot", helvetica; font-size: 12px; text-align: center; line-height: 14px; text-transform: uppercase; margin: 0 auto; padding: 5px 10px; font-weight: bold; margin-top: 20px; width: 300px; height: 50px; } @media (max-width: 600px) { .set-spot-dates-list-dialog h2 { font-size: 66px; } } .set-spot-dates-list-dialog .spot-details { max-width: 334px; width: 100%; height: 85px; margin: 10px; padding: 12px; display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 18px; box-shadow: 0px 3px 27px rgba(0, 0, 0, 0.5); margin: 0 auto 2rem; } @media (max-width: 800px) { .set-spot-dates-list-dialog .spot-details { width: calc(100% - 1rem); } } .set-spot-dates-list-dialog .spot-details img { border-radius: 9px; width: 60px; height: 60px; margin-right: 20px; } .set-spot-dates-list-dialog .spot-details .text-info { text-align: left; height: 100%; flex: 1; justify-content: center; display: flex; flex-direction: column; } .set-spot-dates-list-dialog .spot-details .text-info h3 { font-size: 27px; font-weight: 400; margin: 0px; font-family: "Bureau Grot Comp Bk", helvetica; } @media (max-width: 600px) { .set-spot-dates-list-dialog .spot-details .text-info h3 { line-height: 25px; } } .set-spot-dates-list-dialog .spot-details .text-info .details { font-family: "Plantin"; font-size: 16px; font-weight: 300; font-style: italic; line-height: 17px; color: #736F68; } .set-spot-dates-list-dialog .spot-details .text-info .details span { color: black; font-family: "Bureau Grot Comp Bk", helvetica; font-size: 13px; letter-spacing: 0.24px; line-height: 16px; text-transform: uppercase; text-align: left; font-style: normal; } .set-spot-dates-list-dialog p { font-family: "FoundersGrotesk-Regular", helvetica; font-size: 18px; text-align: center; line-height: 24px; } .set-spot-dates-list-dialog form .list-dates { max-width: 420px; width: 100%; list-style: none; margin: 0 auto; margin: 0 auto 2rem; padding: 0px 20px; max-height: 300px; overflow-y: scroll; /* width */ /* Track */ /* Handle */ /* Handle on hover */ } @media (max-width: 500px) { .set-spot-dates-list-dialog form .list-dates { max-height: inherit; overflow-y: inherit; } } .set-spot-dates-list-dialog form .list-dates::-webkit-scrollbar { width: 5px; } .set-spot-dates-list-dialog form .list-dates::-webkit-scrollbar-track { background: transparent; } .set-spot-dates-list-dialog form .list-dates::-webkit-scrollbar-thumb { background: black; height: 50px; border-radius: 3px; } .set-spot-dates-list-dialog form .list-dates::-webkit-scrollbar-thumb:hover { background: #555; } .set-spot-dates-list-dialog form .list-dates li { display: flex; justify-content: space-between; border-bottom: 1px dashed #000; margin-bottom: 20px; padding: 10px; } .set-spot-dates-list-dialog form .list-dates li .dates { display: flex; flex-direction: column; align-items: flex-start; } .set-spot-dates-list-dialog form .list-dates li .dates h3 { font-family: "Bureau Grot Comp Bk", helvetica; font-size: 21px; margin: 0px; text-transform: uppercase; font-weight: 400; } .set-spot-dates-list-dialog form .list-dates li .dates .date-text { font-family: "FoundersGrotesk-Regular", helvetica; font-size: 13.5px; line-height: 15px; } .set-spot-dates-list-dialog form .list-dates li input[type=checkbox] { display: none; } .set-spot-dates-list-dialog form .list-dates li button svg { width: 40px; height: 40px; } .set-spot-dates-list-dialog form .actions { display: flex; margin: 0 auto; max-width: 280px; width: 100%; justify-content: space-between; margin-bottom: 2rem; } @media (max-width: 800px) { .set-spot-dates-list-dialog form .actions { width: calc(100% - 2rem); } } .set-spot-dates-list-dialog form .actions button { font-family: "Bureau Grot Bk", helvetica; font-size: 12px; text-align: center; } .set-spot-dates-list-dialog form .btn-submit { background: #E5C89A; border-radius: 25px; max-width: 340px; width: 100%; height: 50px; border-radius: 25px; color: black; opacity: 1; color: rgb(0, 0, 0); font-family: "Bureau Grot Bk", helvetica; font-size: 12px; text-align: center; line-height: 14px; } @media (max-width: 800px) { .set-spot-dates-list-dialog form .btn-submit { width: calc(100% - 2rem); } } .destinations-page .destinations-page-wrapper { border-bottom: 1px solid black; } .destinations-page .destinations-page-wrapper .destinations-content { margin-bottom: 40px; } .destinations-page .destinations-page-wrapper .destinations-content .page-header { text-align: center; } .destinations-page .destinations-page-wrapper .destinations-content .page-header .page-title-icon { width: 37px; height: 37px; margin: 0 auto; } .destinations-page .destinations-page-wrapper .destinations-content .page-header .page-title-icon svg { width: 100%; height: 100%; } .destinations-page .destinations-page-wrapper .destinations-content .page-header .page-title { line-height: inherit; text-transform: capitalize; font-family: "Bureau Grot Comp Bk", helvetica; font-size: 60px; font-weight: 400; line-height: 70px; margin: 10px 0px 50px 0px; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters { display: flex; align-items: center; padding: 0px; margin-bottom: 20px; } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters { flex-direction: column; } } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .btn-filters { display: flex; align-items: center; justify-content: center; border-radius: 20px; padding: 9px 20px; background: #EDE8DD; font-family: "Bureau Grot", helvetica; font-size: 10px; font-weight: bold; text-transform: uppercase; margin: 0px 0px 0px auto; padding: 10px 20px; } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .btn-filters { width: 100%; padding: 20px 20px; height: 40px; justify-content: space-between; } } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .btn-filters svg { margin: 0px 0px 0px 10px; width: 15px; height: 15px; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox { margin-right: 2rem; max-width: 280px; } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox { max-width: none; width: 100%; margin-bottom: 20px; margin-right: 0px; } } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form { position: relative; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input { border-radius: 50px; border: 1px solid #EDE8DD; padding: 10px 20px; font-family: "Grotesk", helvetica; font-size: 18px; letter-spacing: -0.18px; line-height: 20px; width: 100%; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input:focus { outline: none; box-shadow: 0px 0px 0px 1px #ede8dd; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input::-ms-clear { display: none; width: 0; height: 0; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input::-ms-reveal { display: none; width: 0; height: 0; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input::-webkit-search-decoration, .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input::-webkit-search-cancel-button, .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input::-webkit-search-results-button, .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input::-webkit-search-results-decoration { display: none; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-submit { position: absolute; top: calc(50% - 8.5px); right: 20px; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-submit .ais-SearchBox-submitIcon { width: 17px; height: 17px; fill: #AAA59C; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-reset { display: none; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .region-tags { display: none; } @media (min-width: 1200px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .region-tags { display: block; } } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .region-tags .ais-RefinementList-list { display: flex; list-style: none; justify-content: center; margin: 0px; padding: 0px; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .region-tags .ais-RefinementList-list .ais-RefinementList-item .ais-RefinementList-label { display: block; border-radius: 20px; padding: 9px 20px; background: #EDE8DD; height: 30px; font-family: "Bureau Grot", helvetica; font-size: 10px; font-weight: bold; text-transform: uppercase; margin: 0px 5px; cursor: pointer; cursor: pointer; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .region-tags .ais-RefinementList-list .ais-RefinementList-item .ais-RefinementList-label input[type=checkbox] { display: none; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .region-tags .ais-RefinementList-list .ais-RefinementList-item .ais-RefinementList-label .ais-RefinementList-count { display: none; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters .region-tags .ais-RefinementList-list .ais-RefinementList-item.ais-RefinementList-item--selected .ais-RefinementList-label { background: #E5C89A; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider { position: fixed; z-index: 10000; top: 0px; left: 0px; height: 100%; width: 100%; transition: all 0.3s; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-backdrop { background: rgba(0, 0, 0, 0.53); width: 100%; height: 100%; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content { background: #EAE5DB; position: absolute; top: 0; right: 0; width: 40%; height: 100%; padding: 28px 47px; display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 1200px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content { width: 60%; padding: 18px 27px; } } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content { width: 100%; } } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .header { display: flex; align-items: center; justify-content: space-between; width: 100%; border-bottom: 1px solid black; padding-bottom: 26px; margin-bottom: 26px; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .header h2 { color: black; font-family: "Bureau Grot Comp Bk", helvetica; font-size: 60px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-align: left; line-height: 70px; margin: 0px; } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .header h2 { font-size: 40px; } } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .header .btn-close { display: flex; align-items: center; font-family: "Clearface", helvetica; font-size: 14px; font-style: italic; text-transform: capitalize; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .header .btn-close svg { width: 15px; height: 15px; margin-left: 10px; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body { flex: 1; overflow-y: scroll; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body::-webkit-scrollbar { display: none; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section { border-bottom: 1px dashed black; font-family: "Bureau Grot Bk", helvetica; color: black; margin-bottom: 26px; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section:last-child { border-bottom: none; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section h3 { font-size: 13px; font-weight: 400; font-style: normal; letter-spacing: 0.65px; text-transform: uppercase; margin-bottom: 30px; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section .ais-checkboxes { padding: 0px 0px 20px 0px; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section .ais-checkboxes .ais-RefinementList-list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; justify-content: flex-start; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section .ais-checkboxes .ais-RefinementList-list .ais-RefinementList-item { width: 33%; margin-bottom: 24px; } @media (max-width: 1200px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section .ais-checkboxes .ais-RefinementList-list .ais-RefinementList-item { width: 50%; } } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section .ais-checkboxes .ais-RefinementList-list .ais-RefinementList-item .ais-RefinementList-label { cursor: pointer; color: black; font-family: "Bureau Grot", helvetica; font-size: 13px; letter-spacing: 0.65px; text-align: left; display: flex; align-items: center; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section .ais-checkboxes .ais-RefinementList-list .ais-RefinementList-item .ais-RefinementList-label input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #D5D3C8; margin: 0; font: inherit; width: 20px; height: 20px; border: none; border-radius: 0.15em; transform: translateY(-0.075em); margin-right: 10px; display: grid; place-content: center; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section .ais-checkboxes .ais-RefinementList-list .ais-RefinementList-item .ais-RefinementList-label input[type=checkbox]:checked::before { transform: scale(1); } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section .ais-checkboxes .ais-RefinementList-list .ais-RefinementList-item .ais-RefinementList-label input[type=checkbox]::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em #716d6d; transform-origin: bottom left; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .body .section .ais-checkboxes .ais-RefinementList-list .ais-RefinementList-item .ais-RefinementList-label .ais-RefinementList-count { display: none; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer { display: flex; justify-content: space-between; align-items: center; } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer { flex-direction: column; justify-content: center; } } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer button, .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer .btn-apply { font-family: "Bureau Grot Bk", helvetica; width: 300px; background: black; color: white; text-transform: uppercase; border: none; display: flex; justify-content: space-between; align-items: center; border-radius: 50px; padding: 20px 30px; } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer button, .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer .btn-apply { width: 100%; padding: 15px 20px; font-size: 14px; } } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer button p, .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer .btn-apply p { margin: 0px; font-family: "Clearface", helvetica; font-style: italic; text-transform: capitalize; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer .ais-ClearRefinements { width: 120px; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer .ais-ClearRefinements .ais-ClearRefinements-button { display: block; justify-content: center; background: white; color: black; width: 100%; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer .ais-ClearRefinements .ais-ClearRefinements-button--disabled { color: gray !important; } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer .ais-ClearRefinements { width: 100%; } .destinations-page .destinations-page-wrapper .destinations-content .filters-container .filters-slider .filters-content .footer .ais-ClearRefinements .ais-ClearRefinements-button { margin-bottom: 20px; } } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post { justify-content: flex-start; } } .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image { width: 100%; height: 550px; } @media (max-width: 2000px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image { height: 450px; } } @media (max-width: 1600px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image { height: 400px; } } @media (max-width: 1400px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image { height: 350px; } } @media (max-width: 1200px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image { height: 250px; } } @media (max-width: 1000px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image { height: 200px; } } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image { width: 300px; } } @media (max-width: 600px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image { width: 200px; } } @media (max-width: 400px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image { width: 150px; } } .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image a { display: block; width: 100%; height: 100%; } .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__image a img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content { padding: 0px 20px; flex: 1; } @media (max-width: 600px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content h3 { font-size: 34px; } } @media (max-width: 400px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content { padding: 0px 10px; } } .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content .tags { margin: 0px; padding: 0px; } .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content .tags .tags-list { display: flex; list-style: none; padding: 0px; margin: 0px; justify-content: center; flex-wrap: wrap; } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content .tags .tags-list { justify-content: flex-start; } } .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content .tags .tags-list .tags-list-item { display: flex; align-items: center; justify-content: center; border-radius: 20px; padding: 9px 20px; background: #EDE8DD; font-family: "Bureau Grot", helvetica; font-size: 10px; font-weight: bold; text-transform: uppercase; margin: 0px 0px 5px 5px; height: 30px; } .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content .tags .tags-list .tags-list-item:first-child { margin: 0px 0px 5px 0px; } @media (max-width: 800px) { .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content .tags .tags-list .tags-list-item { height: 20px; padding: 5px 10px; margin: 0px 5px 5px 0px; } .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content .tags .tags-list .tags-list-item:first-child { margin: 0px 5px 5px 0px; } } .destinations-page .destinations-page-wrapper .destinations-content .blog-grid .blog-grid__inner .blog-post .blog-post__content .tags .tags-list .tags-list-item a { text-decoration: none; color: black; } .map-page .search-component .map-sidebar .map-cats .filter-by-category .ais-RefinementList-list { display: flex; padding: 0px; } .map-page .search-component .map-sidebar .map-cats .filter-by-category .ais-RefinementList-list .ais-RefinementList-item .ais-RefinementList-label .ais-RefinementList-checkbox, .map-page .search-component .map-sidebar .map-cats .filter-by-category .ais-RefinementList-list .ais-RefinementList-item .ais-RefinementList-label .ais-RefinementList-count { display: none; } [v-cloak]::before { content: ""; } [v-cloak] { display: none !important; } .gm-style-cc { display: none; } .text-capitalize { text-transform: capitalize; } .text-muted { color: gray; } .cursor-pointer { cursor: pointer; } .hidden-on-small { display: contents; } @media (max-width: 600px) { .hidden-on-small { display: none; } } .app-funnel-offer .wrap-link { display: flex; justify-content: center; align-items: center; text-decoration: none; } .app-funnel-offer .wrap-link p { vertical-align: initial; text-transform: capitalize; } .app-funnel-offer .wrap-link .link { margin-left: 0.5rem; line-height: 20px; } @media (max-width: 900px) { .app-funnel-offer .link { display: none; } } .journal-section .hp-newsletter-app, .single-city .hp-newsletter-app, .blog-single .hp-newsletter-app, .partners .hp-newsletter-app, .faqs-page .hp-newsletter-app, .blog-landing .hp-newsletter-app, .teaser .hp-newsletter-app, .destinations-page .hp-newsletter-app { border-top: none; border-bottom: 1px solid #000; } @media (max-width: 800px) { .journal-section .hp-newsletter-app, .single-city .hp-newsletter-app, .blog-single .hp-newsletter-app, .partners .hp-newsletter-app, .faqs-page .hp-newsletter-app, .blog-landing .hp-newsletter-app, .teaser .hp-newsletter-app, .destinations-page .hp-newsletter-app { padding: 40px 20px; } } .page-shutdown .container { height: calc(100vh - 300px); display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #000; } .page-shutdown p { text-align: center; } .blog-single .wt-banner { border-top: none; } .terms .hp-newsletter-app, .contact .hp-newsletter-app, .privacy-policy .hp-newsletter-app { border-bottom: 1px solid #000; } .is-on-my-list { opacity: 1 !important; } .is-on-my-list svg { fill: #E5C89A !important; }