/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Sep 04 2023 | 15:02:10 */
*{

    margin: 0;

    padding: 0;

}

.titulo{

    left: 2%;

    position: absolute;

    color: white;

    font-weight: 700;      

}

.subtitulo{

    left: 0%;

    padding: 1% 1% 1% 6%;

    position: absolute;

    background-color: rgba(44, 71, 89, 0.8);

    border-radius: 0px 10px 10px 0px;

    color: white;

    font-weight: 600;

}

.coleta-header{

    width: 100%;

}

.header-container.img{

    background-image: url('https://www.segmedic.com.br/coleta/images/header.png');

    background-repeat: no-repeat;

    position: relative;

    background-size: 100%;

}

.coleta-exames{

    width: 100%;

    background-color: #2C4759;

    display: flex;

    align-items: center;

    flex-direction: column;

    color: white;

}

.coleta-exames h3{

    text-align: center;

}

.coleta-exames span{

    width: 30px;

    height: 30px;

}

.horarios{

    position: relative;

    background-color: #2C4759;

    color: white;

    border-radius: 10px;

    text-align: center;

}

.agendamento{

    position: relative;

}

.agendamento button{

    background-color: #8CBEC7;

    color: #2C4759;

    font-weight: 600;

    border: none;

    transition: all ease 0.3s;

    border-radius: 100px;

}

.agendamento button:hover{

    background-color: #FEFCAD;

    transition: all ease 0.3s;

}

.setinha{

    width: 30px;

    height: 30px;

    background-repeat: no-repeat;

}

.cartao{

    position: relative;

    text-align: center;

    background-color: #2C4759;

    color: white;

    border-radius: 10px;

}

.icone-abs{

    padding: 0;

    width: 60px;

    height: 60px;

    border-radius: 30px;

    background-color: #89BCC6;

    position: absolute;

    top: -20px;

    left: -20px;

}

.coleta-regioes{

    width: 100%;

    background-image: url("https://www.segmedic.com.br/coleta/images/mapa.png");

}

.coleta-regioes h2{

    width: 70%;

    margin: 0 auto;

    text-align: center;

    color:#2C4759;

}

.coleta-regioes p{

    text-align: center;

    margin: 0 auto;

    color: #2C4759;

    width: 80%;

    font-weight: 700;

    font-size: 16px;

}

.btn-regioes{

    border: none;

    cursor: pointer;

    text-decoration: none;

    color: #2C4759;

    font-weight: 500;

    background-image: url("https://www.segmedic.com.br/coleta/images/icon-local.png");

    background-repeat: no-repeat;

    background-position: 5%;

    background-color: white;

    border-radius: 8px;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);

    transition: all ease .2s;

}

.btn-regioes:hover{

    background-color: white;

    transition: all ease .2s;

    transform: scale(1.1,1.1);

    color: #2C4759;

}

.btn-regioes:focus{

    background-color: white;

    color: #2C4759;

}

.coleta-informes h2{

    text-align: center;

}

.coleta-informes{

    background-color: #2C4759;

    color: white;

}

.coleta-galeria{

    width: 100%;

    background-color: #89BCC6;

    background-image: url('https://www.segmedic.com.br/coleta/images/segmedic.png');

    background-repeat: no-repeat;

    padding: 5% 0;

}

.coleta-galeria p{

    width: 90%;

    font-size: 25px;

    font-weight: 700;

    margin: 0 auto;

    color:#2C4759;

    text-align: center;

}

.coleta-clubflex{

    position: relative;

}

.btn-whatsapp{

    font-weight: 700;

    position: absolute;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58.14%, rgba(0, 0, 0, 0.2) 100%), #24CE63;

    border: none;

    border-radius: 100px;

    color: white;

    background-image: url("https://www.segmedic.com.br/coleta/images/whatsappinho.png");

    background-repeat: no-repeat;

    background-position: 20%;

    transition: all ease 0.3s;

}

.btn-whatsapp:hover{

    background: #25D366;

    background-image: url("https://www.segmedic.com.br/coleta/images/whatsappinho.png");

    background-repeat: no-repeat;

    background-position: 20%;

    transition: all ease 0.3s;

}

.btn-site{

    font-weight: 500;

    position: absolute;

    border-radius: 100px;

    color: white;

    border:  2px solid white;

    background: none;

    transition: all ease 0.3s;

}

.btn-site:hover{

    background-color: white;

    color: #2C4759;

    transition: all ease 0.3s;

}

 

@media screen and (min-width: 360px) {

    .espaco-topo{

        margin-top: 5%;

    }

    .titulo{

        width: 60%;

        top: 40%;

        left: 2%;

    }

    .subtitulo{

        top: 60%;

    }

    .coleta-exames{

        gap: 10%;

        padding-top: 5%;

    }

    .coleta-exames span{

        padding-bottom: 10%;

    }

    .header-container.img{

        width: 100%;

        height: 260px;

        background-size: 200%;

    }

    .header-container.sobre{

        margin: 0 auto;

        width: 90%;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

    }

    .horarios{

        margin: 7% auto;

        width: 80%;

        padding: 8% 0;

    }

    .horarios h3{

        margin-bottom: 4%;

    }

    .horarios .icone-abs img{

        margin-top: 5px;

    }

    .agendamento{

        margin: 3% auto 10%;

        width: 90%;

 

    }

    .agendamento button{

        font-size: 17px;

        padding: 4% 6%;

        width: 90%;

    }

    .agendamento > a {

        display: flex;

        align-items: center;

        justify-content: center;

        text-decoration: none;

    }

    .coleta-funcionamento{

        padding: 10% 0;

    }

    .funcionamento-cartoes{

        display: flex;

        flex-direction: column;

        gap: 3rem;

    }

    .coleta-funcionamento h2{

        margin: 0 auto 8%;

        width: 80%;

        color:#2C4759;

        text-align: center;

    }

    .cartao{

        padding: 8% 3%;

        width: 80%;

        margin: 0 auto;

    }

    .setinha{

        position: absolute;

        left: 47.5%;

        bottom: -25%;

        margin: 4% auto 1%;

        background-image: url('https://www.segmedic.com.br/coleta/images/seta-baixo.png');

    }

    .coleta-regioes{

        width: 100%;

        max-width: 100%;

        padding: 5% 0;

    }

    .coleta-botoes{

        max-width: 100%;

        display: flex;

        flex-flow: row wrap;

        justify-content:space-evenly;

    }

    .btn-regioes{

        margin: 4% 0;

        padding: 2% 2% 2% 10%;

    }

    .coleta-informes{

        padding: 6% 4%;

        display: flex;

        flex-direction: column;

        gap: 2rem;

    }

    .informe-informacoes p{

        margin-top: 5%;

    }

    .informe-informacoes b{

        color: #FEFCAD;

    }

    .informe-exames h4{

        margin-top: 8%;

    }

    .informe-exames p{

        margin-top: 2%;

    }

    .clubflex-desktop{

        display: none;

    }

    .clubflex-mobile{

        position: relative;

        width: 330px;

        margin: 15% auto 0;

    }

    .cartoes-mobile{

        position: absolute;

        top: -55px;

        left: 40px;

        transition: all ease 0.5s;

    }

    .cartoes-mobile:hover{

        transform: scale(1.1,1.1);

        transition: all ease 0.5s;

    }

    .btn-whatsapp{

        bottom: 25px;

        right: 10px;

        width: 150px;

        padding: 2.5% 3% 2.5% 10%;

    }

    .btn-site{

        bottom: 25px;

        left: 15px;

        width: 150px;

        padding: 2% 3%;

    }

    .coleta-galeria{

        background-position: -20%;

    }

    .carousel.slide{

        padding: 5%;

    }

    .carousel{

        margin: 0 auto;

    }

    .my-slider{

        display: none;

    }

    #tns1-ow.tns-outer{

        display: none;

    }

}

@media screen and (min-width: 480px) {

    .coleta-galeria{

        background-size: 60%;

    }

}

@media screen and (min-width: 600px) {

    .header-container.img{

        height: 350px;

    }

    .horarios{

        width: 60%;

    }

    .agendamento{

        width: 65%;

    }

    .cartao{

        width: 60%;

    }

    .btn-regioes{

        padding: 2% 2% 2% 6%;

    }

    .carousel{

        width: 80%;

        height: 80%;

    }

}

 

@media screen and (min-width: 800px) {

    .header-container.img{

        height: 400px;

    }

    .horarios{

        width: 50%;

    }

    .agendamento{

        width: 55%;

    }

    .cartao{

        width: 50%;

    }

    .coleta-botoes{

        width: 70%;

        margin: 2% auto;

    }

    .btn-regioes{

        margin: 3% 0.2%;

        padding: 1.5% 1.5% 1.5% 6%;

    }

    .setinha{

        bottom: -22%;

    }

    .carousel{

        width: 70%;

        height: 70%;

    }

}

 

@media screen and (min-width: 1024px) {

    .titulo{

        font-size: 30px;

    }

    .subtitulo{

        top: 65%

    }

    .coleta-header{

        display: flex;

        flex-direction: row;

    }

    .header-container.img{

        width: 50%;

        height: 600px;

        background-size: cover;

        background-position: 25%;

    }

    .header-container.sobre{

        width: 50%;

        height: 500px;

    }

    .horarios{

        width: 50%;

        padding: 2%;

        margin: 1% auto;

    }

    .espaco-topo{

        margin-top: 1%;

    }

    .agendamento{

        margin: 2% auto 4%;

        width: 50%;

    }

    .coleta-exames{

        padding: 2% 0 1%;

        height: 160px;

        gap: 2%;

    }

    .coleta-exames span{

        padding: 0;

    }

    .coleta-funcionamento{

        padding: 5%;

    }

    .funcionamento-cartoes{

        display: flex;

        flex-direction: row;

        position: relative;

        width: 80%;

        margin: 0 auto;

        gap: 2rem;

    }

    .cartao{

        padding: 4% 2% 2%;

        width: 30%;

    }

    .setinha{

        position: absolute;

        background-image: url("https://www.segmedic.com.br/coleta/images/seta-direita.png");

        left: 105%;

        top: 40%;

    }

    .coleta-regioes{

        padding: 3% 0;

    }

    .coleta-botoes{

        width: 60%;

        margin: 2% auto;

    }

    .btn-regioes{

        margin: 2% .5%;

        padding: 2% 2% 2% 6%;

    }

    .coleta-informes{

        padding: 6% 4%;

        display: flex;

        flex-direction: row;

    }

    .clubflex-mobile{

        display: none;

    }

    .cartoes-mobile{

        display: none;

    }

    .cartoes-desktop{

        position: absolute;

        top: -55px;

        left: -80px;

        transition: all ease 0.5s;

    }

    .cartoes-desktop:hover{

        transform: scale(1.1,1.1);

        transition: all ease 0.5s;

    }

    .coleta-informes h2{

        text-align: start;

    }

 

    .clubflex-desktop{

        margin: 10% 0 5%;

        display: block;

        position: relative;

        width: 440px;

    }

    .club-pc{

        width: 100%;

        max-width: 100%;

    }

    .btn-whatsapp.desktop{

        padding: 2% 3% 2% 10%;  

        right: 10px;

        bottom: 10px;

    }

    .btn-site.desktop{

        padding: 2% 3%;  

        left: 130px;

        bottom: 10px;

    }

    .informe-informacoes{

        width: 40%;

    }

    .informe-exames{

        width: 40%;

    }

    .coleta-informes{

        justify-content: center;

        gap: 8rem;

    }

    .coleta-galeria{

        background-position: -15%;

        background-size: 40%;

    }

    .coleta-galeria p{

        font-size: 30px;

    }

    .carousel{

        width: 60%;

        height: 60%;

    }

}

@media screen and (min-width: 1280px) {

    .titulo{

        font-size: 40px;

    }

    .subtitulo{

        top: 70%;

    }

    .header-container.img{

        background-position: 18%;

    }

    .informe-informacoes{

        width: 40%;

    }

    .informe-exames{

        width: 30%;

    }

    .clubflex-desktop{

        width: 450px;

    }

    .btn-whatsapp.desktop{

        right: 15px;

    }

    .coleta-informes{

        justify-content: center;

        gap: 8rem;

    }

    .agendamento{

        margin-bottom: 5%;

    }

    .coleta-exames{

        padding-bottom: 7%;

    }

    .coleta-botoes{

        width: 40%;

    }

    .btn-regioes{

        padding: 1% 1% 1% 7%;

    }

    .coleta-galeria{

        background-size: 30%;

        background-position: 0%;

    }

    .coleta-galeria p{

        margin-top: -3%;

        margin-bottom: 4%;

        font-size: 40px;

    }

    .carousel{

        display: none;

    }

    .my-slider{

        display: block;

    }

    #tns1-ow.tns-outer{

        display: block;

    }

    .tns-outer{

        width: 90%;

        margin: 0 auto;

        position: relative;

    }

    .tns-controls{

        position: absolute;

        left: 50%;

        bottom: -15%;

    }

    .tns-controls button{

        width: 40px;

        height: 40px;

        background: none;

        border: none;

    }

    .tns-controls [data-controls = "prev"]{

        background-image: url("https://www.segmedic.com.br/coleta/images/icon-voltar.png");

    }

    .tns-controls [data-controls = "next"]{

        background-image: url("https://www.segmedic.com.br/coleta/images/icon-avancar.png");

    }

    .tns-controls [data-controls = "prev"]:hover{

        background: none;

        background-image: url("https://www.segmedic.com.br/coleta/images/icon-voltar.png");

    }

    .tns-controls [data-controls = "prev"]:focus{

        background: none;

        background-image: url("https://www.segmedic.com.br/coleta/images/icon-voltar.png");

    }

    .tns-controls [data-controls = "next"]:hover{

        background: none;

        background-image: url("https://www.segmedic.com.br/coleta/images/icon-avancar.png");

    }

    .tns-controls [data-controls = "next"]:focus{

        background: none;

        background-image: url("https://www.segmedic.com.br/coleta/images/icon-avancar.png");

    }

 

}