html{
  box-sizing: border-box;
    *, *:before, *:after {
    box-sizing: inherit;
  }
}
body {
  position: relative;
  background-color: #f9f7f1;
  width: 100%;
  height: 100%;
  // min-width: 1000px;
  font-family: 'Droid Serif', serif;
  font-size: 14px;

  .resume-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);

    header {
      display: block;
      line-height: 90px;
      background: #fff;
      border-bottom: 2px solid #ddd;
      border-top: 2px solid #ddd;
      text-align: center;
      margin: 2rem 0 0;
      padding: 0;

      h1 {
        text-transform: uppercase;
        font-family: 'Playfair Display', serif;
        font-weight: 900;
        font-size: 2rem;
        margin: 0;
        padding: 0;
        letter-spacing: 0.2rem;
      }

    }
    .sub-header{
      margin: 8px 0;
      text-align: center;
      @keyframes flash{
        0%{
          opacity: 1;
        }
        100%{
          opacity: 0;
        }
      }
      h4{
        padding: 0;
        margin: 0;
        line-height: 30px;
        &#type-js{
          position: relative;
          display: inline-block;
          .text-js{
            opacity: 0;
          }
        }
          .cursor{
            display: block;
            position: absolute;
            height: 100%;
            top: 0;
            right: -5px;
            width: 2px;
            background-color: #eee;
            z-index: 1;
            animation: flash 0.5s none infinite alternate;
          }
      }
    }
    

      .btn-box {
        padding: 2rem;
        text-align: center;
        position: relative;

        button {
          padding: 10px;
          margin: 0 auto;
          border: 1px solid #333;
          background-color: #eee;
          color: #333;
          font-size: 10px;
          letter-spacing: 0.1rem;
          text-transform: uppercase;
          transition: all 0.5s ease-out;
          text-align: center;

          &:hover {
            background-color: #333;
            color: #ddd;
          }
        }
      }
    // }

    section {
      position: relative;
      margin: 0;
      padding: 0;
      position: relative;
      float: left;
      padding: 5rem 3rem;

      p {
        font-size: 12px;
        line-height: 1.3rem;
      }

      dl {
        dd,
        dt {
          font-size: 12px;
          line-height: 1rem;
        }
        &.intro {
          padding: 0.5em;
          dt {
            float: left;
            clear: left;
            width: 100px;
            text-align: right;
            font-weight: bold;
            color: #333;
            &::after {
              content: ":";
            }
          }
          dd {
            margin: 0 0 0 110px;
            padding: 0 0 0.5em;
          }
        }
        //dl
        &.detail {
          padding: 0.5em;
          dt {
            float: left;
            clear: left;
            width: 100px;
            text-align: right;
            font-weight: bold;
            color: #bbb;

            &::after {
              content: ":";
            }
          }

          dd {
            margin: 0 0 0 110px;
            padding: 0 0 0.5em;
          }
        }
        //dl
      }

      .box {
        position: relative;
        clear: left;
        .title {
          color: #555;
          font-size: 1.3em;
          letter-spacing: 0.1rem;
          margin: 40px 0 0;
          padding: 1rem 0;
          border-bottom: 1px solid #ccc;
        }
        a{
          &.link{
            width: 140px;
            display: block;
            padding: 10px;
            margin: 20px auto;
            border: 1px solid #333;
            background-color: #eee;
            color: #333;
            font-size: 10px;
            letter-spacing: 0.1rem;
            text-transform: uppercase;
            transition: all 0.5s ease-out;
            text-decoration: none;
            text-align: center;

            &:hover {
              background-color: #333;
              color: #ddd;
            }
          }
        }

        h4 {
          letter-spacing: 0.06rem;
          font-size: 1rem;
          margin-bottom: 0;
          color: #888;

          span {
            margin: 0.5rem 0 0;
            display: block;
            color: #888;
            font-size: 12px;
          }
        }

        ul {
          li {
            color: #555;
            font-size: 12px;
            line-height: 1rem;
          }
        }

        .skills {
          h4 {
            margin: 2rem 0;
          }

          ul {
            list-style: none;
            position: relative;
            padding: 0;

            li {
              position: relative;
              margin-bottom: 2rem;
              background: #dedede;
              height: 6px;

              span {
                height: inherit;
                // background-color: #5e5e5e;
                // background: linear-gradient(90deg, #76b82a, #aecd60);
                background: #5e5e5e;
                /* fallback for old browsers */
                background: -webkit-linear-gradient(to left, #434343, #5e5e5e);
                /* Chrome 10-25, Safari 5.1-6 */
                background: linear-gradient(to left, #434343, #5e5e5e);
                /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                position: absolute;
              }

              b {
                font-size: 12px;
                position: relative;
                top: -20px;
              }
            }
            @keyframes fillTen {
              0% {
                width: 0;
              }

              100% {
                width: 95%;
              }
            }
            @keyframes fillNine {
              0% {
                width: 0;
              }

              100% {
                width: 90%;
              }
            }
            @keyframes fillSeven {
              0% {
                width: 0;
              }

              100% {
                width: 70%;
              }
            }
            @keyframes fillFive {
              0% {
                width: 0;
              }

              100% {
                width: 50%;
              }
            }
            @keyframes fillThree {
              0% {
                width: 0;
              }

              100% {
                width: 30%;
              }
            }

            .fill {
              animation-duration: 5s;
              animation-fill-mode: forwards;
              animation-timing-function: ease-in;

              &.ten {
                animation-name: fillTen;
                width: 95%;
              }

              &.nine {
                animation-name: fillNine;
                width: 90%;
              }

              &.seven {
                animation-name: fillSeven;
                width: 70%;
              }

              &.five {
                animation-name: fillFive;
                width: 50%;
              }

              &.three {
                animation-name: fillThree;
                width: 30%;
              }
            }
          }
        }
      }
      
    


      &.detail,
      &.intro {}
      &.intro {
        width: 40%;
        position: relative;
        figure {
           position: relative;
          width: 100%;
          height: 400px;
          &.profile-box {
            top: 50%;
            left: 0;
            transform: translate3d(0%, -50%, 0);
          width: 220px;
          height: 220px;
          border-radius: 100%;
          background-color: #f1c40f;
          margin: 0 auto;
          border: 1px solid #ddd;
          overflow: hidden;
          transition: all 1s ease;
            animation-delay: .8s;
            -webkit-animation-delay: .8s;
            -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-name: img-fadeIn;
            animation-name: img-fadeIn;
          img{
            width: 100%;
            height: auto;
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
            transition: all 1s ease;
            filter: grayscale(.5);
          }
          &:hover{
            img{
              -webkit-transform: scale(1);
              transform: scale(1);
              filter: grayscale(0);
            }
          }
        }
        }

        .contact-box {
          padding: 2rem 0 0;
        }

        .social-box {
          padding: 2rem 0 0;
          ul {
            text-align: center;
            display: inline-block;
            width: 100%;
            padding: 0;

            li {
              display: inline-block;
              list-style: none;
    padding: 2%;
              a {
                position: relative;
                display: block;
                width: 40px;
                height: 40px;
                transition: all 0.5s ease-out;
                // background-color: ;
                svg {
                  display: block;
                  height: 100%;
                  width: 100%;
                  color: #2f2f2f;
                  fill: #ddd;
                  transition: all 0.5s ease-out;

                  &:hover {
                    border-radius: 100%;
                    color: #2f2f2f;
                    fill: #fff;
                    transition: all 0.5s ease-out;
                    background: #333;
                  }
                }
              }
              //a
            }
          }
        }
      }

      &.detail {
        width: 60%;
        background-color: #fff;
      }
    }
  }
}
@mixin breakpoint($point) {
   @if $point == papa-bear{
    @media (max-width: 1500px) {
       @content;
    }
  }
  @if $point == mama-bear {
     @media (max-width: 1200px){
      @content;
    }
  }
  @if $point == brother-bear {
     @media (max-width: 850px){
      @content;
    }
  }
  @else if $point == baby-bear {
     @media (max-width: 450px){
      @content;
    }
  }
}
@-webkit-keyframes incomingPulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(28, 180, 105, 0.4);
  }

  70% {
    -webkit-box-shadow: 0 0 0 26px rgba(28, 180, 105, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(28, 180, 105, 0);
  }
}
@keyframes incomingPulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(28, 180, 105, 0.4);
    box-shadow: 0 0 0 0 rgba(28, 180, 105, 0.4);
  }

  70% {
    -moz-box-shadow: 0 0 0 26px rgba(28, 180, 105, 0);
    box-shadow: 0 0 0 26px rgba(28, 180, 105, 0);
  }

  100% {
    -moz-box-shadow: 0 0 0 0 rgba(28, 180, 105, 0);
    box-shadow: 0 0 0 0 rgba(28, 180, 105, 0);
  }
}

page[size="A4"] {
  background-color: #f9f7f1;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body,
  page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}


  @keyframes img-fadeIn {
        from {
          opacity: 0;
          transform: translate3d(0, -500px, 0);
        }
        to {
          opacity: 1;
            transform: translate3d(0, 10px, 0);
        }
      }


$font-break-point-wide: 900px;
$font-break-point-medium: 800px;
$font-break-point-narrow: 700px;
$break-point: 560px;

body {
  font-size: 21px;
  font-family: Georgia, serif;
  line-height: 150%;

  @media (max-width: $font-break-point-wide) {
    font-size: 21px;
  }
  @media (max-width: $font-break-point-medium) {
    font-size: 19px;
  }
  @media (max-width: $font-break-point-narrow) {
    font-size: 18px;
  }
  @media (max-width: $break-point) {
    font-size: 16px;
  }

  /* iPhone Retina */
  @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (max-width: $break-point), only screen and (min-device-pixel-ratio : 1.5) and (max-width: $break-point) {
    font-size: 16px;
  }
}