* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif, Helvetica, Arial;

	--cor-bg-principal: rgb(83, 83, 212);
	--blue: #007bff;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
	--orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

}
body {
    background-color: #E0FFFF; 
}

ul, nav {
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}


header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100vw;
	height: 50px;
	background-color: var(--cor-bg-principal);
	color: white;
}

.cabecalho {
    display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    height: inherit;
	
	/*
	background: linear-gradient(-45deg,#00CED1,#FF69B4,#00FA9A,#FFA54F,#FF3030) no-repeat;
	background-size: 500% 500%;
	animation: gradiente 15s ease alternate infinite;

	-moz-animation: gradiente 5s ease alternate infinite;
	-webkit-animation: gradiente 5s ease alternate infinite;
	-o-animation: gradiente 5s ease alternate infinite;
	*/
}

@keyframes gradiente {
	from{
		background-position: 0 50%;
	}

	to{
		background-position: 100% 50%;
	}
}
/*

@-webkit-keyframes gradiente{
	from{
		background-position: 0 50%;
	}

	to{
		background-position: 100% 50%;
	}
}

@-moz-keyframes gradiente{
	from{
		background-position: 0 50%;
	}

	to{
		background-position: 100% 50%;
	}
}
*/

.menu-botoes {
    height: 100vh; 
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center; 
    align-content: center;
}

.botao{
	display: flex;
	justify-content: center;
	align-items: center;
    align-content: space-between;
	background-color: #FFDEAD; 
	height: 115px;
	width: 205px;
	text-align: center;
	color: white;
	font-family: fantasy, sans-serif;
	font-weight: 600;
    margin: 2px;	
  
	
}

.botao:hover{
	transform: scale(1.2);
	transition: all 0.4s ease-in-out;
}



.botao i{
	margin-bottom: 4px;
}

.botao-siae{
	width: inherit;
	height: inherit;
	background-color: var(--danger);
}


.botao-seduc{
	width: inherit;
	height: inherit;
	background-color: var(--secondary);
}

.botao-administrativo{
	width: inherit;
	height: inherit;
	background-color: var(--cyan);
}

.botao-contracheque{
	width: inherit;
	height: inherit;
	background-color: var(--green);
}

.botao-matricula{
	width: inherit;
	height: inherit;
	/* background-color: var(--pink); */
}


.botao-ferramentas{
	width: inherit;
	height: inherit;
	background-color: #FA5858;
}

.edoc{
	order: 2;
}

.contracheque{
	order: 3;
}

.siae{
	order: -1;
}

.botao-calendario{
	width: inherit;
	height: inherit;
	background: linear-gradient(-24deg,purple,#C71585,purple,#C71585,purple);  
}

@-webkit-keyframes botao-piscando {
	0% { background-color: #35b084; -webkit-box-shadow: 0 0 3px #35b084; }
	50% { background-color: #8BC34A; -webkit-box-shadow: 0 0 3px #8BC34A; }
	100% { background-color: #35b084; -webkit-box-shadow: 0 0 3px #35b084; }
  }
  
  @-moz-keyframes botao-piscando {
	0% { background-color: #35b084; -moz-box-shadow: 0 0 3px #35b084; }
	50% { background-color: #8BC34A; -moz-box-shadow: 0 0 3px #8BC34A; }
	100% { background-color: #35b084; -moz-box-shadow: 0 0 3px #35b084; }
  }
  
  @-o-keyframes botao-piscando {
	0% { background-color: #35b084; box-shadow: 0 0 3px #35b084; }
	50% { background-color: #8BC34A; box-shadow: 0 0 3px #8BC34A; }
	100% { background-color: #35b084; box-shadow: 0 0 3px #35b084; }
  }
  
  @keyframes botao-piscando {
	0% { background-color: #FF1493; }
	50% { background-color: #C71585; }
	100% { background-color: #FF1493}
  }
  
  .piscando {
	-webkit-animation: botao-piscando 1500ms infinite;
	-moz-animation: botao-piscando 1500ms infinite;
	-o-animation: botao-piscando 1500ms infinite;
	animation: botao-piscando 1500ms infinite;
	animation-fill-mode: forwards;
	order: 1;
  }

  .piscando:hover {
	animation-play-state: paused;
 }

.botao-edoc{
	width: inherit;
	height: inherit;
	background-color: var(--orange);
}

.botao-yahoo{
	width: inherit;
	height: inherit;
	background-color: var(--purple);
}

.botao-aluno{
	width: inherit;
	height: inherit;
	background-color: var(--blue);
}


.botao a{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;	
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: inherit;
}

/*

.menu-botoes .botao .botao-2 a{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;	
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: inherit;
}


.menu-botoes .botao .botao-3 a{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;	
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: inherit;
}


.menu-botoes .botao .botao-4 a{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;	
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: inherit;
}


.menu-botoes .botao .botao-5 a{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;	
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: inherit;
}

*/


@media screen and (max-width: 1047px) {
	.cabecalho {
        justify-content: space-evenly;
    }
}