/*===============================

    Fairmont Museum District 
    Mobile Styles

===============================*/



.desktop{
    display:block !important;
}

.desktop-inline{
    display:inline-block !important;
}

.mobile{
    display:none !important;
}


@media only screen and (max-width:720px){

    /* Swapper Case */
    .desktop{
        display:none !important;
    }
    .desktop-inline{
        display:none !important;
    }
    .mobile{
        display:block !important;
    }

    .left, 
    .right {
        float: none !important;
    }

    .one-half,.one-third,.two-thirds,.one-fifth,.two-fifths,.three-fifths,.three-fourths, .four-fifths, .one-fourth, .three-fourths {
        width: 100% !important;
    } 

    /* Font Styles
    ------------------------------------*/

    #hero {
        height: 70vh;
    }

    .page-title {
        font-size: 1.8rem;
    }

    #inner-intro h3 {
        font-size: 1.4rem;
    }
    
    /* Layout
    ------------------------------------*/

    .slick-dotted.slick-slider {
        margin-bottom: 30px;
        height: 80vh;
        width: 325vw;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    

    /* Header
    ------------------------------------*/

    .top-logo {
        z-index: 10000000;
    }

    .apply-wrap {
        right: 2px;
        width: 45px;
    }

    #apply-now-white {
        height: 35px;
        right: 12px;
        line-height: 35px;

    }

    #apply-now-black {
        height: 35px;
        right: 12px;
        line-height: 35px;
    }

    #flyout-menu .large-text-menu {
        flex-wrap: wrap;
    }

    #flyout-menu img.one-half {
        padding-right: 0;
        width: 66% !important;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        padding-top: 15vh;        
    }

    #flyout-menu .large-text-menu {
        height: auto;
    }

    #flyout-menu .big-nav-container {
        border-left: 0px solid #fff;
        padding-top: 40px;
    }

    #flyout-menu .big-nav-container a {
        font-size: 1.2rem;
        text-align: center;
    }

    /* Home Page
    ------------------------------------*/

    #hero {
        height: 50vh;
    }
    
    #hero video {
        height: 50vh;
    }

    .home-promo-block {
        flex-wrap: wrap;
        flex-direction: row-reverse;    
    }

    .slick-prev, .slick-next, .slick-dots li {
        display: none !important;
    }

    #home-gallery {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    #home-quote blockquote p {
        font-size: 1rem;
    }

    #home-intro h3 {
        font-size: 1.4rem;
    }

    #home-gallery .slick-dotted.slick-slider {
        height: auto;
        width: 100%;
    }


    #home-gallery .slick-slide img {
        width: 100%;
    }

    /* Floor  Plans
    ----------------------------*/

    #choose-floor-plan .inner-wrapper {
        flex-wrap: wrap;
        padding-bottom: 10px;
    }

    #choose-floor-plan .floor-plans-box {
        width: 100%;
        padding-top: 66%;
        margin-bottom: 30px;
        line-height: 66%;
        transform: translateX(0%);
    } 


    /* Bottom Callout
    ----------------------------*/

    #bottom-callout {
        flex-wrap: wrap;
    }

    .contact-container {
        min-height: 30vh;
    }


    /* Floor Plans 
    ------------------------------*/

    .floor-plans-wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }

    #floor-plans-selector {
        flex-wrap: wrap;
    }

    span.floor-plans-filter {
        width: 100%;
        display: block;
        margin-bottom: 10px;
        text-align: center;
    }

    .fancybox-container {
        z-index: 10000000000 !important;
    }

    .popup-box {
        flex-wrap: wrap;
    }

    .popup-box .image-box {
        width: 100%;
    }

    body .fancybox-content {
        padding: 10px
    }

    body .popup-box .text-box{
        width: 100%;
    }

    .popup-box .pop-button {
        width: 80%;
    }

    body .fancybox-bg {
        background: #eee;
    }

    /* Neighborhood 
    ------------------------------*/

    .filter-container .plot-item .overlay-text h2 {
        text-align: center;
    }

    body #map-list {
        height: 90vh;
    }

    .map-logo {
        display: none !important;
    } 

    /* Virtual Tour PAge
    ------------------------------*/

    .filter-wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Amenities
    ------------------------------*/

    .amenities-container .flex {
        flex-wrap: wrap;
    }

    .amenities-container .flex ul {
        padding-left: 40px;
        margin-top: 60px;
    }

    .amenities-container .flex ul li.amenities-title {
        font-size: 1.8rem;
    }

    /* Gallery
    -----------------------------*/

    
    #filter-selector {
        flex-wrap: wrap;
    }

    span.floor-plans-filter {
        width: 100%;
        display: block;
        margin-bottom: 10px;
        text-align: center;
    }



    /* Footer
    ------------------------------*/
    
    #footer .inner-wrapper {
        flex-wrap: wrap;
    }

    #footer .inner-wrapper .one-fourth  {
        padding: 20px;
    }

    #footer .foot-social-pet a {
        float: left;
    }

    #footer .fair-housing {
        width: 45px;
        height: 45px;
        float: right;
        position: static;
    }

    #footer .pet-icon {
        width: 45px;
        height: 45px;
        float: right;
        position: static;
    }

    #footer .sub-footer {
        height: auto;
    }

    #footer .sub-footer p {
        width: 100%;
        display: block;
        text-align: center;
    }

    #footer .foot-links {
        position: static;
        width: 100%;
        padding-top: 5px;
        text-align: center;
        padding-bottom: 10px;
    }
}