/*! 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:#2ecc71;
    color:#fff;
}

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

span {
    color:#27ae60;
    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:#27ae60;
    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:#2ecc71;
}

ul li {
    list-style:none;
    margin:10px auto;
    font-family: "Microsoft YaHei","Segoe UI", sans-serif,"Lucida Grande", Helvetica, Arial;
}

/* Checkbox Icons */
label {
    position:relative;
    padding-left:30px;
    font-size:30px;
    cursor:pointer;
    color:#fff;
    padding:17px 28px 0 0;
}

label:before,label:after {
    font-family:FontAwesome;
    font-size:50px;
/*absolutely positioned*/
    position:absolute;
    top:0px;
    left:-49px;
    right:10px;
}

label:before {
    content:'\f1db';
}

label:after {
    content:'\f111';
    width:25px;
    overflow:hidden;
    font-size:27px;
    top:18px;
    left:-39px;
    color:#6CFF4C;
    -webkit-animation:bounceout .4s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode:forwards;

    -moz-animation:bounceout .4s;
    -moz-animation-iteration-count:1;
    -moz-animation-fill-mode:forwards;

    animation:bounceout .4s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;

}


@-moz-document url-prefix() {
   label:after {
    content:'\f111';
    width:25px;
    overflow:hidden;
    font-size:27px;
    top:17px !important;
    left:-39px;
    color:#6CFF4C;
    -webkit-animation:bounceout .4s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode:forwards;

    -moz-animation:bounceout .4s;
    -moz-animation-iteration-count:1;
    -moz-animation-fill-mode:forwards;

    animation:bounceout .4s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;

}
}



/* Hide the Ordinary Checkbox */
input[type="checkbox"] {
    display:none
}

/* Animating the Checkbox Icon */
input[type="checkbox"]:checked + label:after {
    -webkit-animation:bounce .4s;
    -webkit-animation-iteration-count:1

    -moz-animation:bounce .4s;
    -moz-animation-iteration-count:1;

    animation:bounce .4s;
    animation-iteration-count:1

}

/* @Keyframes for Chrome and Safari */
@-webkit-keyframes bounce {
    0%  { -webkit-transform:scale(.8); opacity:.8}
    25% { -webkit-transform:scale(.25); opacity:.25}
    50% { -webkit-transform:scale(1.4); opacity:1.4}
    75% { -webkit-transform:scale(.8); opacity:.8}
    100%{ -webkit-transform:scale(1); opacity:1}
}
@keyframes bounce {
    0%  { transform:scale(.8); opacity:.8}
    25% { transform:scale(.25); opacity:.25}
    50% { transform:scale(1.4); opacity:1.4}
    75% { transform:scale(.8); opacity:.8}
    100%{ transform:scale(1); opacity:1}
}



@-webkit-keyframes bounceout {
    0%  { -webkit-transform:scale(0)}
    25% { -webkit-transform:scale(.8)}
    50% { -webkit-transform:scale(1.4)}
    75% { -webkit-transform:scale(.25)}
    100%{ -webkit-transform:scale(0)}
}
@keyframes bounceout {
    0%  { transform:scale(0)}
    25% { transform:scale(.8)}
    50% { transform:scale(1.4)}
    75% { transform:scale(.25)}
    100%{ transform:scale(0)}
}


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