@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
* {
  box-sizing: border-box; }

a {
  text-decoration: none; }

.mobile-wrapper {
  display: table-cell;
  text-align: center;
  vertical-align: middle; }
  .mobile-wrapper .mobile-container {
    background: #fff;
    border: 20px solid #666;
    border-bottom-width: 80px;
    border-radius: 20px;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);
    display: inline-block;
    height: 520px;
    margin: 0 30px;
    position: relative;
    width: 320px; }

.content {
  background: aliceblue;
  display: block;
  height: 100%;
  overflow: hidden;
  width: 100%; }
  .content nav {
    background: #fff;
    border-bottom: 1px solid #ddd;
    height: 60px;
    position: relative; }
  .content .nav-links {
    display: block;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%; }
    .content .nav-links::before {
      background: rgba(0, 0, 0, 0.5);
      content: '';
      height: 100vh;
      left: 0;
      top: 0;
      position: absolute;
      opacity: 0;
      visibility: hidden;
      width: 100%;
      transition: all .3s; }
    .content .nav-links li {
      border-bottom: 1px solid #ddd;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-20px);
      transition: all .3s; }
      .content .nav-links li a {
        background: #fff;
        color: #404040;
        display: block;
        font-size: 18px;
        font-weight: 700;
        padding: 12px 20px;
        text-align: left;
        width: 100%;
        transition: all .3s; }
        .content .nav-links li a:hover {
          color: coral; }

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  visibility: hidden; }
  input[type="checkbox"]:checked + label {
    border: 4px solid silver;
    border-radius: 50%;
    height: 28px;
    top: 16px;
    left: 18px;
    width: 28px;
    transform: rotate(-135deg); }
    input[type="checkbox"]:checked + label::before {
      background: silver;
      top: 8px;
      left: 4px;
      width: 12px; }
    input[type="checkbox"]:checked + label::after {
      background: silver;
      opacity: 1;
      top: 8px;
      left: 4px;
      visibility: visible;
      width: 12px; }
    input[type="checkbox"]:checked + label:hover {
      border-color: coral; }
      input[type="checkbox"]:checked + label:hover::before, input[type="checkbox"]:checked + label:hover::after {
        background: coral; }
  input[type="checkbox"]:checked ~ .nav-links::before {
    opacity: 1;
    visibility: visible; }
  input[type="checkbox"]:checked ~ .nav-links li {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); }
    input[type="checkbox"]:checked ~ .nav-links li:nth-child(1) {
      transition-delay: 0s; }
    input[type="checkbox"]:checked ~ .nav-links li:nth-child(2) {
      transition-delay: 0.1s; }
    input[type="checkbox"]:checked ~ .nav-links li:nth-child(3) {
      transition-delay: 0.2s; }
    input[type="checkbox"]:checked ~ .nav-links li:nth-child(4) {
      transition-delay: 0.3s; }

label {
  background: none transparent;
  border: 4px solid coral;
  border-left: 0 solid transparent;
  border-right: 0 solid transparent;
  cursor: pointer;
  display: block;
  height: 24px;
  position: absolute;
  top: 18px;
  left: 20px;
  width: 24px;
  transition: all .2s; }
  label::before {
    background: coral;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    top: 6px;
    width: 24px;
    transition: all .2s; }
  label::after {
    background: coral;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    top: 6px;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    transform: rotate(90deg);
    transition: all .2s; }