/*Font faces declarações*/
@font-face {
  font-family: roboto;
  src: url(fonts/Roboto-Bold.ttf);
}
@font-face {
  font-family: quicksand;
  src: url(fonts/Quicksand_Book.otf);
}

*{
  font-family: roboto;
}

#topbar{
  top: 0;
  width: 100%;
  height: 35px;
  position: absolute;
  z-index: 999;
  background-color: dodgerblue;
  border-bottom: solid 1px #000;
}


/*headers*/

h2{
  color: #1968b2;
  margin: auto;
  font-size: 19px;
  font-family: quicksand;
}


/*CSS do corpo*/
body{
  padding: 0px; 
  margin: 0px;
  
}

#main{
  position: relative;
  display: flex;
  width: 100%;
  top: 0px;
}

.row{
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0;
  width: 100%;
}

.row:after{
  content: '';
  display: inline-block;
  width: 100%;
}
  
.row .rectangle{
  display: table;
  width: 49%;
}

.row .rectangle{
  text-align: left;
  margin-bottom: 2%;
}

.row .rectangle:before{
  content: '';
  display: inline-block;
  padding-top: 60%;
}

.rectangle{
  margin-right: auto;
}

@media all and (min-width: 640px){
  .row .rectangle{
    display: inline-table;
    width: 10%;
  }
}

@media all and (min-width: 1400px){
  .row .rectangle{
    width: 10.5%;
    display: inline-table;
  }
}

@media all and (max-width: 1400px){
  .rectangle{
    margin-right: 100px;
  }
  .row{
    margin-left: 7%;
  }
}

@media all and (max-width: 640px){
  .row .rectangle{
    width: 10%;
    margin: auto;
  }
}

#bg{
  position: fixed;
  background-color: #ececec;
  background-attachment: fixed;  
  background-position: center 0%; /*
  filter: blur(8px);*/
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  align-items: flex-start;
}

img{
  transition: filter 0.6s;
}

img:hover{
  cursor: pointer;
  filter: hue-rotate(-40deg);
}


/*Novidades*/
#documentation{
  position: relative;
  padding-top: 2%
}

.news{
  position: relative;
  text-align: justify;
  background-color: white;
  font-weight: bolder;
  padding: 20px;
  width: 39%;
  margin-left: 2px;
  margin-right: 2px;
  overflow: auto;
  max-height: 420px;
  border-radius: 20px;
  overflow: hidden;
}

.news > iframe{
  margin-top: 10px;
  border: none;
  overflow-y: auto;
}

.news.right{
  right: 6%;
  float: right;
  margin-left: auto;
}

.news.left{
  float: left;
  left: 6%;
  margin-left: auto;
  text-align: center;
}

#version{
  position: absolute;
  z-index: 1000;
  top: 40px;
  right: 5px;
  text-align: right;
  font-family: roboto;
  font-size: 11px;
}



/*Sofia*/
.header-input {
  padding: 5px 5px 5px;
  border-top-right-radius: 50px;
  width: 360px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  min-height: 30px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
    background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.div_mom {
    display: inline-block;
    position: fixed;
    z-index: 100;
    bottom: 2em;
    right: 2em;
    padding: .4rem .5rem;
    border-radius: 11px !important;
    border-top-right-radius: 50px !important;
    background-color: #ffffff !important;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(83, 86, 90, 0.42);
    -moz-box-shadow: 0px 0px 15px 1px rgba(131,173,247,0.42);
    box-shadow: 0px 4px 12px 2px rgba(59, 63, 68, 0.34);
}

input,textarea {
  border: 1px solid #ebebeb;
  padding: 10px;
  margin: 0;
  font-size: 12px;
  outline: none;
  font-size: 13px;
  font-family: open sans, arial;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}    
#textofaq {
    color: black;
    font-weight: 600;
    border: none;
    width: 250px;
    border-bottom: 1px solid #cccccc;
}
.sofia-input {
    width: 120px;
    position: fixed;
    margin-top: -80px;
    right: 33px;
}

#btn {    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    width: 108px;
    background-color: #1E90FF !important;
    color: #ffffff !important;
    border: none;
    padding: .7rem 1rem;
}
        #btn:hover {
            background-color: #4169E1 !important;
        }    



#sofiaResposta{
  width: 100%;
  height:  280px;
  border: none;
}




/*spinner*/

.windows8 {
  position: fixed;
  width: 62px;
  height:62px;
  top: 50%;
  left: calc(50% - 31px);
}

.windows8 .wBall {
  position: absolute;
  width: 59px;
  height: 59px;
  opacity: 0;
  transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
  animation: orbit 4.2325s infinite;
    -o-animation: orbit 4.2325s infinite;
    -ms-animation: orbit 4.2325s infinite;
    -webkit-animation: orbit 4.2325s infinite;
    -moz-animation: orbit 4.2325s infinite;
}

.windows8 .wBall .wInnerBall{
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgb(0,0,0);
  left:0px;
  top:0px;
  border-radius: 8px;
}

.windows8 #wBall_1 {
  animation-delay: 0.926s;
    -o-animation-delay: 0.926s;
    -ms-animation-delay: 0.926s;
    -webkit-animation-delay: 0.926s;
    -moz-animation-delay: 0.926s;
}

.windows8 #wBall_2 {
  animation-delay: 0.183s;
    -o-animation-delay: 0.183s;
    -ms-animation-delay: 0.183s;
    -webkit-animation-delay: 0.183s;
    -moz-animation-delay: 0.183s;
}

.windows8 #wBall_3 {
  animation-delay: 0.3665s;
    -o-animation-delay: 0.3665s;
    -ms-animation-delay: 0.3665s;
    -webkit-animation-delay: 0.3665s;
    -moz-animation-delay: 0.3665s;
}

.windows8 #wBall_4 {
  animation-delay: 0.5495s;
    -o-animation-delay: 0.5495s;
    -ms-animation-delay: 0.5495s;
    -webkit-animation-delay: 0.5495s;
    -moz-animation-delay: 0.5495s;
}

.windows8 #wBall_5 {
  animation-delay: 0.743s;
    -o-animation-delay: 0.743s;
    -ms-animation-delay: 0.743s;
    -webkit-animation-delay: 0.743s;
    -moz-animation-delay: 0.743s;
}



@keyframes orbit {
  0% {
    opacity: 1;
    z-index:99;
    transform: rotate(180deg);
    animation-timing-function: ease-out;
  }

  7% {
    opacity: 1;
    transform: rotate(300deg);
    animation-timing-function: linear;
    origin:0%;
  }

  30% {
    opacity: 1;
    transform:rotate(410deg);
    animation-timing-function: ease-in-out;
    origin:7%;
  }

  39% {
    opacity: 1;
    transform: rotate(645deg);
    animation-timing-function: linear;
    origin:30%;
  }

  70% {
    opacity: 1;
    transform: rotate(770deg);
    animation-timing-function: ease-out;
    origin:39%;
  }

  75% {
    opacity: 1;
    transform: rotate(900deg);
    animation-timing-function: ease-out;
    origin:70%;
  }

  76% {
  opacity: 0;
    transform:rotate(900deg);
  }

  100% {
  opacity: 0;
    transform: rotate(900deg);
  }
}

@-o-keyframes orbit {
  0% {
    opacity: 1;
    z-index:99;
    -o-transform: rotate(180deg);
    -o-animation-timing-function: ease-out;
  }

  7% {
    opacity: 1;
    -o-transform: rotate(300deg);
    -o-animation-timing-function: linear;
    -o-origin:0%;
  }

  30% {
    opacity: 1;
    -o-transform:rotate(410deg);
    -o-animation-timing-function: ease-in-out;
    -o-origin:7%;
  }

  39% {
    opacity: 1;
    -o-transform: rotate(645deg);
    -o-animation-timing-function: linear;
    -o-origin:30%;
  }

  70% {
    opacity: 1;
    -o-transform: rotate(770deg);
    -o-animation-timing-function: ease-out;
    -o-origin:39%;
  }

  75% {
    opacity: 1;
    -o-transform: rotate(900deg);
    -o-animation-timing-function: ease-out;
    -o-origin:70%;
  }

  76% {
  opacity: 0;
    -o-transform:rotate(900deg);
  }

  100% {
  opacity: 0;
    -o-transform: rotate(900deg);
  }
}

@-ms-keyframes orbit {
  0% {
    opacity: 1;
    z-index:99;
    -ms-transform: rotate(180deg);
    -ms-animation-timing-function: ease-out;
  }

  7% {
    opacity: 1;
    -ms-transform: rotate(300deg);
    -ms-animation-timing-function: linear;
    -ms-origin:0%;
  }

  30% {
    opacity: 1;
    -ms-transform:rotate(410deg);
    -ms-animation-timing-function: ease-in-out;
    -ms-origin:7%;
  }

  39% {
    opacity: 1;
    -ms-transform: rotate(645deg);
    -ms-animation-timing-function: linear;
    -ms-origin:30%;
  }

  70% {
    opacity: 1;
    -ms-transform: rotate(770deg);
    -ms-animation-timing-function: ease-out;
    -ms-origin:39%;
  }

  75% {
    opacity: 1;
    -ms-transform: rotate(900deg);
    -ms-animation-timing-function: ease-out;
    -ms-origin:70%;
  }

  76% {
  opacity: 0;
    -ms-transform:rotate(900deg);
  }

  100% {
  opacity: 0;
    -ms-transform: rotate(900deg);
  }
}

@-webkit-keyframes orbit {
  0% {
    opacity: 1;
    z-index:99;
    -webkit-transform: rotate(180deg);
    -webkit-animation-timing-function: ease-out;
  }

  7% {
    opacity: 1;
    -webkit-transform: rotate(300deg);
    -webkit-animation-timing-function: linear;
    -webkit-origin:0%;
  }

  30% {
    opacity: 1;
    -webkit-transform:rotate(410deg);
    -webkit-animation-timing-function: ease-in-out;
    -webkit-origin:7%;
  }

  39% {
    opacity: 1;
    -webkit-transform: rotate(645deg);
    -webkit-animation-timing-function: linear;
    -webkit-origin:30%;
  }

  70% {
    opacity: 1;
    -webkit-transform: rotate(770deg);
    -webkit-animation-timing-function: ease-out;
    -webkit-origin:39%;
  }

  75% {
    opacity: 1;
    -webkit-transform: rotate(900deg);
    -webkit-animation-timing-function: ease-out;
    -webkit-origin:70%;
  }

  76% {
  opacity: 0;
    -webkit-transform:rotate(900deg);
  }

  100% {
  opacity: 0;
    -webkit-transform: rotate(900deg);
  }
}

@-moz-keyframes orbit {
  0% {
    opacity: 1;
    z-index:99;
    -moz-transform: rotate(180deg);
    -moz-animation-timing-function: ease-out;
  }

  7% {
    opacity: 1;
    -moz-transform: rotate(300deg);
    -moz-animation-timing-function: linear;
    -moz-origin:0%;
  }

  30% {
    opacity: 1;
    -moz-transform:rotate(410deg);
    -moz-animation-timing-function: ease-in-out;
    -moz-origin:7%;
  }

  39% {
    opacity: 1;
    -moz-transform: rotate(645deg);
    -moz-animation-timing-function: linear;
    -moz-origin:30%;
  }

  70% {
    opacity: 1;
    -moz-transform: rotate(770deg);
    -moz-animation-timing-function: ease-out;
    -moz-origin:39%;
  }

  75% {
    opacity: 1;
    -moz-transform: rotate(900deg);
    -moz-animation-timing-function: ease-out;
    -moz-origin:70%;
  }

  76% {
  opacity: 0;
    -moz-transform:rotate(900deg);
  }

  100% {
  opacity: 0;
    -moz-transform: rotate(900deg);
  }
}


.altui-body{
  min-height: 200px;
  overflow-y: hidden;
}

.scroll-y{
  overflow-y: scroll !important;
  max-height: 400px;
}