/*------------------------------*\
fontes - roboto 
\*------------------------------*/

@import url('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

@font-face {
  font-family: 'roboto';
  src: url('../fonts/roboto-regular-webfont.eot');
  src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
    url('../fonts/roboto-regular-webfont.svg#robotomedium') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'roboto';
  src: url('../fonts/roboto-thin-webfont.eot');
  src: url('../fonts/roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto-thin-webfont.woff2') format('woff2'),
    url('../fonts/roboto-thin-webfont.woff') format('woff'),
    url('../fonts/roboto-thin-webfont.ttf') format('truetype'),
    url('../fonts/roboto-thin-webfont.svg#robotothin') format('svg');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'roboto';
  src: url('../fonts/roboto-light-webfont.eot');
  src: url('../fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto-light-webfont.woff2') format('woff2'),
    url('../fonts/roboto-light-webfont.woff') format('woff'),
    url('../fonts/roboto-light-webfont.ttf') format('truetype'),
    url('../fonts/roboto-light-webfont.svg#robotolight') format('svg');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'roboto';
  src: url('../fonts/roboto-regular-webfont.eot');
  src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
    url('../fonts/roboto-regular-webfont.woff') format('woff'),
    url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
    url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'roboto';
  src: url('../fonts/roboto-medium-webfont.eot');
  src: url('../fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
    url('../fonts/roboto-medium-webfont.woff') format('woff'),
    url('../fonts/roboto-medium-webfont.ttf') format('truetype'),
    url('../fonts/roboto-medium-webfont.svg#robotomedium') format('svg');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'roboto';
  src: url('../fonts/roboto-bold-webfont.eot');
  src: url('../fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
    url('../fonts/roboto-bold-webfont.woff') format('woff'),
    url('../fonts/roboto-bold-webfont.ttf') format('truetype'),
    url('../fonts/roboto-bold-webfont.svg#robotobold') format('svg');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'roboto';
  src: url('../fonts/roboto-black-webfont.eot');
  src: url('../fonts/roboto-black-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roboto-black-webfont.woff2') format('woff2'),
    url('../fonts/roboto-black-webfont.woff') format('woff'),
    url('../fonts/roboto-black-webfont.ttf') format('truetype'),
    url('../fonts/roboto-black-webfont.svg#robotoblack') format('svg');
  font-weight: 900;
  font-style: normal;
}



body *{line-height: normal;}

/* -------------------------------- 
Css Teste
-------------------------------- */
#bread-crumb .menuToggle {
  display:none;
}
.slideMenu {
  display:none;
}
#menu-rodape .both.none {
  display:none;   
}
/*------------------------------*\
Css - TAGS
\*------------------------------*/
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: font-size 0.5s;
  -moz-transition: font-size 0.5s;
  -o-transition: font-size 0.5s;
  transition: font-size 0.5s;}
html {font-size: 62.5%;}
p {font-size: 1.6rem; margin-bottom:15px;}
a {text-decoration: none;}
h2 {color:#000; font-size:2.4rem; width:100%; font-weight:600;}
b {font-weight:700;}
strong {font-weight: bold;}
em {font-style: italic;}
section {display: table; width: 100%;}

/*-----------1023px--------------*/
@media screen and (max-width: 1023px) {
  body {padding:5px;}
}

/*-----------425px--------------*/
@media screen and (max-width: 425px) {
  main {clear: both;}
}

/*------------------------------*\
Css - Controle
\*------------------------------*/
.both {clear:both;}
.clear-10 {padding: 5px 0;}
.clear-20 {padding: 10px 0;}
.txt-left {text-align: left;}
.txt-center {text-align: center;}
.txt-right {text-align: right;}
.oculto {position:absolute;left:-2000px;margin-top:-50px;}
.borda {
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  -o-border-radius:6px;
  border-radius:6px;}
.sombra {
  -webkit-box-shadow: 2px 2px 6px #171717;
  -moz-box-shadow: 2px 2px 6px #171717;
  -o-box-shadow: 2px 2px 6px #171717;
  box-shadow: 2px 2px 6px #171717;}
.bg-cinza {background-color:#eeeeee;}
button.fright {
  float:right;
}
.fleft {float:left;}
.border-top{border-top:1px solid #444;}
.pad10 {padding:10px;}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.bt-vermelho {
  background-color: #e30613;
  color: #fff;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 14px;
  padding: 5px 0;
  text-align: center;
}

.bt-vermelho a {
  color: #FFF;
}



/*------------------------------*\
Css - Grid
\*------------------------------*/
.row, .column { box-sizing: border-box;}
.row:before, .row:after { content: " "; display: table;}
.row:after { clear: both;}
.column { position: relative; float: left; display: block;}
.column + .column { margin-left: 1.6%;}
.column-1 { width: 6.86666666667%;} .column-2 { width: 15.3333333333%;} .column-3 { width: 23.8%;} .column-4 { width: 32.2666666667%;} .column-5 { width: 40.7333333333%;} .column-6 { width: 49.2%;} .column-7 { width: 57.6666666667%;} .column-8 { width: 66.1333333333%;} .column-9 {width: 74.6%;} .column-10 { width: 83.0666666667%;} .column-11 { width: 91.5333333333%;} .column-12 { width: 100%;margin-left: 0;}
.row { margin-bottom: 10px;}
.row:last-child { margin-bottom: 0;}

/* media querie de controle da grid */



@media only screen and (max-width: 550px) {
  .column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 { float: none; width: auto;}
  .column + .column { margin-left: 0; margin-bottom:10px;}
  .row { margin-bottom: 0;}
  .column { margin-bottom: 10px;}
  .row .row {margin-bottom: 0;}
  .row .row:last-child {margin-bottom: 0;}
  .row:last-child .column:last-child { margin-bottom: 0;}

}

@media screen and (max-width: 992px) {
  .column-md-1, .column-md-2, .column-md-3, .column-md-4, .column-md-5, .column-md-6 , .column-md-7, .column-md-8, .column-md-9 , .column-md-10, .column-md-11, .column-md-12 { float: left; padding: 0 5px;}
  .column-md-1 { width: 6.86666666667%;} .column-md-2 { width: 15.3333333333%;} .column-md-3 { width: 23.8%;} .column-md-4 { width: 32.2666666667%;} .column-md-5 { width: 40.7333333333%;} .column-md-6 { width: 49.2%;} .column-md-7 { width: 57.6666666667%;} .column-md-8 { width: 66.1333333333%;} .column-md-9 {width: 74.6%;} .column-md-10 { width: 83.0666666667%;} .column-md-11 { width: 91.5333333333%;} .column-md-12 { width: 100%;margin-left: 0;}
}


/***** BREADCRUMB AGENDAMENTO (InÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â­cio) *****/


/* -------------------------------- 

Basic Style

-------------------------------- */
.cd-breadcrumb, .cd-multi-steps {
  width: 90%;
  max-width: 768px;
  padding: 0.5em 1em;
  margin: 1em auto;
  background-color: #edeff0;
  border-radius: .25em;
}
.cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
  /* 
  li > *::after is the colored triangle after each item
  li::after is the white separator between two items
  */
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  content: '';
  height: 0;
  width: 0;
  /* 48px is the height of the <a> element */
  border: 24px solid transparent;
  border-width: 13px 0 13px 8px;
}
.cd-breadcrumb.triangle li > * {
  position: relative;
  padding: .4em .6em .4em 1.4rem;
  color: #FFF;
  background-color: #ef3a37;
  /* the border color is used to style its ::after pseudo-element */
  border-color: #ef3a37;
  width:100%;
  text-align:center;
}
.cd-breadcrumb.triangle li > * {
  font-size: 1.2rem;
}
.cd-breadcrumb.triangle li {width:32.9%;}

@media only screen and (max-width:987px) {
  .cd-breadcrumb.triangle li {width:32.5%;}
}
@media only screen and (max-width: 768px) {
  .cd-breadcrumb.triangle li {width:32.3%;}
}
@media only screen and (max-width: 414px) {
  .cd-breadcrumb.triangle li {width:32%;}
}


@media only screen and (max-width: 375px) {
  .cd-breadcrumb.triangle li {width:32.3%;}
}

@media only screen and (max-width: 355px) {
  .cd-breadcrumb.triangle li {width:32.2%;}
  .cd-breadcrumb.triangle li > * {
    font-size: 1rem;
  }
  .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
    border-width: 9px 0 13px 8px;
  }
}


.cd-breadcrumb:after, .cd-multi-steps:after {
  content: "";
  display: table;
  clear: both;
}
.cd-breadcrumb li, .cd-multi-steps li {
  display: inline-block;
  float: left;
  margin: 0.5em 0;
}
.cd-breadcrumb li::after, .cd-multi-steps li::after {
  /* this is the separator between items */
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}
.cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {
  /* hide separator after the last item */
  display: none;
}
.cd-breadcrumb li > *, .cd-multi-steps li > * {
  /* single step */
  display: inline-block;
  font-size: 1.4rem;
  color: #2c3f4c;
}
.cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {
  /* selected step */
  color: #96c03d;
}
.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {
  /* steps already visited */
  color: #96c03d;
}
.cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after {
  /* replace the default arrow separator with a custom icon */
  content: '';
  height: 16px;
  width: 16px;
  background: url(../img/cd-custom-separator.svg) no-repeat center center;
  vertical-align: middle;
}
.cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before {
  /* add a custom icon before each item */
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: .4em;
  margin-top: -2px;
  background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
  vertical-align: middle;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
  /* change custom icon using image sprites */
  background-position: -20px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
  background-position: -40px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
  background-position: -60px 0;
}
.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before {
  /* change custom icon for the current item */
  background-position: 0 -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
  background-position: -20px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
  background-position: -40px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
  background-position: -60px -20px;
}
@media only screen and (min-width: 768px) {
  .cd-breadcrumb, .cd-multi-steps {
    padding: 0 1.2em;
  }
  .cd-breadcrumb li, .cd-multi-steps li {
    margin: 1.2em 0;
  }
  .cd-breadcrumb li::after, .cd-multi-steps li::after {
    margin: 0 1em;
  }
  .cd-breadcrumb li > *, .cd-multi-steps li > * {
    font-size: 1.4rem;
  }
}

/* -------------------------------- 

Triangle breadcrumb

-------------------------------- */
@media only screen and (min-width: 768px) {
  .cd-breadcrumb.triangle {
    /* reset basic style */
    background-color: transparent;
    padding: 0;
  }
  .cd-breadcrumb.triangle li {
    position: relative;
    padding: 0;
    margin: 4px 4px 4px 0;
  }
  .cd-breadcrumb.triangle li:last-of-type {
    margin-right: 0;
  }

  .cd-breadcrumb.triangle li.current > * {
    /* selected step */
    color: #ffffff;
    background-color: #88040c;
    border-color: #88040c;
  }
  .cd-breadcrumb.triangle li:first-of-type > * {
    padding-left: 1em;
    border-radius: .25em 0 0 .25em;
  }
  .cd-breadcrumb.triangle li:last-of-type > * {
    padding-right: 1em;
    border-radius: 0 .25em .25em 0;
  }
  .no-touch .cd-breadcrumb.triangle a:hover {
    /* steps already visited */
    color: #ffffff;
    background-color: #2c3f4c;
    border-color: #2c3f4c;
  }

  .cd-breadcrumb.triangle li::after {
    /* this is the white separator between two items */
    z-index: 1;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
    border-left-color: #ffffff;
    /* reset style */
    margin: 0;
  }
  .cd-breadcrumb.triangle li > *::after {
    /* this is the colored triangle after each element */
    z-index: 2;
    border-left-color: inherit;
  }
  .cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after {
    /* hide the triangle after the last step */
    display: none;
  }
  .cd-breadcrumb.triangle.custom-separator li::after {
    /* reset style */
    background-image: none;
  }
  .cd-breadcrumb.triangle.custom-icons li::after, .cd-breadcrumb.triangle.custom-icons li > *::after {
    /* 50px is the height of the <a> element */
    border-top-width: 25px;
    border-bottom-width: 25px;
  }

}


@media only screen and (min-width: 320px) {
  .cd-breadcrumb.triangle {
    /* reset basic style */
    background-color: transparent;
    padding: 0;
  }
  .cd-breadcrumb.triangle li {
    position: relative;
    padding: 0;
    margin: 4px 4px 4px 0;
  }
  .cd-breadcrumb.triangle li:last-of-type {
    margin-right: 0;
  }
  .cd-breadcrumb.triangle li.current > * {
    /* selected step */
    color: #ffffff;
    background-color: #88040c;
    border-color: #88040c;
  }
  .cd-breadcrumb.triangle li:first-of-type > * {
    padding-left: 1em;
    border-radius: .25em 0 0 .25em;
  }
  .cd-breadcrumb.triangle li:last-of-type > * {
    padding-right: 1em;
    border-radius: 0 .25em .25em 0;
  }
  .no-touch .cd-breadcrumb.triangle a:hover {
    /* steps already visited */
    color: #ffffff;
    background-color: #2c3f4c;
    border-color: #2c3f4c;
  }

  .cd-breadcrumb.triangle li::after {
    /* this is the white separator between two items */
    z-index: 1;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
    border-left-color: #ffffff;
    /* reset style */
    margin: 0;
  }
  .cd-breadcrumb.triangle li > *::after {
    /* this is the colored triangle after each element */
    z-index: 2;
    border-left-color: inherit;
  }
  .cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after {
    /* hide the triangle after the last step */
    display: none;
  }
  .cd-breadcrumb.triangle.custom-separator li::after {
    /* reset style */
    background-image: none;
  }
  .cd-breadcrumb.triangle.custom-icons li::after, .cd-breadcrumb.triangle.custom-icons li > *::after {
    /* 50px is the height of the <a> element */
    border-top-width: 25px;
    border-bottom-width: 25px;
  }


}
/* -------------------------------- 

Custom icons hover effects - breadcrumb and multi-steps

-------------------------------- */
@media only screen and (min-width: 768px) {
  .no-touch .cd-breadcrumb.triangle.custom-icons li:first-of-type a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:first-of-type em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:first-of-type a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:first-of-type em::before {
    /* change custom icon using image sprites - hover effect or current item */
    background-position: 0 -40px;
  }
  .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(2) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(2) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(2) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(2) em::before {
    background-position: -20px -40px;
  }
  .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(3) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(3) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(3) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(3) em::before {
    background-position: -40px -40px;
  }
  .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(4) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(4) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(4) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(4) em::before {
    background-position: -60px -40px;
  }
}
/* -------------------------------- 

Multi steps indicator 

-------------------------------- */
@media only screen and (min-width: 768px) {
  .cd-multi-steps {
    /* reset style */
    background-color: transparent;
    padding: 0;
    text-align: center;
  }

  .cd-multi-steps li {
    position: relative;
    float: none;
    margin: 0.4em 40px 0.4em 0;
  }
  .cd-multi-steps li:last-of-type {
    margin-right: 0;
  }
  .cd-multi-steps li::after {
    /* this is the line connecting 2 adjacent items */
    position: absolute;
    content: '';
    height: 4px;
    background: #edeff0;
    /* reset style */
    margin: 0;
  }
  .cd-multi-steps li.visited::after {
    background-color: #96c03d;
  }
  .cd-multi-steps li > *, .cd-multi-steps li.current > * {
    position: relative;
    color: #2c3f4c;
  }

  .cd-multi-steps.custom-separator li::after {
    /* reset style */
    height: 4px;
    background: #edeff0;
  }

  .cd-multi-steps.text-center li::after {
    width: 100%;
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%) translateX(-1px);
    -moz-transform: translateY(-50%) translateX(-1px);
    -ms-transform: translateY(-50%) translateX(-1px);
    -o-transform: translateY(-50%) translateX(-1px);
    transform: translateY(-50%) translateX(-1px);
  }
  .cd-multi-steps.text-center li > * {
    z-index: 1;
    padding: .6em 1em;
    border-radius: .25em;
    background-color: #edeff0;
  }
  .no-touch .cd-multi-steps.text-center a:hover {
    background-color: #2c3f4c;
  }
  .cd-multi-steps.text-center li.current > *, .cd-multi-steps.text-center li.visited > * {
    color: #ffffff;
    background-color: #96c03d;
  }
  .cd-multi-steps.text-center.custom-icons li.visited a::before {
    /* change the custom icon for the visited item - check icon */
    background-position: 0 -60px;
  }

  .cd-multi-steps.text-top li, .cd-multi-steps.text-bottom li {
    width: 80px;
    text-align: center;
  }
  .cd-multi-steps.text-top li::after, .cd-multi-steps.text-bottom li::after {
    /* this is the line connecting 2 adjacent items */
    position: absolute;
    left: 50%;
    /* 40px is the <li> right margin value */
    width: calc(100% + 40px);
  }
  .cd-multi-steps.text-top li > *::before, .cd-multi-steps.text-bottom li > *::before {
    /* this is the spot indicator */
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #edeff0;
  }
  .cd-multi-steps.text-top li.visited > *::before,
  .cd-multi-steps.text-top li.current > *::before, .cd-multi-steps.text-bottom li.visited > *::before,
  .cd-multi-steps.text-bottom li.current > *::before {
    background-color: #96c03d;
  }
  .no-touch .cd-multi-steps.text-top a:hover, .no-touch .cd-multi-steps.text-bottom a:hover {
    color: #96c03d;
  }
  .no-touch .cd-multi-steps.text-top a:hover::before, .no-touch .cd-multi-steps.text-bottom a:hover::before {
    box-shadow: 0 0 0 3px rgba(150, 192, 61, 0.3);
  }

  .cd-multi-steps.text-top li::after {
    /* this is the line connecting 2 adjacent items */
    bottom: 4px;
  }
  .cd-multi-steps.text-top li > * {
    padding-bottom: 20px;
  }
  .cd-multi-steps.text-top li > *::before {
    /* this is the spot indicator */
    bottom: 0;
  }

  .cd-multi-steps.text-bottom li::after {
    /* this is the line connecting 2 adjacent items */
    top: 3px;
  }
  .cd-multi-steps.text-bottom li > * {
    padding-top: 20px;
  }
  .cd-multi-steps.text-bottom li > *::before {
    /* this is the spot indicator */
    top: 0;
  }
}
/* -------------------------------- 

Add a counter to the multi-steps indicator 

-------------------------------- */
.cd-multi-steps.count li {
  counter-increment: steps;
}

.cd-multi-steps.count li > *::before {
  content: counter(steps) " - ";
}

@media only screen and (min-width: 768px) {
  .cd-multi-steps.text-top.count li > *::before,
  .cd-multi-steps.text-bottom.count li > *::before {
    /* this is the spot indicator */
    content: counter(steps);
    height: 26px;
    width: 26px;
    line-height: 26px;
    font-size: 1.4rem;
    color: #ffffff;
  }

  .cd-multi-steps.text-top.count li:not(.current) em::before,
  .cd-multi-steps.text-bottom.count li:not(.current) em::before {
    /* steps not visited yet - counter color */
    color: #2c3f4c;
  }

  .cd-multi-steps.text-top.count li::after {
    bottom: 11px;
  }

  .cd-multi-steps.text-top.count li > * {
    padding-bottom: 34px;
  }

  .cd-multi-steps.text-bottom.count li::after {
    top: 11px;
  }

  .cd-multi-steps.text-bottom.count li > * {
    padding-top: 34px;
  }
}


/***** BREADCRUMB AGENDAMENTO (Fim) *****/



/***** CHAT STYLE (InÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â­cio) *****/


@font-face {
  font-family: 'fontello';
  src: url("../fonts/sentinel.eot");
  src: url("../fonts/sentinel.eot") format('embedded-opentype'),
    url("../fonts/sentinel.woff") format('woff'),
    url("../fonts/sentinel.ttf") format('truetype'),
    url("../fonts/sentinel.svg") format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../resources/chat/font/fontello.svg?33675971#fontello') format('svg');
}
}
*/

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /*	transition: opacity 200ms;*/
  visibility: hidden;
  opacity: 0;
  z-index: 9999 !important;
}

.overlay_error{
  background: rgba(203, 78, 78, 0.9);
}

.overlay_error i{
  color: #ff7878;
  font-size: 120px;
  position: absolute;
  left: -160px;
  top: 0;
}
.overlay_attention{
  background: rgba(234, 175, 35, 0.9);
}
.overlay_attention i{
  color: #ffda10;
  font-size: 120px;
  position: absolute;
  left: -160px;
  top: 0;
}
.overlay_normal{
  background: rgba(38, 38, 38, 0.9);
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 10% auto;
  padding: 20px;
  background: transparent;
  border-radius: 5px;
  width: 60%;
  position: relative;
  /*	transition: all 0s ease-in-out;*/
}
.btn_popup{
  padding:20px 20px 0 0;
  float: left;
}
.popup h2 {
  margin-top: 0;
  color: #fff;
  font-size: 48px;
  font-family: 'roboto';
  font-weight: 100;
  padding-bottom:20px;
}

.popup .content_popup {
  /*
  max-height: 300px !important;
  overflow: auto;
  */
  font-size: 18px;
  color: #fff;
}

.white_button{
  background: transparent;
  padding: 10px 30px;
  font-family: 'roboto'; 
  text-transform: uppercase;
  text-align: center;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  width: 100%;
  border:1px solid #fff;
  display: inline-block;
}
.white_button:hover,.white_button:focus,.white_button:active{
  background: #fff;
  color: #311e38;
  border: 1px solid #fff;
  box-shadow: 0 0 0 0 !important;
}

.white_button_destaque{
  background: rgba(255, 255, 255, 0.5);
}

.bloco-3-col {
  width: 33.333333%;
  position: relative;
}

.icon-cancel-circled-outline:before { content: '\e9db'; } /* 'ÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Æ’ÃƒÆ’Ã‚â€šÃƒâ€šÃ‚Â®ÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚â€šÃƒÆ’Ã‚â€šÃƒâ€šÃ‚Â§ÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â¢ÃƒÆ’Ã‚Â¢Ãƒâ€šÃ‚â€šÃƒâ€šÃ‚Â¬ÃƒÆ’Ã‚â€šÃƒâ€šÃ‚Âº' */
.icon-warning-empty:before { content: '\ea15'; } /* 'ÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Æ’ÃƒÆ’Ã‚â€šÃƒâ€šÃ‚Â®ÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚â€šÃƒÆ’Ã‚â€šÃƒâ€šÃ‚Â¨ÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â¢ÃƒÆ’Ã‚Â¢Ãƒâ€šÃ‚â€šÃƒâ€šÃ‚Â¬ÃƒÆ’Ã‚â€šÃƒâ€šÃ‚Â¢' */

.chat-content-nop .conversa {
  max-height: 160px; overflow-y: auto;
}
.chat-content-nop .avaliacao {
  width:100%;border:1px solid #d2d2d2; padding:15px 10px 15px 10px; background-color:#fff; float:left; font-weight:normal; font-size: 1.4rem;
}


/* -------------------------------- 
-------------------------------- */
.confirm {
  background-color:#49b87f;
  color:#fff;
  padding:12px 18px 12px 18px;
  border:0;
  border-radius:3px;
  font-size:1.4rem; cursor: pointer;}
.cancel_encerrar {
  background-color:#49b87f;
  color:#fff;
  padding:12px 18px 12px 18px;
  border:0;
  border-radius:3px;
  font-size:1.4rem;}
.cancel {
  background-color:#fb5454;
  color:#fff;
  padding:12px 18px 12px 18px;
  border:0;
  border-radius:3px;
  font-size:1.4rem;}
.confirmar {
  background-color:#fb5454;
  color:#fff;
  padding:12px 18px 12px 18px;
  border:0;
  border-radius:3px;
  font-size:1.4rem;
  cursor: pointer;}
.anterior {
  background-color:#49b87f;
  color:#fff;
  padding:12px 18px 12px 18px;
  border:0;
  border-radius:3px;
  font-size:1.4rem;
  cursor: pointer;
  }

/***** CHAT STYLE (Fim) *****/



/*------------------------------*\
Barra de Acessibilidade
\*------------------------------*/
#barra-acessibilidade { width:100%; font-size: 1.4rem; background-color:#4e4e4e; padding:7px 0; position: fixed; top:0; left:0; z-index:10;}
#barra-acessibilidade li { float:left;margin-right:10px;} #barra-acessibilidade a {color:#fff;} #barra-acessibilidade li:last-child { margin-right:0;}
#barra-acessibilidade.sombra {
  -webkit-box-shadow: 2px 2px 12px #171717;
  -moz-box-shadow: 2px 2px 12px #171717;
  -o-box-shadow: 2px 2px 12px #171717;
  box-shadow: 2px 2px 12px #171717;}
.barra-center { width:100%; max-width:1000px; margin-left:50%; left:-500px; position: relative;}
#atalhos {height:20px; width:auto; margin-top:5px; float:left; font-weight: 100;}
#controles {float:right; color:#626262; font-size:2.0rem; font-weight: 600;}
#controles a {color:#fff; font-size:1.4rem; font-weight: 100;}
#controles button {background-color:#4e4e4e; color:#fff; border: 0; font-weight:bold; padding:4px 0;}
#controles button:hover {cursor:pointer;}
#controles li {margin-right:4px;}
#controles li a {color:#fff;}
#contraste, #sem-contraste {cursor: pointer;}
/*--------1023px-------------*/
@media screen and (max-width: 1023px) {
  #barra-acessibilidade {display: none;}}
/*------------------------------*\
DIV que centraliza o conteudo
\*------------------------------*/
.content-center { width:100%; max-width:1000px; margin: 0 auto; left:-500px; padding:10px; height:auto;margin-top:50px;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -o-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;}
/*--------1023px-------------*/
@media screen and (max-width: 1023px) {
  .content-center { margin: 0; width:100%;}}
/*--------668px-------------*/
@media screen and (max-width: 668px) {
  .content-center { padding:3px;}}

/*------------------------------*\
HEADER
\*------------------------------*/
#cabecalho { width:100%; height:auto; padding:5px; }
#cabecalho h1 { color:#fff; position:relative; top:0; left:0; z-index:0; width: 148px;}
#cabecalho .logo { width:291px; height:87px; float:left;}
.links { width:650px; height:40px; float:right; margin-bottom:12px;}
.links .links-top { float:left; width:350px; height:auto; margin-top:7px; font-size:1.4rem; font-weight:bold; color:#646464;}
.links-top li { float:left; margin-right:10px;}
.links-top li img { float:left; margin-right:5px;}
.links-top li span { margin-top:5px; float:left;}
.verde a { color:#327e4c;}
.cinza a { color:#646464;}
.links-top a { font-size:1.4rem; font-weight:bold;}
.social-links { float:right; width:207px;}
.social-links li {float:left; width: 34px;padding-left: 4px;}
.social-links li  img{ width:100%;}
.social-links li:last-child {border-right:0;}
/*--------1023px-------------*/
@media screen and (max-width: 1023px) {
  #cabecalho { width:100%; height:auto; padding:5px; margin-bottom:5px;}
  #cabecalho #submenu { display:none;   }
  .links { width:207px;}
  .links .links-top { float:right; width:207px;}
  .links-top li { float:right;  height:20px;}
  .links-top ul {margin-left:10px;}
  .links-top li a { float:left; width:155px;}
  .links-top li img { position:relative; left:-5px; top:10px;}
  .links-top li:nth-child(2) { display:none;}
}
/*--------640px-------------*/
@media screen and (max-width: 640px) {
  #cabecalho { width:100%; margin-bottom:2px;}
}
/*--------545px-------------*/
@media screen and (max-width: 545px) {
  #cabecalho .logo {width:49%;}
  #cabecalho .logo img {width:100%; height:auto;}
  .links {width:50%;}  
}
/*--------414px-------------*/
@media screen and (max-width: 414px) {
  .links .social-links { display: none;}
  #cabecalho .logo {width:45%; height:auto; float:left;}
}
/*--------384px-------------*/
@media screen and (max-width: 384px) {
  .links .links-top {margin-top:0;}
  #cabecalho .logo {width: 42%;}
}
/*--------320px-------------*/
@media screen and (max-width: 375px) {
  #cabecalho .logo {width: 83%; margin:0 6%;}

  #cabecalho .links-top { width: 102%; margin-top:0;}
  #cabecalho .links { margin-bottom:0;  width: 100%;}
  #cabecalho .links-top li { float:left; font-size: 1.1rem; width:auto;}
  #cabecalho .links-top li img{ left:0;   }
  .links-top li a { float: left; width: auto; font-size: 1.1rem; font-weight: bold;}
  .links-top li span { margin-top: 15px;}
  #cabecalho .links-top li:nth-child(2) {display: block;}
  .links-top li img {float :left;}
}
/*------------------------------*\
MENU
\*------------------------------*/
#menu {width:100%; height:auto; margin-bottom:10px; float:left; padding:5px 0;}
#menu .menu-item { float:left; height:auto; font-size:1.6rem; padding:5px; color:#fff; margin-left:10px;}
#menu .menu-item span{ margin-top:2px; float: left;}
#menu .menu-item img { margin-right: 10px; float: left;}
#menu .menu-item a { color:#fff;}
#busca { width:auto; float:right; margin-top:3px;}
#busca fieldset { width:auto;  float:right;  margin-right:5px;}
#menu input { border:0; background-color:#fff; height:28px; padding-left:5px; color:#4e4e4e; font-weight:bold; width: 190px;}
#menu input.buscar { margin-left:-3px; width:40px; color:#4e4e4e;text-indent: -2000px; }
/*--------------1023px-----------*/
@media screen and (max-width: 1023px) {
  #menu .menu-item {float:left; padding:10px ; font-size:1.2rem; font-weight:bold; }
  #menu .menu-um img {width:20px; margin-right:5px;}
  #menu .menu-dois img  {width:18px; margin-right:5px; }
  #menu .menu-tres img  {width:18px; margin-right:5px;}
  #menu .menu-quatro img  {width:18px; margin-right:5px;}
  #menu .menu-cinco img  {width:18px;margin-right:5px;}
}

/*--------------850px-----------*/
@media screen and (max-width: 859px)  {
  #menu input {width: 200px;}
}
/*--------------768px-----------*/
@media screen and (max-width: 768px)  {
  #menu .menu-item {margin-left: 44px; padding: 7px 5px; margin-top: 3px; margin-right: -38px;}
  #menu input {width: 190px;}
}
/*--------------747px-----------*/
@media screen and (max-width: 747px)  {
  #menu .menu-item span { display:none;}
  #menu .menu-item { width:30px; padding:5px 0;}
  #menu .menu-um img {width:28px;}
  #menu .menu-dois img { width:22px;}
  #menu .menu-tres img { width:25px;}
  #menu .menu-quatro img { width:26px;}
  #menu .menu-cinco img { width:22px;}
}

/*--------------747px-----------*/
@media screen and (max-width: 747px) {
  #menu .menu-item {margin-left: 66px; margin-right: -28px;}
}

/*--------------667px-----------*/
@media screen and (max-width: 667px) {
  #menu .menu-item {margin-left: 66px; margin-right: -28px;}
}

/*--------------640px-----------*/
@media screen and (max-width: 640px) {
  #menu .menu-item {margin-left: 60px; margin-right: -28px;}
}

/*--------------583px-----------*/
@media screen and (max-width: 583px) {
  #menu .menu-item {margin-left: 66px; margin-right: -44px;}
}

/*--------------550px-----------*/
@media screen and (max-width: 550px) {
  #menu .menu-item {margin-left: 55px; margin-right: -44px;}
}

/*--------------500px-----------*/
@media screen and (max-width: 500px) {
  #menu {width: 100%;}
  #menu .menu-item {float:left; padding: 5px; font-size: 0.8rem; font-weight: bold; margin-left: 45px; margin-right: -41px;}
}

/*--------------465px-----------*/
@media screen and (max-width: 465px) {
  #busca  {width:98%;padding-left:3px;} 
  #busca fieldset {width:100%; margin:0;}
  #menu input {height:25px; width:85%;}
  #menu input.buscar {width: 15%; height:25px;}
  #menu .menu-item {float:left; padding: 5px; font-size: 0.8rem; font-weight: bold; margin-left: 57px; margin-right: -14px;}
}
/*--------------399px-----------*/
@media screen and (max-width: 399px) {
  #menu {width: 100%;margin-bottom: 5px;}
  #menu .menu-item { float: left;padding: 5px 0 3px 0;font-size: 0.8rem;font-weight: bold; margin-left: 48px;}
  #menu .menu-item:first-child {margin-left:64px;}
  #busca  {width:100%;padding-left:5px;} 
  #busca fieldset {width:100%; margin:0;}
  #menu input {height:25px; width:85%;}
  #menu input.buscar {width: 15%; height:25px;}
}
/*--------------360px-----------*/
@media screen and (max-width: 360px) {
  #menu .menu-item {margin-left:30px;}
  #menu .menu-item {margin-left: 65px; margin-right: -33px;}
  #menu .menu-item:first-child {margin-left:50px;}
}
/*--------------345px-----------*/
@media screen and (max-width: 345px) {
  #menu .menu-item {float:left; padding: 5px; font-size: 0.8rem; font-weight: bold; margin-left: 51px; margin-right: -28px;}
}

/*------------------------------*\
SUBMENU
\*------------------------------*/
#submenu li a {color:#444;}
#submenu {float: right; font-size:1.2rem;}
#submenu li { float:left;  margin-left:7px;}
#submenu a:hover { color:#cf0000;}
/*--------------905px-----------*/
@media screen and (max-width: 905px)  {
  #submenu li {margin-left:4px;   }
}
/*--------------860px-----------*/
@media screen and (max-width: 860px)  {
  #submenu li {margin-left:3px; font-size:1rem;}
}
/*--------------747px-----------*/
@media screen and (max-width: 747px)  {
  #submenu { display:none;}
}
/*------------------------------*\
SUBMENU MOBILE
\*------------------------------*/
.slideMenu {display:none;}
/*------------1023px------------*/
@media screen and (max-width: 1023px) {
  #menu .menuToggle{display: block;width: 25px;height: 25px;margin:4px 0 0 10px;float: left; position: relative;}
  #menu .menuToggle .hamburger {width: 23px;height: 13px;position: absolute;left: 50%;top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);}
  #menu .menuToggle .hamburger span, #menu .menuToggle .hamburger:before, #menu .menuToggle .hamburger:after { display: block; content:" "; width: 23px; height: 2px; font-size: 0.1rem; background: #fff; position: absolute; left: 0; top: 50%; margin-top: -1px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;}
  #menu .menuToggle .hamburger:before {top: 0; margin: 0;}
  #menu .menuToggle .hamburger:after {top: auto; bottom: 0; margin: 0;}
  #menu .menuToggle:hover, .topbar .menuToggle.isOpen {}
  #menu .menuToggle:hover .hamburger span,
  #menu .menuToggle:hover .hamburger:before,
  #menu .menuToggle:hover .hamburger:after{background: #fff;}
  #menu .menuToggle.isOpen  {top: -229px;left: 263px;z-index:10000;}
  #menu .menuToggle.isOpen .hamburger { width: 17px; height: 25px; top:-31%;}
  #menu .menuToggle.isOpen .hamburger span {background:transparent;}
  #menu .menuToggle.isOpen .hamburger:before { top: 11px; left: -4px;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);}
  #menu .menuToggle.isOpen .hamburger:after {top: 11px; left: -4px;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);}
  .slideMenu {background: #FFF;width: 320px;height: auto;position: absolute;left: 0;top: 0; padding-top: 30px; display: block;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-box-shadow: 2px 2px 6px #171717;
    -moz-box-shadow: 2px 2px 6px #171717;
    -ms-box-shadow: 2px 2px 6px #171717;
    -o-box-shadow: 2px 2px 6px #171717;
    box-shadow: 2px 2px 6px #171717;}
  .slideMenu .menu-mob-title { position:absolute;top:0;left:0;background:#7e020a url('../img/brasao-prefeitura-de-osasco.png') 10px center no-repeat; background-size:25px; color:#fff; width:100%; height:30px; font-size:1.4rem; padding:5px 0 0 45px;}
  .slideMenu.isOpen { z-index: 999;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-box-shadow: 2px 2px 6px #171717;
    -moz-box-shadow: 2px 2px 6px #171717;
    -ms-box-shadow: 2px 2px 6px #171717;
    -o-box-shadow: 2px 2px 6px #171717;
    box-shadow: 2px 2px 6px #171717;}
  .slideMenu h3 { background-color: #34855b; color: #fff; font-weight: bold; font-size: 1.6rem; margin: 2px 2px 0 2px; padding: 3px 3px 3px 5px; border-radius: 4px;
  }
  .slideMenu ul { list-style: none; margin: 0 0 20px 0; padding: 0;}
  .slideMenu ul li { border-bottom:solid 1px #a7050f; border-top:solid 1px #e30613;}
  .slideMenu ul li a { display: block; height: auto; color: #333; font-size: 1.4rem; text-decoration: none; padding: 8px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;}
  .slideMenu ul li a:hover {background-color: #7e020a; text-decoration: underline;color: #FFF;}}
/*-----------800px--------------*/
@media screen and (max-width: 800px)  {  
  #menu .menuToggle.isOpen { top: -220px; left:265px;}}
/*-----------768px--------------*/
@media screen and (max-width: 768px)  {  
  #menu .menuToggle.isOpen { top: -178px; left:265px;}}
/*-----------736px--------------*/
@media screen and (max-width: 736px)  {  
  #menu .menuToggle.isOpen { top: -168px; left:265px;}}
/*-----------667px--------------*/
@media screen and (max-width: 667px) {
  #menu .menuToggle.isOpen  {top: -168px;z-index:10000;}}
/*-----------640px--------------*/
@media screen and (max-width: 640px) {
  #menu .menuToggle.isOpen  {top: -148px;z-index:10000;}}
/*-----------600px--------------*/
@media screen and (max-width: 600px) {
  #menu .menuToggle.isOpen  {top: -136px;z-index:10000;}}
/*-----------480px--------------*/
@media screen and (max-width: 480px) {
  #menu .menuToggle.isOpen  {top: -178px;z-index:10000;}}
/*-----------400px--------------*/
@media screen and (max-width: 400px) {
  #menu .menuToggle.isOpen  {top: -178px;z-index:10000;}}
/*-----------320px--------------*/
@media screen and (max-width: 320px) {
  #menu .menuToggle.isOpen  {top: -122px; }}

/*------------------------------*\
BREADCRUMB
\*------------------------------*/ 

#breadcrumb {
  background: #e8e8e8 none repeat scroll 0 0;
  clear: both;
  display: table;	
  width: 100%;
}

#breadcrumb  ul li {
  float: left;
}
#breadcrumb  ul li a{
  color: #e30613;
  text-transform: uppercase;
}
#breadcrumb .voce-esta {
  background: #000;
  color: #FFF;
  font-weight: bold;
  padding: 6px 10px 5px;
}

/* Acerta a altura apenas em navegador webkit 
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
#breadcrumb .voce-esta {
padding: 6px 10px 5px;
}
}
*/

#breadcrumb .na-pagina {
  padding: 5px 10px;
}
#breadcrumb .outra-pagina {
  padding: 5px 10px;
}
#breadcrumb .seta {
  padding: 5px 0;
}

#breadcrumb .seta-breadcrumb {
  background: rgba(0, 0, 0, 0) url("../img/seta-breadcrumb.png") no-repeat scroll 0 0;
  padding: 5px 0;
  width: 25px;
}

@media screen and (max-width: 768px) {
  #breadcrumb {
    display: none;
  }
}

/*------------------------------*\
RODAPE
\*------------------------------*/ 
#rodape { width:100%; margin-top:10px; float:left; color:#fff;}
#rodape #menu-rodape {  background-color:#5b5b5b;  float:left;  width:100%;  height:auto; padding:10px 0 0 0; font-size: 1.4rem;}
#menu-rodape .coluna img {  margin-top: 20px;  margin-left: 20px;}
#menu-rodape .coluna { float:left; margin-left:10px; width:160px; height:auto; margin-bottom:10px;}
#menu-rodape .coluna.large { width:210px;}
#menu-rodape .coluna a { color:#fff; font-size:1.2rem;}
#menu-rodape .coluna a:hover { text-decoration: underline;
}
#menu-rodape .coluna h3 { color:#fff; font-weight:bold; float: left;}
#menu-rodape .coluna strong { font-weight: bold;   }
#menu-rodape .coluna ul { float:left; margin-top:8px; width: 100%;}
#menu-rodape .coluna li { margin-bottom:3px; font-size: 1.1rem !important;  }
#menu-rodape .bottom { background-color:#000; padding:5px 0 5px 15px; width:100%; float:left; color:#fff; font-size:1.2rem;}
#infos { background:#fff; float:left; width:100%; color:#000; border:solid 1px #dbdbdb; margin-bottom:5px; padding-right: 3px; padding-top: 6px;}
#infos a{ color:#000;}

#infos #submenu-rodape { margin-top:10px; float:left;}
#infos .social-links ul { border:0; width:206px; } 
#infos .social-links ul li{ height:40px;}


#submenu-rodape li a {color:#444;}
#submenu-rodape {float: right; font-size:1.2rem;}
#submenu-rodape li { float:left;  margin-left:7px;}
#submenu-rodape a:hover { color:#cf0000;}

/* -------------1023px--------------*/
@media screen and (max-width: 1023px) {
  #infos {letter-spacing: 0;} 
}
/* -------------963px--------------*/
@media screen and (max-width: 963px)  {
  #menu-rodape .coluna.some {display:none;}
  #menu-rodape .coluna {width:142px;}
}
/*--------------905px-----------*/
@media screen and (max-width: 905px)  {
  #submenu-rodape li {margin-left:4px;   }
}
/*--------------860px-----------*/
@media screen and (max-width: 860px)  {
  #submenu-rodape li {margin-left:3px; font-size:1rem;}
}

/*--------------768px-----------*/
@media screen and (max-width: 768px)  {
  #menu-rodape .coluna.large {width: 200px;}
}

/*--------------747px-----------*/
@media screen and (max-width: 747px)  {
  #submenu-rodape { display:none;}
}
/* -------------736px--------------*/
@media screen and (max-width: 736px)  {
  #menu-rodape .both.none {display: none;}
  #menu-rodape .coluna.large { width:165px;}
}
/* -------------729px--------------*/
@media screen and (max-width: 729px)  {
  #menu-rodape .coluna.large { width:210px;}
}
/* -------------667px--------------*/
@media screen and (max-width: 667px)  {
  #menu-rodape .coluna.large { width:180px;}
}
/* -------------480px--------------*/
@media screen and (max-width: 480px) {
  #menu-rodape .coluna {width: 180px; font-size: 1.2rem;}
  #menu-rodape .coluna ul { margin-top:5px; margin-bottom:20px;}
  #menu-rodape .coluna.large { width:210px;}
}
/* -------------375px--------------*/
@media screen and (max-width: 414px) {
  #infos {height:  41px;}
  #infos .social-links { display: block;}
  #rodape #menu-rodape {padding:5px 0 0 0; font-size: 1.1rem; margin-bottom:5px;}
  #menu-rodape .coluna { float:left; margin-left:5px; width:140px; height:auto; margin-bottom:10px;}
  #menu-rodape .coluna.large { width:205px;}
  #menu-rodape .coluna ul { float:left; margin-top:5px; width: 100%;}
  #menu-rodape .coluna li { margin-bottom:3px;}
}
/* -------------360px--------------*/
@media screen and (max-width: 360px) {
  #menu-rodape .coluna.large { width:180px;}
}
/* -------------320px--------------*/
@media screen and (max-width: 320px) {
  #menu-rodape .coluna.large { width:100%;}
}

/*************** HOME (InÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â­cio) ***************/





.titulo-box-home {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

@media screen and (max-width: 736px) {
  .titulo-box-home span {
    display: none;
  }
}

/* ServiÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â§os Mais Acessados - Home */

.tit-servico-mais-acessados {
  font-size: 1.3rem;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .tit-servico-mais-acessados {
    padding: 2px 0;
  }
}

.tit-servico-mais-acessados a {
  width:100%;
  height:auto;
  display:block;
  padding: 11px 7px 12px 33px;
  line-height: normal;
}

@media screen and (max-width: 640px) {
  .tit-servico-mais-acessados a {
    padding: 10px 7px 10px 33px;
  }
}



/* Box Portais - Home */

.tit-portal-destaque {
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  padding: 5px 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .tit-portal-destaque {
    font-size: 1.0rem;
  }
}

@media screen and (max-width: 768px) {
  .tit-portal-destaque {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 414px) {
  .tit-portal-destaque {
    font-size: 1.3rem;
  }
}

.portal-container {
  margin-bottom: 16px;
}

.img-portal {
  width: 100%;
  height: auto;
}

.img-portal:hover {
  border: 3px solid #e30613;

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.tit-portal {
  color: #e30613;
  display: table;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 16px 0 0 10px;
}

.nome-portal {
  color: #000;
  display: table;
  font-size: 1.8rem;
  font-weight: bold;
  padding-left: 10px;
}

@media screen and (max-width: 800px) {
  .portal-container {
    margin-bottom: 30px;
  }

  .img-portal img {
    max-width: 49px;
  }

  .tit-portal {
    font-size: 1.1rem;
    padding-left: 5px;
  }

  .nome-portal {
    font-size: 1.2rem;
    padding-left: 5px;
  }
}

@media screen and (max-width: 768px) {
  .portal-container {
    margin-bottom: 30px;
  }

  .img-portal img {
    max-width: 49px;
  }

  .tit-portal {
    font-size: 1.1rem;
    padding-left: 5px;
  }

  .nome-portal {
    font-size: 1.2rem;
    padding-left: 5px;
  }
}

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

  .tit-portal {
    font-size: 1rem;
    padding-left: 5px;
  }

  .nome-portal {
    font-size: 1.2rem;
    padding-left: 5px;
  }
}

.bt-vermelho-home {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 40px;
  padding: 5px 0;
  text-align: center;
  max-width: 190px;
}

/* Box Oportunidades - Home */

.tit-oportunidades {
  font-size: 1.2rem;
  font-weight: bold;
}

.chamada-oportunidades {
  font-size: 1.2rem;
}

.linha-divisoria-oportunidades {
  border-bottom: 1px dotted #000;
  margin: 13px 0;
}

/* Box Governo Municipal - Home */

.img-governo {
  float: left;
}

.img-governo  img{
  border-radius: 2px;
}

.nome-governo {
  display: table;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 15px 0 0 10px;
}

.cargo-governo {
  display: table;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 0 0 0 10px;
}

.combo-governo {
  margin: 20px 0 0 0;
}

.combo-governo select {
  border: 1px solid #000;
  width: 100%;
  padding: 4px;
}

.bt-governo {
  margin: 18px 0 0 0;
  max-width: 180px;
}

@media screen and (max-width: 768px) {
  .bt-governo {
    margin: 18px 0 0 0;
  }
}


/* Box ServiÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â§os - Home */

.tit-servicos-cidadao {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 5px 0 10px;
}

.tit-servicos-empresa {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 5px 0 10px;
}

.tit-servicos-turista {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 5px 0 10px;
}

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

  .lista-servicos {
    display: none !important;
  }

}

.lista-servicos li {
  font-size: 1.15rem;
  margin-bottom: 8px;
  margin-right: 5px;
  display: table;
}

.lista-servicos li::before {
  content: "ÃƒÆ’Ã‚Â¢Ãƒâ€šÃ‚â‚¬Ãƒâ€šÃ‚Â¢";
  padding-right: 8px;
  display: table-cell;
}

.lista-servicos li a:hover {
  text-decoration: underline;
}

/* Direto da RedaÃ§Ã£o - Home */

.bloco-direto-da-redacao {
  position: relative;
  padding-bottom: 65.25%;
  padding-top: 30px;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.bloco-direto-da-redacao iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Box Diversos - Home */

.banner-diversos {
  margin-bottom: 10px;
}

.banner-diversos img {
  max-width: 100%
}

.banner-diversos img:hover {
  border: 3px solid #e30613;

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* Principais Acessos - Home */

.tit-principais-acessos {
  font-size: 1.5rem;
  /* line-height: 35px; */
  padding-bottom: 5px;
  padding-left: 33px;
  padding-top: 13px;
}

@media screen and (max-width: 768px) {
  .tit-principais-acessos {
    line-height: 0;
    padding-bottom: 5px;
    padding-top: 6px;
  }
}

/* PraÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â§a de Atendimento - Home */

.tabela-pracas {
  padding: 5px;
}

.label-pracas-assunto {
  float: left;
  width: 70%;
  font-size: 0.9rem;
}

.label-pracas-tempo {
  float: left;
  width: 30%;
  font-size: 0.9rem;
}

.tit-assunto-pracas {
  background-color: #FFF;
  float: left;
  width: 69%;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 5px 1px 0;
  padding: 5px;
  /* height: 47px; */
}

.tit-tempo-pracas {
  float: left;
  background-color: #FFF;
  width: 29%;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 5px;
  /* height: 47px; */
}

@media screen and (max-width: 768px) {
  .tit-assunto-pracas {
    width: 68%;
    height: 47px;
  }

  .tit-tempo-pracas {
    width: 29%;
    height: 47px;
  }
}

.bt-atendimento {
  float: left;
  margin-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.atualiza-atendimento {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 14px;
  text-align: center;
}





/* Mapa de ServiÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â§os - Home */

.servico-no-mapa {
  font-size: 1.4rem;
  padding-bottom: 15px;
  padding-left: 63px;
  padding-top: 15px;
}

.servico-no-mapa> a {
  line-height: 20px;
}


/* Slider News - Home (InÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â­cio) */

#slider-news {
  padding: 13px 13px 16px;
}

#slider-news .tit-destaque {
  background: #f00 none repeat scroll 0 0;
  bottom: 69px;
  margin-left: 3px;
  color: #fff;
  display: table;
  font-size: 1rem;
  padding: 6px 10px;
  position: absolute;
  z-index: 1;	
}

@media screen and (max-width: 768px) {
  .pgwSlider.narrow .ps-caption {
    font-size: 1rem;
  }
}

@media screen and (max-width: 384px) {
  #slider-news .tit-destaque {
    bottom: initial;
    margin-top: 3px;
    z-index: 3
  }
}

.pgwSlider .ps-current {
  width: 83%;
  border: 3px solid #000;
}

.pgwSlider a {
  font-size: 1.4rem;
}

ul.pgwSlider, .pgwSlider ul {
  width: 15%;
}

/* Slider News (Fim )*/




/*----- Accordion -----*/
.accordion, .accordion * {
  -webkit-box-sizing:border-box; 
  -moz-box-sizing:border-box; 
  box-sizing:border-box;
}

.accordion {
  padding:0;
}

/*----- Section Titles -----*/
.accordion-section-title {
  width:100%;
  padding:8px 28px 8px 8px;
  display:inline-block;
  transition:all linear 0.15s;
  /* Type */
  font-weight: bold;
  font-size: 1.4rem;

}

.accordion-section-title.active, .accordion-section-title:hover {
  /* Type */
  text-decoration:none;
}


.accordion-section:last-child .accordion-section-title {
  border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
  padding:0;
  display:none;
  background-color:#fff;

}


/*************** HOME (Fim) ***************/

/*************** NOTÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â�CIAS (InÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â­cio) ***************/
.info-postagem .date{font-size:1.2rem;width:100%;}
.info-postagem .author{font-size:1.6rem; margin-top:20px;width:100%; font-weight:600;}
.img-noticia {width:100%; height:auto; margin:20px 0 20px 0;}
.img-noticia img {width:100%; height:auto;}
.img-noticia figcaption {font-size:1.2rem;}
#share-news ul li{float: left; margin-right: 10px; width: 34px;}
#share-news ul li img {width: 100%;}



#corpo-noticia { padding: 0 0 20px 0; font-size: 1.6rem; font-family: 'roboto';}
#corpo-noticia ol {list-style-type: decimal;}
#corpo-noticia ul {list-style-type: disc;}
#corpo-noticia li {display: list-item; margin-left: 20px;}
#corpo-noticia sub {vertical-align: sub; font-size: smaller;}
#corpo-noticia sup {vertical-align: super; font-size: smaller;}

@media screen and (max-width: 320px) {
  #corpo-noticia a {
    white-space: pre-line;
  }
}

/*************** NOTÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â�CIAS (Fim) ***************/


/*************** AGENDA (InÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â­cio) ***************/

.events-content {
  font-size: 1.4rem;
}

.events-content .evento {
  margin-bottom: 40px !important;
  padding-bottom: 20px;
}


.events-content .presenca-prefeito {
  border: 1px solid;
  display: table;
  font-size: 1.4rem !important;
  margin: 20px 0 !important;
  padding: 5px 15px;
}

.events-content span {
  display: inline-block;
  font-weight: bold;
  width: 100px;
}

.events-content .descricao-evento {
  margin: 10px 0 20px !important;
}

.events-content .bt-mais-info-agenda {
  border: 0 none;
  clear: both;
  cursor: pointer;
  display: block;
  font-family: "roboto";
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0 !important;
  padding: 5px 15px;
}

.events span {
  left: 11px;
  position: absolute;
  top: 47px;
}

.events .ico-presenca-prefeito {
  background: #5b5b5b none repeat scroll 0 0;
  color: #fff;
  font-size: 1.1rem;
  padding: 0 3px;
}

.legenda-presenca-prefeito {
  margin: 0 0 0 35px;
}

.legenda-presenca-prefeito span {
  background: #5b5b5b none repeat scroll 0 0;
  color: #fff;
  font-size: 1.1rem;
  padding: 0 3px;
}

.evento h3 {
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.descricao-evento em {display: initial !important; font-size: 1.4rem !important;}
.descricao-evento em::before {content: '' !important;}
.descricao-evento i {display: initial !important;}
.descricao-evento b {display: initial !important;}
.descricao-evento strong {display: initial !important;}



/*************** AGENDA (Fim) ***************/

/*------------------------------*\
CHAT 156
\*------------------------------*/
.chat {width:100%; height:auto; padding:10px;}
.chat .top {width:100%; height:auto;margin-bottom:10px;}
.chat .top, .chat .top img {float:left;}
.chat .top img {margin:10px 0 0 10px;}
.chat .top p {margin-top:25px; font-size:2.0rem; font-weight:600; float:left;}
.chat .top span {font-size:1.4rem;}
.alert-title {padding:10px 10px 10px 15px; font-size:1.4rem; font-weight:600; width:100%;float:left; margin-bottom:10px;}
.alert-title .controle-som {float:right; margin:0 5px;}
.alert-title .timer {float:right; margin:0 5px;}
.chat-content {padding:10px; font-size:1.4rem; width:100%; margin-bottom:10px;}
.chat-content-nop {padding:0; font-weight:600; font-size:1.4rem; width:100%;}
.chat-content p {margin-bottom:15px;}
.chat-bottom {width:100%; margin-top: 10px;}
.chat-bottom button {margin-right: 10px;}
.chat-bottom p {margin:10px 10px 10px 10px;}
.chat-content form {font-weight:bold; margin-top:5px;}
.chat-content input {width:100%; border-radius:3px; border:1px solid #d2d2d2; padding:4px 4px 4px 4px; margin-top:5px; color:#000; height: 40px; font-size: 1.4rem;}
input.grande {min-height: 100px;}
.chat-content .timer {text-align: center; vertical-align: middle; margin:20px auto; font-size: 4.0rem; font-weight:600;}
.chat-content-nop .conversa {
  width:100%;padding:15px 10px 15px 10px; background-color:#fff; float:left; font-weight:normal; font-size: 1.4rem;
}
.chat-content-nop .avaliacao {
  width:100%;padding:15px 10px 15px 10px; background-color:#fff; float:left; font-weight:normal; font-size: 1.4rem; border: solid 1px #a9a9a9;
}
.chat-bottom input {
  width:100%;
  float:left;
  padding:11px 18px 10px 18px;
  border-radius:3px;
  border:1px solid #d2d2d2;
  font-size:1.5rem;
}
button#button-conversa {
  margin-top: 20px;
}

.conversa {max-height:150px; overflow-y: scroll;}
.conversa .cliente{color:#000;}
.chat-content textarea {width:100%; float:left;}

#chat-window-conversa #button-encerrar {
  margin: 20px 0 0 0;
}

/*------------------------------*\
FIM - CHAT 156
\*------------------------------*/



/*------------------------------*\
LOADING PORTAL
\*------------------------------*/
.overflow-loading {
  padding: 15px;
  overflow: hidden;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.8);
  position:absolute;
  top:0;
  left: 0;
  bottom:0;
  z-index: 100;
}


.clear {clear:both;}

/* -----------------------------------------
=CSS3 Loading animations
-------------------------------------------- */

.spinner {
  position: relative;
  width: 45px;
  height: 45px;
  margin: 0 auto;
}
.load-wrapp {
  position:relative;
  top:50%;
  margin-top:-25px;
}
.bubble-1{
  position: absolute;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: #e30613;
}
.bubble-2 {
  position: absolute;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: #fff;
}
.bubble-2 {
  top: auto;
  bottom: 0;
}


/* =Animate the stuff
------------------------ */

.l-9 {animation-delay: 1.44s;}
.load-9 .spinner {animation: loadingI 2s linear infinite;}
.load-9 .bubble-1, .load-9 .bubble-2 {animation: bounce 2s ease-in-out infinite;}
.load-9 .bubble-2 {animation-delay: -1.0s;}

@keyframes loadingI {
  100% {transform: rotate(360deg);}
}

@keyframes bounce  {
  0%, 100% {transform: scale(0.0);}
  50% {transform: scale(1.0);}
}

/*------------------------------*\
FIM - LOADING PORTAL
\*------------------------------*/




/************* AGENDAMENTO (InÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â­cio) *************/

#bem-vindo-dados-cadastrais input {
  height: 40px;
}

#bem-vindo-dados-cadastrais label {
  margin-bottom: 2px;
}

.agendamento {width:100%; height:auto; padding:10px;}
.agendamento .top {width:100%; height:auto;margin-bottom:10px;}
.agendamento .top, .agendamento .top img {float:left;}
.agendamento .top img {margin:10px 0 0 10px;}
.agendamento .top p {margin-top:25px; font-size:2.0rem; font-weight:600; float:left;}
.agendamento .top span {font-size:1.4rem;}
.agendamento label {font-size: 1.4rem;}
.agendamento input {height: 45px;}
.agendamento .btn-entrar {margin-top: 20px;}




.agendamento-title {
  float: left;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 10px;
  padding: 10px 10px 10px 15px;
  width: 100%;
}

.agendamento-container {
  border: 1px solid #d6d6d6;
  padding: 20px;
  float: left;
  width: 100%;
  margin: 0 0 20px 0;
}

.agendamento-container p {
  font-size: 1.4rem;
}

.agendamento-container h3 {
  border-bottom: 1px solid #000;
  font-size: 1.6rem;
  font-weight: bold;
}

.agendamento-container input {
  height: 28px;
}

.agendamento-container input[type="radio"] {
  height: 13px;
  margin-left: 15px;
}

.agendamento-container label {
  display: table;
  text-align: right;
  width: 100%;
}

.agendamento-links {
  font-size: 1.4rem;
}

.agendamento-links a {
  margin-right: 10px; 
}

.agendamento-links a:hover {
  text-decoration: underline;
}

.form-group {
  margin-bottom: 15px;
}

.form-control {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #555;
  display: block;
  font-size: 1.4rem;
  height: 34px;
  line-height: 1.42857;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
}

.checkbox-inline, .radio-inline {
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  margin-bottom: 0;
  padding-left: 20px;
  position: relative;
  vertical-align: middle;
}

.form-horizontal .control-label {
  margin-bottom: 0;
  padding-top: 7px;
  text-align: right;
}

#dialog {
  /* display: none; */

  background-color: rgba(0, 0, 0, 0.75);
  z-index: 1300;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
}

#dialog-modal {
  background: #fff none repeat scroll 0 0;
  border-radius: 6px;
  margin: -30px auto 0;
  padding: 10px 15px 20px;
  position: relative;
  top: 50%;
  width: 320px;
}

#dialog-modal .mensagem {
  padding: 20px 0 30px;
  font-size: 1.4rem;
}

#dialog-modal .btn-modal {
  text-align: right;
}

#dialog-modal .btn-modal button {
  margin-right: 12px;
}

#dados-cadastrais {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #dedede;
  padding: 20px;
}


#bem-vindo h2 {
  text-align: center;
}

#bem-vindo .btn-entrar {
  text-align: center;
  margin-bottom: 15px;
}



#cadastro-agendamento ul {
  margin-bottom: 15px;
}

#cadastro-agendamento ul li {
  display: inline;
  padding: 0 20px 0 0;
}

.btn-anterior {
  margin-right: 10px;
}
.btn-confirmar {
  margin-right: 10px;
}

ol.triangle {
  width: 100%;
}

.table  thead {
  background: #4e4e4e;
  color: #FFF;
  font-weight: bold;
  font-size: 1.4rem;
  text-align: left;
}

.table td {
  font-size: 1.2rem;
}

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}


#cadastro-agendamento-horario .table thead th:first-child {
  width: 20% !important;
}

#cadastro-agendamento-horario .table thead th:last-child {
  width: 80% !important;
}

#cadastro-agendamento-horario .table td:last-child{
  text-align: left !important;
}

#cadastro-agendamento-horario label {
  margin-bottom: 2px;
}

.table td:first-child{
  text-align: left !important;
}

.table td:last-child{
  text-align: center;
}

.dataTables_filter {
  display: none;
  font-size: 1.2rem;
}

.dataTables_length {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.dataTables_paginate {
  width: 100%;
  text-align: center !important;
  background-color: #4e4e4e;
}

.combo-agendamento label {
  text-align: left;
}

.combo-agendamento select {
  border: 1px solid #3b9e6b;
  cursor: pointer;
}

.container-dados-confirmacao {
  font-size: 1.4rem;
  font-weight: bold;
}

.container-dados-confirmacao > div {
  margin-bottom: 10px;
}

.container-dados-confirmacao span {
  display: inline-table;
  min-width: 80px;
  padding-right: 7px;
  text-align: right;
  font-weight: normal;
}

.dados-endereco {
  font-size: 1.4rem;
}

.label-color {
	color: red;
}

.barra-perfil-agendamento {
  color: #FFF;
  display: table;
  width: 100%;
  margin-top: -9px;
  font-size: 1.2rem;
}

label.left  {
  text-align: left;
}

.barra-perfil-agendamento .nome {
  float: left;
  padding: 6px 7px;
}

.barra-perfil-agendamento .nome img {
  padding-right: 5px;
}

.barra-perfil-agendamento .editar {
  float: right;
  padding: 6px 7px;
  background-color: #000;
  border-left: 1px solid #FFF;
}

.barra-perfil-agendamento .sair {
  float: right;
  padding: 6px 7px;
  background-color: #000;
  border-left: 1px solid #FFF;
}

.barra-perfil-agendamento .editar a, .barra-perfil-agendamento .sair a {
  color: #FFF;
}

.barra-perfil-agendamento .editar a:hover, .barra-perfil-agendamento .sair a:hover {
  text-decoration: underline;
}

.msg-erro {
  border-radius: 4px;
  font-size: 1.4rem;
  margin-top: 20px;
  padding: 15px;
  width: 100%;
}

.msg-sucesso {
  border-radius: 4px;
  font-size: 1.4rem;
  margin-top: 20px;
  padding: 15px;
  width: 100%;
}

.tem-erro {
  border: 2px solid #cf0000 !important;
}

input#datepicker {
  background-image: url("../img/ico-calendario.png");
  background-position: 86px center;
  background-repeat: no-repeat;
  border: 1px solid #dedede;
  border-radius: 4px;
  cursor: pointer;
  width: 113px;
  padding-left: 7px;
}

#datepicker > span:hover {
  cursor: pointer;
}

#horario-agendamento_info, #assunto-agendamento_info{
  display: none;
}

.datepick-popup {
  -webkit-box-shadow: 3px 3px 3px 5px rgba(0,0,0,0.5);
  -mox-box-shadow: 3px 3px 3px 5px rgba(0,0,0,0.5);
  box-shadow: 3px 3px 3px 5px rgba(0,0,0,0.5);
}

.datepick {
  width: 208px !important;
  border: 0;
}

.datepick-popup .datepick-highlight {
  background-color: #7FB1FF !important;
}
.datepick-popup .marcaHora {
  background-color: #FF4A4A !important;
  color:#FFF !important;	
}
.datepick-popup .desmarcaHora {
  background-color: #28FF54 !important;
  color: #000 !important;
}
.datepick-popup .inativo {
  background-color: #e8e8e8 !important;
  color: #929292 !important;
}
.datepick-month td {
  background-color: #eee;
  border: 3px solid #FFF;
}

.datepick-month td .datepick-other-month {
  background-color: #fff;
}

.datepick-month {
  border: 0px solid #FFF;
  width: 100%;
}

.datepick-month-header {
  height: 2em;
  padding: 3px 0 0 0;
}

.datepick-month span {
  padding: 0.5em;
}

.datepick-month .marcaHora {
  background-color: #e8e8e8 !important;
  color: #e30613 !important;
}

.datepick-month .desmarcaHora {
  background-color: #e8e8e8 !important;
  color: #00a651 !important;
}

.datepick .datepick-nav {
  padding: 10px;
}

.datepick-ctrl {
  background-color: #444;
  padding: 10px 0;
}

.datepick-ctrl .datepick-cmd:hover {
  background-color: #333;
}

.datepick-cmd-clear, .datepick-cmd-close {
  text-align: center;
}


/* #horario-agendamento_length label {
position: absolute;
bottom: 6px;
left: 0;
color: #FFF;
font-size: 1.2rem;
}*/

@media screen and (max-width: 768px) {
  .agendamento .top p {font-size:1.4rem;}
  .agendamento .top span {font-size:1.2rem;}

  .cd-breadcrumb li::after, .cd-multi-steps li::after {
    font-size: 2rem;
    color: #e30613;
  }

  ol.triangle {
    background-color: transparent;
  }
  .agendamento-container label {
    text-align: left;
    margin-bottom: -10px
  }

  .agendamento-container input {
    margin-bottom: 15px;
  }

  .barra-perfil-agendamento .sair {
    clear: both;
  }

  .agendamento .top img {
    max-width: 70px;
  }

  .combo-agendamento label {
    margin-bottom: 2px;
  }

}

/************* AGENDAMENTO (Fim) *************/

/*------------------------------*\
BOTÃ•ES
\*------------------------------*/
.confirm {padding:12px 22px 12px 22px;border:0;border-radius:3px;font-size:1.4rem; cursor: pointer;}
.cancel {padding:12px 22px 12px 22px;border:0;border-radius:3px;font-size:1.4rem;cursor: pointer;}
.confirm, .cancel {
  -webkit-transition:background-color ease 0.5s;
  -moz-transition:background-color ease 0.5s;
  -o-transition:background-color ease 0.5s;
  transition:background-color ease 0.5s;}
.confirm.fright {margin-right:0;}
.confirm:hover {background-color:#00a651;}
.cancel:hover {background-color:#fc2d2d;}
.chat-bottom .cancel {margin-top:0;}

.confirmar:hover {background-color:#fc2d2d;}
.anterior:hover {background-color:#00a651;}

.btn-default {
  padding:12px 22px 12px 22px;
  border:0;
  border-radius:3px;
  font-size:1.4rem;
  cursor: pointer;
  background-color: #337ab7;
  border-color: #2e6da4;
  color: #FFF;
}
.btn-default:hover {
  background-color: #286090;
  border-color: #204d74;
}
/*************** MENU MOBILE (InÃ­cio) ***************/

.header-menu-mobile {
  position: relative;
  height: 0;
}

/*--------------768px-----------*/
@media (min-width: 768px) {
  .mobile-nav-wrap {
    /* display: none; */
  }
}

.mobile-header-nav {
  background-color: #4e4e4e;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 39px;
  width: 100%;
  z-index: 5;
}

/*--------------414px-----------*/
@media screen and (max-width: 414px) {
  .mobile-header-nav {
    top: 36px;
  }
}

/*--------------375px-----------*/
@media screen and (max-width: 375px) {
  .mobile-header-nav {
    top: 36px;
  }
}

.mobile-header-nav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-header-nav li a {
  color: white;
  display: block;
  padding: 10px 12px 10px 15px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  font-size: 1.4rem;
}
.mobile-header-nav li a:hover {
  background-color: #2f2f2f;
}

.hamburger-menu {
  display: inline-block;
  height: 1px;
  padding: 17px 13px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (min-width: 769px) {
  .hamburger-menu {
    display: none;
  }
}

.hamburger-menu:hover {
  cursor: pointer;
}
.hamburger-menu .menu-item {
  background: #FFF;
  display: block;
  height: 3px;
  margin: 0 0 3px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 23px;
}
.hamburger-menu.open .menu-item {
  margin: 0 0 4px;
}
.hamburger-menu.open .menu-item:first-child {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 4px;
  transform-origin: 4px;
}
.hamburger-menu.open .menu-item:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.open .menu-item:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0;
  transform-origin: 0;
}

/*************** MENU MOBILE (Fim) ***************/


.atendimento {
  position:fixed;
  bottom:-3px;
  right:0;
  z-index: 10;
}

/*--------------375px-----------*/
@media screen and (max-width: 640px) {
  .atendimento  img {
    width: 200px;
  }
}




/********** CALENDÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â�RIO HOME **********/ 



.customCalendar .clear { clear:both; }

.customCalendar .loading { background:url(images/loading.gif) 50% 50% no-repeat; width:41px; height:39px; }

.customCalendar {
  width:100%;
  min-height:300px;
  text-align:left;
  background: #ffffff;
  /* border:1px solid #dbdbdb;
  -moz-border-radius: 3px;
  border-radius: 3px; */
  color:#272727;
  line-height: 1;
  padding:1px;
}

.customCalendar .div_main_date {
  padding:7px 20px;
  text-align:center;
  background-color: #5b5b5b;
}

.customCalendar .main_date {
  font-size:1.6rem;
  position:relative;
}

.customCalendar .main_date a {
  color:#FFF;
  text-decoration:none;
  text-transform:uppercase;
  border: none;
}

.customCalendar .main_date a#next_month {
  position:absolute;
  right:20px;
}

.customCalendar .main_date a#prev_month {
  position:absolute;
  left:20px;
}

.customCalendar .div_dates {
  text-align:center;
  background:url(images/box_border.jpg) 0 100% repeat-x;
}

.customCalendar .div_dates ul {
  list-style:none;
  margin: 0 auto;
  padding: 0 10px;
}

.customCalendar .div_dates ul.calendario-row {
  width:calc(100% - 20px);
  display:table;
}

/* .customCalendar li {
margin:0;
padding:0;
background:none;
}*/

.customCalendar .div_dates li {
  background:none;
  background-color: rgb(232, 232, 232);
  line-height:100% !important;
  font-size:1.2rem;
  color: #929292;
  list-style: none;
  padding: 0.8em;
  border: 2px solid #fff;
  display:table-cell;
  -webkit-box-shadow:inset 0px 0px 0px 1px #FFF;
  -moz-box-shadow:inset 0px 0px 0px 1px #FFF;
  box-shadow:inset 0px 0px 0px 1px #FFF;
}


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

  .customCalendar .div_dates ul {
    padding: 0;
  }

  .customCalendar .div_dates li {
    padding: 5px;
  }
}

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

  .customCalendar .div_dates ul {
    padding: 0;
  }

  .customCalendar .div_dates li {
    padding: 5px;
  }
}

/*--------------414px-----------*/
@media screen and (max-width: 414px) {
  .customCalendar .div_dates li {
    padding: 13px 5px;
  }
}

.customCalendar .div_dates li.weekday, .customCalendar .div_dates li.emptyblock {
  font-weight: bold;
  background-color: #fff;
}

.customCalendar .div_dates li.weekday:hover, .customCalendar .div_dates li.emptyblock:hover {
  background-color: #fff;
  text-decoration:none;
  cursor: default;
  background:none;
  color: #929292;
}

.customCalendar .div_dates li.extrablock {
  font-weight: bold;
  color: #fff;
  background:none;
}

.customCalendar .div_dates li.extrablock:hover {
  background-color: #fff;
  text-decoration:none;
  cursor: default;
  background:none;
  color: #fff;
}

.customCalendar .div_dates li:hover, .customCalendar .div_dates li.active {
  /* background:url(images/hover_dates.png) no-repeat 50% 0; 
  background-color: rgb(200, 200, 200); */
  color:#e30613;
  /* text-decoration:underline; */
  cursor:pointer;
  /* font-weight: bold; */

  -webkit-box-shadow:inset 0px 0px 0px 1px #e30613;
  -moz-box-shadow:inset 0px 0px 0px 1px #e30613;
  box-shadow:inset 0px 0px 0px 1px #e30613;
}

.customCalendar .div_dates li.has_events {
  /* background:url(images/hover_dates_has_event.png) no-repeat 50% 0; */
  background-color: #E30613;
  color:#FFF !important;
}

.customCalendar .div_dates li.prefeito {
  /* background:url(images/hover_dates_has_event.png) no-repeat 50% 0; */
  background-color: #ff6c00;
  color:#FFF !important;
}

.customCalendar .div_dates .day_name {
  text-align:left;
  margin:0 30px;
}

.customCalendar .div_dates .day_name h1 {
  font-size:1.8rem !important;
  float:left;
  text-transform:uppercase;
  margin:5px 0 10px 0;
  font-weight:bold !important;
  color:inherit;
  line-height: inherit;
  padding-top: 4px;
}

.customCalendar .div_dates .day_name .div_month {
  /* width:50px; */
  float:left;
  text-align:center;
  margin-left:5px;
  margin-top:4px;
  padding-top:7px;
}

.customCalendar .div_dates .day_name .span_month {
  font-size:1.6rem;
  text-transform:uppercase;
}

.customCalendar .div_dates .day_name .span_day {
  font-size:1.6rem;
}

.customCalendar .calendar_list {
  min-height: 100px;
  background:#f4f4f4;
  text-align:left;
  padding:20px;
  clear:left;
}

.customCalendar .calendar_list h2 {
  font-size:18px;
  float:left;
  text-transform:uppercase;
  margin:0;
  padding:0;
  line-height:100%;
  font-weight:normal;
  color: inherit;
}

.customCalendar .calendar_list ul#cl_sort_by {
  margin: 0;
  padding: 0;
}

.customCalendar .calendar_list ul#cl_sort_by li {
  font-size:18px;
  color: #929292;
  float:left;
  margin-left:10px;
  text-transform:uppercase;
  line-height:100%;
  padding:0;
  background:none;
  display:block;
}

.customCalendar .calendar_list ul#cl_sort_by li:hover, .customCalendar .calendar_list ul#cl_sort_by li.active {
  text-decoration:underline;
  cursor:pointer;
  color:#272727;
}

.customCalendar .calendar_list #list {
  list-style:none;
  margin:20px 0 0 0;
}

.customCalendar .calendar_list #list li {
  min-height:41px;
  padding:11px;
  cursor:pointer;
  background:none;
  line-height:normal;
  list-style:none;
}

.customCalendar .calendar_list #list li h1 {
  font-size:1.1em;
  margin: 0 0 0 10px;
  float:left;
  font-weight:normal;
  color:inherit;
  clear: none;
  line-height:100%;
}

.customCalendar .calendar_list #list li a {
  font-size:0.8em;
  font-weight: bold;
}

.customCalendar .calendar_list #list li .time {
  -moz-border-radius: 3px;
  border-radius: 3px;
  border:1px solid #ccc;
  color:#F6F6F6;
  font-size:20px;
  padding:10px;
  float:left;
  font-weight:bold;
  line-height: 100%;
}

.customCalendar .calendar_list #list li p {
  margin:10px 0 0 0;
  display:none;
  font-size:16px;
  line-height:100%;
}

.customCalendar .calendar_list #list li.urgent .time {
  background:#d44d45;
  border:1px solid #b8413a;
}

.customCalendar .calendar_list #list li.medium .time {
  background:#f8b356;
  border:1px solid #ecab52;
}

.customCalendar .calendar_list #list li.low .time {
  background:#c6cf52;
  border:1px solid #b9c14c;
}

.customCalendar .calendar_list #list li:hover {
  border:1px solid #ccc;
  background-color:#F9F9F9;
  background-position:1px 4px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
}

/* Agenda de Eventos - Home */

.tit-agenda-eventos {
  font-size: 1.4rem;
  padding-bottom: 10px;
  padding-left: 33px;
  padding-top: 10px;
}

.tit-agenda-eventos a {
  line-height: 20px;
  font-size: 1.2rem;
}

@media screen and (max-width: 768px) {
  .tit-agenda-eventos a {
    display: table-row;
  }
}

.tit-agenda-eventos a:hover {
  text-decoration: underline;
}

.agenda-eventos .ico-presenca-prefeito {
  background: #ff6c00;
  color: #FFF;
  font-size: 1.1rem;
  padding: 0 3px;
  margin-right: 5px;
}

#agenda-eventos .ico-presenca-prefeito {
  background: #ff6c00;
  color: #FFF;
  font-size: 1.1rem;
  padding: 0 3px;
  margin-right: 5px;
}

.agenda-eventos .data-evento {
  font-size: 1.1rem;
}

/********** CALENDÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â�RIO HOME **********/ 


/********** listagem noticia **********/ 
titulo-box-home:nth-child(2) {margin-top:10px;}
.tit-listagem {
  position:absolute;
  bottom:0;
  left:0;
  background-color:rgba(55, 55, 55, 0.8);
  padding:10px;
  width: 100%;
}
.terciario .tit-listagem {
  float:left;
  width:100%;
  height:85px;
  background-color:rgba(55, 55, 55, 0.8);
  padding:10px;
  position:relative;
}
.tit-listagem a {
  color:#fff;
  font-weight: 600;
}

.principal figure {
  height: 300px;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .principal figure {
    height: initial;
  }
}

.secundario figure {
  height: 208px;
  overflow: hidden;
}

.principal .tit-listagem a {
  font-size: 2.2rem;
}
.secundario .tit-listagem a {
  font-size: 1.6rem;
}
.terciario .tit-listagem a {
  font-size: 1.4rem;
}
.tit-listagem .info-postagem .date {
  float:left;
  font-size:1rem;
  color:#fff;
}
.tit-listagem .categoria-list {
  position:absolute;
  top:-17px;
  width:100%;
  border-bottom:3px solid #cf0000;
  left:0;
}
.tit-listagem .categoria-list span {
  color:#fff;
  background-color: #cf0000;
  padding:5px 10px;
  font-size: 1.2rem;
  top:-2px;
  position:relative;
  text-transform: uppercase;
}
.list-noticias {width:100%; height:auto; float:left; padding-bottom: 10px;}
.list-noticias img {width:100%; height:auto;}
.terciario figure {width: 100%; height: 123px; float: left; overflow: hidden;}
.list-noticias.terciario img {float:left;}
.list-noticias figcaption {font-size:1.2rem;}

/********** listagem de videos de noticias **********/ 
#listagem-videos {float:left; margin:auto; padding:0;}
#listagem-videos li { box-sizing: border-box; margin-bottom:5px; height:auto;}
#listagem-videos li { position: relative; float: left; display: block;}
#listagem-videos li + li { margin-left: 1.6%;}
#listagem-videos li { width: 32.2666666667%;}
#listagem-videos li:nth-child(4) {margin-left:0;}
#listagem-videos li iframe {width:100%; height:auto;}

.bt-vermelho-yt {
  margin-top: 0px;
  padding: 5px 15px;
  float: right;
  max-width: 220px;
}
/********** FIM - listagem de videos de noticias **********/

/********** Categorias **********/ 
.categorias .column a {text-align:center; font-size:1.2rem; color:#fff; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.7); font-weight:600; width:100%; float:left; height:100%; display:block;
  transition:all ease 0.5s;
}
.categorias .column a:hover {
  background: rgb(227, 6, 19);    
}
.categorias img {margin-top:25px; width:50px; height:52px;}
.categorias img.cidadania {height:46px; margin-top:30px;}
.categorias .column {
  height:122px; 
  background: #414141;   
  background: -webkit-linear-gradient(right top, #8a8888, #414141); 
  background: -o-linear-gradient(bottom left, #8a8888, #414141); 
  background: -moz-linear-gradient(bottom left, #8a8888,#414141); 
  background: linear-gradient(to bottom left, #8a8888, #414141);
}
.link-todos a {color:#cf0000; font-size:1.6rem; float: right; font-weight:600;}
.link-todos ul {width:auto; height:auto; margin:0 0 0 40%; float:left;}
.link-todos ul li {width:auto; height:auto; margin:0 5px; float:left;}
.link-todos ul li a {width:auto; height:auto; float:none; font-weight:600; font-size:1.6rem;}
.side-cat {margin-top:30px;}

/* PaginaÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â§ÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â£o */

.paginacao {
  text-align: center;
}

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #000;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #cf0000;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #cf0000;
  border-color: #cf0000;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 1.8rem;
  line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 1.2rem;
  line-height: 1.5;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/********** FIM - Categorias **********/
@media screen and (max-width: 768px) {
  .categorias a {font-size:1rem;}
}
@media screen and (max-width: 570px) {
  .tit-listagem {
    float:left;
    width:100%;
    height:auto;
    background-color:rgba(0, 0, 0, 0.8);
    padding:10px;
    position:relative;
  }
  .side-cat {margin-top:0;}
  .tit-listagem figure, .list-noticias img { float:left;width:100%; height:auto;}
  .categorias img {margin-top:10px;}
  .categorias img.cidadania {margin-top:18px;}
  .categorias .column-6 {margin-bottom:10px;margin-left:7px; width:46% !important;float:left;height:100px;}
  #listagem-videos li { width: 100%;}
  #listagem-videos li { margin-bottom: 10px;}
  #listagem-videos li + li { margin-left:0;}
  #listagem-videos li:last-child { margin-bottom: 0;}
}

/********** LEIS MUNICIPAIS (InÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â­cio) **********/

.iframe-wrapper {
  position: relative;
  padding-bottom: 100%;
  padding-top: 25px;
  height: 0;
  margin-bottom: 40px;
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/********** LEIS MUNICIPAIS (Fim) **********/

/********** IMPRENSA OFICIAL (InÃƒÆ’Ã‚Æ’Ãƒâ€šÃ‚Â­cio) **********/
.combo {

}
.combo select {
  border: 1px solid #000;
  width: 100%;
  padding: 4px;
}

h3.imp-oficial-filtros {
  font-size: 2rem;
  padding: 12px 0 0 0;
}

.iomo-container {
  border: 1px solid #dedede;
  text-align: center;
}

.iomo-container a {
  color: #414141;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.iomo-container a:hover {
  color: #e30613;
  background: #eee;
  border: 3px solid #e30613;
  display: block;
}

.iomo-data {
  font-size: 1.0rem;
}

.iomo-nome {
  font-size: 1.4rem;
  font-weight: bold;
}

.iomo-edicao {
  font-size: 1.2rem;
  padding-bottom: 10px;
}

/********** IMPRENSA OFICIAL (fIM) **********/

/********** SERVIÃƒâ€¡OS ON-LINE (InÃƒÂ­cio) **********/

.bt-acesso-servico {
  max-width: 190px;
}

.container-pesquisa-servicos {
  padding: 10px;
  background-color: #e8e8e8;
}

.container-pesquisa-servicos input[type="text"] {
  width: 100%;
  height: 30px;
  padding-left: 6px;
  color: #000;
  border: 1px solid #000;
  margin-bottom: 10px;
}

.servico-on-line-card {
  border: 1px solid #cf0000;
  border-left: 10px solid #cf0000;
  margin: 20px 0 30px;
  padding: 20px;

  -webkit-box-shadow: 8px 10px 20px #999;
  -moz-box-shadow: 8px 10px 20px #999;
  -o-box-shadow: 8px 10px 20px #999;
  box-shadow: 8px 10px 20px #999;
}

.servico-on-line-card .nome-servico {
  font-size: 1.8rem;
  font-weight: bold;
  width: 90%;
}

.servico-on-line-card .nome-secretaria {
  font-size: 1.4rem;
}

.servico-on-line-card .nome-grupo {
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.servico-on-line-card .resumo-servico p {
  font-size: 1.4rem;
}

.seta-card-servico-on-line {
  display: table;
  float: left;
  margin: 6px 15px 0 0;
}

.container-servico-on-line {
  display: table;
}

.servico-on-line-favorito-on {
  position: absolute;
  right: 20px;
}

.servico-on-line-favorito-off {
  position: absolute;
  right: 20px;
}

.subtitulo-servico-online {
  font-size: 1.8rem;
  color: #e30613;
  font-weight: bold;
  margin-bottom: 10px;
  margin-left: 20px;
}

.tarja-nome-do-servico {
  background: #e30613;
  color: #FFF;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 7px 20px;
  margin-bottom: 10px;
}

.servico-container {
  border: 1px solid #d6d6d6;
  padding: 20px;
  width: 100%;
  margin: 0 0 20px 0;
}


.servico-container .servicos-info-empresa {
  font-size: 1.4rem;
  color: #696969;
}

.servico-container .servicos-info-empresa span {
  font-weight: bold;
}

.servico-container input[type='text']{
  height: 34px;
}

#formPublicidade input, #topoMiolo input {
  height: 34px;
}

.servico-container h3 {
  border-bottom: 1px solid #000;
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.servico-container p {
  font-size: 1.4rem;
}

.servico-container label {
  font-size: 1.4rem;
}

.servico-container label b {
  font-size: 1.4rem;
  padding-bottom: 5px;
  display: block;
}

.servico-container  .importante {
  color: #e30613;
  font-weight: bold;
}

.table table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  background-color: #f4d4b7;
}
.table table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  background-color: #f4d4b7 !important;
}
.table table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
  background-color: #f4d4b7 !important;
}
.table table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
  background-color: #f4d4b7 !important;
}

table[style] {
  width: 100% !important
}


#viewSolicitacao td, #lista td {
  border-right: 1px solid #ddd;
}

#viewSolicitacao th, #lista th {
  text-align: center;
}

#lista tr:last-child {
  border-bottom: 1px solid #ddd;
}

#viewSolicitacao td:first-child, #lista td:first-child {
  border-left: 1px solid #ddd;
}

.ico-acoes-servicos {
  font-size: 1.6rem;
  color: #666;
}

/***** SERVIÃƒâ€¡OS ON-LINE (Fim) ***/


/*------------------------------*\
COMPONENTE BUSCA
\*------------------------------*/ 

.sb-search {
  background: #4e4e4e;	
  position: absolute;
  width: 0%;
  min-width: 60px;
  height: 40px;
  float: right;
  overflow: hidden;
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  transition: width 0.3s;
  -webkit-backface-visibility: hidden;
  right: 0px;
  top: -5px;
  z-index: 999999;
}

@media screen and (max-width: 435px) {
  .sb-search {
    min-width: 50px;
    background: #4e4e4e;
  }
}

@media screen and (max-width: 414px) {
  .sb-search {
    min-width: 39px;
    background: #4e4e4e;
  }
}

@media screen and (max-width: 320px) {
  .sb-search {
    min-width: 39px;
    background: #4e4e4e;
  }
}

.sb-search-input {
  position: absolute;
  top: 0px;
  right: 0px;
  border: none;
  outline: none;
  background: #4e4e4e;
  height: 40px;
  margin: 0;
  z-index: 10;
  text-indent: 40px;    
  font-family: 'opensanslight';
  font-size: 14px;
  color: #4e4e4e;
}

input[type="search"].sb-search-input {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  appearance: none;
  border-radius: 0px;    
  -moz-appearance: none;
  -moz-border-radius: 0px;
}

.formata-input span input{
  background-color: transparent;
  position: absolute;
  z-index: 99;
  height: 30px;
  top: 9px;
  left: 45px;
  border: 0px;
  color: #4e4e4e !important;
  width: 750px !important;
}

.formata-input span input:hover{
  color: #4e4e4e !important;
  border:0px !important;
}

.formata-input span input:focus{
  color: #4e4e4e !important;
  border:0px !important;
}

@media screen and (max-width: 435px) {
  .formata-input span input {
    width: 233px !important;
    height: 31px !important;
    left: 10px;
  }
}

@media screen and (max-width: 360px) {
  .formata-input span input {
    width: 233px !important;
    height: 31px !important;
    left: 10px;
  }
}

@media screen and (max-width: 320px) {
  .formata-input span input {
    width: 193px !important;
    height: 31px !important;
    left: 10px;
  }
}

.formata-input .btn-pesquisar {
  position: absolute;
  right: 60px;
  z-index: 100;
  padding: 7px 20px;
  top: 8px;
}

@media screen and (max-width: 360px) {
  .formata-input .btn-pesquisar {
    right: 10px;
    padding: 7px 9px;
    top: 9px;
  }
}

@media screen and (max-width: 320px) {
  .formata-input .btn-pesquisar {
    right: 10px;
    padding: 7px 9px;
    top: 9px;
  }
}

.formata-input  input[type="submit"] {
  border: 1px solid #c30;
}

.sb-icon-search,
.sb-search-submit  {
  width: 60px;
  height: 45px;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
}

@media screen and (max-width: 414px) {
  .sb-icon-search, .sb-search-submit {
    width: 45px;
  }
}

@media screen and (max-width: 360px) {
  .sb-icon-search, .sb-search-submit {
    width: 40px;
  }
}

.sb-search-submit {
  background: #000; /* IE needs this */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
  filter: alpha(opacity=0); /* IE 5-7 */
  opacity: 0;
  color: transparent;
  color:red;
  border: none;
  outline: none;
  z-index: -1;
}

.sb-icon-search {
  color: #fff;
  background: #4e4e4e;
  z-index: 999;
  font-size: 22px;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  background-image: url(../img/bg-busca.png);
  background-repeat: no-repeat;
  background-position: center;
}

.sb-icon-search:before {
  content: "";
}

.sb-search.sb-search-open,
.no-js .sb-search {
  width: calc(100%) !important;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
  background-image: url(../img/btn-fecha-pesquisa.png);
  background-repeat: no-repeat;
  background-position: center;
  z-index: 11;
}

@media screen and (max-width: 360px) {
  .sb-search.sb-search-open .sb-icon-search,
  .no-js .sb-search .sb-icon-search {
    display: none;
  }
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
  /*z-index: 90;*/
}

.ico-busca{
  width: 40px;
  height: 45px;
  z-index: 9999;
  position: absolute;
  display:none;
  background-image: url(../img/bg-busca.png);
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (max-width: 435px) {
  .ico-busca{
    display: none !important;
  }
}

/*------------------------------*\
COMPONENTE BUSCA
\*------------------------------*/ 



/***** LAYOUT DA TABELA *****/

tr.footable-filtering {
  background: #FFF;
}

tr.footable-detail-row {
  background: #f4f4f4;
  border: 1px solid #dedede;
}

/*.footable.table > tbody > tr > td.align-left {
white-space: nowrap;
}*/

.footable .btn-primary {
  color: #999;
  background-color: #fff;
  border-color: #ccc;
}

.footable .btn-primary:hover {
  color: #999;
  background-color: #e6e6e6;
  border-color: #ccc;
}

.footable .btn-primary:focus {
  color: #999;
  background-color: #e6e6e6;
  border-color: #ccc;
}

.footable-details th {
  font-weight: bold;
}

.footable tbody tr:hover {
  background: #fff5f5;
  cursor: pointer;
}

tr.footable-paging {
  background: #4e4e4e;
}

table.footable-paging-center > tfoot > tr.footable-paging > td {
  text-align: center !important;
  padding: 0;
}

.footable-paging .label-default {
  display: none !important;
}

.footable .pagination > li:first-child > a, .footable .pagination > li:first-child > span {
  background: #4e4e4e;
  color: #777;
  border-radius: 6px;
}

.footable .pagination > .disabled > span, .footable .pagination > .disabled > span:hover, .footable .pagination > .disabled > span:focus, .footable .pagination > .disabled > a, .footable .pagination > .disabled > a:hover, .footable .pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #4e4e4e;
  border-color: #777;
}

.footable .pagination > .active > a, .footable .pagination > .active > span, .footable .pagination > .active > a:hover, .footable .pagination > .active > span:hover, .footable .pagination > .active > a:focus, .footable .pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #49b87f;
  border-color: #49b87f;
  border-radius: 6px;
}

.footable .pagination > li > a, .footable .pagination > li > span {
  color: #FFF;
  background-color: #4e4e4e;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin: 0 1px;
  font-size: 1rem;
  padding: 5px 9px;
}

.footable .pagination > li > a:hover, .footable .pagination > li > span:hover {
  color: #FFF;  
  background: #49b87f;
  border-color: #49b87f;
}

table > tbody > tr > td > span.footable-toggle {
  opacity: 1;
}

table.footable > tfoot > tr.footable-paging > td > ul.pagination {
  margin: 4px 0 0 0;
}

.fooicon-plus:before {
  content: "\f067";
  background: #05ae2d;
  padding: 2px 3px 1px;
  border-radius: 10px;
  color: #FFF;
}

.fooicon-minus:before {
  content: "\f068";
  background: #e30613;
  padding: 2px 3px 1px;
  border-radius: 10px;
  color: #FFF;
}

.footable .selected {
  background: #f5e0e0;
}

ul.exporters li.fa {
  background: #337ab7;
  border-radius: 4px;
  padding: 10px 20px;
  margin-right: 10px;
  color: #FFF;
  font-size: 1.2rem;
}

ul.exporters li.fa:hover {
  background-color: #286090;
}

ul.exporters li.fa a {
  color: #FFF;
  margin-left: 10px;
  font-family: roboto;
}

.css_blink {
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: blinker;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	animation-name: blinker;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
    color: #cf0000 !important;
    font-size: 2rem;
    font-weight: bold;
}

@-moz-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

@keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

@media screen and (max-width: 768px) {
  .css_blink {
      display: table !important;
  }
}

/***** tabela postos de vacinacao *****/

.tabela-postos-de-vacinacao {
  padding: 10px 10px 10px 0;
}

.tabela-postos-de-vacinacao h2 {
    font-size: 16px;
    border-bottom: 1px solid #c30;
    margin-bottom: 5px;
}

.tabela-postos-de-vacinacao table {
  width: 100%;
  margin-bottom: 20px;
}

.postos-de-vacinacao thead tr th {
  padding: 5px 8px;
  font-size: 1.5rem;
  font-weight: normal;
}

.postos-de-vacinacao thead tr:hover {
  background: #4e4e4e;
}

.postos-de-vacinacao td {
  border-bottom: 1px solid #dedede;
  padding: 7px 6px;
}

.postos-de-vacinacao tr:hover {
  background: #fff5f5;
}

.postos-de-vacinacao td:first-child {
  border-left: 1px solid #dedede;
}

.postos-de-vacinacao td:last-child {
  border-right: 1px solid #dedede;
  text-align: left;
}


/***** tabela postos de coleta *****/

.tabela-postos-de-coleta {
  padding: 10px 10px 10px 0;
}

#postos-de-coleta thead tr th {
  padding: 5px 8px;
  font-size: 1.5rem;
  font-weight: normal;
}

#postos-de-coleta thead tr:hover {
  background: #4e4e4e;
}

#postos-de-coleta td {
  border-bottom: 1px solid #dedede;
  padding: 7px 6px;
}

#postos-de-coleta tr:hover {
  background: #fff5f5;
}

#postos-de-coleta td:first-child {
  border-left: 1px solid #dedede;
}

#postos-de-coleta td:last-child {
  border-right: 1px solid #dedede;
  text-align: left;
}

/**
 * popup-manutenÃ§Ã£o
 */

  .modal-overlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
    transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  }
  .modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }
/**
 * Modal
 */
.modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  /* margin: 0 auto; ---> NÃ£o funciona no IE */
  background-color: #fff;
  /* width: 766px;
  height: 310px; */
  /* max-width: 75rem; */
  /* min-height: 20rem; */
  /* padding: 1rem;
  border-radius: 3px; */
  opacity: 1;
  overflow-y: hidden;
  box-shadow: 0px 9px 24px rgba(0, 0, 0, 0.7);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.modal .close-modal {
  position: absolute;
  cursor: pointer;
  top: 5px;
  right: 15px;
  opacity: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  color: #cf0000;
  font-size: 18px;
}
.modal .close-modal svg {
  width: 1.75em;
  height: 1.75em;
}
.modal .modal-content {
  opacity: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.modal.active {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.modal.active .modal-content {
  opacity: 1;
}
.modal.active .close-modal {
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .modal {
  	margin: 0 70px;
  }
}

@media screen and (max-width: 640px) {
  .modal {
  	margin: 0 70px;
  }
}

@media screen and (max-width: 360px) {
  .modal {
  	margin: 0 40px;
  }
  
  .modal .close-modal {
    top: 0;
    right: 5px; 
  }
}

@media screen and (max-width: 320px) {
  .modal {
  	margin: 0 40px;
    overflow: hidden;
  }
  
  .modal .close-modal {
    top: -5px;
    right: -2px; 
  }
}
#dialogCampoObrigatorio {
  /* display: none; */

  background-color: rgba(0, 0, 0, 0.75);
  z-index: 1300;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
}