@import url(reset.css);

@font-face {
    font-family: avenirBlack;
    src: url(AvenirLTStd-Black.otf);
}

@font-face {
    font-family: avenirLight;
    src: url(AvenirLight.ttf);
}

body{
    font-family: 'avenirBlack';
    font-size: 1.5vh;
    cursor: default;
}

.container{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/*up*/

header{
    position: relative;
}

.logo{
    width: 15vh;
    height: 10vh;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/logo.png);
    cursor: pointer;
}

.up{
    background-color: white;
    width: 100%;
    height: 10vh;
}

.up .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.up__div{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.up__menu{
    font-size: 1.5vh;
    color: #3E7573;
    padding-left: 2vh;
    line-height: 10vh;
    cursor: pointer;
}

.up__menu:hover{
    color: #98999B;
}

.up__menu2{
    font-size: 1.5vh;
    color: white;
    margin-left: 2vh;
    cursor: pointer;
    background-color: #98999B;
    padding: 1vh 1vh;
}

.up__menu2:hover{
    background-color: #3E7573;
}

.up__mobile{
    display: none;
}

/*banner*/

.banner{
    width: 100%;
    height: 60vh;
    position: relative;
}

.banner__lista{
    width: 100%;
    height: 60vh;
}

.banner__item{
    width: 100%;
    height: 60vh;
}

.banner__imagem{
    position: relative;
    width: 100%;
    height: calc(60vh - 30px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner__fundo{
    position: absolute;
    width: 100%;
    height: calc(60vh - 30px);
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.6);
    z-index: 1;
}

.banner__info{
    position: absolute;
    width: 100%;
    height: calc(60vh - 30px);
    top: 0px;
    left: 0px;
    z-index: 2;
}

.banner__info .container{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    height: calc(60vh - 30px);
}

.banner__texto{
    color: white;
    font-size: 5vh;
    line-height: 5.5vh;
}

.banner__texto2{
    color: white;
    font-size: 3vh;
    line-height: 3.5vh;
}

.banner__texto3{
    color: white;
    font-size: 7vh;
    line-height: 7.5vh;
    font-family: 'avenirLight';
}

.banner__ico{
    position: absolute;
    width: 100%;
    height: 20vh;
    bottom: 0px;
    left: 0px;
    z-index: 3;
}

.banner__ico .container{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    height: 20vh;
}

.banner__ico__img{
    width: 60vh;
    height: 20vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.banner2{
    width: 100%;
    height: 50vh;
    position: relative;
}

.banner__lista2{
    width: 100%;
    height: 50vh;
}

.banner__item2{
    width: 100%;
    height: 50vh;
}

.banner__imagem2{
    position: relative;
    width: 100%;
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner__fundo2{
    position: absolute;
    width: 100%;
    height: 50vh;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.6);
    z-index: 1;
}

.banner__info2{
    position: absolute;
    width: 100%;
    height: 50vh;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.banner__info2 .container{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    height: 50vh;
}

.banner__texto3{
    color: white;
    font-size: 7vh;
    line-height: 7.5vh;
    font-family: 'avenirLight';
}

.flickity-page-dots{
    bottom: 50px !important;
}

.flickity-page-dots .dot{
    background: white !important;
    width: 15px !important;
    height: 15px !important;
}

.flickity-page-dots .dot.is-selected{
    background: white !important;
}

/*sobre*/

.sobre{
    padding: calc(8vh - 30px) 0 8vh 0;
    position: relative;
}

.sobre__titulo{
    text-align: center;
    font-size: 4vh;
    color: #3E7573;
    margin-bottom: 1vh;
}

.sobre__subtitulo{
    text-align: center;
    font-size: 2vh;
    color: #3E7573;
    margin-bottom: 3vh;
    font-family: 'avenirBlack';
}

.sobre__imagem{
    position: relative;
    width: 100%;
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../uploads/sobre.png');
}

.sobre__info{
    position: absolute;
    width: 40%;
    bottom: -10px;
    left: 35%;
}

.sobre__texto{
    font-family: 'avenirBlack';
    text-align: left;
    font-size: 1.5vh;
    color: #999999;
    line-height: 2vh;
}

.sobre__barra{
    position: absolute;
    width: 100%;
    top: calc(10vh - 30px);
    left: 0px;
    height: 1px;
}

.sobre__barra .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sobre__barra__barra{
    width: 20vh;
    background-color: #3E7573;
    height: 1px;
}

/*dentistas*/

.dentistas{
    position: relative;
    padding: 8vh 0 8vh 0;
    background-color: #3E7573;
}

.dentistas__titulo{
    text-align: center;
    font-size: 4vh;
    color: white;
    margin-bottom: 1vh;
    font-family: 'avenirLight';
}

.dentistas__subtitulo{
    text-align: center;
    font-size: 2vh;
    color: white;
    margin-bottom: 5vh;
    font-family: 'avenirLight';
}

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

.dentistas__botao{
    background-color: #3E7573;
    color: white;
    border: 1px solid white;
    padding: 2vh 3vh 1.5vh 3vh;
    margin: 0 3vh;
    cursor: pointer;
    font-family: 'avenirLight';
    font-size: 2vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dentistas__botao i{
    font-size: 3vh;
    margin-right: 2vh;
}

.dentistas__botao:hover{
    background-color: white;
    color: #3E7573;
}

.dentistas__barra{
    position: absolute;
    width: 100%;
    top: 10vh;
    left: 0px;
    height: 1px;
}

.dentistas__barra .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dentistas__barra__barra{
    width: 20vh;
    background-color: white;
    height: 1px;
}

/*servicos*/

.servicos{
    position: relative;
    padding: 8vh 0 8vh 0;
    background-color: #ffffff;
}

.servicos__titulo{
    text-align: center;
    font-size: 4vh;
    color: #3E7573;
    margin-bottom: 1vh;
    font-family: 'avenirLight';
}

.servicos__barra{
    position: absolute;
    width: 100%;
    top: 10vh;
    left: 0px;
    height: 1px;
}

.servicos__barra .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.servicos__barra__barra{
    width: 20vh;
    background-color: #3E7573;
    height: 1px;
}

.servicos__div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5vh;
}

.servicos__slide{
    width: 50%;
    position: relative;
    height: 55vh;
}

.servicos__slide1{
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 60%;
    left: 45%;
    top: 15vh;
    height: 40vh;
    z-index: 99;
    border-radius: 1vh;
}

.servicos__slide2{
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 60%;
    left: 30%;
    top: 10vh;
    height: 40vh;
    z-index: 88;
    border-radius: 1vh;
}

.servicos__slide3{
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 60%;
    left: 15%;
    top: 5vh;
    height: 40vh;
    z-index: 77;
    border-radius: 1vh;
}

.servicos__slide4{
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 60%;
    left: 0%;
    top: 0;
    height: 40vh;
    z-index: 66;
    border-radius: 1vh;
}

.servicos__info{
    width: 40%;
    position: relative;
    height: 55vh;
}

.servicos__left{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 4vh;
    color: #3E7573;
    cursor: pointer;
}

.servicos__left:hover{
    color: #eeeeee;
}

.servicos__right{
    position: absolute;
    left: 5vh;
    top: 0;
    font-size: 4vh;
    color: #3E7573;
    cursor: pointer;
}

.servicos__right:hover{
    color: #eeeeee;
}

.servicos__texto{
    text-align: left;
    font-size: 4vh;
    color: black;
    font-family: 'avenirBlack';
    margin-top: 15vh;
}

.servicos__subtexto{
    text-align: left;
    font-size: 2vh;
    color: black;
    font-family: 'avenirLight';
    margin-top: 1vh;
    line-height: 2.5vh;
}

.servicos__botao{
    margin-top: 1vh;
}

.servicos__botao button{
    background-color: #3E7573;
    color: white;
    padding: 1vh 2vh;
    font-family: 'avenirLight';
    font-size: 1.8vh;
    cursor: pointer;
    border: 0;
}

.servicos__botao button:hover{
    background-color: #eeeeee;
    color: #3E7573;
}

/*box*/

.box{
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 998;
}

.box__conteudo{
    display: none;
    position: fixed;
    left: 10%;
    right: 10%;
    bottom: 10%;
    top: 10%;
    background-color: white;
    padding: 2vh;
    text-align: left;
    font-size: 1.5vh;
    color: black;
    font-family: 'avenirLight';
    line-height: 2vh;
    z-index: 999;
}

.box__conteudo span{
    font-size: 2vh;
}

/*convenios*/

.convenios{
    position: relative;
    padding: 8vh 0 0 0;
    background-color: #eeeeee;
}

.convenios__titulo{
    text-align: center;
    font-size: 4vh;
    color: #3E7573;
    margin-bottom: 1vh;
    font-family: 'avenirLight';
}

.convenios__barra{
    position: absolute;
    width: 100%;
    top: 10vh;
    left: 0px;
    height: 1px;
}

.convenios__barra .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.convenios__barra__barra{
    width: 20vh;
    background-color: #3E7573;
    height: 1px;
}

.convenios2{
    position: relative;
    padding: 0;
    background-color: #ffffff;
}

.convenios2 .container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.convenios2 .convenios__titulo{
    text-align: left;
}

.convenios__div{
    width: 50%;
    padding: 12vh 5vh 12vh 0;
}

.convenios__texto{
    font-family: 'avenirLight';
    font-size: 2vh;
    color: black;
    line-height: 2.5vh;
    margin-top: 5vh;
    width: 60%;
}

.convenios__texto span{
    font-family: 'avenirBlack';
    font-size: 2vh;
    color: black;
    line-height: 2.5vh;
}

.convenios__slide{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
}

.convenios__lista{
    width: 100%;
    height: 100%;
}

.convenios__item{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.convenios__left{
    position: absolute;
    left: 2vh;
    bottom: 2vh;
    font-size: 4vh;
    color: white;
    cursor: pointer;
}

.convenios__left:hover{
    color: #3E7573;
}

.convenios__right{
    position: absolute;
    left: 7vh;
    bottom: 2vh;
    font-size: 4vh;
    color: white;
    cursor: pointer;
}

.convenios__right:hover{
    color: #3E7573;
}

.convenios__logos{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4vh;
    padding-bottom: 8vh;
}

.convenios__logos__item{
    position: relative;
    background-color: #ABADB1;
    border-radius: 100%;
    width: 10vh;
    height: 10vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 1vh;
    cursor: pointer;
}

.convenios__logos__item div{
    background-color: #ffffff;
    width: 10vh;
    height: 10vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    opacity: 0;
    transition: all 0.5s ease;
}

.convenios__logos__item:hover div{
    opacity: 1;
}

.convenios__fundo{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 5vh;
    background-image: linear-gradient(to top, rgba(238,238,238,0.3), rgba(62,117,115,0.3));
}

/*depoimentos*/

.depoimentos{
    position: relative;
    padding: 8vh 0 8vh 0;
    background-color: #eeeeee;
}

.depoimentos__titulo{
    text-align: center;
    font-size: 4vh;
    color: #3E7573;
    margin-bottom: 1vh;
    font-family: 'avenirLight';
}

.depoimentos__barra{
    position: absolute;
    width: 100%;
    top: 10vh;
    left: 0px;
    height: 1px;
}

.depoimentos__barra .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.depoimentos__barra__barra{
    width: 20vh;
    background-color: #3E7573;
    height: 1px;
}

.depoimentos__div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-top: 3vh;
}

.depoimentos__lista{
    width: 90%;
}

.depoimentos__item{
    width: calc(50% - 1vh);
    margin-right: 2vh;
    background-color: #ffffff;
    padding: 2vh;
    box-sizing: border-box;
    border-radius: 2vh;
}

.depoimentos__texto{
    font-family: 'avenirLight';
    font-size: 1.5vh;
    color: black;
    text-align: center;
    line-height: 150%;
}

.depoimentos__nome{
    font-family: 'avenirLight';
    font-size: 2vh;
    color: black;
    margin-top: 1vh;
    font-weight: bold;
    text-align: center;
}

.depoimentos__left{
    font-size: 4vh;
    color: #3E7573;
    cursor: pointer;
}

.depoimentos__left:hover{
    color: #ffffff;
}

.depoimentos__right{
    font-size: 4vh;
    color: #3E7573;
    cursor: pointer;
}

.depoimentos__right:hover{
    color: #ffffff;
}

.depoimentos__info{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 2vh;
    margin-bottom: 2vh;
    border-bottom: 1px solid #dddddd;
}

.depoimentos__imagem{
    width: 5vh;
    height: 5vh;
    border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 2vh;
    line-height: 5vh;
    text-align: center;
    font-size: 5vh;
    color: #cccccc;
}

.depoimentos__nota{
    margin-bottom: 1vh;
}

.depoimentos__nota i{
    margin-right: 1vh;
    color: #eeeeee;
}

.depoimentos__nota i.active{
    color: orange;
}

/*contatos*/

.contatos{
    position: relative;
    padding: 0;
    background-color: #eeeeee;
}

.contatos .container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.contatos__titulo{
    text-align: left;
    font-size: 4vh;
    color: #3E7573;
    font-family: 'avenirLight';
}

.contatos__div{
    width: 50%;
    padding: 8vh 0 8vh 5vh;
}

.contatos__unidades__item{
    margin-top: 3vh;
}

.contatos__unidades__nome{
    font-family: 'avenirBlack';
    font-size: 2vh;
    color: black;
    margin-bottom: 1vh;
    cursor: pointer;
}

.contatos__unidades__nome span{
    font-family: 'avenirLight';
    font-size: 2vh;
    color: black;
    margin-bottom: 1vh;
}

.contatos__unidades__item:hover .contatos__unidades__nome{
    color: #3E7573;
}

.contatos__unidades__endereco{
    font-family: 'avenirLight';
    font-size: 2vh;
    color: black;
    margin-bottom: 0.5vh;
}

.contatos__unidades__div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.contatos__unidades__icone{
    width: 2.5vh;
    height: 2.5vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/whatsapp.png');
    margin-right: 1vh;
}

.contatos__unidades__telefone{
    font-family: 'avenirBlack';
    font-size: 2vh;
    color: #3E7573;
    margin-top: 0.5vh;
}

.contatos__unidades__telefone, span{
    font-family: 'avenirBlack';
    font-size: 2vh;
    color: #3E7573;
    margin-top: 0.5vh;
    cursor: pointer;
}

.contatos__mapa{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    cursor: pointer;
}

.contatos__fundo{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, rgba(221,221,221,1),rgba(221,221,221,0.8), rgba(221,221,221,0));
}

/*agendamento*/

.agendamento{
    padding: 8vh 0 8vh 0;
    position: relative;
    background-color: #eeeeee;
}

.agendamento .container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.agendamento__info{
    width: 45%;
}

.agendamento__titulo{
    text-align: left;
    font-size: 4vh;
    color: #3E7573;
    font-family: 'avenirLight';
}

.agendamento__texto{
    font-family: 'avenirLight';
    font-size: 2vh;
    color: black;
    line-height: 2.5vh;
    margin-top: 5vh;
}

.agendamento__form{
    width: 45%;
    position: relative;
}

.agendamento__form2{
    transition: all 0.5s ease;
}

.agendamento__label{
    font-family: 'avenirLight';
    font-size: 1.5vh;
    color: black;
    margin-bottom: 0.5vh;
}

.agendamento__label span{
    color: red;
}

.agendamento__input{
    margin-bottom: 2vh;
}

.agendamento__input input, .agendamento__input select{
    border: 1px solid black;
    background-color: white;
    color: black;
    padding: 1vh;
    font-family: 'avenirLight';
    font-size: 1.5vh;
    box-sizing: border-box;
    width: 100%;
}

.agendamento__input textarea{
    border: 1px solid black;
    background-color: white;
    color: black;
    padding: 1vh;
    font-family: 'avenirLight';
    font-size: 1.5vh;
    box-sizing: border-box;
    height: 15vh;
    width: 100%;
}

.agendamento__div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2vh;
}

.agendamento__radio{
    width: 20%;
    font-family: 'avenirLight';
    font-size: 1.5vh;
    color: black;
}

.agendamento__botao{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.agendamento__botao button{
    background-color: #3E7573;
    color: white;
    font-family: 'avenirBlack';
    font-size: 2vh;
    padding: 1vh 2vh;
    cursor: pointer;
    border: none;
}

.agendamento__botao button:hover{
    background-color: white;
    color: #3E7573;
}

.agendamento__mensagem{
    display: none;
    position: absolute;
    width: 90%;
    left: 5%;
    top: calc(50% - 2.5vh);
    height: 5vh;
    line-height: 5vh;
    font-family: 'avenirLight';
    font-size: 2vh;
    text-align: center;
    color: white;
    background-color: #3E7573;
}

/*outros*/

.outros{
    padding: 8vh 0 8vh 0;
    position: relative;
    background-color: #eeeeee;
}

.outros__texto{
    font-family: 'avenirLight';
    font-size: 2vh;
    color: black;
    line-height: 2.5vh;
}

.outros__item{
    margin-bottom: 5vh;
}

.outros__item:last-child{
    margin-bottom: 0;
}

.outros__titulo{
    font-family: 'avenirBlack';
    font-size: 2.5vh;
    color: #3E7573;
    line-height: 3vh;
}

.outros__titulo:last-child{
    font-size: 2vh;
    line-height: 2.5vh;
}

/*footer*/

footer{
    background-color: #3E7573;
    position: relative;
    padding: 8vh 0;
}

footer .container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.footer__logo{
    width: 15%;
    z-index: 2;
}

.footer__logo__img{
    background-image: url(../img/footer_logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 5vh;
}

.footer__social{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2vh;
}

.footer__facebook, .footer__instagram, .footer__foursquare{
    background-color: #266160;
    border-radius: 20px;
    margin: 0 0.5vh;
    width: 3vh;
    height: 3vh;
    cursor: pointer;
    color: white;
    line-height: 3vh;
    text-align: center;
    font-size: 1.5vh;
}

.footer__facebook:hover, .footer__instagram:hover, .footer__foursquare:hover{
    background-color: white;
    color: #266160;
}

.footer__unidades{
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer__unidades__item{
    width: 22%;
}

.footer__unidades__nome{
    font-family: 'avenirBlack';
    font-size: 1.5vh;
    color: black;
    margin-bottom: 0.5vh;
}

.footer__unidades__endereco{
    font-family: 'avenirLight';
    font-size: 1.3vh;
    color: black;
    margin-bottom: 1vh;
}

.footer__unidades__telefone{
    font-family: 'avenirBlack';
    font-size: 1.3vh;
    color: white;
    margin-bottom: 1vh;
    cursor: pointer;
}

.footer__unidades__div{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.footer__unidades__icone{
    color: white;
    font-size: 2vh;
    margin-right: 1vh;
}

.footer__unidades__horario{
    font-family: 'avenirLight';
    font-size: 1.2vh;
    color: white;
    line-height: 1.5vh;
}

.footer__fundo{
    position: absolute;
    width: 20vh;
    height: 20vh;
    top: -7vh;
    left: -0.5vh;
    background-image: radial-gradient(rgba(255,255,255,0.5), rgba(62,117,115,0.5), rgba(62,117,115,0.5));
    z-index: 1;
}

.footer__doit{
    position: absolute;
    right: 2vh;
    bottom: 2vh;
    height: 3vh;
    width: 3vh;
    background-image: url(../img/doit.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.whatsapp{
    position: fixed;
    right: 3vh;
    bottom: 7vh;
    height: 6vh;
    width: 6vh;
    background-image: url(../img/whatsapp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}