/*! HTML5 Boilerplate v4.3.0 | MIT License | https://h5bp.com/ */
html,button,input,select,textarea {
    color:#222
}

html {
    font-size:1em;
    line-height:1.4
}

::-moz-selection {
    background:#b3d4fc;
    text-shadow:none
}

::selection {
    background:#b3d4fc;
    text-shadow:none
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0
}

audio,canvas,img,video {
    vertical-align:middle
}

fieldset {
    border:0;
    margin:0;
    padding:0
}

textarea {
    resize:vertical
}

body {
    font: 16px/1.5 "Microsoft YaHei","Segoe UI", sans-serif,"Lucida Grande", Helvetica, Arial;
    background:#e74c3c;
    color:#fff
}

h1 {
    font-size:50px;
    font-weight:300;
    text-align:center
}

span {
    color:#c0392b;
    font-weight:700
}

h2 {
    font-size:35px;
    margin-left:-20px;
    text-align:left
}

nav {
    width:28.09%;
    margin:0 auto;
    display:block
}

nav a {
    font-size:19px;
    display:inline-block;
    text-align:center;
    font-family: "Microsoft YaHei","Segoe UI", sans-serif,"Lucida Grande", Helvetica, Arial;
    color:#c0392b;
    font-weight:400;
    padding:5px 15px;
    text-transform:uppercase;
    border-radius:2px;
    letter-spacing:1px;
    text-decoration:none;
    margin-right:10px;
    border:2px solid #ecf0f1;
	margin-bottom: 10px;
    border-radius:none
}

nav a.active,nav a:hover {
    background:#ecf0f1;
    color:#c0392b
}
.wrapper ul {
  padding-left: 0;
}
ul li {
    list-style:none;
    margin:10px auto;
    font-family: "Microsoft YaHei","Segoe UI", sans-serif,"Lucida Grande", Helvetica, Arial;
    position:relative
}

ul li:after {
    content:'';
    position:absolute;
    width:35px;
    height:35px;
    border:4px solid #fff;
    border-radius:6px;
    left:-12px;
    z-index:-1
}

/* Custom Icons For Checkbox */
label {
    cursor:pointer;
    color:#c0392b;
    margin:5px 0;
    padding-left:40px;
    position:relative;
    font-size:30px;
    -webkit-transition:.2s linear;
    -moz-transition:.2s linear;
    -o-transition:.2s linear;
    transition:.2s linear
}

label:before,label:after {
    content:'';
    left:11px;
    width:3px;
    bottom:0;
    background:#fcff00;
    position:absolute;
    top:0
}

label:before {
    transform:rotate(45deg);
    transform-origin:0 14px;
    height:0;
    -webkit-transition:.2s linear;
    -moz-transition:.2s linear;
    -o-transition:.2s linear;
    transition:.2s linear
}

label:after {
    transform:rotate(-45deg);
    transform-origin:0 20px;
    height:0;
    -webkit-transition:.2s linear .2s;
    -moz-transition:.2s linear .2s;
    -o-transition:.2s linear .2s;
    transition:.2s linear .2s
}

input[type="checkbox"] {
    display:none
}

input[type="checkbox"]:checked + label:after,input[type="checkbox"]:checked + label:before {
    height:100%
}

input[type="checkbox"]:checked + label {
    color:#fff
}


@media screen and (max-width: 480px){
 nav a{
    margin: 10px 0;
    padding: 10px;
 }
 div.wrapper[style] {
  width: 60% !important;
}
}