@media only screen and (max-width: 1366px){
    .intro-mockup{
        min-width: initial;
        left: 0 !important;
    }
    .intro-mockup{
        height: 95vh;
    }
}
@media only screen and (max-height: 960px )and (min-height: 800px){
    .intro-mockup {
        left: -8% !important;
    }
}
@media only screen and (max-width: 1200px){
    .logo-desktop{
        text-align: left
    }
    .intro-title{
        font-size: 1.75em;
        margin-bottom: 15px;
    }

}

@media only screen and (max-width: 1200px){
    .logo-desktop{
        text-align: left
    }
    .intro-title{
        font-size: 1.75em;
        margin-bottom: 15px;
    }

}

@media only screen and (max-width: 1030px){
    #intro .container{
        flex-direction: column;
        justify-content: flex-end;
    }
    .intro-title{
        font-size: 2.5em;
        margin-bottom: 15px;
    }
    .intro-txt img{
        width: 45%;
    }
    .intro-txt {
        margin-left: 0%;
        align-self: center;
        margin-bottom: -50px;
    }
    .flickity-media{
        width: 100%;
    }
    .navbar ul li a{
        font-size: .875em;
    }
    .navbar ul li{
        width: 13.6vw;
    }
    .cel-img{
        display: none;
    }
    .navbar-desk{
        display: none;
    }
    .navbar-mobile{
        display: flex;
    }
    .bg--light.d-flex{
        flex-direction: column;
    }
    #trust h2, #trust h2+ p{
        text-align: center;
    }
    .trust-img{
        margin-bottom: 37px;
    }
    .trust-box{
        margin: 23px 0;
    }
 
    .sidenav{
        height: 100vh;
        position: absolute;
        top: 0;
        background-color: #fff;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.13);
        overflow: hidden;
        width: 65vw;
        transition: transform .3s;
        transform: translateX(-100%);
        z-index: 2;
    }
    .sidenav li{
        margin-top: 40px;
        padding-left: 5%;
    }
    .sidenav a{
        width: 100%;
        display: block;
        color: #18a7ec;
        font-weight: 600;
    }
    .open .sidenav{
        transform: translateX(0);
    }
    .overlay-nav{
        position: fixed;
        top: 0;
        width: 0;
    }
    .overlay-nav.open{
        background-color: rgba(0, 0, 0, 0.5);
        height: 100vh;
        width: 100%;
        opacity: 1;
    }
    .intro-mockup{
        right: 0;
        height: auto;
        position: relative;
        bottom: initial;
        width: 100%;
    }

    #como-funciona .bg--light{
        margin-top: 20%;       
        flex-direction: column-reverse;
        align-items: center;
        padding-bottom: 60px;
        max-height: none;
    }
    .mockup-fone{
        width: auto;
        transform: translateY(-10%);
    }
    #como-funciona{
        padding: 64px 0;
    }
    #como-funciona .col-md-4{
        padding: 0 15px;
    }
    .service-box{
        max-width: 524px;
    }     
}
@media only screen and (max-width: 1000px){
    .xamaeu-num{
        margin-bottom: 44px;
    }

    #intro .container{
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
    }
    #intro .container.thanks {
        max-width: 540px;
    }
    .thanks .cities {
        justify-content: center;
    }
}
@media only screen and (max-width: 768px){
    .intro-txt img{
        width: 40%;
    }
    .flickity-media{
        margin-bottom: 0;
    }
    .padding-mb{
        padding: 0 15px;
    }
    #media .padding-mb{
        padding: 0 20px;
    }
    #como-funciona .section-title{
        margin-top: 0;
    }
    .intro-txt h3{
        font-size: .875em;
        letter-spacing: 0.1px;
        margin-top: 14px;
        font-weight: 600;
    }
    
    #intro{
        height: 100vh;
        min-height: 568px;
    }
    .trust-title{
        flex-direction: column;
        margin: 0;
    }
    .five-stars{
        margin: 15px 0;
    }
    .row.bg--light{
        margin: 0;
    } 
     .five-stars img:first-child{
        margin: 0;
    }
    .trust-p{
        text-align: center;
    }    
    .border-box p{
        font-size: .875em;
        padding: 0 15px;
    }
    .border-box{
        padding: 10% 0 0;
        height: 445px;
    }
    .border-box .d-flex{
        margin-top: 5.6%;
    }
   
    .service-box{
        width: 100%;
    }
    
   .box-media{
    margin-left: 10px;
   }
    .media-container{
        padding: 10px;
    }
   
    .btn{
        max-width: 100%;
    }
   
    .benefits-container{
        flex-direction: column;
        margin-bottom: 0;
    }
    .benefits-box {
        margin: 0 auto 48px;
    }
    .prof-benefits{
        margin-top: 16px;
    }
    .prof-title{
        text-align: center;
        font-size: 2em;
        margin-bottom: 35px;
    }
    .prof-desc{
        text-align: center;
    }
    .xamaeu-values{
        margin: 0;
    }

    .intro-title{
        font-size: 1.9em;
    }
    .intro-txt{
        margin-left: 0;
    }
    .insta-container{
        width: 57.6%;   
    }
    .box-insta{
        margin-left: 15%;

    }
    .box-work{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 42px;
    }
    #como-funciona p{
        margin: 0;
        font-weight: 500;
    }

    #servicos .row{
        margin: 0;
    }
  
    .box-user{
        margin-bottom: 40px;
    }
    .user-name{
        color: #18a7ec;
    }
    .xamaeu-recomend .row{
        padding-bottom: 0; 
        position: relative;
    }
    #profissional .btn{
        margin: 0 auto;
    }
    #profissional{
        text-align: center;
        padding: 0;
    }
    .intro-title{
        padding-left: 0;
    }
    .section-title{
        font-size: 1.125em;
    }
    .service-desc{
        font-size: .875em;
        max-width: 262px;
        margin: 0 auto;
    }
    .service-name{
        font-size: 1em;
        margin-bottom: 6px;
    }
    .download-app img{
        max-width:36%;
    }
    .headroom {
        will-change: transform;
        transition: transform 150ms linear;
    }
    .headroom--pinned {
        transform: translateY(0%);
    }
    .headroom--unpinned {
        transform: translateY(-100%);
    }
    .img-profissional{
        width: 100%;
        position: relative;
        margin-top: 60px;
    }
    #profissional .container{
        padding-bottom: 0;
    }
    .border-box .img-relogio{
        width: 80%;
        bottom: 0;
        top: initial;
        transform: translate(-32%);
        max-height: 300px;
        display: block;
    }
    .img-mockup{
        width: 80%;
        max-width: 300px;
        transform: translate(50%, 50%);
        position: absolute;
        bottom: 0;
        right: 0;
    }
    #social .text-center{
        padding: 15px;
    }
    .BtnRodape {
        position: fixed;
        bottom: 0;
        width: 100%;
        align-items: center;
        color: #fff;
        z-index: 3;
        display: flex;
        justify-content: space-around;
        padding: 8px 30px 18px;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.13);
        transform: translateY(100%);
        transition: transform .3s;
        margin-bottom: -10px;
        background-image: linear-gradient(98deg, #ff9c66, #ff7a66 50%, e15114);
    }
    .BtnRodape .btn{
        color: #fff;
    }
    .BtnRodape.active{
        transform: translateY(0);
    }
    .BtnRodape img{
        width: 40%;
        max-width: 164px;
    }
    .BtnRodape h3{
        font-size: .875em;
        letter-spacing: 0.1px;
        margin: 0px;
        font-weight: 600;
    }
    .intro-mockup{
        left: 0 !important;
    }
    .intro-txt{
        text-align: center!important;
    }
}
@media only screen and (max-width:568px){
    .btn--light{
        background: #000;
        color: #fff;
    }
    .intro-title{
        font-size: 1.5em;
    }
    .intro-txt{
        margin-bottom: 0;
    }
    #intro{
        max-height: 736px;
    }
    .intro-txt img{
        width: 90px;
    }
    .mockup-fone{
        width: 50%;
        transform: translateY(-20%);
    }

    #como-funciona .bg--light{
        padding-bottom: 0;
        margin: 0;
    }
}
@media only screen and (max-width:320px){
  
    .intro-title{
        font-size: 1.5em;
    }
    #profissional .container{
        padding: 64px 0 0;
    }
    #social{
        padding: 0 15px;
    }
    .intro-txt{
        margin-bottom: -32px;
    }
    .btn{
        padding: 14px 0;
        font-size: 1em;
    }
   
}