/** 2023 design updates **/

/** general site-wide style updates **/
a {
    color: #bf4e3b;
    text-decoration: underline;
}
a.button {
    padding: .7em 1.5em;
    color: #fff;
    background: #bf4e3b;
    text-transform: none;
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 70%;
    border-collapse: collapse;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    font-family: 'DINNextW01-Bold';
    font-size: 21px;
    line-height: 1.4em;
    text-decoration: none;
}
a.button:hover{
    background: #A43D2B;
}
a.tel {
    color: #fff;
    text-decoration: none;
}
.constrainedContent{
    color: #333333;
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7em;
}

/** header elements **/
header .constrainedContent,
footer .constrainedContent,
.foot-end .constrainedContent{
    width: 95%;
    max-width: 1100px;
}
#logo{
    width: 173px;
    height: 87px;
    top: 63px;
    /*z-index: 251;*/
}
#top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 54px;
    background: #fff url(https://kabeelo.com/images/bg-body.jpg);
}
header {
    position: fixed;
    width: 100%;
    z-index: 12;
    padding: 0;
    height: 165px;
    margin: 0;
    background: #000 url(https://kabeelo.com/images/bg-black.jpg) repeat-x;
}
#open-nav .bar1, #open-nav .bar2, #open-nav .bar3 {
    background-color: #fff;
}
#contact {
    left: 0;
    color: #BE4D39;
    font-family: "DINNextW01-Bold";
    font-size: 21px;
    line-height: 1.4em;
    width: 100%;
    text-align: left;
    top: 13px;
}
#contact a {
    color: #000;
}
.mainContentWrapper {
    padding-top: 165px;
}

.interior.cols .constrainedContent .left {
    font-family: 'Montserrat';
    font-size: 15px;
    line-height: 1.7em;
}
.interior.cols .constrainedContent .right {
    font-family: 'Montserrat';
    font-size: 15px;
    line-height: 1.7em;
}
.bottom-half h2 {
    color: #BE4D39;
    font-family: "DIN-Condensed";
    font-size: 33px;
    font-weight: bold;
}
.interior.cols .constrainedContent .right strong {
    font-family: "DIN-Condensed";
}
.interior.cols .constrainedContent .right p strong {
    font-size: 16px;
}
.interior.cols .constrainedContent .right h2 {
    color: #BE4D39;
    font: bold 28px/28px 'DIN-Condensed', sans-serif;
    margin: 0 0 10px 0;
}
.bottom-half ul.cabins li h3, .bottom-half ul.cabins li h3 a {
    color: #BE4D39;
    font: bold 24px 'DIN-Condensed', sans-serif;
}
.bottom-half ul.cabins li div a {
    font: bold 18px 'DINNextW01-Bold', sans-serif;
    color: #fff;
    background-color: #bf4e3b;
    text-decoration: none;
}
.bottom-half ul.cabins li div {
    font-family: 'Montserrat';
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5em;
}
ul#news-items li {
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
}
ul#news-items li h3 {
    color: #BE4D39;
    font: bold 24px 'DIN-Condensed', sans-serif;
}
.interior .constrainedContent .mainContent h4 {
    font: 500 18px Montserrat, sans-serif;
}

#footer-brochure{
    background-color: #BE4D39;
}
#footer-brochure div{
    text-align: center;
    padding: 30px 0;
}
#footer-brochure a {
    position: relative;
    color: #FFFFFF;
    font-family: "DIN-Condensed";
    font-size: 38px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 46px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1em 0 1em 205px;
}
#footer-brochure a img {
    position: absolute;
    top: -15px;
    left: 0;
}

footer {
    background: #2c2c2c;
}
footer .col.contact-col,
footer .col.contact-col{
    width: calc(50% - 125px);
}
footer .col.logo-col {
    width: 250px;
}
footer .cols2 {
    margin: 0;
    padding-top: 0;
}
footer .cols2 .col{
    padding-top: 0;
    width: 50%;
}
footer .cols2 .col > div {
    text-align: left;
    width: 190px;
}
footer .cols2 .col p{
    margin-top: 2px;
}
footer .col h3 {
    color: #BE4D39;
    font-family: "DIN-Condensed";
    font-size: 31px;
    font-weight: bold;
    line-height: 37px;
    margin-bottom: 5px;
}
footer .col,
footer .col > div{
    font-family: "SFNS-Display";
    font-size: 18px;
    line-height: 28px;
    color: #fff;
}
footer h4 {
    font-family: "SFNS-Display";
    font-size: 19px;
    line-height: 22px;
    margin: 0;
}
.foot-end {
    font-size: 13px;
    font-family: 'SFNS-Display';
    background: #fff;
}
.foot-end p {
    text-align: center;
    font-size: 13px;
}

/** navigation elements **/
#nav-top li a {
    color: #000;
    text-transform: none;
    text-decoration: none;
}
#nav-top li a:before{
    content: '|';
    padding: 0 1em;
}
#nav-top li a:hover {
    color: #be4d39;
}
#nav-top li.first a:before,
#nav-top li.last a:before{
    content: '';
    padding: 0;
}
#nav-top li.last a{
    background: #be4d39;
    color: #fff;
    padding: 14px 26px;
    border: 0;
    margin-left: 1em;
    font-family: 'DINNextW01-Bold';
    font-size: 22px;
    text-transform: none;
}

.sidenav #nav-top li {
    margin: 0;
    padding: 0;
}
#open-nav {
    top: 80px;
}
.sidenav #nav-head{
    padding-left: 175px;
    padding-top: 12px;
    z-index: 8;
}
.sidenav #nav-head > li{
    height: 40px;
    min-width: auto;
    margin: 0 0 0 25px;
}
.sidenav #nav-head > li > a {
    color: #fff;
    font-family: "DIN-Alternate-Bold";
    font-size: 20px;
    line-height: 24px;
    text-transform: none;
    padding: 3px;
    border-bottom: solid 4px transparent;
}
.sidenav #nav-head > li > a:hover {
    color: #fff;
    border-bottom: solid 4px #BE4D39;
}

.sidenav #nav-head > li ul {
    background: #fff;
    padding: 0.75em 2em;
}
.sidenav #nav-head > li ul a {
    color: #313133;
    font-family: "SFNS-Display";
    font-size: 16px;
    text-transform: none;
    font-size: 19px;
}

@media (max-width: 991px) {
    .sidenav {
        width: 100%;
        right: -100%;
        padding-top: 0;
    }
    #nav-top {
        display: none;
    }
    .menuhead{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .menuhead .contact {
        width: 50%;
        text-transform: uppercase;
        color: #BE4D39;
        font-family: "DINNextW01-Bold";
        font-size: 21px;
        line-height: 28px;
        background: #fff url(/images/bg-body.jpg);
        text-align: center;
        padding: 0.5em 0;
        display: inline-block;
        margin: 0;
    }
    .menuhead .contact a {
        color: #000;
        text-decoration: none;
    }
    .menuhead .reservation {
        background: #be4d39;
        color: #fff;
        font-family: 'DINNextW01-Bold';
        font-size: 22px;
        text-transform: none;
        display: inline-block;
        margin: 0;
        padding: 0;
        width: calc(50% - 5px);
    }
    .menuhead .reservation a {
        color: #fff;
        padding: 0.5em 0;
        display: block;
        text-align: center;
        text-decoration: none;
    }
    .menuhead .menulogo {
        width: calc(50% - 4em);
        display: inline-block;
        padding: 1em 2em;
    }
    .menuhead .menuclose {
        width: calc(50% - 5px);
        display: inline-block;
        text-align: right;
    }
    .sidenav .closebtn {
        position: relative;
        top: 0px;
        font-size: 65px;
        text-decoration: none;
    }
    sidenav.closed {
        right: -100%;
        transition: 0.5s;
    }

    .sidenav #nav-head {
        padding: 0 10%;
        text-align: center;
    }
    .sidenav #nav-head > li {
        height: auto;
        margin: 1em 0;
        width: 100%;
    }
    .sidenav #nav-head li ul li.here a {
        color: #bf4e3b;
    }
    .sidenav #nav-head > li > a {
        color: #FFFFFF;
        font-family: "DIN-Alternate-Bold";
        font-size: 30px;
        font-weight: normal;
        line-height: 35px;
        text-align: center;
    }
    .sidenav #nav-head > li ul {
        background: #fff;
        padding: 0.75em 2em;
        width: auto;
        border-top: solid 4px #bf4e3b;
        margin-top: 1em;
    }
    .sidenav #nav-head > li span.openMenu:after {
        border-width: 14px 11px 0 11px;
    }
}


/** home page elements **/
.home-cabins-container{
    background: #2c2c2c;
}
.home-cabins-container .home-cabins h2{
    color: #BE4D39;
    font-family: "DIN-Condensed";
    font-size: 36px;
    font-weight: bold;
}
.home-cabins-container .home-cabins a {
    color: #fff;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    font-family: "SFNS-Display";
    font-size: 16px;
}
.home-cabins-container .home-cabins .home-cabins-slides .slick-list .slick-track .slick-slide h3{
    color: #BE4D39;
    font-family: "SFNS-Display";
    font-size: 20px;
}
.home-cabins-container .home-cabins .home-cabins-slides .slick-list .slick-track .slick-slide a{
    color: #fff;
    text-decoration: underline;
    background: transparent;
    padding-left: 0;
    text-transform: none;
    font-weight: normal;
    font-family: "SFNS-Display";
    font-size: 16px;
}
.home-cabins-container .home-cabins .home-cabins-slides .slick-list .slick-track .slick-slide a:hover {
    background: transparent;
}
.home-links il li {
    font-family: "SFNS-Display";
    font-size: 16px;
}
.home-links ul li h2{
    color: #BE4D39;
    font-family: "DIN-Condensed";
    font-size: 33px;
    font-weight: bold;
}
.home-links ul li a {
    padding-left: 0;
    text-transform: none;
    color: inherit;
    background: transparent;
    font-family: "SFNS-Display";
    font-size: 15px;
}
.home-links ul li img {
    object-fit: cover;
}
.home-news-container .home-news .news h2 {
    color: #313133;
    font-family: "DIN-Condensed";
    font-size: 36px;
    font-weight: bold;
}
.home-news-container .home-news .news ul li {
    color: #333333;
    font-family: "SFNS-Display";
    font-size: 16px;
    line-height: 1.3em;
}
.home-news-container .home-news .news ul li span.date {
    color: #333333;
    font-family: "SFNS-Display";
    font-size: 16px;
    text-transform: none;
}
.home-news-container .home-news .news ul li h3 a {
    color: #BE4D39;
    font-family: "SFNS-Display";
    font-size: 18px;
    text-transform: none;
}
.home-news-container .home-travel h2{
    color: #313133;
    font-family: "DIN-Condensed";
    font-size: 36px;
    font-weight: bold;
}
.home-news-container .home-travel p {
    color: #333333;
    font-family: "SFNS-Display";
    font-size: 16px;
    font-style: normal;
}
.home-news-container .home-travel p a {
    color: #BE4D39;
}
.home-news-container .home-travel ul li {
    color: #333333;
    font-family: "SFNS-Display";
    font-size: 16px;
    margin-bottom: 30px;
}
.home-news-container .home-travel ul li span {
    color: #BE4D39;
    font-family: "DIN-Condensed";
    font-size: 84px;
    height: 78px;
}
.cabin-map-info {
    width: 240px;
    text-align: center;
    font-family: "SFNS-Display";
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 16px;
    padding-bottom: 10px;
}
.cabin-map-info img {
    max-width: 100%;
    height: auto;
}
.cabin-map-info h1 {
    color: #313133;
    font-family: "DIN-Condensed";
    font-size: 38px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 46px;
    margin: 0;
}
.cabin-map-info a {
    color: #BE4D39;
}

#addtl-map-info{
    background-color: #E8E2DA;
    color: #313133;
}
.cabinstatsContainer{
    padding: 1em 0;
}
.cabinstats{
    font-family: "SFNS-Display";
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 16px;
}
.cabinstats.cabin {
    display: none;
}
.cabinstats > .col {
    border-left: 1px solid #B4A584;
    min-height: 65px;
    padding: 1em 1em 0 1em;
}
.cabinstats > .col:first-child {
    border-left: 0;
}
.cabinstats h1{
    font-family: "DIN-Condensed";
    font-size: 37px;
    font-weight: bold;
    line-height: 46px;
    text-transform: uppercase;
    margin: -8px 0 0 0;
}

.cabinstats.cols4 > .col {
    width: calc(100% - 10px);
}

.cabinstats > .col.cols2 {
}
.cabinstats > .col.cols2 > .col{
    width: calc(50% - 1em);
}

.interior.cols .constrainedContent .right #c p:first-child strong {
    color: #BE4D39;
    font-family: "DIN-Condensed";
    font-size: 84px;
}
.interior.cols .constrainedContent .right #c h4 {
    color: #BE4D39;
}


@media (min-width: 768px) {
    .cabinstats.cols4 > .col {
        width: calc(25% - 1.1em);
        float: left;
    }
}

@media (max-width:1220px) {
    .cabinstats h1{
        font-size: 29px;
        line-height: 39px;
    }
    .cabinstats > .col {
        min-height: 50px;
    }
}
@media (max-width:992px) {
    .cabinstats.cols4 > .col{
        width: calc(50% - 2.1em);
        margin-top: 1em;
        border: 0;
    }
    .cabinstats .cols2 {
        margin-left: 0;
    }
}
@media (min-width: 525px) and (max-width:767px) {
    .cabinstats.cols4 > .col{
        text-align: center;
        width: 100%;
        border: 0;
    }
    .cabinstats > .col.cols2 {
        margin: 0;
        padding: 0;
    }
    .cabinstats > .col.cols2 > .col {
        width: calc(50% - 1em);
        display: inline-block;
    }
}
@media (max-width: 649px) {
    #addtl-map-info {
        padding-bottom: 30px;
    }
}
@media (max-width: 524px){
    .cabinstats.cols4 > .col {
        width: 100%;
        text-align: center;
        border: 0;
        min-height: auto;
        margin: 0;
        padding: 1em 0;
    }
    .cabinstats > .col.cols2 > .col {
        width: 100%;
    }
}




@media (min-width: 992px) {
    .sidenav #nav-head > li ul {
        width: 160px;
    }
    .sidenav .menuhead {
        display: none;
    }
    .sidenav #nav-top {
        position: absolute;
        top: 13px;
        right: 0;
    }
    .sidenav #nav-top li {
        float: none;
        display: inline-block;
    }
    .sidenav #nav-head > li.here, .sidenav #nav-head > li.parent-here {
        background: transparent;
    }
    .sidenav #nav-head > li.here a{
        color: #fff;
        border-bottom: solid 4px #BE4D39;
    }
    .sidenav #nav-head > li ul a:hover{
        color: #BE4D39;
    }
    .sidenav #nav-head > li.here > ul > li > a{
        color: #313133;
        text-decoration: none;
        border-bottom: 0;
    }
    .sidenav #nav-head > li.here > ul > li > a:hover{
        color: #BE4D39;
        text-decoration: none;
    }
    #contact {
        width: 50%;
    }
}

@media (max-width: 1162px) and (min-width: 992px) {
    #logo {
        width: 140px;
        height: auto;
        top: 70px;
    }
    .sidenav #nav-head {
        padding-left: 140px;
    }
    .sidenav #nav-head > li {
        margin-left: 16px;
    }
    .sidenav #nav-head > li > a {
        font-size: 18px;
    }
}
@media (min-width: 850px) {
    .mainContentWrapper {
        padding-top: 165px;
    }
}
@media (max-width: 850px) {
    .slick-slide {
        height: 375px;
    }
    .home-slides .slide div.img {
        height: 375px;
    }
}
@media (max-width: 778px) {
    footer .col.logo-col,
    footer .col.contact-col,
    footer .col.connect-col{
        width: 100%;
        text-align: center;
        margin: 0;
    }
    footer .cols2{
        width: 60%;
        margin: 0px auto;
    }
    footer .cols2 .col > div {
        text-align: left;
        width: 175px;
    }
    .slick-slide {
        height: 320px;
    }
    .home-slides .slide div.img {
        height: 320px;
    }
}
@media (max-width: 649px) {
    footer .cols2{
        width: 100%;
        margin: 0px auto;
    }
    footer .cols2 .col {
        width: 100%;
        text-align: center;
    }
    footer .cols2 .col > div {
        text-align: center;
        width: 100%;
    }
    .slick-slide {
        height: 260px;
    }
    .home-slides .slide div.img {
        height: 260px;
    }
    .home-links ul li h2 {
        margin-bottom: 0;
    }
    .home-links ul li {
        margin-bottom: 20px;
    }
    #footer-brochure a img {
        position: absolute;
        top: -110px;
        left: 0;
        width: 130px;
        margin: 0 auto;
        right: 0;
    }
    #footer-brochure a {
        position: relative;
        color: #FFFFFF;
        font-family: "DIN-Condensed";
        font-size: 35px;
        font-weight: bold;
        letter-spacing: 1px;
        line-height: 46px;
        text-decoration: none;
        text-transform: uppercase;
        padding: 0;
        margin-top: 40px;
        display: block;
    }
    footer .col, footer .col > div {
        padding: 0;
    }
    footer {
        padding-top: 30px;
    }
}
@media (max-width: 450px) {
    .slick-slide {
        height: 200px;
    }
    .home-slides .slide div.img {
        height: 200px;
    }
}

@font-face {
    font-family: 'DIN-Alternate-Bold';
    src: url('/scripts/fonts/DIN-Alternate-Bold.ttf');
}
@font-face {
    font-family: 'DINNextW01-Bold';
    src: url('/scripts/fonts/DIN-Next-W01-Bold.ttf');
}
@font-face {
    font-family: 'Montserrat';
    src: url('/scripts/fonts/Montserrat-VariableFont_wght.ttf');
}
@font-face {
    font-family: 'SFNS-Display';
    src: url('/scripts/fonts/SF-Pro-Display-Regular.otf');
}
@font-face {
    font-family: 'DIN-Condensed';
    src: url('/scripts/fonts/DIN-Condensed-Bold.ttf');
}

/* change for outpost dropdown Jun 2024 */
@media (min-width: 992px) {
    .sidenav #nav-head #nav-head-lake-cabins > ul {
        left: -150px;
        width: 475px;
        columns: 3;
    }
}
/*
.sidenav #nav-head #nav-head-lake-cabins > ul > li {
    width: 155px;
    display: inline-block;
    margin: 3px 0;
}
*/
.sidenav #nav-head #nav-head-lake-cabins > ul > li > a {
    font-size: 15px;
}