﻿/* Navbar Mobile */
@media screen and (max-width: 470px){
    .mob-nav{
        display: block;
    }
    .dt-nav{
        display: none;
    }
}

/* Tablet Landscape */
@media screen and (max-width: 1024px){
    .left-slant-bg:after{
        display: none;
    }
    .right-slant-bg-contain{
        display: none;
    }
    .font-sm-dark-blue{
        color: var(--dark-blue) !important;
    }
    .select-box{
        width: 270px;
    }
    .content-jumbo-text-centered{
        padding: 25px;
    }
}

/* Tablet Portrait */
@media screen and (max-width: 768px){
    .landing-bg,
    .landing-jumbo,
    .content-landing-bg,
    .content-landing-jumbo{
        width: 100%;
        height: 100%;
    }
    .content-landing-jumbo,
    .landing-jumbo{
        top: unset;
        bottom: 0;
    }

    .about-img{
        max-width: 200px;
    }

    /* Animation */
    @keyframes anim-curtain {
        0% {
            height: 100%;
        }

        25% {
            height: 100%;
        }

        65% {
            height: 50%;
        }
    }
}

/* Mobile Portrait*/
@media screen and (max-width: 470px){
    .members{
        height: 35px;
    }
    .footer-links{
        flex-direction: column;
        padding: 0 30px;
    }
    .content-landing-bg,
    .landing-bg{
        display: none;
    }
    .content-landing-jumbo,
    .landing-jumbo{
        height: 100%;
    }
    .content-landing,
    .homepage-landing{
        height: calc(60% - var(--navbar-mob-height));
    }

    .content-landing-I,
    .homepage-landing{
        height: calc(70% - var(--navbar-mob-height));
    }
    .content-landing-hp,
    .homepage-landing-hp{
        height: calc(65% - var(--navbar-mob-height));
    }
    .content-landing .btn-main,
    .homepage-landing .btn-main{
        margin-left: unset;
    }
    .top-fixed-nav-scroll{
        margin-top: var(--navbar-mob-height);
    }

    /* Mobile nav */
    #mob-nav-outer{
        display: block;
    }

    /* Animation */
    @keyframes anim-curtain {
        0% {
            height: 100%;
        }
    }
    .anim-appear-up {
        animation-delay: .25s;
    }
    .anim-delay-1 {
        animation-delay: .35s !important;
    }
    .anim-delay-2 {
        animation-delay: .45s !important;
    }
    .anim-delay-3 {
        animation-delay: .55s !important;
    }
    .anim-delay-4 {
        animation-delay: .65s !important;
    }
    .anim-delay-5 {
        animation-delay: .75s !important;
    }

    /* Smile Makeover Carousel */
    .smile-makeover-img {
        height: 100px;
        width: auto !important;
    }

    #smile-makeover-carousel .item {
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
}


/* Mobile Landscape */
@media screen and (max-height: 400px){
    .members {
        height: 35px;
    }
    .content-landing-bg,
    .landing-bg {
        display: none;
    }

    .content-landing-jumbo,
    .landing-jumbo {
        height: 100%;
        width: 100%;
    }

    .content-landing,
    .homepage-landing {
        height: calc(50% - var(--navbar-height));
    }

        .content-landing .btn-main,
        .homepage-landing .btn-main {
            margin-left: unset;
        }

    .top-fixed-nav-scroll {
        margin-top: var(--navbar-height);
    }

    /* Animation */
    @keyframes anim-curtain {
        0% {
            height: 100%;
        }
    }
    .anim-appear-up {
        animation-delay: .25s;
    }
    .anim-delay-1 {
        animation-delay: .35s !important;
    }
    .anim-delay-2 {
        animation-delay: .45s !important;
    }
    .anim-delay-3 {
        animation-delay: .55s !important;
    }
    .anim-delay-4 {
        animation-delay: .65s !important;
    }
    .anim-delay-5 {
        animation-delay: .75s !important;
    }
}