/* FOCUS FOR TAB FOCUS SUPPLEMENTARY CSS */
a.btn.marriott-btn:focus {
    outline-style: solid;
    outline-width: unset;
    outline-color: #333;
}
.header-mobile a:focus,
a.logo-href:focus,
a.terms-link:focus,
.sitemap a:focus,
a.resort-header-link:focus,
a.general-info-link:focus  {
    outline: #128275 auto;
    outline-offset: 4px;
}
button.hamburger:focus,
.header-mobile a:focus {
    outline: #fff auto;
}
a.general-info-link:focus,
.image-description-parent a:focus {
    outline-offset: 2px;
}
.image-description-parent a:focus {
    outline: #128275 solid 3px;
}
a.terms-link,
a.terms-link:hover {
    color: #128275;
}
a.terms-link:hover {
    text-decoration: underline;
}
button#modalLegalConfirm:focus,
button#modalLegalClose:focus {
    outline: #333 auto;
    outline-offset: 3px;
}

/* END FOCUS CSS */
html {
    scroll-behavior: smooth;
}
nav.navbar {
    position: fixed;
    width: 100%;
    z-index: 1000;
    transition: top 0.6s ease-out;
    top: 40px;
    flex-wrap: wrap;
    height: auto !important;
    padding: 0 0 10px 0;
}
body {
    transition: margin-top 0.6s ease-out;
    margin-top: 135px;
}
.panel {
    top: 0px;
}
a {
	color: #128275;
}
a:hover {
	color: #0e5d54;
}
/* TOPHAT BANNER */
:root {
    --tophat-banner-collapsed-height: 0px;
    --tophat-banner-expanded-height: 0px;
}
#tophatBanner {
    height: 44px;
}
.important-info {
    width: 100%;
    color: #fff;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: none;
}
.important-info a.white {
    color: #ffffff;
}
.important-info a {
    text-decoration: underline;
    color: #0A4E46;
    font-weight: bold;
}
.important-info a:active,
.important-info a:focus{
    text-decoration: none;
    color: #0A4E46;
    outline: auto !important;
    outline-color: #0A4E46 !important;
    padding: 2px !important;
}
.important-info-row.text {
    background-color: #6d6e70;
}
.important-info-text {
    padding: 10px;
    font-size: .9em;
    border: 1px solid #6d6e70;    
    max-width: 1400px;
    margin: 0 auto;
    cursor: pointer;
    background-color: #6d6e70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
.important-info-text:focus{
    text-decoration: none;
    border: 1px solid #fff;
    outline: none !important;
}
.important-info-icon{
    color: #ffffff;
}
.important-info-dropdown {
    box-sizing: border-box;
    background: #f3f2ef;
    color: #333;
    margin: 0 auto;
    max-width: 1400px;
    max-height: 0;        
    overflow: hidden; 
    opacity: 0;
    padding: 0 10px;    
    transition: max-height 0.6s ease-out, opacity 0.6s ease-out, padding 0.6s ease-out;    
}
.important-info-row.dropdown {
    background: #f3f2ef;
    margin-top: 0px;
}

.important-info-dropdown p {
    margin-bottom: 5px;
    font-size: .8em;
}
.important-info-dropdown p svg {
    margin-right: 5px;
}
.important-info.is-expanded .important-info-dropdown {
    max-height: 500px;
    opacity: 1;
    padding-top: 12px;
    padding-bottom: 12px;
}
/* conditional classes for pages with no banner */
.page-type-no-banner nav.navbar {
    top: 0px !important;
}
.page-type-no-banner body {
    margin-top: 20px !important;
}
/* Header and Back to Top Btn*/
#backTopBtn:focus {
	text-decoration: underline;
}
.logo-href img {
	width: 250px;
	height: 35px;
}
.logo-mobile img { height: auto; }
a.logo-mobile:focus,
button.hamburger:focus {
	outline: #fff auto;
	outline-offset: 4px;
}
#backTopBtn:focus {
	text-decoration: underline;
}
a.header-option.owner-login {
	background-color: #fff;
	color: #128275;
	border: 1px solid #128275;
} 
a.header-option.owner-login:hover {
	color: #128275;
	background-color: #fff;
}
.header-info-request{ 
	text-align: right;
}
@media only screen and (max-width: 330px) {
	.logo-mobile {
		margin-top: 7px;
	}
}
@media only screen and (max-width: 400px) {
    .logo-mobile {
        width: 200px;
        max-width: 300px;
        margin-top: 8px;
    }
}
@media only screen and (max-width: 450px){
	.logo-mobile {
		width: 250px;
	}
}
@media only screen and (max-width: 575px) {
    .hero-element-info {
        padding: 2rem 1rem;
    }
}
@media only screen and (min-width: 576px) and (max-width: 1130px){
    .hero-element-info {
        padding: 2rem 1rem 1rem 2rem;
    }
}
@media only screen and (max-width: 1129px) {
    .page-destinations nav.navbar {
        top: 40px !important;
        border-top: 1px solid #128275;
    }
    body {
        margin-top: 0px;
    }
    .slideout-open .slideout-menu, .slideout-open .mobile-menu {
        padding-top: 55px;
        z-index: 200;
    }  
}
@media only screen and (min-width: 1130px) and (max-width: 1400px) {
    a.logo-href, .logo-href {
        margin-left: 10px;
    }
}
@media only screen and (min-width: 1130px) {
    body{
        margin-top: 135px;
    }
    .header-info {
        top: -1.051rem;
    }
}