@charset "utf-8";
/* CSS Document */

/* Esconde o conteúdo por padrão */
.modal-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); z-index: 1000;
}
.modal-caixa { background: white; width: 50%; margin: 15% auto; padding: 50px; border-radius: 10px; text-align: center; border: 1px solid #3185CB; }

.pg-supensa { border: 1px solid #DDD; width: 160px; height: 80px; margin: 6px; border-radius: 10px; text-align: center; display: block; float:left; font-size: 13px; font-style: verdana; text-decoration: none; }
.pg-supensa img { width: 20%; }
 
/* Transição suave */
.pg-supensa { background-color: #3185CB; color: #fff; padding: 10px 10px; transition: background-color 0.3s ease; }

/* Muda a cor quando o mouse passa por cima */
.pg-supensa:hover { background-color: #F0F8FF; color:#000; cursor: pointer; }
/* Nova cor */
.fa-solid { color: #fff; font-size: 30px; }
.fa-solid:hover{ color: #000; }

.pg-icones { border: 1px solid #DDD; width: 110px; height: 70px; margin: 6px; border-radius: 10px; text-align: center; display: block; float:left; font-size: 14px; font-style: verdana; text-decoration: none; }
.pg-icones img { width: 20%; }

/* Transição suave */
.pg-icones { background-color: #3185CB; color: #fff; padding: 10px 20px; transition: background-color 0.3s ease; }

/* Muda a cor quando o mouse passa por cima */
.pg-icones:hover { background-color: #C5E0F8; color:#000; cursor: pointer; }


.top-icones { border: 1px solid #DDD; width: 126px; height: 70px; margin: 3px; border-radius: 10px; text-align: center; display: block; float:left; font-size: 14px; font-style: verdana; text-decoration: none; }
.top-icones img { width: 20%; }

/* Transição suave */
.top-icones { background-color: #3185CB; color: #fff; padding: 10px 10px; transition: background-color 0.3s ease; }

/* Muda a cor quando o mouse passa por cima */
.top-icones:hover { background-color: #C5E0F8; color:#000; cursor: pointer; }


/* responsive */
@media only screen and (max-width: 960px){
    
}

@media only screen and (max-width: 640px){
.modal-caixa { width: 80%; margin: 5% auto; padding: 20px; border-radius: 10px; }	
	.pg-supensa { width: 42%; height: 90px; font-size: 13px; margin: 10px 6px; }
.pg-icones { width: 35%; }
.top-icones { width: 39%; margin: 6px; }
}
	
@media only screen and (max-width: 480px){
   
}