.img-ufpr{
  max-width: 200px;
  /* padding-top: 50px; */
  width: 90%;
}

#Cubo{
    -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}



/* TITULO DA BARRA DE NAVEGAÇÃO */
#sidebar .sidebar-header {
	padding: 20px;
  padding-bottom: 30px;
	/* background: rgb(115, 157, 213);  COR DE FUNDO DO TITULO */
	color: white;
}	


/* ---------------------------------------------------
    LINKS
----------------------------------------------------- */
#sidebar{
  font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
}

	/* Links */
#sidebar a,#sidebar a:hover,#sidebar a:focus {
  color: white;
  text-decoration: none;
  transition: all 0.3s;
}


	/* QUANDO PASSADO O MOUSE */
#sidebar ul li a:hover {
	color: rgb(115, 141, 213);
	background: #fff;
}


/* ESTRUTURA DE LINKS DO MENU (ESPAÇAMENTO)*/
#sidebar ul li a {
	padding: 10px;
	font-size: 21px;
	display: block;
}


	/* COR DO PRIMEIRO SUBMENU ATIVADO */
#sidebar a[aria-expanded="true"] {
	/* background: rgb(73, 105, 146); */
	background-image: linear-gradient(to right, rgb(73, 105, 146), black);

}

#sidebar ul ul a {
	font-size: 17px !important;
	padding-left: 30px !important;
	/* background: rgb(73, 105, 146); */
	background-image: linear-gradient(to right, rgb(73, 105, 146), black);
}



	
/* BOTÃO DO MENU PARA DISPOSITIVOS MOVEIS */
.sidebar-btn {
	padding-top: 20px;
	text-align: center;
}
.sidebar-btn button {
	color: white;
	background-color: rgb(83, 178, 207)
}		
	







/* ---------------------------------------------------
    ESTRUTURA
----------------------------------------------------- */

	/* ESTRUTURA DA PÁGINA */
.page {
	display: flex;
	/*width: 100%;*/
}


	/* POSIÇÃO DA BARRA DE NAVEGAÇÃO */
	#sidebar {
	min-width: 250px;
	max-width: 250px;
	width: 250px;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	z-index: 999;
	/* background: rgb(115, 157, 213); */
	background-image: linear-gradient(to bottom right, rgb(115, 157, 213), black);
	transition: all 0.5s;
	overflow-y: scroll;
}

::-webkit-scrollbar{
	width: 0;
}

	/* ESCONDER */
#sidebar.active {
  margin-left: -250px;
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
}



/* ---------------------------------------------------
    CUBO
----------------------------------------------------- */



.cubo {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -ms-position: relative;
  -webkit-transform-style: preserve-3d;
  -webkit-position: relative;
}

.cubo.spinning {
  animation-name: Spin;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  -ms-animation-name: Spin;
  -ms-animation-duration: 10s;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-name: Spin;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  /* animation-timing-function: linear; */
}

@keyframes Spin {
    0% { transform: rotateX(0deg) rotateY(0deg);
        -ms-transform: rotateX(0deg) rotateY(0deg);
        -webkit-transform: rotateX(0deg) rotateY(0deg); }

    50% { transform: rotateX(90deg) rotateY(0deg) rotateZ(360deg);
        -ms-transform:rotateX(90deg) rotateY(0deg) rotateZ(360deg);
        -webkit-transform:rotateX(90deg) rotateY(0deg) rotateZ(360deg);}

    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        -ms-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        -webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

.Cubo-Lado {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(11, 43, 104, 0.9);
  line-height: 80px;
  /* font-size: 40px; */
  /* font-weight: bold; */
  /* color: white; */
  /* text-align: center; */
  background: rgba(0, 24, 68, 0.95);
  -ms-background: rgba(0, 24, 68, 0.95);
  -ms-line-height: 80px;
  -ms-border: 2px solid rgba(11, 43, 104, 0.9);
  -ms-position: absolute;
  -ms-line-height: 80px;
  -webkit-background: rgba(0, 24, 68, 0.95);
  -webkit-line-height: 80px;
  -webkit-border: 2px solid rgba(11, 43, 104, 0.9);
  -webkit-position: absolute;
  -webkit-line-height: 80px;
  transition: all 3s;
}

.cor1{background-image: linear-gradient(to bottom right, rgba(115, 157, 213, 0.5), rgba(0, 0, 0, 0.5)) !important;}
.cor2{background-image: linear-gradient(to bottom right, rgba(252, 0, 0, 0.5),     rgba(0, 0, 0, 0.5)) !important;}
.cor3{background-image: linear-gradient(to bottom right, rgba(255, 238, 0, 0.5),   rgba(0, 0, 0, 0.5)) !important;}
.cor4{background-image: linear-gradient(to bottom right, rgba(21, 255, 0, 0.5),    rgba(0, 0, 0, 0.5)) !important;}
.cor5{background-image: linear-gradient(to bottom right, rgba(0, 225, 255, 0.5),   rgba(0, 0, 0, 0.5)) !important;}
.cor6{background-image: linear-gradient(to bottom right, rgba(0, 47, 255, 0.5),    rgba(0, 0, 0, 0.5)) !important;}
.cor7{background-image: linear-gradient(to bottom right, rgba(212, 0, 255, 0.5),   rgba(0, 0, 0, 0.5)) !important;}
.cor8{background-image: linear-gradient(to bottom right, rgba(255, 0, 170, 0.5),   rgba(0, 0, 0, 0.5)) !important;}
.cor9{background-image: linear-gradient(to bottom right, rgba(255, 0, 106, 0.5),   rgba(0, 0, 0, 0.5)) !important;}

.Cubo-Lado-frente    { transform: rotateY(  0deg) translateZ(49px);-ms-transform: rotateY(  0deg) translateZ(49px);-webkit-transform: rotateY(  0deg) translateZ(49px); }
.Cubo-Lado-tras      { transform: rotateY(180deg) translateZ(49px);-ms-transform: rotateY(180deg) translateZ(49px);-webkit-transform: rotateY(180deg) translateZ(49px); }
.Cubo-Lado-direita   { transform: rotateY( 90deg) translateZ(49px);-ms-transform: rotateY( 90deg) translateZ(49px);-webkit-transform: rotateY( 90deg) translateZ(49px); }
.Cubo-Lado-esquerda  { transform: rotateY(-90deg) translateZ(49px);-ms-transform: rotateY(-90deg) translateZ(49px);-webkit-transform: rotateY(-90deg) translateZ(49px); }
.Cubo-Lado-cima      { transform: rotateX( 90deg) translateZ(49px);-ms-transform: rotateX( 90deg) translateZ(49px);-webkit-transform: rotateX( 90deg) translateZ(49px); }
.Cubo-Lado-baixo     { transform: rotateX(-90deg) translateZ(49px);-ms-transform: rotateX(-90deg) translateZ(49px);-webkit-transform: rotateX(-90deg) translateZ(49px); }


@keyframes Color {
  0% {background-image: none !important;background-color: blue;}

  25% {background-image: none !important;background-color: green}

  50% {background-image: none !important;background-color: red}

  75% {background-image: none !important;background-color: yellow}

  100% {background-image: none !important;background-color: blue}
}


.Color {
  animation-name: Color;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}