@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
@import url('https://fonts.googleapis.com/css?family=Hammersmith+One');

body { margin: 0 auto; background-color: rgb(245, 245, 245); font-family: 'Roboto Condensed', sans-serif; font-size: 18px; color: rgb(87, 87, 86);}
body a:link { text-decoration: none; color: rgb(87, 87, 86);}
body a:visited { color: rgb(87, 87, 86);}
body a:hover { color: rgb(87, 87, 86);}
body a:active { color: rgb(87, 87, 86);}
body h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; line-height: 1.5;}
body h1, h2 { font-family: 'Hammersmith One', sans-serif;}
body img { border: 0;}
body input { font-family: 'Roboto Condensed', sans-serif; font-size: 1em; color: #090F14; border: 0; outline: 0;}
body select { font-family: 'Roboto Condensed', sans-serif; font-size: 1em; color: #090F14; border: 0; outline: 0;}
body textarea { font-family: 'Roboto Condensed', sans-serif; font-size: 1em; color: #090F14; border: 0; outline: 0;}

body .border { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
body .sombra { -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);}
body .tempo { -webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; transition: 0.4s ease-in;}
body .bg { position: absolute; width: 100%; height: 23px; left: 0; z-index: 1; background-image: url('../imagens/bg.png'); background-repeat: no-repeat;}
body .bg.top { top: -22px; background-position: 50% 0;}
body .bg.bottom { bottom: -22px; background-position: 10% 100%;}
body .bg.mobile { bottom: -22px; background-image: url('../imagens/bg-branco.png'); background-position: 10% 100%; display: none;}
body .none { display: none;}

header { float: left; width: 100%; position: relative; z-index: 20; background-color: rgb(255 255 255); -webkit-box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%); box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%);}
header .logo { float: left; margin: 10px 0 5px 5%; -webkit-transition: 1s ease-in; -moz-transition: 1s ease-in; -o-transition: 1s ease-in; transition: 1s ease-in;}
header .topo { float: right; margin: 22px 5% 0 0;}

header .chave { position: absolute; width: 40px; height: 40px; top: 22px; left: 2%; z-index: 12; display: none;}
header .chave .ico { float: left; width: 40px; height: 40px; background-position: 50%; background-repeat: no-repeat;}
header .chave .ico.abre { background-image: url("../imagens/abre.png");}
header .chave .ico.fecha { background-image: url("../imagens/fecha.png"); display: none;}

header .links { float: left; margin: 15px 100px 0 0;}
header .links a { float: left; padding: 0 0 18px; margin: 0 14px; line-height: 1; background-position: 50% 100%; background-repeat: no-repeat;}
header .links b { float: left; width: 1px; height: 14px; margin: 2px 0 0; background-color: rgb(87, 87, 86);}
header .links a.ativo { background-image: url('../imagens/coracao.png');}
header .links a:hover { background-image: url('../imagens/coracao.png') !important;}
header .links:hover a.ativo { background-image: none;}

header .redes { float: left;}
header .redes .ico { float: left; width: 50px; height: 54px; margin: 0 0 0 5px; background-position: 50%; background-repeat: no-repeat;}
header .redes .ico.whatsapp { background-image: url('../imagens/whatsapp.png');}
header .redes .ico.instagram { background-image: url('../imagens/instagram.png');}
header .redes .ico.facebook { background-image: url('../imagens/facebook.png');}
header .redes .ico:hover { animation: tremer 0.2s; animation-iteration-count: 4;}

footer { float: left; width: 100%; position: relative; background-color: rgb(78, 188, 195);}
footer .conteudo { display: flex; float: left; width: 96%; padding: 30px 2%;}
footer .conteudo .item { float: left; width: 100%; padding: 10px; box-sizing: border-box;}
footer .conteudo .item h2 { float: left; width: 100%; text-transform: uppercase; font-size: 1.5em; color: rgb(255 255 255); line-height: 1;}
footer .conteudo .item h3 { float: left; width: 100%; font-size: 1.1em; color: rgb(255 255 255 / 90%);}
footer .conteudo .item em { float: left; width: 80px; margin: 5px 0 21px; height: 5px; background-color: rgb(255 255 255);}
footer .conteudo .item a.whatsapp { float: left; width: 100%; padding: 20px 0 20px 40px; background: url('../imagens/whatsapp2.png') 0 50% no-repeat; font-size: 1.2em; color: rgb(255 255 255); line-height: 0; box-sizing: border-box;}
footer .copyright { float: left; width: 90%; padding: 20px 5%; border-top: 2px solid rgb(5 5 5 / 10%); text-align: center; font-weight: bold; font-size: 1em; color: rgb(255, 255, 255);}
footer .criacao { float: left; width: 100%; height: 47px; background-color: rgb(5 5 5 / 50%); background-image: url("../imagens/d10web.png"); background-position: 50% 100%; background-repeat: no-repeat;}
footer .criacao:hover { background-position: 50% 0;}


#menutop { float: left; width: 100%; position: relative; background-color: rgb(78, 188, 195);}
#menutop .menu { float: left; width: 100%;}
#menutop .min { position: absolute; width: 60px; height: 60px; top: 0; left: -65px; background-image: url("../imagens/espacoitpet-min.png"); background-position: 50%; background-repeat: no-repeat;}
#menutop .servicos { float: left; width: 100%; position: relative; z-index: 2; padding: 22px 0 18px; text-align: center; line-height: 1;}
#menutop .servicos a { padding: 0 15px; border-right: 1px solid rgb(255, 255, 255); font-weight: bold; color: rgb(255, 255, 255); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#menutop .servicos a.ultimo { border-right: 0;}
#menutop .servicos a.ativo { background-color: rgb(255, 255, 255); color: rgb(87, 87, 86);}
#menutop .servicos a:hover { background-color: rgb(255, 255, 255); color: rgb(87, 87, 86);}
#menutop.m1 { margin: 20px 0 0;}
#menutop.m2 .min { left: 2%;}


@media only screen and (max-width: 1000px){
  body .bg.mobile { display: block;}

  header { float: left; position: relative;}
  header .logo { width: 100%; margin: 10px 0 0; text-align: center; -webkit-transition: 0s ease-in; -moz-transition: 0s ease-in; -o-transition: 0s ease-in; transition: 0s ease-in;}
  header .min { display: none;}
  header .topo { width: 100%; margin: 0; display: none;}
  header .chave { display: block;}

  header .links { width: 100%; margin: 0;}
  header .links a { width: 100%; padding: 20px 0; margin: 0; text-align: center; background-position: 5px 50%;}
  header .links b { width: 100%; height: 1px; margin: 0; opacity: 0.3;}

  header .redes { display: flex; justify-content: center; width: 100%; margin: 0 0 20px;}
  header .redes .ico { margin: 0 5px;}

  #menutop .menu { display: none;}
  #menutop .servicos a { float: left; width: 100%; padding: 17px 0 15px; border-bottom: 1px solid rgb(255, 255, 255);  border-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
  #menutop .servicos a.ativo { background-color: rgb(5 5 5 / 10%); color: rgb(255 255 255);}
  #menutop .servicos a:hover { background-color: rgb(5 5 5 / 10%); color: rgb(255 255 255);}
  #menutop.m1 { margin: 0;}
}
@media only screen and (max-width: 700px){
  footer .conteudo { flex-direction: column;}
  footer .conteudo .item.meio { margin: 31px 0;}
}
@media only screen and (max-width: 500px){
  header .logo img { height: 60px;}
  header .chave { top: 18px;}
}