
@media only screen and (max-width: 767px) {
    
    .elementor-1204 .elementor-element.elementor-element-3b4e466 .elementor-tab-title, .elementor-1204 .elementor-element.elementor-element-3b4e466 .elementor-tab-title a,
    .elementor-1110 .elementor-element.elementor-element-1eb9ea5 .elementor-tab-title, .elementor-1110 .elementor-element.elementor-element-1eb9ea5 .elementor-tab-title a {
        color: #ffffff !important;
    }
    .hfe-nav-menu.hfe-layout-horizontal.hfe-nav-menu-layout.horizontal{
        position: fixed;
        left: 0 !important;
    }
    .hfe-nav-menu-icon{ margin-right: 10px;}
    .hfe-nav-menu__layout-horizontal {
        width: 74%;
        margin-top: 29px;
        background-color: #000 !important;
        color: #fff !important;
    }
    
    #homepage-gallery-inner .elementor-image {
        padding: 10px;
    }
    
    .elementor-342 .elementor-element.elementor-element-2261222 .hfe-dropdown.menu-is-active {
        margin-top: 32px;
        width: 70% !important;
    }
    
    #elementor-tab-content-6211{
        display: none;
    }
    
    #our-services-tab .elementor-tab-content div div  {
        width: 100% !important;
    }
    
    .elementor-1204 .elementor-element.elementor-element-3b4e466 .elementor-tab-title, .elementor-1204 .elementor-element.elementor-element-3b4e466 .elementor-tab-title a,
    .elementor-357 .elementor-element.elementor-element-3b4e466 .elementor-tab-title, .elementor-357 .elementor-element.elementor-element-3b4e466 .elementor-tab-title a {
        color: #fff  !important;
        text-align:center !important;
    }
    
    body:not(.rtl) .elementor-342 .elementor-element.elementor-element-2261222.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu>li.menu-item:not(:last-child) {
        margin-right: 0;
        border-bottom: 1px solid #fff;
    }

    .elementor-8 .elementor-element.elementor-element-10f46c8 .sub-menu, .elementor-8 .elementor-element.elementor-element-10f46c8 nav.hfe-dropdown, .elementor-8 .elementor-element.elementor-element-10f46c8 nav.hfe-dropdown-expandible, .elementor-8 .elementor-element.elementor-element-10f46c8 nav.hfe-dropdown .menu-item a.hfe-menu-item, .elementor-8 .elementor-element.elementor-element-10f46c8 nav.hfe-dropdown .menu-item a.hfe-sub-menu-item {
        background: #000 !important;
         color: #fff !important;
    }
    #homemobilebanner .elementor-background-slideshow__slide__image {
        background: url(http://www.stylenabyjoel.com/wp-content/uploads/2020/06/banner-mobile.jpg) !important;
        background-size: cover !important;
        background-position: center bottom !important;
    }
    .container-stylists .image {
        --width: 12;
    }
    #ct-socialis-fixed.ct-socials {
        top: auto;
        bottom: 0;
    }
        
    .container-stylists .content {
          --width: 12;
    }


    .stylist-desc p {
        font-size: 12px;
    }
    #wptime-plugin-preloader {
    -moz-background-size: 100%;
    -o-background-size: 100%;
    -webkit-background-size: 100%;
    background-size: 100%;
    }
    #stylena-logo-here {
    background: url('http://www.stylenabyjoel.com/wp-content/themes/stylena/img/logo-loader-no-border.png') no-repeat 0 39%;
    height: 100vh;
    width: 180px;
    background-size: 100%;
    margin: 0 auto;
    }
    .eael-contact-form.eael-wpforms.eael-contact-form-align-default {
        margin-left:80px;
    }
    #ourlocations-box-line-inner {
        padding: 20px;
    }
    
    #our-services-tab .elementor-tabs-wrapper {
        display: none;
    }
    #line-to-promotions-border, #line-to-services-border {
        display: none;
    }
    
    #team-carousel .ha-slick-content, .hajs-slick.ha-slick {
        text-align: center;
    }
    #team-carousel {
        padding: 30px 0px;
    }
    #singapore-leading::before {
        top: 9px;
        left: 10px;
    } 
    
   #singapore-leading::after {
        top: 9px;
        left: 10px;
    }
    
    #singapore-leading .after, #singapore-leading .before {
        left: 10px;
    }

    #singapore-leading.hover .before{
        border: 2px solid #000;
        animation: animatesingaporebefore_mobile 2s linear forwards;
    }
    
    #singapore-leading.hover .after{
        border: 2px solid #000;
        animation: animatesingaporeafter_mobile 2s linear forwards;
    }
    
    
    #singapore-leading-to-promotions-mobile-line {
        content: '';
        position: absolute;
        z-index: -999;
        top:-20px;
        right: 30px;
        overflow: hidden;
    }
    
    #singapore-leading-to-promotions-mobile-line.hover {
        border: 2px solid #000;
        animation: animatetopromotionmobile 5s linear forwards;
    }
    
    #line-from-signup-to-services-mobile {
        content: '';
        position: absolute;
        z-index: -999;
        top:-20px;
        right: 30px;
        overflow: hidden;
    }
    
    #line-from-signup-to-services-mobile.hover {
        border: 2px solid #000;
        animation: animatetopromotionmobile 5s linear forwards;
    }
    
    /* promotions */
    #signup-box-line .before, #signup-box-line .after{
        top: 20px;
        left: -20px;
    }
        
    #signup-box-line.hover .before,  #signup-box-line.hover .after{
        border: 2px solid #000;
    }
    
    #line-from-signup-to-services-mobile{
        content: '';
        position: absolute;
        z-index: -999;
        top:-20px;
        right: 30px;
        overflow: hidden;
    }
    #line-from-signup-to-services-mobile {
        border: 2px solid #000;
        animation: line-from-signup-to-services-mobile 2s linear forwards;
    }

    
    /* services */
    #services-box-line {
        padding: 30px 30px 45px;
    }
    
    #services-box-line.hover .before, #services-box-line.hover .after{
        border: 2px solid #000;
    }
     
     
     #line-to-stylists-border {
      right: 20%;   
     }
    /* our stylists */
    #ourstylists-box-line {
        padding:0 20px;
    }
    #ourstylists-box-line .before, #ourstylists-box-line .after{
        top: 0;
        padding: 0px;
        left: -10px;
    }
    
    #ourstylists-box-line.hover .before, #ourstylists-box-line.hover .after {
        border: 2px solid #000;
    }
    
    #ourstylists-box-line.hover .before{
        animation: animateourstylistsboxbefore_mobile 2s linear forwards;  
    }
    #ourstylists-box-line.hover .after{
        animation: animateourstylistsboxafter_mobile 2s linear forwards;  
    }
    
    #line-to-our-locations-border.hover {
        animation: animatelinetoourlocations_mobile 2s linear forwards;   
    }


    #homepage-gallery-inner {
        padding: 10px;
    }
    #homepage-gallery .before,  #homepage-gallery .after {
        left: -10px;
    }
    #homepage-gallery.hover .after, #homepage-gallery.hover .after {
        border: 2px solid #000;
    }
    
    /* location */
    #ourlocations-box-line {
        padding: 0 20px;
    }
    #ourlocations-box-line .before {
        
    }
}


@keyframes animatesingaporebefore_mobile {
    0%{
        width: 0;
        height: 0;
        border-top-color: #000000;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    50%{
        width: 80%;
        height: 0;
        border-top-color: #000000;
        border-right-color: #000000;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    100%{
        width: 80%;
        height: 80%;
        border-top-color: #000000;
        border-right-color: #000000;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
} 
    
@keyframes animatesingaporeafter_mobile {
    0%{
        width: 0;
        height: 0;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: #000000;
    }
    50%{
        width: 0;
        height: 80%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #000000;
        border-left-color: #000000;
    }
    100%{
        width: 80%;
        height: 80%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #000000;
        border-left-color: #000000;
    }
}


@keyframes animatetopromotionmobile {
        0%{
            width: 0;
            height: 0;
            border-top-color: transparent;
            border-right-color: #000000;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
        50%{
            width: 100%;
            height: 0;
            border-top-color: transparent;
            border-right-color: #000000;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
        100%{
            width: 100%;
            height: 640px;
            border-top-color: transparent;
            border-right-color: #000000;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
}

@keyframes line-from-signup-to-services-mobile {
        0%{
            width: 0;
            height: 0;
            border-top-color: transparent;
            border-right-color: #000000;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
        50%{
            width: 100%;
            height: 0;
            border-top-color: transparent;
            border-right-color: #000000;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
        100%{
            width: 100%;
            height: 413px;
            border-top-color: transparent;
            border-right-color: #000000;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
}


@keyframes animateourstylistsboxbefore_mobile {
    0%{
        width: 0;
        height: 0;
        border-top-color: #000000;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    50%{
        width: 75%;
        height: 0;
        border-top-color: #000000;
        border-right-color: #000000;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    100%{
        width: 106%;
        height: 100%;
        border-top-color: #000000;
        border-right-color: #000000;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}   

@keyframes animateourstylistsboxafter_mobile {
    0%{
        width: 0; 
        height: 0;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: #000000;
    }
    50%{
        width: 75%;
        height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #000000;
        border-left-color: #000000;
    }
    100%{
        width: 106%;
        height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #000000;
        border-left-color: #000000;
    }
}


@keyframes animatelinetoourlocations_mobile {
    0%{
        width: 0;
        height: 0;
        border-top-color: transparent;
        border-right-color: #000000;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    50%{
        width: 100%;
        height: 0;
        border-top-color: transparent;
        border-right-color: #000000;
        border-bottom-color: transparent;
        border-left-color: transparent;
    } 
    100%{
        width: 100%;
        height: 535px;
        border-top-color: transparent;
        border-right-color: #000000;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}