.bg-text{
	background-color:#00bbb8;
	background:url(../img/page-logo.svg) no-repeat,linear-gradient(150deg,#008EDD,#00bbb8);
	background-size:cover;
}
.page-text{
	background:url(../img/page-logo-b.png) no-repeat center;
	background-size:cover;
}
.page{
	color:#555;
}
.page h3,.color span{
	font-family:Medium;
}
.dl{
	display:table;
	margin:auto;
	padding:3px 8px;
	border-radius:3px;
	background-color:#37aa9c;
	color:#fff;
}
.notics{
	width:80%;
	margin:10px 10% 0 10%;
}
.notic{
	width:calc(25% - 60px);
	padding:30px;
	color:#444;
}
.notic img{
	cursor:not-allowed;
}
.notic span{
	min-height:50px;
}
.notic .rotate{
	transform:rotate(8deg);
}
.colors{
	border-radius:5px;
	background-color:#eee;
	width:60%;
	margin:10px 20% 0 20%;
}
.color{
	width:calc(33.33% - 40px);
	padding:15px 20px;
}
.color .c-bg{
	border-radius:50%;
	width:46px;
	height:46px;
}
.color .entery{
	width:calc(100% - 60px);
}
.color samp{
	direction:ltr;
}
.dl:hover{
	background-color:#686262;
}
@media only screen and (max-width:1012px){
	.notic{
		width:calc(33.33% - 60px);
	}
}
@media only screen and (max-width:820px){
	.colors,.notics{
		width:90%;
		margin:10px 5% 0 5%;
	}
}
@media only screen and (max-width:775px){
	.notic{
		width:calc(50% - 60px);
	}
}
@media only screen and (max-width:750px){
	.page h3{
		font-size:18px;
	}
	.page p,.dl{
		font-size:14px;
	}
	.notic span{
		font-size:13px;
	}
}
@media only screen and (max-width:520px){
	.color{
		width:calc(100% - 40px);
	}
	.color span{
		width:auto;
		margin:11px 0;
	}
	.color samp{
		width:auto;
		float:left;
		margin:12px 0;
	}
}
@media only screen and (max-width:440px){
	.notic{
		width:100%;
		padding:20px 0;
	}
	.notic span{
		min-height:inherit;
	}
}