* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

.group:after,.group:before {
	content: "";
	display: table
}

.group:after {
	clear: both
}

.group {
	zoom: 1
}

body {
	background-color: #fff;
	font-family: arial;
	font-size: 100%
}

.item {
		float: left
}

.item .block {
	padding-bottom: 100%;
	border-radius: 6px
}

.item:nth-child(1) .block {
	background-color: #9f9f9f
}

.item:nth-child(2) .block {
	background-color: #999
}

.item:nth-child(3) .block {
	background-color: #7f7f7f
}

.item:nth-child(4) .block {
	background-color: #7b7b7b
}

.item:nth-child(5) .block {
	background-color: #888
}

.item:nth-child(6) .block {
	background-color: #969696
}

.item:nth-child(7) .block {
	background-color: #a6a6a6
}

.item:nth-child(8) .block {
	background-color: #747474
}

.item:nth-child(9) .block {
	background-color: #6c6c6c
}

.item:nth-child(10) .block {
	background-color: #828282
}

.item:nth-child(11) .block {
	background-color: #737373
}

.item:nth-child(12) .block {
	background-color: #bdbdbd
}

.item:nth-child(13) .block {
	background-color: #b3b3b3
}

.item:nth-child(14) .block {
	background-color: #858585
}

.item:nth-child(15) .block {
	background-color: #aaa
}

.item:nth-child(16) .block {
	background-color: #8a8a8a
}

.item:nth-child(17) .block {
	background-color: #8c8c8c
}

.item:nth-child(18) .block {
	background-color: #767676
}

.item:nth-child(19) .block {
	background-color: #989898
}

.item:nth-child(20) .block {
	background-color: #8e8e8e
}

.item:nth-child(21) .block {
	background-color: #b7b7b7
}

.item:nth-child(22) .block {
	background-color: #a7a7a7
}

.item:nth-child(23) .block {
	background-color: #747474
}

.item:nth-child(24) .block {
	background-color: #bebebe
}

.item:nth-child(25) .block {
	background-color: #686868
}

.item:nth-child(26) .block {
	background-color: #696969
}

.item:nth-child(27) .block {
	background-color: #a6a6a6
}

.item:nth-child(28) .block {
	background-color: #787878
}

.item:nth-child(29) .block {
	background-color: #848484
}

.item:nth-child(30) .block {
	background-color: #8d8d8d
}

.item:nth-child(31) .block {
	background-color: #ababab
}

.item:nth-child(32) .block {
	background-color: #adadad
}

.item:nth-child(33) .block {
	background-color: #777
}

.item:nth-child(34) .block {
	background-color: #b1b1b1
}

.item:nth-child(35) .block {
	background-color: #898989
}

.item:nth-child(36) .block {
	background-color: #747474
}

.item:nth-child(37) .block {
	background-color: #b1b1b1
}

.item:nth-child(38) .block {
	background-color: #c4c4c4
}

.item:nth-child(39) .block {
	background-color: #868686
}

.item:nth-child(40) .block {
	background-color: #6b6b6b
}

.item:nth-child(41) .block {
	background-color: #7a7a7a
}

.item:nth-child(42) .block {
	background-color: #909090
}

.item:nth-child(43) .block {
	background-color: #707070
}

.item:nth-child(44) .block {
	background-color: #737373
}

.item:nth-child(45) .block {
	background-color: #747474
}

.item:nth-child(46) .block {
	background-color: #b4b4b4
}

.item:nth-child(47) .block {
	background-color: #959595
}

.item:nth-child(48) .block {
	background-color: #a4a4a4
}

.item:nth-child(49) .block {
	background-color: #7b7b7b
}

.item:nth-child(50) .block {
	background-color: #7a7a7a
}

.item:nth-child(51) .block {
	background-color: #acacac
}

.item:nth-child(52) .block {
	background-color: #c4c4c4
}

.item:nth-child(53) .block {
	background-color: #6f6f6f
}

.item:nth-child(54) .block {
	background-color: #898989
}

.item:nth-child(55) .block {
	background-color: #bebebe
}

.item:nth-child(56) .block,.item:nth-child(57) .block {
	background-color: #9b9b9b
}

.item:nth-child(58) .block {
	background-color: #9e9e9e
}

.item:nth-child(59) .block {
	background-color: #686868
}

.item:nth-child(60) .block {
	background-color: #b2b2b2

}

header {
	text-align: center;
	background-color: #34495e
}

header .wrapper {
	margin: 0 auto;
	padding: 64px 10px;
	width: 960px;
	color: #ecf0f1
}

header h1 {
	margin-bottom: 10px;
	font-size: 3em;
	font-weight: 700;
	line-height: 1em
}

header p {
	margin-bottom: 20px
}

header .button {
	padding: 10px 20px;
	display: inline-block;
	color: #f1c40f;
	text-decoration: none;
	border: 2px solid #f1c40f;
	border-radius: 6px
}

.section .wrapper {
	margin: 0 auto;
	padding: 52px 0;
	width: 960px
}

.section.section-code {
	background-color: #ecf0f1
}

.section.section-code .wrapper {
	padding: 52px 10px
}

.section.section-code code,.section.section-code p {
	margin-bottom: 20px
}

.section.section-code a {
	color: #2980b9
}

.section.section-code code {
	padding: 20px;
	display: block;
	background-color: #fff;
	border-radius: 6px;
	border: 2px solid #bdc3c7
}

.section.section-code code:last-child {
	margin-bottom: 0
}

.section .buttons {
	padding-bottom: 52px;
	text-align: center
}

.section .buttons .button {
	padding: 20px;
	display: inline-block;
	color: #fff;
	background-color: #2980b9;
	text-decoration: none;
	border-radius: 4px
}

footer {
	background-color: #34495e;
	text-align: right
}

footer .wrapper {
	margin: 0 auto;
	padding: 32px 10px;
	width: 960px;
	font-size: .875em;
	color: #ecf0f1
}

footer a {
	color: #ecf0f1;
	text-decoration: none;
	border-bottom: 1px solid rgba(236,240,241,.5)
}

section.modal {
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.5)
}

section.modal,section.modal .modal-container,section.modal .modal-middle {
	width: 100%;
	height: 100%
}

section.modal .modal-container {
	display: table
}

section.modal .modal-middle {
	display: table-cell;
	text-align: center;
	vertical-align: middle
}

section.modal .modal-box {
	margin: 40px auto;
	padding: 10px;
	width: 280px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 12px 48px 0 rgba(0,0,0,.25)
}

section.modal .modal-box h2,section.modal .modal-box p {
	margin-bottom: 20px
}

section.modal .modal-box h2 {
	font-size: 1.5em;
	line-height: 1em
}

section.modal .modal-box .boxs {
	margin-bottom: 20px
}

section.modal .modal-box .buttons .button {
	display: block;
	width: 100%;
	height: 32px;
	font-family: arial;
	font-size: 1em;
	color: #2980b9;
	line-height: 30px;
	border: 2px solid #2980b9;
	border-radius: 4px;
	background-color: #fff
}

@media screen and (max-width:960px) {
	body {
		min-width: 320px
	}

	.section .wrapper,footer .wrapper,header .wrapper {
		margin: 0;
		width: 100%
	}
}

@media screen and (max-width:480px) {
	.section .wrapper {
		margin: 0;
		width: 100%
	}
}
/*# sourceMappingURL=demo.min.css.map */