invoker.css

/* 
	Invoker.css
	CSS desenvolvido para facilitar a fixação e compreendimento sobre o mesmo.

	Divirta-se
*/

/* GERAL */



body{
	margin: 0;
	padding-bottom: 3rem;
	font: 1rem/1.5 -apple-system, BlinkMacSystemFont, 
		"Segoe UI",
		"Roboto",
		"Oxygen",
		"Ubuntu",
		"Cantarell",
		"Fira Sans",
		"Droid Sans",
		"Helvetica Neue",
		Arial,
		sans-serif;
	color: #555;
	background-color: #fff;
}

a{
	text-decoration: none;
}

/* GERAL - FIM */

/* GRADE / COLUNA */

.pacote-grade {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 528px) {

  .grade {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .coluna {
    display: table-cell;
  }

  .coluna-1 { width: 8.333333%; }
  .coluna-2 { width: 16.666667%; }
  .coluna-3 { width: 25%; }
  .coluna-4 { width: 33.333333%; }
  .coluna-5 { width: 41.666667%; }
  .coluna-6 { width: 50%; }
  .coluna-7 { width: 58.333333%; }
  .coluna-8 { width: 66.666667%; }
  .coluna-9 { width: 75%; }
  .coluna-10 { width: 83.333333%; }
  .coluna-11 { width: 91.666667%; }
  .coluna-12 { width: 100%; }

  .grade-diferenciado {
    margin-left:  -1rem;
    margin-right: -1rem;
  }
  .grade-diferenciado .grade {
    border-spacing: 1rem 0;
  }
}

.grade-alinhado-meio .coluna {
  vertical-align: middle;
}



/* GRADE / COLUNA - FIM */

/* PRINCIPAIS */

.principal{
	max-width: 100%;
	padding: 0% 1%;
}

/* PRINCIPAIS - FIM */


/* CAIXAS */

.caixa-azul {
	max-width: 100%;
	background-color: rgba(0, 129, 255, 1);
	font-size: 30px;
	color: white;
	transition: background-color 0.40s; 
}

.caixa-azul > a {
	color: white;
}

.caixa-azul:hover{
	background-color: red;
}

/* CAIXAS - FIM */


/* PACOTES */

.pacote {
	max-width: 100%;
	padding: 0% 1%;
}

.pacote-solto {
	max-width: 100%;
	padding: 1%;
}

/* PACOTES - FIM */


/* OUTROS */

.centralizado { text-align: center; }
.maiusculo { text-transform: uppercase; }

.preto-branco{
	
}

.branco-preto{

}
/* OUTROS - FIM */


/* EFEITOS */

.passe
{
        opacity:0.5;
        transition: all 0.3s cubic-bezier(0.74, 0.46, 0.24, 1.25);
}
.passe:hover
{
        opacity:1;
}

.destaque{
	transition: all 0.3s cubic-bezier(0.74, 0.46, 0.24, 1.25);
}
.destaque:hover
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

.texto-borrado{
	color:transparent;
	text-shadow:0 0 10px #999;
	-webkit-transition:0.5s ease-in;
	-moz-transition:0.5s ease-in;
	-o-transition:0.5s ease-in;
	transition:0.5s ease-in;
}
.texto-borrado:hover{
	color:#999;
	text-shadow:none;
}

/* BORDAS */
.borda{
	transition: all 0.40s cubic-bezier(0.25, 0.46, 0, 2.44);;
}
.borda:hover
{
    box-shadow: inset 0 0 0 30px #53a7ea;
    
}

/* BORDAS - FIM */

/* (SOMBRAS) */

/* (- Sombra normal -) */
.sombra-a{
	text-shadow: 1px 1px 0px black;
}

.sombra-b{
	text-shadow: 2px 2px 0px black;
}

.sombra-c{
	text-shadow: 4px 4px 0px black;
}

/* (- Sombra suave/esfumaçado -) */
.sombra-suave-a{
	text-shadow: 0px 0px 5px black;
}

.sombra-suave-b{
	text-shadow: 0px 0px 10px black;
}

.sombra-suave-c{
	text-shadow: 0px 0px 20px black;
}


/* (- Sombra no contorno do conteúdo -) */
.caixa-sombra {
	box-shadow: 0 2px 13px black;
}

/* (- Sombra no contorno do conteúdo -) */
.sombra-trans{
	box-shadow: 0 0px 0px black;
	transition: all 0.40s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.sombra-trans:hover{
	box-shadow: 0 2px 13px black;
}

/* (SOMBRAS - FIM) */





/* EFEITOS - FIM */

/* MEDIAS */

@media (max-width: 768px){
	.caixa-azul{
		max-width: 100%;
		background-color: rgba(0, 129, 255, 1);
		font-size: 50px;
		color: white;
	}
}

/* MEDIAS - FIM */