@charset "UTF-8";
/**
 * ii-sat - iiSAT CSS
 * @version v1.0
 * @copyright 2017 iiBrasil
 * @author João Corityac
 */

/* Fonts */
/* IMPORTANT: CHANGE TO LOCAL STORAGE */
@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Roboto:300,400,400i,500';
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

.material-icons {font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}



/* Intel Clear W */
/* -- Light */
@font-face {font-family: 'IntelClearLight'; src: url('../fontes/intel-clear-latin-lite.eot?v=4.3.0'); src: url('../fontes/intel-clear-latin-lite.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fontes/intel-clear-latin-lite.woff2?v=4.3.0') format('woff2'), url('../fontes/intel-clear-latin-lite.woff?v=4.3.0') format('woff'), url('../fontes/intel-clear-latin-lite.ttf?v=4.3.0') format('truetype'), url('../fontes/intel-clear-latin-lite.svg?v=4.3.0#IntelClearLight') format('svg'); font-weight: normal; font-style: normal;}
/* -- Regular */
@font-face {font-family: 'IntelClearRegular'; src: url('../fontes/intel-clear-latin.eot?v=4.3.0'); src: url('../fontes/intel-clear-latin.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fontes/intel-clear-latin.woff2?v=4.3.0') format('woff2'), url('../fontes/intel-clear-latin.woff?v=4.3.0') format('woff'), url('../fontes/intel-clear-latin.ttf?v=4.3.0') format('truetype'), url('../fontes/intel-clear-latin.svg?v=4.3.0#IntelClearRegular') format('svg'); font-weight: normal; font-style: normal;}


/* CLEAR */
ol, ul {list-style: none; font-weight: 300 !important; font-size:auto !important; line-height: auto !important;}
:focus {outline: 0;}
input[type=text], input[type=password], input[type=submit], textarea, select { -moz-appearance: none; -webkit-appearance: none; appearance:none;}
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0;  height: 0; }
.clearfix { *display: inline-block; height: 1%; }
.clear { clear: both; display: block; font-size: 0;	height: 0; line-height: 0; width:100%; }
article, aside, details, .overlaycaption, figure, footer, header, hgroup, menu, nav, section, dialog { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; visibility: hidden; }
input {-webkit-appearance:none; -moz-appearance:none; appearance:none;}
form {margin:0; padding:0;}

::selection {background:#575756;	color:#FFFFFF; }
::-moz-selection {background:#575756;color:#FFFFFF;}
* { -webkit-tap-highlight-color: #575756;}
.noselect, .no-select {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.noScroll {overflow:hidden; position:fixed;}
.yesScroll {-webkit-overflow-scrolling:touch; overflow-y: scroll;}


/* MAIN */
body {width:100%; min-height:400px; height: auto; background-color:#f2f2f2; color:#575756; font-family: 'Roboto', sans-serif; font-weight:300 !important; line-height:normal !important; font-style: normal;-webkit-font-smoothing: subpixel-antialiased; overflow-x:hidden;}
a {color:#373736; font-family: 'Roboto', sans-serif; font-weight:300; font-style: normal; text-decoration:none;}
.desktop-only {display:block !important; visibility:visible !important;}
.mobile-only {display:none !important; visibility:hidden !important;}
.bkg-iibrasil {width: 100%; min-height: 100vh; height: 100%; background-image: url(../imagens/bkg-overlay-right-login.png); background-repeat: no-repeat; background-size: cover; opacity: 0.15; position: fixed; z-index: 0;}

/* HEADER */
header {width: 100%; height: 90px; padding: 50px 0 20px 0; position: relative; display: block; z-index: 2; text-align:center; overflow:hidden;}
header .logo-prefeitura-ss {width: 332px; height: 90px; position: relative; display: inline-block; background-image: url(../svg/logo-pref-ss-brasao-black.svg); background-position: 0 0; background-size: 332px 90px; background-repeat: no-repeat;}
header .line-div {width: 1px; height: 90px; background: #d8d8d8; margin: 0 40px; position: relative; display: inline-block;}
header .logo-iibrasil {width: 332px; height: 90px; position: relative; display: inline-block; background-image: url(../svg/logo-iibrasil-color-login.svg); background-position: 0 0; background-size: 332px 90px; background-repeat: no-repeat;}



/* KEYBOARD */
.ui-keyboard {background: #FFF; padding: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px, rgba(0, 0, 0, 0.05) 0px 4px 2px, rgba(0, 0, 0, 0.05) 0px 8px 4px, rgba(0, 0, 0, 0.05) 0px 16px 8px, rgba(0, 0, 0, 0.05) 0px 32px 16px, rgba(0, 0, 0, 0.05) 0px 64px 32px;}

.ui-keyboard .btn {width: 180px; height: 35px; margin: 0 auto 10px auto; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: center; border-radius: 5px; color: #8e8e8e; border: solid 1px rgba(204,204,204,1.00); background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}
.ui-keyboard .btn:first-of-type {margin-top: 35px;}

.ui-keyboard .btn-small {width: auto; height: 35px; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 300; display: inline-block; position: relative; text-align: center; border-radius: 5px; color: #8e8e8e; border: solid 1px rgba(204,204,204,1.00); background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}
.ui-keyboard .btn-small.ui-keyboard-space {width: 150px!important;}
.ui-keyboard .btn:hover, .ui-keyboard .btn-small:hover {color: #ffffff; border: solid 1px rgba(37,135,232,1.00); background: rgba(37,135,232,1.00);}
.ui-keyboard .btn:active, .ui-keyboard .btn-small:active {color: #ffffff; border: solid 1px rgba(17,93,167,1.00); background: rgba(17,93,167,1.00);}

.ui-keyboard a.btn {width: 160px; height: 15px; margin: 0 auto 10px auto; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: center; padding: 8px 0 12px 0; border-radius: 5px; color: #8e8e8e; border: solid 1px rgba(204,204,204,1.00); background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}
.ui-keyboard a.btn:hover {color: #ffffff; border: solid 1px rgba(37,135,232,1.00); background: rgba(37,135,232,1.00);}
.ui-keyboard a.btn:active {color: #ffffff; border: solid 1px rgba(17,93,167,1.00); background: rgba(17,93,167,1.00);}

.ui-keyboard input {width: calc(100% - 30px); height: 35px; margin: 0 auto 8px auto; padding: 0 10px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: left; border-radius: 5px; color: #8e8e8e; border: solid 1px rgba(204,204,204,1.00); background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}
.ui-keyboard input.invalid {width: calc(100% - 20px); height: 35px; margin: 0 auto 8px auto; padding: 0 10px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: left; border-radius: 5px; color: #8e8e8e; border: solid 1px red; background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}


/* CONTENT */
.content-app {width: 100%; height: calc(100vh - 305px); min-height: 550px; position: relative; display: block; text-align:center; overflow:hidden;}

.content-app .line-content {width: 100%; height: 350px; background: #DDDDDD; position: absolute; top: calc(50% - 30px); transform: translateY(-50%); overflow: hidden; box-shadow: 0px 0px 70px 0px rgba(0,0,0,0.4); z-index: 3;}
.content-app .line-content .bkg-content {width: 100%; height: 100%; position: absolute; display: block;}
.content-app .line-content .bkg-content.default {background-image: url(../imagens/bkg-content-default.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;}
.content-app .line-content .overlay-content {width: 100%; height: 100%; position: absolute; display: block; background: rgba(87,87,86,.58);}
.content-app .line-content .stats-content {width: 850px; height: 100%; position: absolute; display: block; left: 50%; transform: translateX(-50%);}

@keyframes statsMove {
    from 	{opacity: 0; left: 310px;}
    to 		{opacity: 1; left: 0px;}
}

@-webkit-keyframes statsMove {
    from 	{opacity: 0; left: 310px;}
    to 		{opacity: 1; left: 0px;}
}

.content-app .line-content .stats-content .content {width: 250px; height: calc(100% - 40px); padding: 20px 30px; position: absolute; display: block; background: rgba(0,0,0,.44); animation-name: statsMove; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-delay: 0.5s; -webkit-animation-name: statsMove; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -webkit-animation-delay: 0.5s; opacity: 0; left: 310px; text-align: left; font-family: 'IntelClearLight',sans-serif; color: #ffffff; text-shadow: 0px 2px 4px rgba(0,0,0,0.9);}
.content-app .line-content .stats-content .content h5 {font-size: 12px; margin-top: 30px; margin-bottom: 8px;}
.content-app .line-content .stats-content .content p {font-size: 26px;}

.content-app .line-content .stats-content .content .chart-stats {width: 100px; height: 100px; position: relative; display: block;}
.content-app .line-content .stats-content .content .chart-stats .statsText {width: 100px; height: auto; position: absolute; display: block; top:50%; transform: translateY(-50%); text-align: center; font-size: 26px; line-height: 18px;}
.content-app .line-content .stats-content .content .chart-stats .statsText small {font-size: 13px;}
.content-app .line-content .stats-content .content .chart-stats .statsTotal {fill:none; stroke-width:1; stroke:rgba(255,255,255,0.5);}
.content-app .line-content .stats-content .content .chart-stats .statsParcial {fill:none; stroke-width:2; stroke:rgba(37,135,232,1.00);}

/**
 * 1. The `reverse` animation direction plays the animation backwards
 *    which makes it start at the stroke offset 100 which means displaying
 *    no stroke at all and animating it to the value defined in the SVG
 *    via the inline `stroke-dashoffset` attribute.
 * 2. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */
.circle-chart__circle {
  animation: circle-chart-fill 0.8s reverse 0.7s; /* 1 */ 
  transform: rotate(-90deg); /* 2, 3 */
  transform-origin: center; /* 4 */
}

/**
 * 1. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 2. Scaling mirrors the circle to make the stroke move right
 *    to mark a positive chart value.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */
.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
}

@keyframes circle-chart-fill {
  	to { stroke-dasharray: 0 100; opacity: 1; }
}

@keyframes welcomeMove {
    from 	{opacity: 0; left: 300px;}
    to 		{opacity: 1; left: 580px;}
}

@-webkit-keyframes welcomeMove {
    from 	{opacity: 0; left: 300px;}
    to 		{opacity: 1; left: 580px;}
}

@keyframes arrowMove {
    from 	{opacity: 0; left: 10px;}
    to 		{opacity: 1; left: -90px;}
}

@-webkit-keyframes arrowMove {
    from 	{opacity: 0; left: 10px;}
    to 		{opacity: 1; left: -90px;}
}

.content-app .frames-content {width: 850px; height: 450px; position: absolute; top: calc(50% - 30px); left: 50%; transform: translateY(-50%) translateX(-50%); z-index: 4;  text-align: left;}

/* -- Frame Welcome */
.content-app .frames-content .frame-welcome {width: 270px; height: 400px; position: absolute; display: block; top: 50%; left: 580px; transform: translateY(-50%); border-radius: 5px; background: #f7f7f7; z-index: 4;  animation-name: welcomeMove; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-delay: 0.5s; -webkit-animation-name: welcomeMove; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -webkit-animation-delay: 0.5s; opacity: 0; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px, rgba(0, 0, 0, 0.05) 0px 2px 2px, rgba(0, 0, 0, 0.05) 0px 4px 4px, rgba(0, 0, 0, 0.05) 0px 8px 8px, rgba(0, 0, 0, 0.05) 0px 16px 16px, rgba(0, 0, 0, 0.05) 0px 32px 32px;}
.content-app .frames-content .frame-welcome .content {width: calc(100% - 110px); padding: 30px 40px 30px 70px;}
.content-app .frames-content .frame-welcome .content h2 {font-family: 'IntelClearLight', sans-serif; font-size: 26px; color: #575756; font-weight: 300; margin-bottom: 15px;}
.content-app .frames-content .frame-welcome .content p {font-family: 'Roboto', sans-serif; font-size: 15px; color: #575756; font-weight: 300; line-height: 22px; margin-bottom: 12px;}

.content-app .frames-content .frame-welcome .content a.btn {width: 160px; height: 15px; margin: 0 auto 10px auto; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: center; padding: 8px 0 12px 0; border-radius: 5px; color: #8e8e8e; border: solid 1px rgba(204,204,204,1.00); background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}
.content-app .frames-content .frame-welcome .content a.btn:hover {color: #ffffff; border: solid 1px rgba(37,135,232,1.00); background: rgba(37,135,232,1.00);}
.content-app .frames-content .frame-welcome .content a.btn:active {color: #ffffff; border: solid 1px rgba(17,93,167,1.00); background: rgba(17,93,167,1.00);}

.content-app .frames-content .frame-welcome .content a.btn.important {width: 160px; height: 32px; margin: 0 auto 10px auto; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: center; padding: 8px 0 12px 0; border-radius: 5px; color: #ffffff; border: solid 1px rgba(215,66,68,1.00); background: rgba(215,66,68,1.00); transition: all 0.4s; text-decoration: none;}
.content-app .frames-content .frame-welcome .content a.btn.important:hover {color: #ffffff; border: solid 1px rgba(176,37,39,1.00); background: rgba(176,37,39,1.00);}
.content-app .frames-content .frame-welcome .content a.btn.important:active {color: #ffffff; border: solid 1px rgba(176,37,39,1.00); background: rgba(176,37,39,1.00);}

/* -- Frame Forms */
.content-app .frames-content .frame-form {width: 300px; height: 450px; position: absolute; display: block; top: 50%; left: 310px; transform: translateY(-50%); border-radius: 5px; background: #ffffff; z-index: 5; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px, rgba(0, 0, 0, 0.05) 0px 4px 2px, rgba(0, 0, 0, 0.05) 0px 8px 4px, rgba(0, 0, 0, 0.05) 0px 16px 8px, rgba(0, 0, 0, 0.05) 0px 32px 16px, rgba(0, 0, 0, 0.05) 0px 64px 32px;}
.content-app .frames-content .frame-form .forms {width: 300px; height: 450px; position: absolute; display: block; overflow: hidden;}
.content-app .frames-content .frame-form .forms .content-form {width: calc(100% - 80px); padding: 25px 40px; position: absolute; display: block; opacity: 0; transition: all 0.5s; top: -450px;}
.content-app .frames-content .frame-form .forms .content-form.visible {opacity: 1; top:0px;}
.content-app .frames-content .frame-form .forms .content-form h2 {font-family: 'IntelClearLight', sans-serif; font-size: 22px; color: #575756; font-weight: 300; margin-bottom: 15px; margin-top: 10px;}
.content-app .frames-content .frame-form .forms .content-form p {font-family: 'Roboto', sans-serif; font-size: 15px; color: #575756; font-weight: 300; line-height: 22px; margin-bottom: 12px;}
.content-app .frames-content .frame-form .forms .content-form .btn {width: 180px; height: 35px; margin: 0 auto 10px auto; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: center; border-radius: 5px; color: #8e8e8e; border: solid 1px rgba(204,204,204,1.00); background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}
.content-app .frames-content .frame-form .forms .content-form .btn:first-of-type {margin-top: 35px;}
.content-app .frames-content .frame-form .forms .content-form .btn:hover {color: #ffffff; border: solid 1px rgba(37,135,232,1.00); background: rgba(37,135,232,1.00);}
.content-app .frames-content .frame-form .forms .content-form .btn:active {color: #ffffff; border: solid 1px rgba(17,93,167,1.00); background: rgba(17,93,167,1.00);}

.content-app .frames-content .frame-form .forms .content-form a.btn {width: 160px; height: 15px; margin: 0 auto 10px auto; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: center; padding: 8px 0 12px 0; border-radius: 5px; color: #8e8e8e; border: solid 1px rgba(204,204,204,1.00); background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}
.content-app .frames-content .frame-form .forms .content-form a.btn:hover {color: #ffffff; border: solid 1px rgba(37,135,232,1.00); background: rgba(37,135,232,1.00);}
.content-app .frames-content .frame-form .forms .content-form a.btn:active {color: #ffffff; border: solid 1px rgba(17,93,167,1.00); background: rgba(17,93,167,1.00);}

.content-app .frames-content .frame-form .forms .content-form input {width: calc(100% - 20px); height: 35px; margin: 0 auto 8px auto; padding: 0 10px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: left; border-radius: 5px; color: #8e8e8e; border: solid 1px rgba(204,204,204,1.00); background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}
.content-app .frames-content .frame-form .forms .content-form input.invalid {width: calc(100% - 20px); height: 35px; margin: 0 auto 8px auto; padding: 0 10px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: left; border-radius: 5px; color: #8e8e8e; border: solid 1px red; background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}
.content-app .frames-content .frame-form .forms .content-form input:disabled {color: #FFF !important; background: rgba(204,204,204,1.00)!important;}
.content-app .frames-content .frame-form .forms .content-form input:disabled::placeholder {color: #FFF !important;}

.content-app .frames-content .frame-form .forms .content-form input.code {width: calc(100% - 162px); height: 35px; margin: 0 auto 8px auto;  float: left; padding: 0 10px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: left; border-radius: 5px 0 0 5px; color: #8e8e8e; border: solid 1px rgba(204,204,204,1.00); border-right: none; background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none; text-transform: lowercase;}
.content-app .frames-content .frame-form .forms .content-form input.code::placeholder { text-transform: none;}
.content-app .frames-content .frame-form .forms .content-form input.code.invalid {width: calc(100% - 162px); height: 35px; margin: 0 auto 8px auto;  float: left; padding: 0 10px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; display: block; position: relative; text-align: left; border-radius: 5px 0 0 5px; color: #8e8e8e; border: solid 1px red; border-right: none; background: rgba(255,255,255,0); transition: all 0.4s; text-decoration: none;}

.content-app .frames-content .frame-form .forms .content-form .caps-warning {background-color: rgb(231, 150, 60);border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;text-align: center;color: rgb(255, 255, 255);font-size: 13px;padding: 10px;pointer-events: none;white-space: nowrap;margin-top: -89px;position: absolute;width: calc(100% - 98px);transition: all 0.25s ease-out; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px, rgba(0, 0, 0, 0.05) 0px 2px 2px, rgba(0, 0, 0, 0.05) 0px 4px 4px, rgba(0, 0, 0, 0.05) 0px 8px 8px, rgba(0, 0, 0, 0.05) 0px 16px 16px, rgba(0, 0, 0, 0.05) 0px 32px 32px; display: none;}

.content-app .frames-content .frame-form .forms .content-form .captcha-login {width: 100px; height: 37px; float: left; display: block; position: relative; border-radius: 0; border: none; overflow: hidden;}
.content-app .frames-content .frame-form .forms .content-form .captcha-loading {text-align: center; width: 38px; height: 29px; border: solid 1px rgba(204,204,204,1.00); border-left: none; border-radius: 0 5px 5px 0;  float: left; display: block; position: relative;     padding: 6px 0 0 0;}

.content-app .frames-content .frame-form .arrow-form {width: 47px; height: 380px; overflow: hidden; position: absolute; top:50%; transform: translateY(-50%); left: -30px;}
.content-app .frames-content .frame-form .arrow-form .arrowForm {fill:#2587E8;}
.content-app .frames-content .frame-form .arrow-form .arrowFormShadow {opacity:0.49;fill:url(#bkgSVG1);}
.content-app .frames-content .frame-form .arrow-form .arrowFormLight {opacity:0.49;fill:url(#bkgSVG2);}
/* ---- Nav Frame Welcome */
.content-app .frames-content .frame-form .nav-form {width: 80px; height: 300px; background: #ffffff; position: absolute; top:50%; transform: translateY(-50%); left: -90px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px, rgba(0, 0, 0, 0.2) 0px 4px 4px, rgba(0, 0, 0, 0.2) 0px 8px 8px, rgba(0, 0, 0, 0.2) 14px 36px 16px, rgba(0, 0, 0, 0.2) 28px 42px 32px, rgba(0, 0, 0, 0.2) 42px 84px 64px; animation-name: arrowMove; animation-duration: 0.7s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-delay: 0.5s; -webkit-animation-name: arrowMove; -webkit-animation-duration: 0.7s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -webkit-animation-delay: 0.5s; opacity: 0;}
.content-app .frames-content .icon {width: 80px; height: 79px; padding-bottom: 15px; background-image: url(../svg/icons-nav-login-new.svg); background-position: 0px 0px; background-repeat: no-repeat; background-size: 160px 320px; cursor: pointer; position:relative;}

.content-app .frames-content .icon .text {width: 100%;text-align: center;bottom: 10px;position: absolute;font-family: 'Roboto', sans-serif;font-size: 13px;}

.content-app .frames-content .frame-form .nav-form .icon .tooltip {
  background: #373736;
  border-radius: 5px;
  text-align: center ;
  bottom: calc(50% - 15px);
  color: #fff;
  display: block;
  left: 100px;
	font-size: 13px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: auto;
	white-space: nowrap;
  transform: translateY(-50%);
  transition: all .25s ease-out;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px, rgba(0, 0, 0, 0.05) 0px 2px 2px, rgba(0, 0, 0, 0.05) 0px 4px 4px, rgba(0, 0, 0, 0.05) 0px 8px 8px, rgba(0, 0, 0, 0.05) 0px 16px 16px, rgba(0, 0, 0, 0.05) 0px 32px 32px;
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.content-app .frames-content .frame-form .nav-form .icon .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.content-app .frames-content .frame-form .nav-form .icon .tooltip:after {
  border-top: solid transparent 6px;
  border-bottom: solid transparent 6px;
  border-right: solid #373736 6px;
  bottom: calc(50% - 13px);
  transform: translateY(-50%);
  content: " ";
  height: 0;
  left: -6px;
  position: absolute;
  width: 0;
}
  
.content-app .frames-content .frame-form .nav-form .icon:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}


.content-app .frames-content .frame-form .nav-form .line {width: 45px; height: 1px; background: #D8D8D8; margin: 0 auto;}
.content-app .frames-content .frame-form .nav-form .icon.empresas {background-position: 0px 0px;}
.content-app .frames-content .frame-form .nav-form .icon.empresas:hover, .content-app .frames-content .frame-form .nav-form .icon.empresas.clicked {background-position: -80px 0px;}
.content-app .frames-content .frame-form .nav-form .icon.usuarios {background-position: 0px -80px;}
.content-app .frames-content .frame-form .nav-form .icon.usuarios:hover, .content-app .frames-content .frame-form .nav-form .icon.usuarios.clicked {background-position: -80px -80px;}
.content-app .frames-content .frame-form .nav-form .icon.nfse {background-position: 0px -160px;}
.content-app .frames-content .frame-form .nav-form .icon.nfse:hover, .content-app .frames-content .frame-form .nav-form .icon.nfse.clicked {background-position: -80px -160px;}

.content-app .frames-content .icon.cidadao {background-position: 0px -248px;}
.content-app .frames-content .icon.cidadao:hover, .content-app .frames-content .icon.usuarios.cidadao {background-position: -80px -248px;}


/* FOOTER */
footer {width:100%; height:150px; position:relative; display:block; background-color:#373736; z-index:1; text-align:center; overflow:hidden;}
footer .left-footer {width:calc(50% - 50px); margin-left:30px; height:140px; display:block; text-align:left; float:left;}
footer .right-footer {width:calc(50% - 50px); margin-right:30px; height:140px; display:block; text-align:right; float:left;}
footer .logo-footer {width:95px; height:21px; margin-top:30px; background-image: none, url(../svg/logo-iibrasil-white-login.svg?ver=20170921); -webkit-background-size: 95px auto; background-size: 95px auto; background-position: 0px -1px; opacity:0.3; background-repeat: no-repeat; position:relative; display:block; float:left;}
footer .logo-prefeitura {width:80px; height:95px; margin-top:30px; margin-right:13px; background-image: none, url(../svg/logo-pref-ss-peixe-default-color.svg); -webkit-background-size: 80px 95px; background-size: 80px 95px; background-position: 0px 0px; opacity:1; background-repeat: no-repeat; position:relative; display: inline-block;}
footer .logo-iibrasil {width:95px; height:95px; margin-top:30px; margin-right:30px; background-image: none, url(../svg/logo-pref-iibrasil-white.svg?ver=20150301); -webkit-background-size: 95px 95px; background-size: 95px 95px; background-position: 0px 0px; opacity:0.3; background-repeat: no-repeat; position:relative; display: inline-block;}

footer .nav-footer {width: calc(100% - 120px); height: 20px; margin: 0 0 0 120px; padding: 38px 0 10px 0; border-bottom: solid 1px rgba(255,255,255,0.1); line-height: 20px; color:#CCCCCC; text-transform: uppercase !important; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 10px; vertical-align: top;}
footer .nav-footer a {color:#ffffff; text-transform: uppercase !important; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 11px; transition: all 0.4s; -webkit-transition: all 0.4s; -moz-transition:  all 0.4s; -o-transition:  all 0.4s; -ms-transition:  all 0.4s; text-decoration: none;}
footer .nav-footer a:hover, footer .nav-footer .select a {color:#ffd68c; text-decoration: none;}
footer .nav-footer ul {width: 100%; height: auto; position: relative; display: block; text-align: left;}
footer .nav-footer ul > li {width: auto; height: auto; line-height: 20px; margin: 0 20px 0 0; display: inline-block; position: relative; vertical-align: top;}
footer .nav-footer ul > li:last-of-type {margin: 0;}
footer .nav-footer ul > li.small { float: right; margin: 0 10px 0 0;}

footer .copy-footer {height:10px; line-height:10px; margin-top:28px; margin-left:0px; padding:0; font-size:11px; color:#8F8E8E; font-family: 'Roboto', sans-serif; font-weight:300; position:relative; display:block; float:left; text-transform: none;}

footer .infos-footer {width:auto; height:120px; margin-top:20px; text-align:left; padding-left:15px; border-left:solid 1px #706f6f; position:relative; display:inline-block; font-size:11px; font-family: 'Roboto', sans-serif; font-weight:300; color:#CCCCCC;}
footer .infos-footer p {margin:0; padding:0; line-height:20px; padding-bottom:5px;}
footer .infos-footer a {color:#ffffff; text-decoration:none;}


/* Tablets */
@media only screen
and (min-device-width: 481px)
and (max-device-width: 1024px)
and (orientation:portrait) {
	
	footer {z-index: -1;}
	
	.desktop-only {display:none!important; visibility:hidden!important;}
	.mobile-only {display:block!important; visibility:visible!important;}
	}
	
@media only screen
and (min-device-width: 481px)
and (max-device-width: 1024px)
and (orientation:landscape) {

	
	footer {z-index: -1;}
	
	.desktop-only {display:none!important; visibility:hidden!important;}
	.mobile-only {display:block!important; visibility:visible!important;}
	}


/* Phone */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)
and (orientation:portrait) {
	
	footer {width:100%; height:180px; z-index: -1;}
	footer .left-footer {width:100%; height:60px; margin-left:0px; display:block; text-align:center; float:left;}
	footer .right-footer {width:100%; height:120px; margin-right:0px; display:block; text-align:center; float:left;}
	footer .logo-footer {position:relative; display:inline-block; float:none;}
	footer .sitemap-footer {display:none;}
	
	.desktop-only {display:none!important; visibility:hidden!important;}
	.mobile-only {display:block!important; visibility:visible!important;}
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)
and (orientation:landscape) {
		
	footer {width:100%; height:180px; z-index: -1;}
	footer .left-footer {width:100%; height:60px; margin-left:0px; display:block; text-align:center; float:left;}
	footer .right-footer {width:100%; height:120px; margin-right:0px; display:block; text-align:center; float:left;}
	footer .logo-footer {position:relative; display:inline-block; float:none;}
	footer .sitemap-footer {display:none;}
	
	.desktop-only {display:none!important; visibility:hidden!important;}
	.mobile-only {display:block!important; visibility:visible!important;}
}