/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .content .content-item p {
        padding: 25px 50px;
    }

    .about .path1 {
        display: block;
        left: -25px;
        top: -250px;
    }

    .about .path2 {
        display: block;
        right: -25px;
        bottom: -250px;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .cases .cases-holder {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        align-content: space-between;
        gap: 0px 15px;
        flex-wrap: wrap;
        
    }

    .contato .divisor {
        float: none !important;
        position: relative !important;
        top: 0px !important;
        margin: auto !important;
    }   
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    /* header */
    .logo-menu-holder nav {
        display: flex;
    }

    .mobile-menu-btn,
    .mobile-menu-nav-holder {
        display: none;
    }

    /* hero */
    .hero {
        padding: 50px 0px;
    }

    .hero p {
        padding-right: 15px;
    }

    .hero .logo-juntas {
        width: 65%;
        position: relative;
        left: -15px;
    }

    /* about */
    .about {
        text-align: left;
        padding-top: 75px;
    }

    .about .divisor {
        width: 20%;
        float: left;
        position: relative;
        top: 30px;
    }

    .about h4 {
        font-size: 30px;
        float: left;
        margin-left: 15px;
        padding-bottom: 0px;
    }

    .about .photo-holder {
        height: 590px;
    }

    .about .path1 {
        display: block;
        left: -50px;
        top: -350px;
    }

    .about .path2 {
        display: block;
        right: -50px;
        bottom: -200px;
    }

    .about .about-effect-holder {
        margin-top: 100px;
    }

    /* services */
    .services {
        padding-bottom: 75px;
    }

    .services h4 {
        font-size: 30px;
    }

    .services .services-heading {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .services .audraclinica {
        width: 100%;
        max-width: 650px;
    }

    .services .services-holder {
        justify-content: start;
        align-items: end;
    }

    .services .services-holder .service {
        width: 25%;
        padding: 50px 25px;
    }

    .services h5 {
        font-size: 24px;
    }

    .services .services-holder .service img {
        width: 45%;
    }

    .services .services-holder .service img.lavieen {
        position: relative;
        left: -25px;
    }
    
    .services .services-holder .service .divisor {
        margin: auto;
        width: 50%;
    }

    .services button {
        width: 25%;
    }

    /* about services */
    .about-services {
        background-color: #ccc;
        padding-bottom: 50px;
    }

    .about-services .bg-white {
        background-color: #fff;
        padding: 15px 25px 25px;
    }

    .about-services .divisor {
        width: 85%;
        position: relative;
        left: 0px;
    }

    .about-services h2 {
        text-align: left;
    }

    /* cases */
    .content .content-heading {
        padding-top: 100px;
    }

    .cases .divisor,
    .content .divisor {
        width: 20%;
        float: left;
        position: relative;
        top: 30px;
    }

    .cases h2,
    .content h2 {
        text-align: left;
    }

    .cases ul,
    .content ul {
        padding-left: 10px;
    }

    .cases button,
    .content button {
        float: left;
        margin-left: 15px;
    }

    /* content */

    .content .content-item h2 {
        text-align: center;
        padding-top: 100px;
    }

    .content .content-heading {
        padding: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content .content-item {
        text-align: left;
    }

    .content .content-item p {
        padding: 15px 0px;
    }

    .content .content-item img {
        width: 100%;
    }

    .content .divisor {
        width: 25%;
        top: 8px;
        left: 15px;
        margin-right: 15px;
    }

    .content .content-holder {
        padding: 0px;
    }

    .content .divisor.cirurgico {
        left: 0px;
    }

    .content .pos-cirurgia {
        height: 300px;
    }

    .content .pos-cirurgia img {
        position: relative;
        top: -25%;
    }

    .content .agendamentos {
        text-align: center;
    }

    .content .agendamentos button {
        float: right;
    }

    .content .transplante-capilar-break {
        padding-top: 75px;
    }

    .content .mosaico {
        margin-top: 50px;
    }

    .content .feedback-item {
        padding-top: 25px;
    }

    .content.interna .content-heading h3 {
        text-align: left;
    }

    .content.interna p {
        padding: 15px 20px;
    }

    .content.interna .divisor.auto {
        margin-right: 25px;
        width: 25%;
    }

    .content.interna .divisor.feedback {
        float: none;
        position: inherit;
        margin: 25px auto;
    }

    .content.tratamentos_esteticos h2 {
        text-align: center;
    }

    .content.tratamentos_esteticos .divisor {
        float: none;
        margin: 25px auto !important;
    }

    .content.tratamentos_esteticos .divisor.conheca-profissionais {
        width: 12%;
    }

    .content.tratamentos_esteticos .divisor.doutora {
        width: 29%;
    }

    .content.contato .divisor {
        left: auto;
    }

    /* contact */
    .contact h2 {
        font-size: 72px;
    }

    .contact h5 {
        font-size: 30px;
    }

    .contact-heading {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .contact .contact-holder .contact-item:nth-child(1) {
        width: 100%;   
    }

    /* footer */
    footer .logo-footer {
        left: -25px;
    }

    footer .footer-holder .footer-item {
        width: 33.3%;
    }

    footer .footer-holder .footer-item:nth-child(1) {
        width: 35%;
    }

    footer .footer-holder .footer-item:nth-child(2) {
        width: 25%;
    }

    footer .footer-holder .footer-item:nth-child(3) {
        width: 40%;
    }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .content .agendamentos button {
        float: none;
    }

    .content.tratamentos_esteticos .padding-top {
        padding-top: 75px;
    }

    .about .path2 {
        display: block;
        right: -50px;
        bottom: -275px;
    }
}