/*
Theme Name: SEI2023
Author: Cleyanne Teixeira - ATI
Author URI: http://portal.sei.ma.gov.br
Description: Novo tema SEI
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

body {
    background-color: #dfdfdf;
    font-family: arial;
    padding: 0;
    margin: 0;
    background-color: #F9F9F9;}

p {
    line-height: 1.5;}

a {
    text-decoration: none;}

header.my-logo {
    border-top: 5px solid #e1e1e1;
    background-color: #fff;
    padding: 10px 90px;}

.coluna-logo {
    width: 25%;
    display: inline-block;}

.coluna-logo a img {
    max-width: 250px !important;}

.coluna-menu {
    height: 80px;
    float: right;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: right;}

ul#menu-menu-principal {
    list-style-type: none;}

ul#menu-menu-principal li {
    display: inline-block !important;
    padding: 0 15px;}

.menu-verde {
	margin-right: 10px;
	background-color: #204180;
	border-radius: 3px;
    padding: 8px 30px 6px !important;
    border-bottom: 3px solid rgba(0,0,0,0.15);}

.menu-verde:hover {
    background-color: #479b32;}

.menu-verde a, .menu-azul a {
    color: #fff !important;}

ul#menu-menu-principal li a {
    text-transform: uppercase;
    font-size: 14px;
    color: #444;
    text-decoration: none;}

.menu-azul {
	margin-left: 10px;
	background-color: #B5292F;
	border-radius: 3px;
    padding: 8px 30px 6px !important;
	border-bottom: 3px solid rgba(0,0,0,0.15);}

.menu-azul:hover {
    background-color: #0970c2;}

.secao-padrao {
	padding: 30px 0;
    width: 85%;
    margin: 0 auto;}

.tab {
  width: 100%;
  margin: 0;}

/*esconde o radio button*/
.tab input[type] {
  display: none;}

/*nossos próprios botões*/
.tab label {
  display: block;
  float: left;
  padding: 12px 20px;
  margin-right: 5px;
  cursor: pointer;
  transition: background-color .3s;}

/*ataca o label com hover e o radio button checkado*/
.tab label:hover,
.tab input:checked + label {
    background: #fff;
    color: #444;
    border: 1px solid #dddcdc;
	border-bottom: 0;
    border-top: 2px solid #249fe6;}

/*o conteúdo que mudar ao clicar nos boões*/
.tabs {
  clear: both;
  height: 100px;
  perspective: 400px;
  -webkit-perspective: 400px;}

/*aqui a nossa content*/
.tabs .content {
  background: #fff;
  width: 90%;
  position: absolute;
  /*border: 2px solid #5b9780;*/
  box-shadow: 1px 2px 5px #0000002e;
  padding: 10px 30px 40px;
  line-height: 1.4em;
  opacity: 0;
  transform: rotateX(-20deg);
  transform-origin: top center;
  transition: opacity .3s, transform 1s;
  z-index: 0;}

/*aqui estão nosso links*/
#tab1:checked ~ .tabs .content:nth-of-type(1),
#tab2:checked ~ .tabs .content:nth-of-type(2),
#tab3:checked ~ .tabs .content:nth-of-type(3),
#tab4:checked ~ .tabs .content:nth-of-type(4) {
  transform: rotateX(0);
  opacity: 1;
  z-index: 1;}

button.btn-acesso {
    background-color: #204180;
    border: none;
    padding: 10px 30px;
    font-size: 15px;
    color: #fff;
    border-radius: 3px;}

button.btn-acesso:hover {
    background-color: #479b32;}

button.btn-acesso a {
    color: #fff;}

.tabs .content p {
    width: 85%;
    display: inline-block;}

.box-acesso {
    background-color: #fff;
    box-shadow: 0px 1px 5px #00000042;
    padding: 10px 5px 0px 5px;
    margin: 10px;
    width: 30%;
    display: inline-block;}

.box-acesso:hover {
    box-shadow: 10px 10px 13px #00000026;}

.box-acesso img {
    width: 100%;}

.box-acesso h4 {
    font-size: 20px;
    margin: 0 0 5px 0;
    padding: 10px;
    color: #444;}

footer {
    background-color: #204180;}

.rodape-colu img {
    margin-right: 15px;
    float: right;
    max-width: 300px;}

.rodape-colu {
    width: 49%;
    display: inline-block;}

.copy-footer {
    color: #fff;
    text-align: center;
    padding: 10px;
    background-color: #B5292F;}

.rodape-geral {
    padding: 30px;}

.rodape-colu p {
    padding: 20px;
    border-left: 1px solid #ffffff57;
	color: #Fff;
    line-height: 1.4;}

ul#menu-menu-principal li:hover ul.sub-menu {
    display: block;}

ul.sub-menu {
    padding: 15px 0;
    max-width: 235px;
    display: none;
    position: absolute;
    z-index: 999;
    background-color: #fff;
    line-height: 2.3;}

ul.sub-menu li {
    width: 88%;}

.menu-verde ul.sub-menu li a {
    color: #444 !important;}

.menu-verde ul.sub-menu li {
    line-height: 1;
    padding: 7px 15px !important;}

ul.sub-menu li:hover {
    background-color: #f5f5f5;}

section.content-area.page-individual {
    padding: 50px 0;
    width: 90%;
    margin: 0 auto;}

.page-title {
	background-color: rgb(1, 156, 201);
    background-image: url(http://portal.sei.ma.gov.br/wp-content/uploads/2024/02/INTEGRACAO.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
    width: 100%;
    background-size: 100%;
    padding: 120px 0px;
    background-position: 10% -43.2px;
    overflow: initial;}

.page-title h2 {
    width: 90%;
    margin: 0 auto;
    color: #234180;
    font-size: 36px;}

.duas-colu {
    margin: 50px auto;
    width: 85%;
    display: flex;}

.meia-colu {
    width: 50%;}

.meia-colu h3 {
    text-align: center;}

ul.acesso-icones {
    list-style: none;}

.quarto-colu .widgettitle {
    display: none;}

.quarto-colu {
    width: 49%;
    display: inline-block;}

.quarto-colu img {
    margin-right: 10px;
    vertical-align: middle;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;}

.quarto-colu p:hover img {
    filter: none;}

.quarto-colu p:hover {
    color: #fe4241;}

.quarto-colu p {
    font-size: 12px;}

.quarto-colu a {
    color: inherit;}

.meia-colu.acesso {
    padding: 0 50px;}

/* RESPONSIVO */

@media only screen and (max-width: 600px) {
.coluna-logo {
	width: 100%;}
.coluna-logo a img {
    margin: 0 auto;
    max-width: 140px !important;
    display: block;}
	
.coluna-menu {
	display: none !important;}
	
.tab label {
	width: 90%;}
	
.box-acesso {
    width: 90%;}
	
.rodape-colu {
	width: 100%;}
	
.rodape-colu img {
    display: block;
    margin: 0 auto;
    float: none;
    max-width: 150px;}
	
.rodape-colu p {
    padding: 0;
	text-align: center;
	border-left: none;}
	
.page-title {
	padding: 50px 0px;
	background-attachment: inherit;
    background-repeat: no-repeat;
	background-position: 0;}
	
.duas-colu {
    display: block !important;}	
	
.meia-colu {
    width: 100% !important;}
	
.quarto-colu {
    width: 45% !important;
    display: inline-grid;}
	
.meia-colu.acesso {
    padding: 0 15px !important;}
  
.quarto-colu img {
    max-width: 30px !important;}
  
.quarto-colu p {
    font-size: 10px !important;}
  
.rodape-geral {
    margin-top: 80px;}
  
.tab label:hover, .tab input:checked + label {
    width: 95% !important;}
  
html, body {
    overflow-x: hidden !important;}
}