/*	
Documento de estilo de Odontologia Fernando Castanho
Criado por Lorran Tejada dos Santos - 15/05/2015
www.legulas.com.br
*/
/*
==========
==FONTES==
==========
*/
@font-face {
    font-family: "optima";
    src: url("fonts/optima.eot");
    src: url("fonts/optima.eot#iefix") format("embedded-opentype"),
        url("fonts/optima.woff") format("woff"),
        url("fonts/optima.ttf") format("truetype"),
        url("fonts/optima.svg#optima") format("svg");
    font-weight: normal;
    font-style: normal;
}
/*
=========
==TOOLS==
=========
*/
.clearfix:before,
.clearfix:after { content: " "; display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1;}
.floatleft { float: left;}
.floatright { float: right;}
.container { display: table; margin: 0 auto; position: relative; width: 960px;}
.vert { display:table; position: relative;}
::-webkit-input-placeholder { color: #000000;} /*cbcbcb*/
:-moz-placeholder { color: #000000;}
::-moz-placeholder { color: #000000;}
:-ms-input-placeholder { color: #000000;}
body { background: url(../images/bg-body.jpg) repeat top center;}
/*
=========
==RESET==
=========
*/
* { color: #000000; font-family: 'optima'; font-size: 100%}
p { border: 0; line-height: 25px; margin: 8px 0; padding: 0; outline: 0;}
ul { margin: 0; padding: 0;}
fieldset { border: 0; margin: 0; outline: 0; padding: 0;}
textarea { resize: none;}
a { color: #001b36; text-decoration: none;}
hr { border: none;}
input, button, textarea { outline:none;}
/*
==========
==HEADER==
==========
*/
.header { height: 288px; position: relative;}
.header-top { background: url(../images/bg-nav.png) repeat-x; height: 75px; position: relative; z-index: 10;}
.header-bottom { height: 217px; margin-top: -4px; position: relative; z-index: 2;}
.logo { background: url(../images/bg-logo.png) repeat; display: block; height: 217px; width: 396px;}
.logo h1 { font-size: 1.5625em; font-weight: normal; line-height: 36px; margin: 0 auto; padding-top: 64px; text-align: center; width: 300px;}
.logo h2 { background: #000000; color: #42c1c6; font-size: 18px; font-weight: normal; line-height: 32px; margin: 0 auto; text-align: center; width: 300px;}
.logo p { font-size: 0.9375em; line-height: 35px; margin: 0 auto; text-align: center; width: 300px;}
/*
==========
==NAVBAR==
==========
*/
.navbar { position: relative; z-index: 10;}
.navbar ul { display: table; float: right; height: 71px; list-style: none; margin: 0; position: relative;}
.navbar li { display: inline-block; margin: 0 8px; text-align: center;}
.navbar li.tab { background: url(../images/tab-menu.png) no-repeat center center; height: 71px; width: 1px;}
.navbar li > .vert { height: 71px; width: 100%;}
.navbar li a { color: #FFFFFF; display: table-cell; font-size: 18px; vertical-align: middle; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.navbar li a:hover, .navbar li.ativo a { color: #42c1c6;}
/*
=========
==ASIDE==
=========
*/
.aside { min-height: 140px;}
.aside .menu { display: table; list-style: none; margin: 0 auto; width: 888px;}
.aside .menu  li { float: left; height: 140px; padding: 0 10px; width: 128px;} 
.aside .menu  li a { display: block; height: 100%; position: relative; width: 100%;}
.aside .menu  li a.ativo .icon-set { display: block;}
.aside .menu  li a .icon-set { background: url(../images/set-menu.png) no-repeat bottom center; display: none; height: 16px; width: 100%; position: absolute; bottom: 0;}
.aside .menu  li .icon-treat { background: url(../images/sprite-menu.png) no-repeat; display: block; height: 82px; width: 100%;}
.aside .menu  li .icon-t01 { background-position: 8px top; }
.aside .menu  li .icon-t02 { background-position: -106px top; }
.aside .menu  li .icon-t03 { background-position: -220px top; }
.aside .menu  li .icon-t04 { background-position: -334px top; }
.aside .menu  li .icon-t05 { background-position: -448px top; }
.aside .menu  li .icon-t06 { background-position: -565px top; }
.aside .menu  li h3.tt-treat { border-bottom: 1px solid #000; border-top: 1px solid #000; font-size: 1.1875em; font-weight: normal; height: 36px; line-height: 36px; margin: 0; padding: 0; text-align: center; width: 100%; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;}
.aside .menu  li a:hover h3.tt-treat, .aside .menu  li a.ativo h3.tt-treat { background: #000000; color: #42c1c6;}
.aside-content { background: #70d0d4; padding: 30px 0 20px 0;}
.aside-content p { font-size: 18px; text-align: left;}
.aside-content .colunas { width: 960px;}
.aside-content .col-left { width: 470px; float: left; margin-right: 20px;}
.aside-content .col-right { width: 450px; float: left; margin-left: 20px;}
.aside-content li { font-size: 18px; }
.aside-content h1 { font-size: 18px; font-weight: normal; margin: 0;}
.aside-content .image-trata { float: right; height: 540px; margin: -30px 0 20px 20px; width: 374px;}
.aside-content .image-trata-peri { float: right; height: 185px; margin: -30px 0 20px 20px; width: 374px;}
.aside-content .image-trata-den { float: right; height: 185px; margin: -30px 0 20px 20px; width: 374px;}
.aside-content .image-trata-pro { float: right; height: 340px; margin: -30px 0 20px 20px; width: 374px;}
.aside-content .image-trata-endo { float: right; height: 340px; margin: -30px 0 20px 20px; width: 374px;}
.aside-content .content-trata { float: left; width: 560px;}
.aside-content .content-trata p { text-align: justify;}
/*
==========
==FOOTER==
==========
*/
.footer { height: 330px;}
.footer-top { background: #000000; height: 116px; padding-top: 44px;}
.footer-top p { color: #FFFFFF; font-size: 20px; text-align: center;}
.footer-map { height: 90px;}
#mapa { height: 90px; width: 100%;}
.footer-bottom { height: 80px;}
.footer-bottom .cards { background: url(../images/cards.png) no-repeat; display: block; float: left; height: 35px; margin-top: 25px; width: 380px;}
.footer-bottom div.container > div { float: left; height: 35px; padding-top: 15px; width: 580px;}
.footer-bottom div.container > div p, .footer-bottom div.container > div a { font-size: 18px; line-height: 35px; text-align: right;}
.footer-bottom div.container > div a { color: #000000; margin: 5px 0; padding: 0 5px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;}
.footer-bottom div.container > div a:hover { background: #000000; color: #42c1c6;}
.icon-face { background: url(../images/icon-face.png) no-repeat; display: block; height: 27px; width: 27px; position: absolute; right: 75px; top: 36px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;}
.icon-face:hover { background: url(../images/icon-face-hover.png) no-repeat;}
.span-fone{font-size: 23.5px; color: #fff;}
/*
===========
==CONTENT==
===========
*/
.main .title-page { background: #FFFFFF url(../images/bg-tt.png) no-repeat center right; float: left; height: 137px; padding: 77px 25px 20px 30px; width: 245px;}
.main .title-page h1 { font-size: 2em; font-weight: normal; line-height: 30px; margin: 0; }
.main .title-page h1 span { display: block; font-size: 0.71875em; line-height: 20px;}
/*
===========
==CONTENT==
===========
*/
.bg-content { background: #FFFFFF;}
.content { background: #FFFFFF; float: left; width: 600px;}
.consultorio, .tratamentos, .contato, .localizacao { padding: 35px 0 0 60px;}
.consultorio p, .tratamentos p, .contato p, .localizacao p { font-size: 1.125em; line-height: 30px; text-align: justify;}
/*
=========
==INDEX==
=========
*/
.index { float: left; padding: 73px 0 0 60px;}
.index p { font-size: 1.4375em; }
.bg-index { background: url(../images/bg-index.png); display: block; height: 501px; width: 907px; position: absolute; top: -290px; right: -180px; z-index: -1;}
/*
===============
==CONSULTORIO==
===============
*/
.bg-consultorio { background: url(../images/bg-consultorio.png) no-repeat -400px top; display: block; height: 370px; width: 565px; position: absolute; top: -290px; right: 0px; z-index: -1;}
.missao, .dados { float: left; padding: 18px 26px; width: 563px;}
.missao { background: #70d0d4; height: 168px; }
.missao h2 { font-size: 1.5625em; line-height: 44px; margin: 0;}
.dados { border-bottom: 1px solid #000000; height: 239px;}
.dados ul { list-style: none;}
.dados li { line-height: 30px;}
.dados li, .missao p { font-size: 1.125em;}
/*
===============
==TRATAMENTOS==
===============
*/
.bg-tratamentos { background: url(../images/bg-tratamentos.png); display: block; height: 332px; width: 500px; position: absolute; top: -258px; right: -86px; z-index: -1;}
/*
===========
==CONTATO==
===========
*/
#form-contato { margin: 0 auto; padding: 0 0 30px 0; width: 750px;}
.input-group { display: block; float: left; width: 375px;}
.input-group input { border: 1px solid #cfdcdd; font-size: 1.125em; margin-bottom: 7px; padding: 18px 20px 18px 30px; width: 310px;}
.input-group textarea { border: 1px solid #cfdcdd; font-size: 1.125em; height: 174px; padding: 18px 20px 0 30px; width: 322px;}
.input-group button { background: #70d0d4; border: none; color: #000000; float: right; font-size: 1.125em; margin-right: 1px; padding: 15px 60px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;}
.input-group button:hover { background: #000000; color: #70d0d4;}
/*
===============
==LOCALIZACAO==
===============
*/
#localiza { height: 340px; width: 100%;}
.bg-locaconta { background: url(../images/bg-localiza.png) top right; display: block; height: 342px; width: 783px; position: absolute; top: -287px; right: -219px; z-index: -1;}

/*Floating Whatsapp*/
a.floatingWhatsapp{
  position: fixed;
  right: 15px;
  bottom: 40px;
  width: 58px;
  height: 58px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 999;
  transition: 0.8s;
  @include d(md){
     bottom: 15px;
  }
}