html,body,h1,h2{padding:0;margin:0;height: 100%;}
body{font-family:Arial,sans-serif;
	font-size:14px;
	color:#363636;
}

a{
	color:#4078c0;
	text-decoration:none;
}
a:hover{
	color:#3364a4;
}

@keyframes move-background {
	0% {background-position: 0% 0%}
	50% {background-position: 100% 0%}
	100% {background-position: 0% 0%}
}

.wave{
	background: url(images/wave.png) repeat-x; 
	margin-top: -47px;
	width: 6400px;
	height: 47px;
	opacity:0.15;
	animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
	transform: translate3d(0, 0, 0);
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

#wrapper{
	display:flex;
	flex-direction:column;
	min-height:100%;
}

#header{
	cursor:default;
	background:linear-gradient(-45deg, #E73C7E, #23A6D5);
	background-size:300% 300%;
	animation:move-background 30s linear infinite;
	color:white;
	overflow:hidden;
}

#header #desc{
	margin:0 auto;
	width:500px;
	padding:10px 0;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:160px;
}

#header #logo{
	width:160px;
	height:160px;
}
#header #title{
	margin:0 30px 0 50px;
	font-size:14px;
	text-align:center;
}

h1{
	font-size:32px;
	padding-bottom:5px;
	font-weight:normal;
}

#menu{
	text-align:center;
	font-size:17px;
	color:white;
	background: rgba(255,255,255,.08);
	padding-bottom:1px;
}
#menu a{
	display:inline-block;
	text-decoration:none;
	color:white;
	padding:16px;
}
#menu a:hover{
	background: rgba(255,255,255,.1);
}

#footer{
	background:linear-gradient(-45deg, #E73C7E, #23A6D5);
	background-size:400% 400%;
	animation:move-background 30s linear infinite;
	text-align:center;
	font-size:13px;
	color:white;
	padding:15px 0;
	flex: 0 0 auto;
	line-height:23px;
}
#footer a{color:white;}

#content{
	flex: 1 0 auto;
	display:flex;
	flex-direction:column;
}

#content #page{
	padding:20px;
	max-width:1100px;
	min-height:60px;
	margin:0 auto;
	text-align:justify;
	flex: 1 0 auto;
}

#content h2{
	text-align:center;
	color:#6d79b1;
	font-weight:normal;
	padding-bottom:10px;
}

#items{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}

#items{margin:6px 0 15px 0;}
#item{display:inline-block; overflow:hidden; width:311px; height:50px; border:1px solid; padding:12px; margin:3px; border-radius:5px; border:1px solid #e5e5e5; text-align:left;}
#item:hover{background-color:#f8f8f8;}
#item #title{color:#4078c0;}
#item #description{color:#767676; font-size:12px;}

.with_icon #icon{float:left; padding:2px 0; width:48px; height:48px;}
.with_icon #title{float:left; padding-left:7px; width:256px;}
.with_icon #description{float:left; padding-left:7px; width:256px;}

#media{
	padding:10px 0;
	background-color:#e9e9e9;
	border-top:1px solid #dddddd;
	flex: 0 0 auto;
	width:100%;
}

#media h2{color:#7f7f7f;}
#media #title{
	margin:0 auto;
}

#banners{
	text-align:center;
	margin:0 auto;
	max-width:1100px;
}

#banners img  {
    transition: all 0.1s ease;
	margin:7px;
}
 
#banners img:hover {
    transform: scale(1.1);
    cursor: pointer;
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

@media only screen and (max-width: 470px) {
	#items{margin:6px 0 0 0;
		width:300px;
	}
	
	#header #desc{
		width:340px;
	}

	#header #title{
		margin:0 5px 0 5px;
	}
}