/*//////////////////////////////////////////////////////////////////////////////////
TABLETS
//////////////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {

    /* TOPO MENU */
    #topo-importante {width:100%; max-width: 1440px; margin:0 auto;}
    #box-importante {width: 100%; display: block; height: 45px; border-radius:0;}
    #box-importante > h1 {font-size:12px;}
    .telefone {font-size:16px;}
    .whatsapp {border-radius: 0;}

    /* TOPO MENU */
    #menu-topo-esticado {width:100%; height: 160px;}
    #menu-box {max-width:1440px; clear: both; margin:0 auto; padding-top:1%;}
    #logo-mitras {width:25%; display: inline-block; margin-top:2%;}
    #logo-mitras > img {width:100%;}

    #menu-topo-esticado {width:100%; height: 160px; border-top:10px solid red;}
    #menu-topo {display:none; width: 100%; background: #be2929; z-index: 2001; position: relative;}
    #menu-topo > li {width: 26%; padding:2%; margin:0; border-bottom:1px dotted #e66b6b; border-left:10px solid red;}
    #menu-topo > li:hover {width: 26%; padding:2%; margin:0; border-bottom:1px dotted #e66b6b; border-left:10px solid red;}
    #menu-topo > li > a {color:#fff; display: block; padding:0.2em}

    .bt-menu {display: block; position: absolute; top:8%; right: 5%; }
    .bt-menu > #menu-topo {display:block !important;}

    /* CYCLE */
    #banner-home {width:100%; z-index: 200;}
    .cycle-slideshow {z-index: 2;}
    .cycle-slideshow > a > img {z-index: 3;}
    .center {display: none;}

    /* CONTEUDO GERAL */
    .banner-conteudo {width:100%;}
    #conteudo-geral {max-width: 768px; width:100%;}
    .full {width:100% !important; margin-left:0px !important;}

    /* CONTEUDO GERAL */
    .banner-conteudo {width:100%;}
    #conteudo-geral {max-width: 768px; width:100%;}
    .full {width:100% !important; margin-left:0px !important;}

    #conteudo {width:100%; margin:0; margin-bottom:5%;}
    #conteudo > h1 {width:90%; font-size:26px; line-height: 26px; background:#ed1c24; color:#fff; padding:5% 5%; font-weight: 300;}
    #conteudo > h1 > strong {font-size:26px; font-style: normal; font-weight:800; color:#fff;}
    #conteudo > h1 > img {display:none; }
    #conteudo > p {width: 90%; padding:0 5%; line-height: 26px; margin-top:5px; text-align: left;}
    #conteudo > h4 {width:90%; padding:0 5%; font-size: 18px; line-height: 24px; margin-top:25px; font-weight:700;}
    #conteudo > a {display: inline-block; padding: 10px; margin-top:15px; border:1px solid #999;}

    #lateral {width:85%; margin-right:0%; margin:0 auto; float:none; margin-top:5%; clear: both; outline: 1px solid #ddd; outline-offset: 15px;}
    #lateral > a > img {display: block; width: 48%; display: inline-block; float: left; margin:1%;}
    #valor {min-height: 130px; clear: both;}
    #valor > h1 {width:60%; margin-top:3%; float: left; font-size: 26px; line-height: 30px; text-transform: uppercase; padding:5% 0%; letter-spacing: -2px; margin-left:5%; margin-bottom:50px;}
    #valor > p {width:30%; float: right; margin:0; padding:0%;}
    #valor > p.valor {font-size: 46px; line-height: 40px; margin-top:35px;}
    #valor > p.vezes {font-size: 20px;}

    /* TRATAMENTO EM DESTAQUE */
    #tratamento-destaque-esticado {height:auto;}
    #tratamento-destaque > li {width:31%; margin:1% 1%; margin-top:5px;}
    #tratamento-destaque > li:hover {width:31%; margin:1% 1%; margin-top:5px;}
    #tratamento-destaque > li > a > h1 {background:#ed1c24; height:60px; margin-top:-5px;}
    #tratamento-destaque > li > a > h1 > strong {width: 100%; margin-top:20px;}
    #tratamento-destaque > li > a > h1 > strong.drena {margin-top:10px;}

    /* OFERTA ESTETICA HOME */
    #estetica-oferta {width:100%; max-width:768px;}
    #estetica-oferta > h3 {margin-top:25px;}
    #estetica-oferta > a {width:31%; padding:0; margin:1%; margin-bottom:55px;}
    #estetica-oferta > a > img {width:100%;}
    #estetica-oferta > a.primeiro {margin-left:0;}

    /* RODAPE */
    footer {width:100%; margin:0 auto; height: 100%; padding:0% 0;}
    footer > h1 {width:90%; font-size: 18px; text-transform: uppercase; padding:4% 5%; letter-spacing: -1px;}
    #mapa-do-site > ul {display: none;}

    .telefone-rodape {width:80%; height: 100%; padding:2% 10%; margin:0; padding-bottom: 3%; position: static;}
    .pequeno {font-size:14px !important; line-height: 18px!important; padding:0; top:5px; font-weight: 300 !important; position: relative;}
    .telefone-rodape > img {display: none;}
    .telefone-rodape > img.whats {display: none;}
    .telefone-rodape > p {float: none; display: block; font-size: 22px; line-height: 26px; margin-left:0; margin-top:0; font-weight: 700; }

    #assinatura > h1 {width:70%; float; text-transform: uppercase; padding:20px 5%; margin-top:0;}
    #assinatura > h1 > a {padding:2%; margin-top:7px; border:0; background:#4d1f1f;}

    .promocoes { width: 100%; min-height: 350px; clear: both; margin-bottom: 35px; overflow: hidden; }
    .promocoes-facial { background-size: cover; }
    .promocoes-corporal { background-size: cover; }
    .promocoes-especial { background-size: cover; }
    .promocoes-descricao { width: 43%; }
}

/*//////////////////////////////////////////////////////////////////////////////////
CELULAR
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 675px) {

    /* TOPO MENU */
    #logo-mitras {width:45%; display: inline-block; margin-left:5%; margin-top:5%;}
    #logo-mitras  img {width:100%;}
    #topo-importante {display: block;}
    #box-importante {width: 100%; background:#f4f3f3; border-radius: 0 0 15px 15px; float:none;}
    #box-importante > h1 {display:none;}
    #box-importante > p {width:100%; padding:10px !important; font-size: 26px; display:inline-block; padding:1px; float: left; text-align: left;}

    .box-info {width:42%; display: block; margin-top:25px; float: right;}
    .box-whats {width:80%; height: 30px; background:#66ba6c; text-align: center; display: inline-block; position: absolute; top:0; left:0; border-radius: 0; padding:2.4%;}
    .box-whats i {color:#ffffff; font-size: 1.5em;float: left; margin-left:10px; margin-top:0px;}
    .box-tel {font-weight: 700; margin-top:15px; color:#777 !important;}
    .box-tel i {float: left; font-size: 20px; margin-top:5px; color:#777 !important; margin-right: 10px; display: block; margin-bottom: 30px;}
    .liga-whats {display: inline-block; font-size: 0.8em; font-weight: 700; text-transform: uppercase;}
    .liga-cel {display: none;}

    .telefone {font-size: 14px !important; text-align: center !important;}
    .whatsapp {width:100% !important; font-size: 18px !important; border-radius: 0;}
    .whats-icon {width:8%; float: left; margin-top:0; margin-left:20%; margin-right:10px;}
    #menu-topo {display:none; width: 100%; padding:0; margin:0; margin-top:-95px; background: #be2929; z-index: 2001; position: relative;}
    #menu-topo > li {width: 100%; border-bottom:1px dotted #ce4949; border-left:10px solid red;}
    #menu-topo > li > a {color:#fff; display: block; padding:0.2em}
    #menu-topo-esticado {width:100%; height: 120px; border-top:5px solid red;}
    .bt-menu {display: block; position: absolute; background:#da3d3d; margin-top:-5px; top:0px; right: 0px; }
    .bt-menu > #menu-topo {display:block !important;}

    /* CYCLE */
    #banner-home {width:100%; z-index: 200;}
    .cycle-slideshow {z-index: 2;}
    .cycle-slideshow > a > img {z-index: 3;}
    .center {display: none;}

    /* FAIXA COMERCIAL */
    #faixa-comercial {width:100%; background: #fff; }
    #box-avaliacao {width:100%; height: 85px; float: none; background:#ecece5;}
    #box-avaliacao > img {margin-left:3%; margin-top:10px;}
    #box-avaliacao > p {font-size: 16px;}
    .avaliacao-central {margin:2px 0;}

    /* TRATAMENTO EM DESTAQUE */
    #tratamento-destaque-esticado {height:auto;}
    #tratamento-destaque > li {width:47%; margin:0 1%; margin-top:5px;}
    #tratamento-destaque > li:hover {width:47%; margin:0 1%; margin-top:5px;}
    #tratamento-destaque > li > a > h1 {background:#ed1c24; height:60px; margin-top:-5px;}
    #tratamento-destaque > li > a > h1 > strong {width: 100%; margin-top:20px;}
    #tratamento-destaque > li > a > h1 > strong.drena {margin-top:10px;}

    /* OFERTA ESTETICA HOME */
    #estetica-oferta {width:100%; max-width:414px;}
    #estetica-oferta > h3 {margin-top:25px;}
    #estetica-oferta > a {width:47%; padding:0; margin:1%;}
    #estetica-oferta > a > img {width:100%;}
    #estetica-oferta > a.primeiro {margin-left:0;}

	/* OFERTA ESTETICA HOME */
	#especializados {width:100%; min-height: 350px; background:#f9f9f9; padding:2% 0 5% 0; clear: both;}
	#tratamento-especializado > h3 {max-width: 1440px; text-align: center; font-size:26px; padding:1%; font-weight: 300;}
	#tratamento-especializado > h3 > em {font-size:26px; font-style: normal; font-weight:800; color:#ed1c24;}
	#tratamento-especializado > h3 > img {position: relative; top:5px;}
	#tratamento-especializado {max-width: 1440px; margin:0 auto; padding:2%;}
	#tratamento-especializado > li > a {width:75%; float:left; padding:3% 1.5%; text-align: center; margin-left: 10%; margin-top:2%; background:#ed3e59; color:#fff;}

    /* CONTEUDO GERAL */
    .banner-conteudo {width:100%;}
    #conteudo-geral {max-width: 414px; width:100%;}
    .full {width:100% !important; margin-left:0px !important;}

    #conteudo {width:100%; margin:0; margin-bottom:5%;}
    #conteudo > h1 {width:90%; font-size:26px; line-height: 26px; background:#ed1c24; color:#fff; padding:5% 5%; font-weight: 300;}
    #conteudo > h1 > strong {font-size:26px; font-style: normal; font-weight:800; color:#fff;}
    #conteudo > h1 > img {display:none; }
    #conteudo > p {width: 90%; padding:0 5%; line-height: 26px; margin-top:5px; text-align: left;}
    #conteudo > h4 {width:90%; padding:0 5%; font-size: 18px; line-height: 24px; margin-top:25px; font-weight:700;}
    #conteudo > a {display: inline-block; padding: 10px; margin-top:15px; border:1px solid #999;}

    #lateral {width:80%; margin-right:0%; margin:0 auto; float:none; margin-top:5%; clear: both; margin-bottom: 15%; outline: 1px solid #ddd; outline-offset: 15px;}
    #lateral > a > img {display: block; width: 100%;}
    #valor {min-height: 200px;}
    #valor > h1 {width:80%; font-size: 36px; line-height: 36px; text-transform: uppercase; padding:6% 10%; letter-spacing: -2px;}
    #valor > p {width:80%; margin:0; padding:0 10%;}
    #valor > p.valor {font-size: 56px; line-height: 40px; margin-top:-15px;}
    #valor > p.vezes {font-size: 26px;}

    /* LISTA DE TRATAMENTOS */
    #lista-tratamentos {width:100%;}
    #lista-tratamentos > li {width:100%; background:red; float: left; margin:0%; margin-top:5px;}
    #lista-tratamentos > li > a > img {width:100%;}
    #lista-tratamentos > li > a > h1 {width:90%; display:block; padding:5%; color:#ffffff; font-size:18px; text-align: center;}

    /* RODAPE */
    footer {width:90%; margin:0 auto; height: 100%; padding:0% 0; margin-top:15px;}
    footer > h1 {width:90%; font-size: 18px; text-transform: uppercase; padding:4% 5%; margin-top:-20px; letter-spacing: -1px; color:#fff !important;}
    #mapa-do-site > ul {display: none;}

    .telefone-rodape {width:80%; height: 100%; padding:15px 10% 70px 10%; margin:0; position: static; color:#fff !important;}
    .pequeno {font-size:14px !important; line-height: 18px!important; padding:0; top:10px; font-weight: 300 !important; position: relative; color:#fff !important;}
    .telefone-rodape > img {display: none;}
    .telefone-rodape > img.whats {width:30px; height: 30px; display: block; position: relative; float:right; margin-top:-85px; margin-right:20px;}
    .telefone-rodape > p {float: none; display: block; font-size: 22px; line-height: 26px; margin-left:0; margin-top:0; font-weight: 700; color:#fff !important; }

	#social {display: block; float:left; padding:1%; margin-top:15px; width: 100%;}
	#social > a  { display: inline-block; padding:0%; margin-right: 5px; color: #ffffff !important;}
	#social > a > i {color: #ffffff; !important;}

    #assinatura > h1 {width:70%; float; text-transform: uppercase; padding:20px 5%; margin-top:15px;}
    #assinatura > h1 > a {padding:2%; margin-top:7px; border:0; background:#4d1f1f;}

	#mitras-hotsite {width: 90%; padding:5%;}
	#mitras-hotsite > img {display: inline-block; padding:5%; margin-left: 10%; border:0px solid gray;}
	#mitras-hotsite > span {width:95%; float: right;}
	#mitras-hotsite > span > h1 {font-size: 32px; line-height: 36px;text-align: center;}

	#trat-dest-hotsite {width:90%; padding:0 5%;}
	#trat-dest-hotsite > h1 { font-size: 30px; line-height: 36px; border-bottom: 5px solid #ed1c24; margin-bottom: 25px;}
	#trat-dest-hotsite > li {width:90%; min-height: 200px; display:inline-block; padding:5%; background:#eee; margin:0.5%; margin-top:3%;}
	#trat-dest-hotsite > li > h1 {font-weight: 700; font-size: 26px; line-height: 26px; margin-top:15px; text-align: center;}
	#trat-dest-hotsite > li > h4 {font-size: 26px; font-weight: 700; color:#ed1c24; text-align: center;}
	#trat-dest-hotsite > li > p {font-size: 12px; text-align: center;}
	#trat-dest-hotsite > h2 {margin-top:25px; text-align: center; font-size: 16px;}
	#trat-dest-hotsite > p {text-align: center; font-size: 20px; font-weight: 700; color:#2d9f3a; margin-top:15px;}

	#rodape-hotsite {width:90%; background:#3c3c3c; text-align: center; padding:5%; margin-top:5%;}
	#rodape-hotsite > p {color:#fff; letter-spacing: 1px; font-size: 14px; line-height: 22px; margin-top:15px;}

  #conteudo > p.promocoes-subtitulo { font-size: 18px; width: 85%; margin: 20px 0 40px 0; line-height: 30px; }

  .promocoes { width: 350px; height: auto; clear: both; margin: 15px auto 25px auto; overflow: hidden; }
  .promocoes-facial { background-image: url('../img/promocoes/Mitras_Vertical_Facial_BG.jpg'); background-repeat: no-repeat; background-position: top; background-size: 100% 100%; }
  .promocoes-corporal { background-image: url('../img/promocoes/Mitras_Vertical_Corporal_BG.jpg'); background-repeat: no-repeat; background-position: top; background-size: 100% 100%; }
  .promocoes-especial { background-image: url('../img/promocoes/Mitras_Vertical_Julho2018_BG_2.jpg'); background-repeat: no-repeat; background-position: top; background-size: 100% 100%; }
  .promocoes h3 { color: #4c6a6f; font-size: 32px; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; text-decoration: none; text-transform: uppercase; }
  .promocoes h3 > .light { color: #4c6a6f; font-size: 32px; font-weight: 300; font-family: 'Roboto Condensed', sans-serif; text-decoration: none; text-transform: uppercase; }
  .promocoes h3.small { font-size: 28px; }
  .promocoes h3.small > .light { color: #4c6a6f; font-size: 28px; font-weight: 300; font-family: 'Roboto Condensed', sans-serif; text-decoration: none; text-transform: uppercase; }
  .promocoes h4 { color: #4c6a6f; font-size: 18px; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; text-decoration: none; text-transform: uppercase; padding: 10px 0;}
  .promocoes li { color: #4c6a6f; font-size: 15px; font-weight: 400; font-family: 'Open Sans', sans-serif; text-decoration: none; }
  .promocoes li > .obs { color: #4c6a6f; font-size: 13px; font-weight: 400; font-family: 'Open Sans', sans-serif; text-decoration: none; }
  .promocoes p.valor-original { color: #4c6a6f; font-size: 15px; font-weight: 300; font-family: 'Roboto Condensed', sans-serif; text-decoration: line-through; text-transform: uppercase; }
  .promocoes p.valor-oferta { color: #4c6a6f; font-size: 24px; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; text-decoration: none; text-transform: uppercase; }
  .promocoes ul { margin-bottom: 15px; }
  .promocoes-imagem { float: none; text-align: center; }
  .promocoes-imagem > IMG { width: 85%; height: auto; border: 17px solid #FFFFFF; -webkit-box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.30); -moz-box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.30); box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.30); }
  .promocoes-descricao { float: none; padding: 15px 38px 30px; max-width: 100%; }
}

@media screen and (max-width: 320px) {
  #conteudo > p.promocoes-subtitulo { font-size: 16px; width: 90%; margin: 20px 0 40px 0; line-height: 24px; }
  .promocoes { width: 310px; height: auto; clear: both; margin: 15px auto 25px auto; overflow: hidden; }
  .promocoes-facial { background-size: 100% 100%; }
  .promocoes-corporal { background-size: 100% 100%; }
  .promocoes-especial { background-size: 100% 100%; }
  .promocoes h3 { color: #4c6a6f; font-size: 28px; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; text-decoration: none; text-transform: uppercase; }
  .promocoes h3 > .light { color: #4c6a6f; font-size: 28px; font-weight: 300; font-family: 'Roboto Condensed', sans-serif; text-decoration: none; text-transform: uppercase; }
  .promocoes h3.small { font-size: 26px; }
  .promocoes h3.small > .light { color: #4c6a6f; font-size: 26px; font-weight: 300; font-family: 'Roboto Condensed', sans-serif; text-decoration: none; text-transform: uppercase; }
  .promocoes-imagem { float: none; text-align: center; }
  .promocoes-imagem > IMG { width: 78%; height: auto; border: 17px solid #FFFFFF; -webkit-box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.30); -moz-box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.30); box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.30); }
  .promocoes-descricao { float: none; padding: 15px 25px 30px; max-width: 100%; }
}