@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400&display=swap');

/*
url(https://faviconer.net/img/generator-close.svg) center center no-repeat 16x16
font-family: 'Playfair Display', serif;
font-family: 'Source Sans Pro', sans-serif;
*/

/*** SVG COLORS ***/
.dark-yellow {
    /*Tool to generate filter to target a color (#F7B539) https://codepen.io/sosuke/pen/Pjoqqp */
    filter: brightness(0) saturate(100%) invert(93%) sepia(18%) saturate(5720%) hue-rotate(330deg) brightness(101%) contrast(94%);
}
.pink {
    /*Tool to generate filter to target a color (#F298A3) https://codepen.io/sosuke/pen/Pjoqqp */
    filter: brightness(0) saturate(100%) invert(86%) sepia(28%) saturate(3108%) hue-rotate(296deg) brightness(104%) contrast(90%);
}
.dark-green {
    /*Tool to generate filter to target a color (#729F70) https://codepen.io/sosuke/pen/Pjoqqp */
    filter: brightness(0) saturate(100%) invert(57%) sepia(9%) saturate(1182%) hue-rotate(69deg) brightness(99%) contrast(94%);
}
.light-green {
    /*Tool to generate filter to target a color (#AAC5A9) https://codepen.io/sosuke/pen/Pjoqqp */
    filter: brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(346%) hue-rotate(70deg) brightness(87%) contrast(93%);
}
.lighter-green {
    /*Tool to generate filter to target a color (#D5E3D5) https://codepen.io/sosuke/pen/Pjoqqp */
    filter: brightness(0) saturate(100%) invert(95%) sepia(25%) saturate(129%) hue-rotate(53deg) brightness(92%) contrast(92%);
}
.green-70 {
    /*Tool to generate filter to target a color (#9DBC9B) https://codepen.io/sosuke/pen/Pjoqqp */
    filter: brightness(0) saturate(100%) invert(88%) sepia(25%) saturate(300%) hue-rotate(66deg) brightness(81%) contrast(81%);
}
.brown {
    /*Tool to generate filter to target a color (#BD7868) https://codepen.io/sosuke/pen/Pjoqqp */
    filter: brightness(0) saturate(100%) invert(63%) sepia(7%) saturate(2449%) hue-rotate(323deg) brightness(82%) contrast(94%);
}
.revealOnScroll {
    opacity: 0;
}
.animate__animated {
    opacity: 1;
    animation-duration: 0.8s !important;
    transition-timing-function: ease-in-out !important;
}
a:hover {text-decoration: none;}
a {transition: 0.3s;}
h1, h2, h3, h4 { margin:0; }
h1 a {transition: 0s;}
ul {
    padding:0;
    margin:0;
}

img {max-width:100%;}        

section {
    clear: both;
    padding-top:79px;
    margin-top:-79px;
    overflow: hidden;
}

/*** HEADER ***/
html {
    scroll-behavior: smooth;
    transition-duration: 2500ms;
}
body {
    background: #F9F5F2 url(../image/foto_header_desktop_gato.jpg) no-repeat 0 80px;     
    background-size: 100% auto;
    color: #444C5F;   
    font-family: 'Source Sans Pro', sans-serif;
}
header.animate__animated {animation-duration: 0.4s !important;}
header {       
    background: #fff;
    position: fixed;
    z-index:100000;
    top:0;
    width: 100%;
}
header nav {    
    display: block;
    max-width: 1200px;
    padding:0 15px;
    margin:0 auto;
}
header nav h1 {
    margin-top: 15px;
    margin-bottom: 19px;
    margin-right: 4%;
    float: left;
    line-height: 0;
}
header nav h1 a:hover { filter: brightness(0) saturate(100%) invert(93%) sepia(18%) saturate(5720%) hue-rotate(330deg) brightness(101%) contrast(94%);}
ul.mobile {display:none;}
header nav ul.desktop {
    display: inline-block;
    padding:0;
    max-width: 565px;
    margin-top: 29px;
    width: -webkit-calc(100% - 250px);    
}
header nav ul.desktop li { 
    display: inline-block;
    margin-right: 10%; 
}
header nav ul.desktop li a {
    font-size: 16px;
    line-height: 16px;
    color: #444C5F;
    padding: 10px 0px;
}
header nav ul li a:hover, header nav ul li a.active, header nav ul li a:active { color: #F7B539; }

.btn-login:hover, .btn-login.active { 
    background: #729F70;
    color: #F8CEBB !important; 
}
.btn-loja-veeet, .btn-loja-veeet:hover {
    display: block;
    float: right;
    padding-top: 4px;
    margin-top: 24px;
    margin-right: 45px;
    color: #BD7868;
}
.btn-loja-veeet img {
    width: 29px;
    height: auto;
    position: relative;
    top: -3px;
    margin-right: 15px;
}
.btn-veterinarios {
    margin-top: 20px !important;
}
.btn-login {    
    display: block;
    float: right;
    background: #9DBC9B;
    margin-top: 24px;
    color:#fff;    
    width: 102px;    
    font-size: 16px;
    line-height: 16px;
    padding:7px 0 9px 0;
    text-align: center;
    border-radius: 100px;
}
/*** END HEADER ***/

/*** QUEM SOMOS ***/
#quem-somos {
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
    overflow: hidden;
    padding-bottom: 220px;
}
.abertura {
    margin: 0 auto;
    text-align: center;
    width: 95%;
    max-width: 807px;
    margin-top: 140px;
}
.abertura h2 {
    font-family: Source Sans Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 48px;
    line-height: 48px;
}
.abertura a {
    display: block;
    color: #444C5F;
    padding-top: 12px;
    margin: 0 auto;
    margin-top: 65px;
    width: 218px;
    height: 40px;
    background: #F7B539;
    border-radius: 20px;
    font-family: Source Sans Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 17px;
    text-align: center;
}
/*** END QUEM SOMOS ***/

/*** PARA TUTORES ***/
#para-tutores {
    position: relative;
    margin-top: 0px !important;   
    background: url(../image/foto_vet.png) center bottom no-repeat;
    overflow: visible;
}
img.pets {
    position: absolute;
    z-index: 10;
    top: -87px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;    
}
.container-cards {
    width: 100%;
    display: flex;
}
.container-cards .decor-left {
    position: relative;
    width: calc((100% - 1200px) / 2);
    overflow: hidden;
    float: left;
}

.square-decor {
    position: absolute;
    bottom:0;
    background: #BD7868;
    display: block;
    width:100%;
    height: 202px;
}
.sub-container-cards {
    width: 100%;
    max-width:1200px;
    float: left;
}
.container-cards .cards-grid {
    width: 100%;
    margin: 0;
    max-width:1200px;
}
.cards-grid div { overflow: hidden; }
.cards-grid.first-row .icon-container, 
.cards-grid.second-row .icon-container,
.cards-grid.third-row .icon-container,
.cards-grid.fourth-row .icon-container,
.cards-grid.fifth-row .icon-container {
    width: 180px;
    height: 61px;
    display: table-cell;
    padding: 0;
    padding-left: 3px;
    vertical-align: middle;
}
.cards-grid h4 {
    font-weight: bold;
    font-size: 32px;
    line-height: 36px;
    margin-top: 20px;
    margin-bottom: 25px;
}
.cards-grid p {
    font-family: Playfair Display;
    font-size: 16px;
    line-height: 21px;
}

/* Row 1 */
.cards-grid.first-row div {
    animation-duration: 1.2s !important;
    padding-top: 110px;
    height: 591px;
}
.cards-grid .ofertas h4 { color: #F298A3; }
.cards-grid .ofertas {
    color: #EDEEEF; 
    background: #575E6F;
    padding-top: 50px;
    padding-left: 75px;
    padding-right: 75px;
}

.cards-grid .localizacao h4 { color: #729F70; }
.cards-grid .localizacao {
    color: #EDEEEF; 
    background: #444C5F;
    padding-top: 50px;
    padding-left: 64px;
    padding-right: 64px; 
}
.cards-grid .localizacao a {
    display: block;
    color: #444C5F;
    padding-top: 12px;
    margin: 0 auto;
    margin-top: 88px;
    width: 218px;
    height: 40px;
    background: #729F70;
    border-radius: 20px;
    font-family: Source Sans Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 17px;
    text-align: center;
}

.cards-grid .receita h4 { color: #F7B539; }
.cards-grid .receita {
    color: #EDEEEF; 
    background: #444C5F;
    padding-top: 50px;
    padding-left: 64px;
    padding-right: 64px;
}
.decor-right.bg-dark-blue { background: #444C5F; }
.decor-right.bg-beje { background: #EADCD3; }

/* Row 2 */
.cards-grid.second-row div {
    animation-duration: 1.2s !important;
    padding-top: 110px;
    height: 595px;
}
.cards-grid .encontre h4 { 
    margin: 0;
    padding-left: 40px;
    color: #729F70; 
    font-size: 48px;
    line-height: 44px;
}

.cards-grid .agendamento h4 { color: #BD7868; }
.cards-grid .agendamento {
    background: #F8CEBB;
    padding-top: 50px;
    padding-left: 64px;
    padding-right: 64px;
}

.cards-grid .lembretes h4 { color: #BD7868; }
.cards-grid .lembretes {
    background: #FBE2D6;
    padding-top: 50px;
    padding-left: 64px;
    padding-right: 64px;
}
.decor-right.bg-beje { background: #FBE2D6; }

/* Row 3 */
.cards-grid.third-row div {
    animation-duration: 1.2s !important;
    padding-top: 65px;
    height: 321px;
}
.cards-grid .busca {
    background: none;
    padding-top: 50px;
    padding-left: 64px;
    padding-right: 64px;
}
.cards-grid .busca p {
    margin-top: 15px;
    margin-bottom: 40px;    
    width: 326px;
}
.cards-grid .busca h4 {
    margin: 0; 
}
.cards-grid .busca form { }
.cards-grid .busca form input {
    background: none;
    padding: 5px 10px;
    width: 487px;
    height: 36px;
    border: 1px solid #F7B539;
    border-radius: 10px;
    margin-right: 5px;
}
.cards-grid .busca form button {
    background: #F7B539 url(../image/icon_search.svg) center no-repeat;
    width: 39px;
    height: 36px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    text-indent: -999em;
}
/* Row 4 */

.cards-grid .mapa {
    background: #444C5F;
    color: #EDEEEF;
    padding: 0;
}

/* Row 5 */
#para-tutores-2 { 
    background: #fff;
    margin: 0;
    padding-top: 45px;
}
.proximidade h4 { color: #BD7868; }
.proximidade { padding: 0px 64px 40px 64px; }

.acompanhe { padding: 0px 64px 40px 64px; }

.informacoes h4 { color: #729F70; }
.informacoes { padding: 0px 64px 40px 64px; }


.cards-grid.first-row *, .cards-grid.second-row *, .cards-grid.third-row *, .cards-grid.first-row .icon-container, .cards-grid.second-row .icon-container {
    animation-duration: 0.7s !important;
}


/*** END PARA TUTORES ***/

/*** COMO FUNCIONA ***/
#como-funciona {
    padding-top: 80px;
}
.infografico {
    width: 100%;
    max-width: 1095px;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 40px;
}
.infografico h2 {
    font-family: Playfair Display;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 43px;
    color: #BD7868;
    float: left;
    margin-top: 108px;
}
.infografico img { 
    animation-duration: 2s !important;
    float: right;
    margin-top: 67px;
    width: 56.8%;
 }

.infografico ul {
    padding-top: 61px;
    padding-left: 26px;
    overflow: hidden;
    clear: left;
    float: left;
    width: 300px;
}
.infografico ul li {
    display: block;
    overflow: hidden;
}
.infografico ul li span {
    display: block;
    font-weight: bold;
    font-size: 20px;
    line-height: 25px;
    color: #BD7868;
    width: 41px;
    height: 41px;
    border: 4px solid #BD7868;
    border-radius: 100px;
    padding-top: 3px;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 31px;
    float: left;
}
.infografico ul li p {
    float: left;
    width: 194px;
    padding-top: 2px;
    font-family: Playfair Display;
    font-size: 13px;
    line-height: 17px;
    display: block;
}
.container-oportunidades {
    width: 100%;
    display: flex;
}
.container-oportunidades .decor-left {
    position: relative;
    width: calc((100% - 1200px) / 2);
    overflow: hidden;
    float: left;
}
.sub-container-oportunidades {
    padding-top:50px;
    padding-bottom: 84px;
    background: #fff; 
    width: 100%;
    max-width:1200px;
    float: left;
}
.sub-container-oportunidades h2 {
    font-weight: bold;
    font-size: 32px;
    line-height: 36px;
    text-align: center;
}
.sub-container-oportunidades ul {
    width:90%;
    margin: 0 auto;
    padding-top: 40px;
    text-align: center;
}
.sub-container-oportunidades ul li {
    background: url(../image/checkmark-done.svg) top center no-repeat;
    padding-top:65px;
    list-style: none;
    display: inline-block;
    width: 19%;
    font-weight: bold;
    font-size: 16px;
    line-height: 17px;
}
.call_to_action h4 {   
    margin-top: 78px;
    font-family: Playfair Display;
    font-style: normal;
    font-weight: normal;
    font-size: 32px;
    line-height: 43px;
    text-align: center;
    color: #444C5F;
}
.call_to_action h4 br { display: none; }
.call_to_action h3 {
    margin-top: 28px;
    font-family: Source Sans Pro;
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 60px;
    text-align: center;
    color: #F7B539;
}
.call_to_action h3 br { display: none; }    
.call_to_action a {
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 72px;
    padding-top: 12px;
    text-align: center;
    color: #444C5F;
    font-family: Source Sans Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 17px;
    display: block;
    width: 218px;
    height: 40px;
    background: #F7B539;
    border-radius: 20px;
}
/*** END COMO FUNCIONA ***/

/*** Contato ***/
.container-contato {
    background: #444C5F;
    position: relative;
    width: 100%;
    display: flex;
}
.container-contato .decor-left {
    width: calc((100% - 1200px) / 2);
    float: left;
    background: #444C5F;
}
.sub-container-contato {
    width: 100%;
    max-width:1200px;
    float: left;
}
.contato-grid {
    width: 100%;
    margin: 0;
    max-width:1200px;   
}
.contato { padding: 120px 38px 164px 38px; }
.contato form { 
    overflow: hidden;
    text-align: center;
}
.contato label {display:none;}
.contato input[type='text'],
.contato input[type='email'],
.contato textarea,
.contato input[type='submit'] {
    background: #575E6F;
    padding: 12px 19px 10px 12px;
    display: block;
    margin: 0 auto;
    margin-bottom: 9px;
    border: none;
    color: #B4B7BF;
    font-size: 13px;
    line-height: 14px;
    width: 291px;   
    outline: none;
}
::placeholder { color: #8F949F; }

.contato input[type='text'].valid,
.contato input[type='email'].valid,
.contato textarea.valid {
    border: 2px solid #729F70;
}
.contato input[type='text'].invalid,
.contato input[type='email'].invalid,
.contato textarea.invalid {
    border: 2px solid #F298A3;
}
.contato input[type='text'], .contato input[type='email'] { 
    display: inline-block;
    margin: 0 12px 30px 12px;
}
.contato select { width: 434px; }
.contato textarea {
    width: 434px;
    height: 131px;
    margin-bottom: 31px;
    resize: none;
}
.contato input[type='submit'] {
    color: #fff;
    width:184px;
    padding:8px 0;
    font-size: 16px;
    line-height: 16px;
    background: #729F70;
    border-radius: 100px;
}
.decor-right{
    width: calc((100% - 1200px) / 2);
    float: right;
    padding:1px 0;
}
.bg-white { background: #666; }
.contato h3 {
    font-size: 48px;
    line-height: 48px;
    margin-bottom: 50px;
    text-align: center;
    color: #B4B7BF;
}
.formResponse {
    position: fixed;
    display: none;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, 0.65);
    /*background: #000;*/
    z-index: 1000000;
}
.btn-viewport {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
}

.sending, .thanks {
    position: absolute;
    display: none;    
    border-radius: 10px;
    padding: 80px 60px 40px 60px;
    background: #F9F5F2;
    align-self: center;
    text-align: center;
    max-width: 80%;

    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
}
.sending p, .thanks p {
    font-weight:normal;
    padding-top:50px;
    font-size: 30px;

}
.btn-close {
    display: block;
    background: url(../image/btn-close.svg) center no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    padding: 25px;
    right: 0px;
    top: 0px;
    opacity: 0.35;
}
.btn-close:hover {
    filter: brightness(0) saturate(100%) invert(57%) sepia(9%) saturate(1182%) hue-rotate(69deg) brightness(99%) contrast(94%);
    opacity: 1;
}
/*** END Contato ***/

/*** Conheça ***/
.conheça {
    clear: both;
    padding:45px 0;
    background: #444C5F;
    display: flex;
}
.conheça .inner {
    width: 100%;
    max-width:1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.conheça p {
    font-family: 'Playfair Display', serif;
    margin: 0 auto;
    max-width: 810px;
    align-self: center;
    font-size: 16px;
    line-height: 21px;
    text-align: left;
    color: #FFFFFF;
}
.conheça a.klug img{ max-width: none; }
.conheça a.button {
    display: block;
    margin: 0 ;
    background: #C7CACF;
    color: #444C5F;
    width: 128px;
    font-size: 16px;
    line-height: 16px;
    padding: 7px 0 9px 0;
    text-align: center;
    border-radius: 100px;
}
/*** END Conheça ***/

/*** Footer ***/
footer {   
    background: #fff;
    position: relative;
    z-index:100;
    top:0;
    width: 100%;
    overflow: hidden;
}

footer nav {
    display: block;
    max-width: 1200px;
    padding:0 15px;
    margin:0 auto;
}
footer nav h1 {
    margin-top: 15px;
    margin-bottom: 19px;
    margin-right: 4%;
    float: left;
    line-height: 0;
}
footer nav h1 a:hover { filter: brightness(0) saturate(100%) invert(93%) sepia(18%) saturate(5720%) hue-rotate(330deg) brightness(101%) contrast(94%);}
ul.mobile {display:none;}
footer nav ul.desktop {
    display: inline-block;
    padding:0;
    max-width: 565px;
    margin-top: 27px;
    width: -webkit-calc(100% - 250px);    
}
footer nav ul.desktop li { 
    display: inline-block;
    margin-right: 10%; 
}
footer nav ul.desktop li a {
    font-size: 16px;
    line-height: 16px;
    color: #444C5F;
    padding: 10px 0px;
}
footer nav ul li a:hover, footer nav ul li a.active, footer nav ul li a:active { color: #F7B539; }


header nav h1 {
    margin-top: 15px;
    margin-bottom: 19px;
    margin-right: 4%;
    float: left;
    line-height: 0;
}
header nav h1 a:hover { filter: brightness(0) saturate(100%) invert(93%) sepia(18%) saturate(5720%) hue-rotate(330deg) brightness(101%) contrast(94%);}
ul.mobile {display:none;}
header nav ul.desktop {
    display: inline-block;
    padding:0;
    max-width: 565px;
    margin-top: 29px;
    width: -webkit-calc(100% - 250px);    
}
header nav ul.desktop li { 
    display: inline-block;
    margin-right: 10%; 
}
header nav ul.desktop li a {
    font-size: 16px;
    line-height: 16px;
    color: #444C5F;
    padding: 10px 0px;
}
header nav ul li a:hover, header nav ul li a.active, header nav ul li a:active { color: #F7B539; }

.btn-login:hover, .btn-login.active { 
    background: #729F70;
    color: #F8CEBB !important; 
}
.btn-loja-veeet, .btn-loja-veeet:hover {
    transition: none !important;
    display: block;
    float: right;
    padding-top: 4px;
    margin-top: 24px;
    margin-right: 45px;
    color: #BD7868;
}
.btn-loja-veeet img {
    width: 29px;
    height: auto;
    position: relative;
    top: -3px;
    margin-right: 15px;
}
.btn-veterinarios {
    margin-top: 20px !important;
}

/*** END Footer ***/

/***************************************************************************************************/
/*** MEDIA QUERIES ***/

/*** HEADER ***/

@media (max-width: 1168px) {
    header nav ul.desktop, footer nav ul.desktop {display: none;}
    ul.mobile { 
        display: flex; 
        justify-content: space-around; 
        background: #FBE2D6;
        height: 39px;
        width: 100%;
        clear: both;
    }
    header {
        background: none;
    }
    header nav {
        position: relative;
        z-index: 1000002;       
        background: #fff;
        overflow: hidden;
    }
    ul.mobile li { 
        display: inline-block;
        padding: 6px 0;
    }
    ul.mobile li a, ul.mobile li a:hover {       
        color: #444C5F;
        font-size: 13px;
        line-height: 13px;    
    }
    header nav h1 {
        margin-top: 10px;
        margin-bottom: 14px;      
    }
    header nav h1 a img{
        width: 70px;
        height: auto;
    }
    .btn-loja-veeet {             
        margin-top: 18px;
        margin-right: 35px;
        font-size: 13px;
    }
    .btn-loja-veeet span { 
        display: inline-block; 
        padding-top: 2px;
    }
    .btn-veterinarios { margin-top: 11px !important; }
    .btn-login {   
        margin-top: 16px;
        width: 81px;    
        font-size: 13px;
        line-height: 13px;
        padding: 7px 0;
    }
    footer .btn-loja-veeet, footer .btn-login {display:none;}
}
/*** END HEADER ***/
@media (max-width: 767px) { 

    /*** QUEM SOMOS ***/
    #quem-somos {     
        padding-bottom: 40px;
    }
    .abertura {  
        padding-top: 0;   
        width: 80%;
        margin-top: 60px;
    }
    .abertura h2 {   
        font-size: 32px;
        line-height: 36px;
    }

    .abertura h2 br { display: none; }
    .abertura a {
        margin-top: 60px;      
    }
    /*** END QUEM SOMOS ***/

    /*** PARA TUTORES ***/
    #para-tutores {
        position: relative;
        margin-top: 0px !important;   
        background: none;
        overflow: visible;
    }
    img.pets {
        position: absolute;
        z-index: 10;
        top: 31px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;    
    }
   
   
    .container-cards { display: flex; }
    .cards-grid.first-row .icon-container, 
    .cards-grid.second-row .icon-container, 
    .cards-grid.third-row .icon-container, 
    .cards-grid.fourth-row .icon-container { height: 62px; }
    .cards-grid div { overflow: hidden; }
    .cards-grid h4 {
        font-size: 25px;
        line-height: 31px;
        margin-top: 12px;
        margin-bottom: 18px;
    }
    .cards-grid p {
        font-size: 16px;
        line-height: 21px;
    }
    .cards-grid .empty { display: none; }

    .cards-grid div {
        flex: none;
        padding-top: 50px;
        height: 594px;
    }


    /* Row 1 */
   
    .cards-grid .ofertas .icon-container img { height: 48px; }
    .cards-grid .ofertas {
        padding-top: 90px !important;
        padding-left: 72px;
        padding-right: 60px;
        height: 1275px !important;
    }

    .cards-grid .localizacao .icon-container img { height: 44px; }
    .cards-grid .localizacao {
        padding-top: 75px !important;
        padding-left: 32px;
        padding-right: 64px;
        height: 430px !important;
        margin-left: 40px;
        width: calc(100% - 40px);
        margin-top: -860px;
    }

    .cards-grid .localizacao a {      
        margin: 0 !important;
        margin-top: 75px !important;
    }

    .cards-grid .receita .icon-container img { height: 56px; }
    .cards-grid .receita {
        padding-top: 85px !important;
        padding-left: 32px;
        padding-right: 64px;
        height: 430px !important;
        margin-left: 40px;
        width: calc(100% - 40px);
        margin-top: -430px;
    }


    /* Row 2 */
    .cards-grid .encontre { 
        position: absolute;
        top: 2220px;
        background: url(../image/foto_vet_mobile.png) top no-repeat;
        background-size: 100% auto;
        height: 1250px !important;
        
     }
    .cards-grid .encontre h4 { 
        margin: 0;
        padding-left: 40px;
        color: #729F70; 
        font-size: 39px;
        line-height: 97%;
    }

    .cards-grid .agendamento .icon-container img { height: 58px; }
    .cards-grid .agendamento {
        padding-top: 100px !important;
        padding-left: 72px;
        padding-right: 60px;
        height: 875px !important;
    }

    .cards-grid .lembretes .icon-container img { height: 55px; }
    .cards-grid .lembretes {
        padding-top: 75px !important;
        padding-left: 72px;
        padding-right: 34px;
        height: 430px !important;
        margin-right: 40px;
        width: calc(100% - 40px);
        margin-top: -500px;
    }
   
    /* Row 3 */
    
    .cards-grid .busca {
        
        margin-top: 1230px;
        height: 341px !important;
        background: none;
        padding-top: 50px;
        padding-left: 40px;
        padding-right: 40px;
    }
    .cards-grid .busca p {
        margin-top: 15px;
        margin-bottom: 40px;    
        width: 100%;
    }
    .cards-grid .busca h4 {
        margin: 0; 
    }
   
    .cards-grid .busca form input {      
       width: calc(100% - 50px);      
    }
    
    /* Row 4 */

    .cards-grid .mapa img { display: none; }
    .cards-grid .mapa {
        background: url(../image/foto_mapa_mobile.png) center no-repeat;
        background-size: cover;
        height: 410px;
        padding: 0;
    }

    /* Row 5 */
    #para-tutores-2 { 
        margin: 0;
        padding-top: 72px;
        background: none;
    }
    
    .proximidade { 
        padding: 0 40px;
        height: auto !important;
    }

    .acompanhe { 
        padding: 89px 40px 0 40px; 
        height: auto !important;
    }

    .informacoes { 
        padding: 89px 40px 147px 40px; 
        height: auto !important;
    }

    /*** END PARA TUTORES ***/
    /*** COMO FUNCIONA ***/
    #como-funciona {
        padding-top: 80px;
    }
    .infografico {       
        padding-bottom: 30px;
        background: #fff;
    }
    .infografico h2 {      
        font-size: 32px;
        float: none;
        line-height: 43px;
        clear: both;
        margin-top: 62px;
        padding-left: 40px;
    }
    .infografico img { 
        clear: both;
        float: none;
        margin: 0 auto;
        margin-top: 40px;
        width: 88%;
        max-width: 370px;
     }
    
    .infografico ul {
        padding-top: 61px;
        padding-left: 35px;
        padding-right: 20px;
        clear: both;
        margin: 0 auto;
        width: 93%;
        max-width: 360px;
        
        float: none;
    }
    .infografico ul li {
        display: block;
        overflow: hidden;
    }
    .infografico ul li span {
        font-size: 20px;
        line-height: 25px;        
        width: 41px;
        height: 41px;
        border: 4px solid #BD7868;       
        padding-top: 3px;        
        margin-right: 15px;
        margin-bottom: 31px;
    }
    .infografico ul li p {
        float: left;
        width: 194px;
        padding-top: 2px;
        font-size: 13px;
        line-height: 17px;
    }
    .sub-container-oportunidades { padding: 0 0 55px 0; }
    .sub-container-oportunidades h2 {
        padding: 45px 20px 20px 20px;
        font-size: 25px;
        line-height: 31px;
    }
    .sub-container-oportunidades ul {
        background: url(../image/checkmark-done.svg) top center no-repeat;
        max-width: 270px;
        overflow: hidden;
        padding: 65px 0 0 30px;
    }
    .sub-container-oportunidades ul li {
        background: none;       
        padding:0 0 7px 0;
        display: block;
        float: left;
        text-align: left;
        width: 50%;
        font-size: 13px;
        line-height: 16px;
    }
    .call_to_action h4 {   
        width: 275px;
        margin: 0 auto;
        margin-top: 63px;       
        font-size: 20px;
        line-height: 27px;
    }
    .call_to_action h4 br { display: block; }    
    .call_to_action h3 {
        margin-top: 32px;       
        font-size: 25px;
        line-height: 31px;
    }
    .call_to_action h3 br { display: block; }    
    .call_to_action a {
        margin-top: 53px;
        margin-bottom: 92px;
    }    
    /*** COMO FUNCIONA ***/
    /*** Contato ***/
    .contato { padding: 75px 0 125px 0; }
    .contato p { 
        margin :0 auto;
        margin-top: 30px;
        margin-bottom: 53px;
        width: 78%;
        font-size: 13px;
        line-height: 17px;
    }
    .contato input[type='text'], .contato input[type='email'], .contato select, .contato textarea,  .contato input[type='submit'] { 
        width: 78%; 
        font-size: 13px;
        line-height: 13px;
    }   
    .contato input#nome {margin-bottom:9px;}
    .contato input[type='submit'] {
        width:159px;
        padding:8px 0;
    }
    .contato h3 {
        margin:0 auto;
        width: 78%;
        font-size: 32px;
        line-height: 32px;

      
        margin-bottom: 50px;
        color: #B4B7BF;
    }
    .sending, .thanks {
      
        padding: 60px 40px 30px 40px;
        
        -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
        box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
    }
    .sending p, .thanks p {
        font-weight:normal;
        padding-top:30px;
        font-size: 20px;

    }
    .sending img, .thanks img {
        height: 48px;
    }
    /*** END Contato ***/

    /*** Conheça ***/
    .conheça {
        clear: both;
        padding:35px 40px 40px 40px;
        background: #444C5F;
        display: flex;
    }
    .conheça .inner {       
        padding: 0;
        flex-wrap: wrap;
    }
    .conheça p { 
        padding: 0;
        font-size: 10px;
        line-height: 13px; 
        order: 3;
        flex-grow: 8;
        margin-top: 22px;
    }
    .conheça a.klug {
        order: 1;
        flex: 2;
    }
    .conheça a.klug img { width: 71px; }
    .conheça a.button {
        order: 2;    
        font-size: 13px;
        line-height: 13px;
        width: 114px;
        margin:3px 0 0 0;
        padding: 6.5px 0 7.5px 0
    }
    /*** END Conheça ***/

    /*** Footer ***/
    footer { overflow: hidden; }
    footer nav { 
        text-align: left; 
        padding: 0 40px 40px 36px;
    }
    footer nav h1 {
        margin: 30px 0;
        float: left;        
    }
    footer nav h1 a img { width: 67px; }
    footer nav .menu-col {
        margin-top: 26px;
        float: right;
        margin-left: 40px;
    }
    footer nav .menu-col a {
        color: #444C5F;   
        white-space: nowrap;
        display: block;
        font-size: 13px;
        line-height: 14px;
        padding-bottom: 17px;
    }
    /*** END Footer ***/
}

@media (max-width: 534px) { 
    /*** HEADER ***/  
    .btn-loja-veeet, .btn-loja-veeet:hover {             
        margin-top: 11px;
        margin-right: 8px;
        font-size: 13px;
    }
    .btn-loja-veeet span { 
        width: 35px;        
        line-height: 13px;
    }
    .btn-veterinarios span { width: 68px; }
    .btn-loja-veeet img {
        width: 26px;
        top: -7px;
        margin-right: 4px;
    }
    .btn-veterinarios img {
        width: 20px;
        top: -8px;
        margin-right: 4px;
    }
    /*** HEADER ***/ 
}
/*** END MEDIA QUERIES ***/


/*** CUSTOM SELECT ***/
/* The container must be positioned relative: */
.customSelect {
  position: relative;
  width: 434px;
  font-size: 13px;
  line-height: 14px;
  margin: 0 auto;
  margin-bottom: 10px;
  text-align: left;
}
@media (max-width: 767px) {
    .customSelect {
        width: 78%;
    }
}

.customSelect select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: #575E6F;
  border-bottom: 1px solid #444C5F;
}
.select-selected.dark { color: #B4B7BF; }

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  background: url(../image/arrow_select.svg) no-repeat top center;
  content: "";
  top: 15px;
  right: 13px;
  width:10px;
  height: 6px;
  border: none;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  
    transform: rotate(180deg);
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #8F949F;
  padding: 12px 19px 10px 12px;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: #575E6F;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
  color: #B4B7BF;
}