/*----------------------RESET--------------------*/

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:62.5%; vertical-align:baseline; background:transparent;}

html{scroll-behavior: smooth;}

article, aside, figure, footer, header,hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

.chromeframe {margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}

body{line-height:1; background:#f4eae5; font-family: Arial, Helvetica, sans-serif; border-top:10px solid #a06b74;} /*---- 1.0 em = 10px---*/

/*----------------------RESET--------------------*/


a{text-decoration:none; outline:none;}

a:hover,  .enviar:hover{-moz-transition:all ease-in .3s; -webkit-transition:all ease-in .3s; transition:all ease-in .3s}

::selection{color:#F60; background:#eaeaea;}

::-moz-selection{color:#F60; background:#eaeaea;}

p, p strong, .trats li{font: 1.6rem Raleway, Arial; color: #a06b74; line-height: 2.8rem; margin-bottom: 2rem;}

p strong{font-weight: 700;}

/*----------------------TOPO--------------------*/

header{margin-bottom: 6rem;}

.logo{margin-top: 5rem;}

.menu{margin-top: 9rem;}

    .menu li{float:left; list-style: none; font: 1.6rem Raleway, Arial; font-weight: 700; margin-left: 5rem;}

        .menu a{color: #a06b74;}

.banner{height: 70rem; /*background:url(../uploads/banner/dermatologista.jpg) no-repeat top;*/ position:relative; overflow: hidden;}

/*.banner{width: 100%; height: 420px; float: left; position:relative; overflow: hidden; box-shadow: inset 0 2px 2px rgba(0,0,0,0.1); }*/

     .bgs li{ position: absolute; width: 100%; height: 100vh;}

.traco{border: 0; height: 8rem; width: 0.1rem; background: #a06b74; margin: 7rem auto; display: block;}

.titulo{font: 3.2rem Raleway, Arial; color: #a06b74; text-align: center; margin-bottom: 6rem;}

.img-trat{width: 28.5rem; height:28.5rem; overflow: hidden; background: #f8f8f8; display: block; margin: auto; }

/*        .img-trat:hover{background:#a06b74;}

            .img-trat:hover img{opacity:0.5;}

           /*     .img-trat img::after{content: '+'; font: 3rem Raleway, Arial; position: absolute; top: 0; left: 0; color: #fff; z-index: 300;}*/

    h1{font: 2.4rem Raleway, Arial; color: #a06b74; text-align: center; margin: 3rem 0 6rem 0;}

        h1 a, h1 a:hover{color: #a06b74;}

            h1 a:hover{text-decoration: none;}

.trats{margin-left: 2rem;}

.trats li{width:30%; margin-left: 2rem; float: left;}

.dr-bg, .dr-bg2{background: url(../img/bg.jpg) bottom; padding: 10rem 0;}

.dr-bg2{padding: 5rem 0;}

    h2{font: 3.2rem Raleway, Arial; color: #a06b74; letter-spacing: 1px; margin:2rem 0 3rem 0;}

        .bloco{background: #edd2cc; width: 54rem; height: auto; padding: 2rem; margin-left: -14rem; margin-top: 2rem;}

            .bloco p{margin-bottom: 0;}

p.whats{background: url(../img/whats.png) no-repeat left; padding-left: 2rem; margin-bottom: 1rem; font-size: 2rem;}

    p.whats a{color: #a06b74;}

p.local{background: url(../img/local.png) no-repeat left; padding-left: 2rem;}

footer{margin-top: 8rem; height: 6rem; background: #ead3cb; padding-bottom: 1rem;}

.texto{ position: absolute; display: none;  top: 10%; left: 10%;  width:80%; height: auto; padding: 4rem; background:#fff; box-shadow: 0 10px 20px rgba(0,0,0,0.1);  z-index: 999;}

.fechar{background: url(../img/cross-d.png) no-repeat left; width: 29px; height: 29px; float: right;}

.fade{background: rgba(0,0,0,.2); width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

.mapa{width:80%; height:250px; border:2px solid #edd2cc; }

.whats-icon{position: fixed; bottom: 30px; right: 30px; z-index: 9999;}

/*----------------------DIVERSOS--------------------*/

.aligncenter{text-align: center;}

.alerta{ color:#fff; background: #f00; text-align:center; margin-bottom:10px; padding:10px; border:1px dotted #f00;}

.bottom10{margin-bottom:10px;}

.centralizado{position:relative; float:none; display:block; clear:both; margin:0 auto;}

.clear{clear:both;}

.confirmado{color:#fff; background: #65a03c; text-align:center; margin-bottom:10px; padding:10px; border:1px dotted #65a03c;}

.displaynone{display:none;}

.left{float:left;}

.left10{margin-left:10px;}

.relative{position: relative;}

.right{float:right;}

.right10{margin-right:10px;}

.top10{margin-top:10px;}

.top20{margin-top:20px;}



/*----------------------FORM------------------------*/
fieldset { border: 0; }

input[type=text], input[type=email], select, textarea.form-control{ height: 5rem; width: 100%; border: 1px solid #edd2cc; background: #fff; margin-bottom: 2rem; font: 1.6rem Raleway, Arial; color: #a06b74; padding-left: 2rem;}

::placeholder{color: #a06b74; }

input:focus, textarea:focus { border-color: #006c72; }

textarea.form-control{height: 12rem; padding-top: 1rem;}

.enviar { background: none; border: 3px solid #a06b74; text-align: center; padding: 1.5rem 5rem; font: 1.6rem Raleway, Arial; font-weight: 700; color: #a06b74; margin: auto; display:block;}

    .enviar:hover{background: #a06b74; color: #f3e8e2;}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/* Image replacement */
.ir {background-color: transparent;  border: 0;    overflow: hidden;    /* IE 6/7 fallback */    *text-indent: -9999px;}

.ir:before {content: "";    display: block;    width: 0;    height: 150%;}

/* Hide from both screenreaders and browsers */
.hidden {display: none !important;    visibility: hidden;}

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden {border: 0;    clip: rect(0 0 0 0);    height: 1px;    margin: -1px;    overflow: hidden;    padding: 0;    position: absolute;    width: 1px;}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {clip: auto;     height: auto;    margin: 0;    overflow: visible;    position: static;    width: auto;}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {    visibility: hidden;}

.clearfix:before,.clearfix:after {    content: " "; /* 1 */    display: table; /* 2 */}

.clearfix:after {    clear: both;}

.clearfix {    *zoom: 1;}


/*------------------------RESPONSIVE DESIGN-----------------------------*/


@media only screen and (max-width: 480px){
    
    .logo{display: block; margin: 2rem auto 1rem auto;}
    
    header{margin-bottom: 2rem;}
    
    .menu{margin: 2rem 0 1rem 0;}
    
    .menu li{width: 40%; margin-left: 2rem; margin-bottom: 2rem; text-align: center; font-size: 1.4rem;}
        
    .banner{height: 40rem; display: none;}
    
    .dr-bg, .dr-bg2{padding: 2rem 0;}
    
    .img-trat{width: 100%; height:28rem; text-align: center; background: none;}
    
    h2{text-align: center; margin-bottom: 2rem;}
    
    .trats li{width:100%;}
    
    .traco{margin:2rem auto;}
    
    .bloco{margin-left: 0; width: 100%;}
    
    .mapa{width: 100%;}
    
}

/*----------------------PRINT--------------------*/

@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }    .ir a:after { content: ""; }  /* Don't show links for images */    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }    img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}