#opa:hover span{
	background-image:linear-gradient(to left, #374, #7f9);
}
#osp:hover span{
	background-image:linear-gradient(to left, #769, #c9f);
}
#pp:hover span{
	background-image:linear-gradient(to left, #478, #7df);
}
#pri:hover span{
	background-image:linear-gradient(to left, #b80, #fb8);
}
#test:hover span{
	background-image:linear-gradient(to left, #b59, #f9d);
}
#info:hover span{
	background-image:linear-gradient(to left, #fff, #888);
}
.title{
	font-size: 275%;
	margin: 5% auto;
	position: absolute;
	width: 100%;
	text-align: center;
	text-shadow:0px 0px 5px #111;
}
.title h1{
	animation-name: change_color;
	animation-duration:5s;
	animation-iteration-count:infinite;
}
.pag img{
	width: 100%;
	transition: opacity 0.3s;
}
.pag{
	position: absolute;
	margin-top: 28%;
	text-align:center;
	width: 20%;
}
.pag_title{
	margin:auto;
	margin-top:50%;
	overflow:hidden;
	width:100%;
	height:0px;
	background:transparent;
	font-size:130%;
	transition:margin 0.2s, height 1s;
}
.pag:hover .pag_title{
	margin-top:0px;
	height:100px;
}
.pag:hover img{
	opacity: 0.5;
}
#pag1{margin-left:4%;}
#pag2{margin-left:28%;}
#pag3{margin-left:52%;}
#pag4{margin-left:76%;}
.side{
	height:25%;
	position: absolute;
	margin-top: 8%;
	text-align:center;
	font-size: 200%;
	transition: letter-spacing 0.2s;
	width: 20%;
}
#side_info{
	margin-left: 4%;
}
#side_test{
	margin-left: 76%;
	display: table-cell;
}
.side img{
	height: 100%;
	transition: opacity 0.3s;
}
.side:hover{letter-spacing:10px;}
.side:hover img{opacity: 0.5;}
.link{
	color: #ddd;
}
.info:hover{
	letter-spacing: 5px;
} 
.test:hover{
	letter-spacing: 5px;
}
@keyframes change_color{
	0.000%{color:#5f7;}
	16.66%{color:#a7f;}
	33.33%{color:#5bf;}
	50.00%{color:#cb4;}
	66.66%{color:#f9d;}
	83.33%{color:#ccc;}
	100.0%{color:#5f7;}
	
}