/* ============================================================
   Skkky Club — Responsive overrides
   Loaded after skkky.css. Desktop (>=1200px) is left untouched
   except the container becoming fluid below 1349px.
   ============================================================ */

html, body {overflow-x: hidden;}
.mainContainer {width: 100%; max-width: 1349px;}
img {max-width: 100%;}
.memoriesCantainer .eachPhotosHolder a .imgWrapper img {width: 100%;}

/* ------------------------------------------------------------
   Large tablets / small desktops
   ------------------------------------------------------------ */
@media (max-width: 1199px) {
    /* Hero: the pixel-tuned white mask no longer lines up, so hide it
       and show the caption on a translucent card instead */
    .biosContainer #bios .active .item1 .mask {display: none;}
    .biosContainer #bios .item1 .caption {
        top: auto; bottom: 40px; left: 20px; right: 20px;
        background: rgba(255,255,255,0.88);
        padding: 16px 20px; border-radius: 8px;
    }
    .biosContainer #bios .active .item1 .caption span {font-size: 42px;}
    .biosContainer #bios .active .item1 .caption span:nth-child(2) {font-size: 48px; margin-top: -6px;}
    .biosContainer #bios .active .item1 .caption div {font-size: 14px; line-height: 22px; margin-top: 12px;}
    .biosContainer #bios .active .item1 .caption div a {font-size: 14px; padding: 6px 16px 8px;}
    .biosContainer #bios .custNav {bottom: auto; top: 110px; left: auto; right: 15px; display: flex;}
    .biosContainer #bios .custNav div {margin: 0 4px; background: #fff;}
    .biosContainer #bios .custNav div.active {background: #e99726;}

    .topContainer .logo {left: 40px;}

    .welcomeContainer {padding: 0 40px 0 0;}
    .welcomeContainer span {right: 40px;}
    .whatsNew span, .dinner span {right: 40px;}
    .contactBg {padding: 40px;}
}

/* ------------------------------------------------------------
   Tablets and below
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    /* Top menu: full-width static bar instead of an absolute overlay */
    .topMenu {position: static; width: 100%; height: auto; background: #000; float: left;}
    .topMenu ul {display: flex; width: 100%;}
    .topMenu ul li {flex: 1 1 20%; display: block;}
    .topMenu ul li a {padding: 10px 4px 12px; font-size: 11px; height: 100%;}
    .topMenu ul li a img {width: 26px; height: 26px;}
    .topMenu ul li a span {display: block; margin-top: 4px;}
    .biosContainer #bios .item1:before {display: none;}

    /* Logo: small badge in the hero's top-left corner */
    .topContainer .logo {top: 95px; left: 12px; width: 90px; height: 90px;}
    .topContainer .logo img {transform: scale(1.15);}
    .biosContainer #bios .custNav {top: 100px; right: 12px;}

    .biosContainer #bios .item1 .caption {bottom: 25px; left: 12px; right: 12px; padding: 12px 15px;}
    .biosContainer #bios .active .item1 .caption span {font-size: 32px;}
    .biosContainer #bios .active .item1 .caption span:nth-child(2) {font-size: 38px;}
    .biosContainer #bios .active .item1 .caption div {font-size: 12px; line-height: 19px; margin-top: 8px;}

    /* Welcome / About */
    .welcomeContainer {padding: 0 20px 50px;}
    .welcomeContainer img {float: none; display: block; margin: 0 auto 20px;}
    .welcomeContainer .subHeading {margin-top: 25px; font-size: 30px;}
    .welcomeContainer .heading {font-size: 34px;}
    .welcomeContainer span {font-size: 70px; line-height: 55px; right: 20px;}

    /* What's new */
    .whatsNew {padding: 0 0 80px 0;}
    .whatsNew:before, .whatsNew:after {display: none;}
    .whatsNew .col-md-8 {width: 100%;}
    .whatsNew .menuContainer {margin: 0 15px;}
    .whatsNew .menuContainer .heading {font-size: 26px;}
    .whatsNew span {font-size: 70px; line-height: 55px; right: 15px;}

    /* Dine with us carousel */
    .dinner .col-xs-10 {width: 100%; margin-left: 0;}
    .dinner .menuContainer {margin: 0 15px;}
    .dinner .heading {font-size: 26px;}
    .dinner span {font-size: 70px; line-height: 55px; right: 15px;}

    /* Testimonials */
    .testimonials {padding: 25px 0 40px;}
    .testimonials .heading {font-size: 40px;}
    .testimonials .subHeading {font-size: 28px;}
    .testimonials .testiContainer .testimText {font-size: 15px; line-height: 25px;}
    .testimonials .testiContainer .custNav div {width: 32px; height: 32px;}
    .testimonials .testiContainer .custNav div i {font-size: 22px;}
    .testimonials .testiContainer .custNav div.owl-prev {padding: 3px 10px;}
    .testimonials .testiContainer .custNav div.owl-next {padding: 3px 12px;}

    /* Contact / booking */
    .contactBg {padding: 25px 15px;}
    .contactBg:before {background-attachment: scroll; transform: none;}
    .contactBg .containers {padding: 30px 20px;}
    .contactBg .containers .bkFrom {margin-right: 0;}
    .contactBg .containers .form-control {font-size: 16px;} /* prevents iOS focus zoom */
    .contactBg .containers .col-md-4 {margin-bottom: 30px;}
    .contactBg .containers .col-md-4:last-child {margin-bottom: 0;}

    /* Inner pages */
    .otherContents .container {padding-top: 20px;}
    .otherContents h1 {font-size: 28px;}
    /* isotope makes these blocks position:absolute; below 992px Bootstrap
       gives col-md-12 no width, so they collapse to 0 without this */
    #isotope > .col-md-12 {width: 100%;}
    .photoCantainer .eachPhotosHolder {width: 50%;}
    .memoriesCantainer .eachPhotosHolder {width: 50%;}
}

/* ------------------------------------------------------------
   Phones
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Hero: keep enough height for the logo + caption card */
    .biosContainer #bios .item1 > img {width: 100%; height: 360px; object-fit: cover;}
    .topContainer .logo {top: 90px; width: 72px; height: 72px;}
    .biosContainer #bios .custNav {top: 95px;}
    .biosContainer #bios .active .item1 .caption span {font-size: 26px;}
    .biosContainer #bios .active .item1 .caption span:nth-child(2) {font-size: 30px;}

    .topMenu ul li a {font-size: 10px; padding: 8px 2px 10px;}
    .topMenu ul li a img {width: 22px; height: 22px;}

    .welcomeContainer .heading {font-size: 28px;}

    /* What's new: 2-up grid instead of 4 tiny tiles */
    .whatsNew .menuContainer div.col-xs-3 {width: 50%;}

    .footer {font-size: 12px;}

    /* Menu / dine-with-us cards stack */
    .photoCantainer .eachPhotosHolder {width: 100%;}
    .mlSizes {white-space: normal;}

    /* Happy memories stack */
    .memoriesCantainer .eachPhotosHolder {width: 100%;}

    /* Dine-with-us filter buttons */
    .btns {width: 92px; height: 92px; padding: 18px 4px; margin: 0 8px 12px 0;}
    .btns img {max-width: 30px;}
    .btns span {font-size: 12px; margin-top: 4px;}
}

/* ------------------------------------------------------------
   Small phones
   ------------------------------------------------------------ */
@media (max-width: 400px) {
    .biosContainer #bios .item1 > img {height: 330px;}
    .biosContainer #bios .active .item1 .caption span {font-size: 22px;}
    .biosContainer #bios .active .item1 .caption span:nth-child(2) {font-size: 26px;}
    .biosContainer #bios .active .item1 .caption div {font-size: 11px; line-height: 17px;}
    .testimonials .heading {font-size: 32px;}
    .testimonials .subHeading {font-size: 22px;}
    .welcomeContainer span, .whatsNew span, .dinner span {font-size: 50px; line-height: 40px;}
    .btns {width: 84px; height: 84px; padding: 15px 4px; margin: 0 5px 10px 0;}
}