@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

body {
	background: #333;
	color: #fff;
	font-weight: 400;
	font-size: 1em;
	font-family: 微軟正黑體, "Microsoft JhengHei", sans-serif;
}

a, button {
	outline: none;
}

a {
	color: #f0f0f0;
	text-decoration: none;
}

a:hover, a:focus {
	color: #333;
}
.codrops-header {
	margin: 0 auto;
	text-align: center;
	background-color: #ce380f;
}

.codrops-header h1 {
	margin: 0;
	padding: 0.6em 0 0.6em 0.5em;
	font-weight: bold;
	font-size: 2.5em;
	line-height: 1.3;
	float: left;
}

.demo-2 body {
	background: #f05226
}

.title{ width: 312px; height: 100px; padding: 0 1%; background-image:url(../img/title.svg); background-size: cover; background-repeat:no-repeat; background-position:center; display: inline-block;}
.logo{ float: left; margin: 6% 0; max-width: 20%;}
.logo img{ max-width: 100%;}
.grid{ margin: 0 auto; max-width: 800px;}
.newstopic{ max-width: 800px; margin: 0 auto; font-size: 0; box-shadow: 0px 2px 5.16px 0.84px rgba(0, 0, 0, 0.2);}
.newstopic a{ display: block; margin: 0 0 10px 0;}
.newstopic img{ max-width: 100%;}

@media screen and (max-width: 58em) {
	.codrops-header h1{ font-size: 1.8em;}
	.logo{ max-width: 20%;}
}
@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}	
}